/* NexIA — capa decorativa: red dinámica dorada (solo estética, aditiva) */
.gold-net{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0;
  /* La red se ve fuerte a la derecha y se desvanece donde está el texto (izquierda) */
  -webkit-mask-image:linear-gradient(90deg,transparent 0 34%,rgba(0,0,0,.28) 50%,#000 70%);
          mask-image:linear-gradient(90deg,transparent 0 34%,rgba(0,0,0,.28) 50%,#000 70%);
}
/* el contenido del hero/cabecera siempre por encima de la red */
#hero .hero-content,.page-hero .page-hero-content{position:relative;z-index:2}
.page-hero,#hero{position:relative}
/* hilo dorado fino que remata la parte baja de cada cabecera */
.gold-hairline{position:absolute;left:0;right:0;bottom:0;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(224,178,60,.55),transparent)}

/* En móvil el texto ocupa todo el ancho: la red se ve solo en la franja inferior */
@media(max-width:760px){
  .gold-net{
    -webkit-mask-image:linear-gradient(180deg,transparent 0 56%,#000 88%);
            mask-image:linear-gradient(180deg,transparent 0 56%,#000 88%);
  }
}

/* página "gracias": red a pantalla completa, despejada en el centro (texto) */
body.thanks-page>:not(.gold-net){position:relative;z-index:1}
body.thanks-page .gold-net{position:fixed;
  -webkit-mask-image:radial-gradient(120% 95% at 50% 50%,transparent 0 30%,rgba(0,0,0,.4) 48%,#000 70%);
          mask-image:radial-gradient(120% 95% at 50% 50%,transparent 0 30%,rgba(0,0,0,.4) 48%,#000 70%);
}

/* ============================================================
   RESPONSIVE — sin scroll lateral ni huecos en ningún dispositivo
   ============================================================ */
html,body{max-width:100%;overflow-x:clip}            /* clip: no rompe position:sticky */
img,svg,video,canvas{max-width:100%}

/* DEMOS: en móvil/tablet, una sola columna real y paneles que no desbordan */
@media(max-width:900px){
  .demo-inner,.demo-inner.flip{grid-template-columns:1fr!important;direction:ltr!important;gap:32px!important}
  .demo-inner>*{min-width:0!important}            /* clave: permite que el grid encoja */
  .visual-panel{min-width:0!important;max-width:100%;overflow:hidden}
  .term-line{flex-wrap:wrap}
  .term-text,.chat-bubble,.crm-name{word-break:break-word;min-width:0}
  .demo-roi{min-width:0}
}
/* ROI de los demos: en móvil estrecho apilamos las cajas para que las
   etiquetas se lean a 16px (suelo legible) sin desbordar. */
@media(max-width:480px){
  .demo-roi{grid-template-columns:1fr!important;gap:12px}
  .roi-val{font-size:22px!important}
  .roi-lbl{line-height:1.35;letter-spacing:.02em}
}