/* Transformación Digital — depth and rhythm. Backgrounds, surfaces and ambient light only (no layout, content or behaviour).
   Base stays #00010E. Raised surfaces #030A1A / #071426 are used where the content benefits from a "stage";
   photo and video sections stay on the base so the media keeps its contrast. Surfaces fade into the base at their edges
   (no hard seams). Ambient radials stay between 4% and 6% opacity.
     Hero ............................ base (photo)
     Capacidades ..................... raised, peaks at #071426 (densest, most interactive section)
     Ecosistema de innovación ......... base (photo is the protagonist)
     Integración + Impacto ............ one continuous #030A1A band (how it connects → what changes)
     Aplicaciones en acción ........... base, faint ambient light behind the player
     Diferenciadores .................. base (background video, shared component)
     Ecosistema Globalvoip ............ short #030A1A band, a pause between the two video sections
     Hablemos ......................... base (background video) */
.td-page{--td-base:#00010e;--td-surface:#030a1a;--td-surface-2:#071426}

/* Capacidades — raised stage (overrides background:#00010e from digital-capabilities.css). Its border-top is removed so the
   Hero fades into it without a separator line (the Hero's own edge line was removed in td-page.css). */
.td-page .td-capabilities{border-top:0;background:
  radial-gradient(ellipse 50% 38% at 86% 10%,rgba(0,149,229,.06),transparent 70%),
  radial-gradient(ellipse 42% 34% at 6% 88%,rgba(205,2,152,.04),transparent 70%),
  linear-gradient(180deg,var(--td-base) 0,var(--td-surface) 160px,var(--td-surface-2) 52%,var(--td-surface) calc(100% - 160px),var(--td-base) 100%)}

/* Flow RCS ports (digital-capabilities.css paints them background:#00010e, which turned into black blocks on the raised
   surface). Opaque surface tone — it still masks the vertical line of the mobile layout — with a thin border, soft radius
   and a marker dot next to the label: blue for inputs, cyan for results. */
.td-page .rcs-port{position:relative;padding:13px 16px 13px 34px;border:1px solid rgba(94,200,255,.16);border-radius:10px;background:linear-gradient(90deg,#0b1d38,#081629);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.td-page .rcs-port::before{content:'';position:absolute;left:14px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#050816;box-shadow:0 0 0 1.4px #0095e5}
.td-page .rcs-results .rcs-port{padding:13px 34px 13px 16px;border-color:rgba(0,176,209,.2);background:linear-gradient(270deg,#08203a,#081629)}
.td-page .rcs-results .rcs-port::before{left:auto;right:14px;box-shadow:0 0 0 1.4px #00b0d1}
@media(max-width:600px){
 .td-page .rcs-port,.td-page .rcs-results .rcs-port{padding:10px 8px;text-align:center}
 .td-page .rcs-port::before{display:none}
}

/* Integración + Impacto — one continuous band: fades in at the top of Integración, out at the bottom of Impacto. */
.td-page .td-arch{background:
  radial-gradient(ellipse 55% 45% at 50% 58%,rgba(0,149,229,.05),transparent 72%),
  linear-gradient(180deg,var(--td-base) 0,var(--td-surface) 180px,var(--td-surface) 100%)}
.td-page .td-impact{background:
  radial-gradient(ellipse 40% 40% at 12% 72%,rgba(205,2,152,.04),transparent 70%),
  radial-gradient(ellipse 45% 35% at 88% 30%,rgba(0,149,229,.045),transparent 70%),
  linear-gradient(180deg,var(--td-surface) 0,var(--td-surface) calc(100% - 180px),var(--td-base) 100%)}

/* Aplicaciones — stays on the base; only ambient light behind the player. */
.td-page .td-apps{background:
  radial-gradient(ellipse 42% 38% at 34% 52%,rgba(0,149,229,.05),transparent 72%),
  radial-gradient(ellipse 30% 30% at 92% 18%,rgba(205,2,152,.035),transparent 70%)}

/* Ecosistema Globalvoip — the section is container-width, so the band is a full-bleed layer behind it. */
.td-page .security-related{position:relative;isolation:isolate}
.td-page .security-related::before{content:'';position:absolute;top:0;bottom:0;left:50%;z-index:-1;width:100vw;transform:translateX(-50%);pointer-events:none;background:
  radial-gradient(ellipse 45% 60% at 50% 55%,rgba(0,149,229,.045),transparent 72%),
  linear-gradient(180deg,var(--td-base) 0,var(--td-surface) 34%,var(--td-surface) 66%,var(--td-base) 100%)}