/* ============================================================
   page-proveedores-ds.css — PRUEBA (no publicar)

   Landing de Proveedores (congreso de Compras) con el Intiza
   design system. Base visual compartida con page-cobranzas-ds.css;
   lo que cambia:

   · Acento de producto: Proveedores = Verde #02AEB9. El azul claro
     (#067AFB) es de Cobranzas y no aparece en esta página.
   · Es una landing: sin menú de navegación. Arriba queda una barra
     fija con el logo y el CTA (transparente sobre el hero, blanca
     al scrollear). Los sticky CTAs en landings los prevé el sistema.

   Todo está scopeado en .ds-page; las secciones compartidas (casos,
   CTA) y el footer se re-tematizan desde acá con :has().
   ============================================================ */

/* ---------- shell de página ---------- */
body:has(.ds-page) { background: var(--bg); color: var(--fg-1); }

.ds-page {
  /* el sistema retiró el violeta: gradiente profundo corregido */
  --gradient-deep: linear-gradient(135deg, #03198C 0%, #0526D0 100%);
  --acc-prov: var(--intiza-verde);
  /* Los PNG de assets/*-mono/ son BLANCOS: están hechos para el fondo
     oscuro actual y sobre blanco no se ven. Acá se re-tiñen por CSS para
     que la prueba se entienda; si el sitio pasa a claro hay que re-exportar
     esos sets en oscuro, no dejarlos con filtros. */
  --tint-oscuro: brightness(0);
  --tint-azul: brightness(0) saturate(100%) invert(11%) sepia(66%) saturate(3251%) hue-rotate(235deg) brightness(93%) contrast(105%);
}
.ds-page .section { position: relative; padding: 96px 0; background: var(--bg); overflow: hidden; }
.ds-page .wrap { max-width: 1240px; margin: 0 auto; padding: 0 36px; }
/* la barra es fija y de ancho completo (site.css): acá hay que soltarla del
   ancho y del padding que .ds-page .wrap le impone al resto de la página */
.ds-page .wrap.topbar { max-width: none; padding: 0; }

.ds-page .head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.ds-page h2 { font-size: 40px; font-weight: var(--fw-medium); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight); color: var(--fg-1); margin: 0; text-wrap: balance; }
.ds-page h2 em { font-style: normal; color: var(--intiza-azul-oscuro); }
.ds-page .head .sub { font-size: 17px; line-height: var(--lh-relaxed); color: var(--fg-2); margin: 18px auto 0; max-width: 620px; }
.ds-page .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--intiza-azul-oscuro); margin: 0 0 16px; }
.ds-page .eyebrow .sq { width: 7px; height: 7px; border-radius: 2px; background: var(--acc-prov); }
@media (max-width: 760px) {
  .ds-page .section { padding: 64px 0; }
  .ds-page h2 { font-size: 30px; }
  .ds-page .wrap { padding: 0 24px; }
}

/* ============================================================
   HERO
   ============================================================ */
/* sin overflow ni capa propia: el menú fijo vive adentro de este contenedor y,
   con cualquiera de los dos, al scrollear quedaba recortado o tapado por las
   secciones siguientes */
.dsx-hero .stage { position: relative; width: 100%;
  background: linear-gradient(135deg, #0526D0 0%, #0A3FCB 50%, #0391BE 100%); }
.dsx-hero .inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 0 36px; }

.dsx-hero .hero { display: grid; grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr);
  gap: 56px; align-items: center; padding: 148px 0 112px; }
/* la landing no tiene menu sino una barra fija de 76px: su contenido necesita
   ese aire extra arriba para no quedar debajo */
.ds-page.landing .dsx-hero .hero { padding-top: 148px; }
.dsx-hero .hero-copy { max-width: 560px; }
.dsx-hero .eyebrow { display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: #fff; margin: 0;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  padding: 7px 14px; border-radius: var(--radius-pill);
  transition: opacity .7s var(--ease-out) .08s, transform .7s var(--ease-out) .08s; }
.dsx-hero h1.title { font-size: 56px; font-weight: var(--fw-medium); line-height: var(--lh-tight);
  letter-spacing: -.025em; color: #fff; margin: 22px 0 0; text-wrap: balance;
  transition: opacity .7s var(--ease-out) .16s, transform .7s var(--ease-out) .16s; }
/* destacado del título: sin teal, el degradé va dentro de la paleta primaria */
.dsx-hero h1.title em { font-style: normal;
  background: linear-gradient(90deg, var(--intiza-celeste) 0%, #FFFFFF 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dsx-hero p.sub { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: rgba(255,255,255,.88);
  margin: 22px 0 0; max-width: 540px;
  transition: opacity .7s var(--ease-out) .24s, transform .7s var(--ease-out) .24s; }
.dsx-hero .cta-row { margin-top: 36px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  transition: opacity .7s var(--ease-out) .32s, transform .7s var(--ease-out) .32s; }
html.preload .dsx-hero .eyebrow, html.preload .dsx-hero h1.title,
html.preload .dsx-hero p.sub, html.preload .dsx-hero .cta-row { transform: translateY(16px); }

.dsx-hero .cta-primary { display: inline-flex; align-items: center; gap: 9px;
  font-size: 15.5px; font-weight: var(--fw-medium); color: var(--intiza-azul-oscuro);
  background: #fff; border: 0; border-radius: var(--radius-md); padding: 15px 26px;
  text-decoration: none; font-family: inherit;
  box-shadow: 0 10px 28px rgba(3,20,120,.28);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base); }
.dsx-hero .cta-primary:hover { background: var(--intiza-celeste); }
.dsx-hero .cta-primary:active { transform: scale(.98); box-shadow: 0 6px 16px rgba(3,20,120,.24); }
.dsx-hero .cta-primary .arr { display: inline-flex; transition: transform var(--dur-base) var(--ease-out); }
.dsx-hero .cta-primary:hover .arr { transform: translateX(4px); }

.dsx-hero .hero-visual { position: relative; justify-self: center; width: 100%; max-width: 460px;
  transition: opacity .8s var(--ease-out) .34s, transform .8s var(--ease-out) .34s; }
html.preload .dsx-hero .hero-visual { transform: translateY(22px); }

/* la tarjeta de datos va sólida: sobre un degradé, la legibilidad manda */
.dsx-hero .dash { position: relative; z-index: 1; background: var(--surface-card); border-radius: var(--radius-xl);
  padding: 22px 22px 18px; color: var(--fg-1);
  box-shadow: 0 32px 72px rgba(3,20,120,.34), 0 8px 20px rgba(5,38,208,.18), var(--shadow-inset);
  animation: dsfloat 8s var(--ease-in-out) infinite; }
@keyframes dsfloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.dsx-hero .dash-head { display: flex; align-items: center; gap: 11px; }
.dsx-hero .dash-ic { display: flex; }
.dsx-hero .dash-title { font-weight: var(--fw-medium); font-size: 15px; }
.dsx-hero .dash-pill { margin-left: auto; font-size: 11.5px; font-weight: var(--fw-medium);
  color: var(--intiza-azul-oscuro); background: var(--intiza-celeste); padding: 5px 11px; border-radius: var(--radius-pill); }
.dsx-hero .dash-kpi { margin-top: 18px; }
.dsx-hero .kpi-label { display: block; font-size: var(--fs-caption); color: var(--fg-3); }
.dsx-hero .kpi-val { display: block; font-size: 30px; font-weight: var(--fw-medium); letter-spacing: var(--tracking-tight); margin-top: 4px; }
.dsx-hero .dash-bar { display: flex; height: 12px; border-radius: var(--radius-pill); overflow: hidden;
  margin-top: 18px; background: var(--celeste-30); gap: 3px; }
.dsx-hero .bar-fill { height: 100%; border-radius: var(--radius-pill); }
.dsx-hero .bar-fill.v { background: var(--acc-prov); width: 48%; }
.dsx-hero .bar-fill.n { background: var(--intiza-celeste); width: 52%; }
.dsx-hero .dash-legend { display: flex; gap: 18px; margin-top: 11px; font-size: var(--fs-caption); color: var(--fg-2); }
.dsx-hero .dash-legend span { display: inline-flex; align-items: center; gap: 7px; }
.dsx-hero .dash-legend .ld { width: 8px; height: 8px; border-radius: 2px; }
.dsx-hero .ld.v { background: var(--acc-prov); }
.dsx-hero .ld.n { background: var(--intiza-celeste); border: 1px solid var(--border-soft); }
.dsx-hero .dash-list { margin-top: 20px; border-top: 1px solid var(--border-soft); }
.dsx-hero .lrow { display: grid; grid-template-columns: 30px minmax(0,1fr) 78px 74px; align-items: center;
  gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.dsx-hero .lrow:last-child { border-bottom: 0; }
.dsx-hero .av { width: 30px; height: 30px; border-radius: var(--radius-sm); display: flex; align-items: center;
  justify-content: center; font-size: var(--fs-caption); font-weight: var(--fw-medium); color: #fff; }
.dsx-hero .lname { font-size: 13.5px; font-weight: var(--fw-medium); white-space: nowrap; }
.dsx-hero .lamt { font-size: 13px; color: var(--fg-2); font-variant-numeric: tabular-nums; text-align: right; }
.dsx-hero .lchip { font-size: 11px; font-weight: var(--fw-medium); padding: 4px 9px; border-radius: var(--radius-pill);
  white-space: nowrap; justify-self: end; }
.dsx-hero .lchip.ok { background: var(--celeste-60); color: var(--intiza-azul-oscuro); }
.dsx-hero .lchip.late { background: rgba(214,51,108,.10); color: #c0285c; }
.dsx-hero .lchip.prom { background: rgba(224,168,0,.14); color: #9a7400; }

/* chip flotante: acá sí, glass sobre el degradé */
.dsx-hero .chip { position: absolute; z-index: 2; left: -26px; bottom: -56px;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.30);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  border-radius: var(--radius-lg); padding: 13px 16px 13px 13px;
  box-shadow: 0 18px 40px rgba(3,20,120,.28), var(--shadow-inset);
  animation: dsfloat 8s var(--ease-in-out) .8s infinite; }
.dsx-hero .chip-ic { width: 34px; height: 34px; border-radius: var(--radius-sm); background: #fff;
  display: flex; align-items: center; justify-content: center; }
.dsx-hero .chip-tx b { display: block; font-size: 13px; font-weight: var(--fw-medium); color: #fff; white-space: nowrap; }
.dsx-hero .chip-tx span { display: block; font-size: 11.5px; color: rgba(255,255,255,.82); margin-top: 1px; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .dsx-hero .eyebrow, .dsx-hero h1.title, .dsx-hero p.sub, .dsx-hero .cta-row, .dsx-hero .hero-visual { transition: none !important; }
  .dsx-hero .dash, .dsx-hero .chip { animation: none !important; }
  html.preload .dsx-hero .eyebrow, html.preload .dsx-hero h1.title, html.preload .dsx-hero p.sub,
  html.preload .dsx-hero .cta-row, html.preload .dsx-hero .hero-visual { transform: none !important; }
}
@media (max-width: 920px) {
  .dsx-hero .hero { grid-template-columns: 1fr; gap: 40px; }
  .dsx-hero .hero-visual { display: none; }
}
@media (max-width: 760px) {
  .dsx-hero .inner { padding: 0 24px; }
  .dsx-hero h1.title { font-size: 38px; }
  .dsx-hero .hero { padding: 120px 0 72px; }
  .ds-page.landing .dsx-hero .hero { padding-top: 112px; }
}

/* ============================================================
   BENEFICIOS — tres contenedores blancos sobre celeste suave
   ============================================================ */
.dsx-benef .section { background: var(--bg-soft); padding: 96px 0 48px; position: relative; overflow: hidden; }
.dsx-benef .wrap { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 0 36px; }

.dsx-benef .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dsx-benef .bcard { position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: 36px 32px 32px; border-radius: var(--radius-xl);
  background: var(--surface-card); border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }
/* card hover: sube un nivel de sombra, sin cambio de borde (regla del sistema) */
.dsx-benef .bcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
/* filete superior del color de producto, discreto */
.dsx-benef .bcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--acc), transparent); }

.dsx-benef .ic { width: 56px; height: 56px; border-radius: var(--radius-lg); display: flex;
  align-items: center; justify-content: center; margin-bottom: 22px;
  color: var(--acc); background: var(--celeste-60); border: 1px solid var(--border-soft); }
.dsx-benef .ic svg { width: 26px; height: 26px; }

.dsx-benef .bcard h3 { font-size: 22px; font-weight: var(--fw-medium); line-height: var(--lh-snug);
  letter-spacing: -.012em; color: var(--fg-1); margin: 0; text-wrap: balance; }
.dsx-benef .bcard p { font-size: 15px; line-height: var(--lh-relaxed); color: var(--fg-2); margin: 12px 0 0; }

@media (prefers-reduced-motion: reduce) { .dsx-benef .bcard { transition: none; } }
@media (max-width: 960px) { .dsx-benef .cards { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
@media (max-width: 760px) { .dsx-benef .section { padding: 64px 0 32px; } .dsx-benef .wrap { padding: 0 24px; } }

/* ============================================================
   BARRA FIJA DE LANDING — logo + CTA, sin menú
   ============================================================ */
.dsx-lbar .lbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur-slow); }
.dsx-lbar .lbar-in { max-width: 1240px; margin: 0 auto; padding: 0 36px; height: 76px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transition: height var(--dur-slow) var(--ease-out); }
.dsx-lbar .lbar-logo { position: relative; display: block; height: 28px; aspect-ratio: 800 / 234; }
.dsx-lbar .lbar-logo:hover { opacity: 1; }
.dsx-lbar .lbar-logo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  transition: opacity var(--dur-slow) var(--ease-out); }
.dsx-lbar .lbar-logo .on-page { opacity: 0; }

.dsx-lbar .lbar-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 15px;
  font-weight: var(--fw-medium); color: var(--intiza-azul-oscuro); background: #fff;
  border-radius: var(--radius-md); padding: 11px 20px; text-decoration: none;
  box-shadow: 0 8px 22px rgba(3,20,120,.24);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-fast) var(--ease-out); }
.dsx-lbar .lbar-cta:hover { opacity: 1; background: var(--intiza-celeste); }
.dsx-lbar .lbar-cta:active { transform: scale(.98); }
.dsx-lbar .lbar-cta .arr { display: inline-flex; transition: transform var(--dur-base) var(--ease-out); }
.dsx-lbar .lbar-cta:hover .arr { transform: translateX(3px); }

/* al scrollear: glass blanco, logo azul, CTA primario azul */
.dsx-lbar .lbar.solid { background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: var(--border-soft); box-shadow: var(--shadow-2); }
.dsx-lbar .lbar.solid .lbar-in { height: 64px; }
.dsx-lbar .lbar.solid .on-hero { opacity: 0; }
.dsx-lbar .lbar.solid .on-page { opacity: 1; }
.dsx-lbar .lbar.solid .lbar-cta { background: var(--intiza-azul-oscuro); color: #fff;
  box-shadow: 0 8px 20px rgba(5,38,208,.26); }
.dsx-lbar .lbar.solid .lbar-cta:hover { background: #0420B8; }

/* los anclajes no quedan tapados por la barra */
html:has(.dsx-lbar) { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) {
  html:has(.dsx-lbar) { scroll-behavior: auto; }
  .dsx-lbar .lbar, .dsx-lbar .lbar-in, .dsx-lbar .lbar-logo img, .dsx-lbar .lbar-cta { transition: none; }
}
@media (max-width: 760px) {
  .dsx-lbar .lbar-in { padding: 0 16px; height: 64px; }
  .dsx-lbar .lbar.solid .lbar-in { height: 58px; }
  .dsx-lbar .lbar-logo { height: 22px; }
  .dsx-lbar .lbar-cta { font-size: 14px; padding: 9px 16px; }
}

/* ============================================================
   MÓDULOS — tres contenedores blancos + portal en franja azul
   ============================================================ */
.dsx-mod .section { background: var(--bg-soft); padding: 48px 0; position: relative; overflow: hidden; }
.dsx-mod .wrap { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 36px; }

/* el título entra en una sola línea en desktop */
.dsx-mod .head { max-width: none; }
/* misma pastilla que la del hero, pero en claro: esta va sobre el fondo gris */
.dsx-mod .eyebrow { gap: 0; color: var(--intiza-azul-oscuro); margin: 0 0 18px;
  background: var(--surface-card); border: 1px solid var(--border-soft);
  padding: 7px 16px; border-radius: var(--radius-pill); box-shadow: var(--shadow-1); }
.dsx-mod h2 { white-space: nowrap; }
@media (max-width: 1200px) { .dsx-mod h2 { white-space: normal; text-wrap: balance; } }

.dsx-mod .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dsx-mod .mod { position: relative; border-radius: var(--radius-xl); padding: 30px 28px 28px;
  background: var(--surface-card); border: 1px solid var(--border-soft); box-shadow: var(--shadow-2);
  transition: transform .7s var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }
.dsx-mod .mod:hover { box-shadow: var(--shadow-3); }
.dsx-mod .section:not(.in) .mod { transform: translateY(24px); }
.dsx-mod .section:not(.in) .mod:nth-child(2) { transition-delay: .08s; }
.dsx-mod .section:not(.in) .mod:nth-child(3) { transition-delay: .16s; }

.dsx-mod .mhead { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; margin-bottom: 18px;
  border-bottom: 1px solid var(--border-soft); }
.dsx-mod .ictile { flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--acc-prov); background: var(--celeste-60); border: 1px solid var(--border-soft); }
.dsx-mod .ictile svg { width: 24px; height: 24px; }
.dsx-mod .mod h3 { font-size: 20px; font-weight: var(--fw-medium); line-height: var(--lh-snug);
  letter-spacing: -.01em; color: var(--fg-1); margin: 0; }

.dsx-mod .items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.dsx-mod .items > li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px;
  line-height: var(--lh-base); color: var(--fg-1); }
.dsx-mod .tick { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2,174,185,.12); color: #028690; }
.dsx-mod .tick svg { width: 12px; height: 12px; }
.dsx-mod .lbody { min-width: 0; }
.dsx-mod .lname { display: block; }
.dsx-mod .subs { list-style: none; margin: 8px 0 0; padding: 0 0 0 12px; border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px; }
.dsx-mod .subs li { font-size: 13.5px; line-height: var(--lh-base); color: var(--fg-2); }

/* portal: la pieza azul de la sección, con grilla de celdas */
.dsx-mod .portal { position: relative; overflow: hidden; margin-top: 28px; display: flex; align-items: flex-start; gap: 24px;
  border-radius: var(--radius-lg); padding: 36px 40px; background: var(--celeste-50); color: var(--fg-1);
  border: 1px solid var(--border-soft); border-left: 5px solid var(--acc-prov);
  box-shadow: var(--shadow-1);
  transition: transform .7s var(--ease-out) .24s; }
.dsx-mod .section:not(.in) .portal { transform: translateY(24px); }
.dsx-mod .pic, .dsx-mod .pbody { position: relative; z-index: 1; }
.dsx-mod .pic { flex: 0 0 auto; width: 60px; height: 60px; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center; color: var(--acc-prov);
  background: var(--celeste-60); border: 1px solid var(--border-soft); }
.dsx-mod .pic svg { width: 28px; height: 28px; }
.dsx-mod .ptop { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.dsx-mod .portal h3 { font-size: 24px; font-weight: var(--fw-medium); line-height: var(--lh-snug);
  letter-spacing: -.01em; color: var(--fg-1); margin: 0 6px 0 0; }
.dsx-mod .badge-auto { font-size: 11.5px; font-weight: var(--fw-medium); color: #fff;
  background: var(--acc-prov); padding: 6px 13px; border-radius: var(--radius-pill); white-space: nowrap; }
.dsx-mod .portal p { font-size: 16px; line-height: var(--lh-relaxed); color: var(--fg-2); margin: 12px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .dsx-mod .mod, .dsx-mod .portal { transition: none !important; }
  .dsx-mod .section:not(.in) .mod, .dsx-mod .section:not(.in) .portal { transform: none !important; }
}
@media (max-width: 960px) { .dsx-mod .grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .dsx-mod .portal { max-width: 520px; margin-left: auto; margin-right: auto; } }
@media (max-width: 760px) {
  .dsx-mod .section { padding: 32px 0; } .dsx-mod .wrap { padding: 0 24px; }
  .dsx-mod .portal { flex-direction: column; padding: 32px 24px; gap: 18px; }
}


/* ============================================================
   ERP — contenedor blanco sobre blanco, separado por hairline
   ============================================================ */
.dsx-erp .section { background: var(--bg-soft); padding: 48px 0; position: relative; overflow: hidden; }
.dsx-erp .wrap { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 0 36px; }
/* el contenedor es la pieza azul de esta parte de la página */
.dsx-erp .shell { position: relative; overflow: hidden; border-radius: 28px;
  background: var(--gradient-deep); border: 0; box-shadow: var(--shadow-4); padding: 60px 56px; color: #fff; }
.dsx-erp .shell::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url(/assets/ds/cell-grid.svg); background-size: 128px; opacity: .38;
  filter: brightness(0) invert(1);
  -webkit-mask-image: linear-gradient(115deg, transparent 45%, #000 100%);
  mask-image: linear-gradient(115deg, transparent 45%, #000 100%); }
.dsx-erp .head, .dsx-erp .erpmain, .dsx-erp .erpsep, .dsx-erp .erpmarquee { position: relative; z-index: 1; }
.dsx-erp .head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.dsx-erp h2 { font-size: 36px; font-weight: var(--fw-medium); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight); color: #fff; margin: 0; }
.dsx-erp h2 em { font-style: normal; color: var(--intiza-celeste); }
.dsx-erp .head .sub { font-size: 16.5px; line-height: var(--lh-relaxed); color: rgba(255,255,255,.80); margin: 18px auto 0; max-width: 560px; }

.dsx-erp .erpmain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0 0 34px; }
.dsx-erp .erpcard { position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 112px; padding: 22px 26px; border-radius: var(--radius-lg);
  background: var(--surface-card); border: 1px solid var(--border-soft); box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.dsx-erp .erpcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.dsx-erp .erpcard img { position: relative; z-index: 1; width: 100%; max-width: 208px; height: auto; display: block;
  filter: var(--tint-azul); opacity: .78; }
.dsx-erp .erpcard img.sap { transform: scale(.85); transform-origin: center; }

.dsx-erp .erpsep { display: flex; align-items: center; gap: 18px; margin: 0 0 26px; }
.dsx-erp .erpsep::before, .dsx-erp .erpsep::after { content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); }
.dsx-erp .erpsep span { font-size: 11px; font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: rgba(255,255,255,.62); white-space: nowrap; }

.dsx-erp .erpmarquee { position: relative; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.dsx-erp .erptrack { display: flex; flex-wrap: nowrap; align-items: center; width: max-content;
  animation: dserp-scroll var(--erp-dur, 34s) linear infinite; }
.dsx-erp .erpmarquee:hover .erptrack { animation-play-state: paused; }
.dsx-erp .erpgroup { display: flex; flex-wrap: nowrap; align-items: center; gap: 52px; padding-right: 52px; }
@keyframes dserp-scroll { from { transform: translateX(0); } to { transform: translateX(var(--erp-shift, -50%)); } }
@media (prefers-reduced-motion: reduce) { .dsx-erp .erptrack { animation: none; } .dsx-erp .erpmarquee { overflow-x: auto; } }
/* sobre el azul los PNG mono se usan tal como están: ya son blancos */
.dsx-erp .erplogo { height: 28px; flex: 0 0 auto; opacity: .70; transition: opacity var(--dur-base); }
.dsx-erp .erplogo:hover { opacity: 1; }
.dsx-erp .erplogo img { height: 100%; width: auto; display: block; }

@media (max-width: 860px) { .dsx-erp .erpcard { min-height: 96px; padding: 18px; } .dsx-erp .erpcard img { max-width: 168px; } }
@media (max-width: 760px) { .dsx-erp .section { padding: 32px 0; } .dsx-erp .wrap { padding: 0 24px; } .dsx-erp h2 { font-size: 28px; } }
@media (max-width: 640px) {
  .dsx-erp .shell { padding: 40px 22px; }
  .dsx-erp .erpmain { grid-template-columns: 1fr; gap: 12px; margin-bottom: 28px; }
  .dsx-erp .erpcard { min-height: 84px; }
}

/* ============================================================
   SOCIO TECNOLÓGICO — franja de acento en azul de marca
   ============================================================ */
.dsx-socio .section { position: relative; overflow: hidden; padding: 48px 0;
  background: var(--bg-soft); color: var(--fg-1); }
.dsx-socio .wrap { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 36px; }
.dsx-socio .head { text-align: center; margin: 0 auto 56px; }
/* el título entra en una sola línea, como en la página actual */
.dsx-socio h2 { font-size: 40px; font-weight: var(--fw-medium); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight); color: var(--fg-1); margin: 0; white-space: nowrap; }
.dsx-socio h2 em { font-style: normal; color: var(--intiza-azul-oscuro); }
.dsx-socio .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 52px; }
/* sin contenedor: el número calado es el elemento gráfico de la sección */
.dsx-socio .card { position: relative; transition: transform .7s var(--ease-out); }
.dsx-socio .section:not(.in) .card { transform: translateY(26px); }
.dsx-socio .section:not(.in) .card:nth-child(2) { transition-delay: .1s; }
.dsx-socio .section:not(.in) .card:nth-child(3) { transition-delay: .2s; }
.dsx-socio .chead { display: block; margin-bottom: 14px; }
/* números calados; el relleno sólido es el fallback sin text-stroke */
.dsx-socio .num { display: block; font-size: 62px; font-weight: var(--fw-bold); line-height: 1;
  letter-spacing: -.03em; color: color-mix(in srgb, var(--accent) 45%, transparent); }
@supports (-webkit-text-stroke: 1px red) {
  .dsx-socio .num { color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 75%, transparent); }
}
.dsx-socio .card h3 { font-size: 21px; font-weight: var(--fw-medium); line-height: var(--lh-snug);
  color: var(--fg-1); margin: 0; letter-spacing: -.01em; }
.dsx-socio .card p { font-size: 14.5px; line-height: var(--lh-relaxed); color: var(--fg-2); margin: 14px 0 0; }
@media (prefers-reduced-motion: reduce) { .dsx-socio .card { transition: none !important; } .dsx-socio .section:not(.in) .card { transform: none !important; } }
@media (max-width: 880px) { .dsx-socio .cards { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
@media (max-width: 980px) { .dsx-socio h2 { white-space: normal; text-wrap: balance; } }
@media (max-width: 760px) { .dsx-socio .section { padding: 32px 0; } .dsx-socio .wrap { padding: 0 24px; } .dsx-socio h2 { font-size: 30px; } }

/* ============================================================
   CASOS DE ÉXITO — sección compartida (site.css, .sx-casos)
   re-tematizada en claro sin tocar el archivo original.
   ============================================================ */
.ds-page .sx-casos .section { background: var(--bg-soft); padding: 48px 0; }
.ds-page .sx-casos .shell { background: var(--surface-card); border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-2); }
.ds-page .sx-casos .shell::before { display: none; }
.ds-page .sx-casos h2 { color: var(--fg-1); font-weight: var(--fw-medium); }
.ds-page .sx-casos h2 em { color: var(--intiza-azul-oscuro); }
.ds-page .sx-casos .tlogo img { filter: var(--tint-oscuro); opacity: .65; }

.ds-page .sx-casos .nav { background: var(--surface-card); border: 1px solid var(--border);
  color: var(--intiza-azul-oscuro); box-shadow: var(--shadow-3); }
.ds-page .sx-casos .nav:hover { background: var(--celeste-40); border-color: var(--border-strong); }

.ds-page .sx-casos .case { background: var(--surface-card); border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-2); }
.ds-page .sx-casos .case:hover { box-shadow: var(--shadow-3); border-color: var(--border-soft); }
.ds-page .sx-casos .cover::after { background: linear-gradient(180deg, rgba(5,38,208,0) 55%, rgba(5,38,208,.18)); }
.ds-page .sx-casos .cbody h3 { color: var(--fg-1); font-weight: var(--fw-medium); }
.ds-page .sx-casos .cbody p { color: var(--fg-2); }
.ds-page .sx-casos .more { color: var(--intiza-azul-oscuro); font-weight: var(--fw-medium); }
.ds-page .sx-casos .more:hover { color: var(--acc-prov); }
.ds-page .sx-casos .ctag.prov { background: var(--intiza-azul-oscuro); color: #fff; font-weight: var(--fw-medium); }

.ds-page .sx-casos .btn { background: var(--intiza-azul-oscuro); font-weight: var(--fw-medium);
  box-shadow: 0 8px 22px rgba(5,38,208,.28); }
.ds-page .sx-casos .btn:hover { background: #0420B8; transform: none; box-shadow: 0 12px 28px rgba(5,38,208,.34); }
.ds-page .sx-casos .btn:active { transform: scale(.98); }
@media (max-width: 760px) { .ds-page .sx-casos .section { padding: 32px 0; } }

/* ============================================================
   SEGURIDAD
   ============================================================ */
.dsx-seg .section { background: var(--bg-soft); padding: 48px 0 96px; position: relative; overflow: hidden; }
.dsx-seg .wrap { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; padding: 0 36px; }
.dsx-seg .head { text-align: center; margin: 0 auto 52px; }
.dsx-seg h2 { font-size: 36px; font-weight: var(--fw-medium); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight); color: var(--fg-1); margin: 0; text-wrap: balance; }
.dsx-seg h2 em { font-style: normal; color: var(--intiza-azul-oscuro); }
.dsx-seg .shield { display: inline-flex; vertical-align: -.1em; margin-right: 14px; color: var(--acc-prov); }
.dsx-seg .shield svg { width: 32px; height: 32px; }

.dsx-seg .certs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.dsx-seg .cert { position: relative; border-radius: var(--radius-xl); padding: 30px 26px 24px; overflow: hidden;
  background: var(--surface-card); border: 1px solid var(--border-soft); box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: transform .7s var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }
.dsx-seg .cert:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.dsx-seg .section:not(.in) .cert { transform: translateY(24px); }
.dsx-seg .section:not(.in) .cert:nth-child(2) { transition-delay: .09s; }
.dsx-seg .section:not(.in) .cert:nth-child(3) { transition-delay: .18s; }
.dsx-seg .badge { width: 100%; height: 120px; display: flex; align-items: center; justify-content: center; }
.dsx-seg .badge img { filter: var(--tint-oscuro); opacity: .66; }
.dsx-seg .clabel { margin-top: 18px; font-size: 14.5px; font-weight: var(--fw-medium); color: var(--fg-1); }
.dsx-seg .ctag { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11px;
  font-weight: var(--fw-medium); letter-spacing: .06em; text-transform: uppercase;
  color: var(--intiza-azul-oscuro); background: var(--celeste-60); border: 1px solid var(--border-soft);
  padding: 5px 11px; border-radius: var(--radius-pill); }
.dsx-seg .ctag svg { width: 12px; height: 12px; }
@media (prefers-reduced-motion: reduce) { .dsx-seg .cert { transition: none !important; } .dsx-seg .section:not(.in) .cert { transform: none !important; } }
@media (max-width: 760px) { .dsx-seg .certs { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
  .dsx-seg .section { padding: 32px 0 64px; } .dsx-seg .wrap { padding: 0 24px; } .dsx-seg h2 { font-size: 28px; } }

/* ============================================================
   CTA "Conversemos" — franja azul de cierre, antes del footer
   ============================================================ */
.ds-page .cta-contacto { position: relative; overflow: hidden; background: var(--gradient-deep); color: #fff; }
.ds-page .cta-contacto::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url(/assets/ds/cell-grid.svg); background-size: 132px; opacity: .34;
  filter: brightness(0) invert(1);
  -webkit-mask-image: linear-gradient(115deg, transparent 48%, #000 100%);
  mask-image: linear-gradient(115deg, transparent 48%, #000 100%); }
.ds-page .cta-contacto .wrap { position: relative; z-index: 1; }
.ds-page .cta-kicker { color: var(--intiza-celeste); font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); }
.ds-page .cta-shell h2 { color: #fff; font-weight: var(--fw-medium); }
.ds-page .cta-sub { color: rgba(255,255,255,.82); }
.ds-page .cta-bullets li { color: rgba(255,255,255,.88); }
.ds-page .cta-bullets svg { color: #8FB4FF; }

/* El form de HubSpot se renderiza dentro de un <iframe>, así que su interior
   (labels, inputs, el botón naranja) NO se puede estilar desde el sitio: todas
   las reglas .cta-form .hs-form … de site.css son letra muerta. Sobre un fondo
   azul eso deja el formulario ilegible, así que va en un contenedor blanco.
   La alternativa real es cambiarle el tema al formulario en HubSpot. */
.ds-page .cta-form { background: var(--surface-card); border-radius: var(--radius-xl);
  padding: 30px 32px; box-shadow: var(--shadow-4); }
.ds-page .cta-form .cta-form-ph { color: var(--fg-3); }
@media (max-width: 920px) { .ds-page .cta-form { padding: 24px 20px; } }

/* ============================================================
   FOOTER — se mantiene oscuro (el sistema lo prevé así), pero
   en el azul de marca y sin los acentos teal que no son del kit.
   ============================================================ */
body:has(.ds-page) .sitefooter { background: var(--fg-1); border-top: 0; margin-top: 0; }
body:has(.ds-page) .sitefooter::before { background: linear-gradient(90deg, transparent, var(--acc-prov), transparent); opacity: .55; }
body:has(.ds-page) .ft-col h4 { color: var(--intiza-celeste); font-weight: var(--fw-medium); }
body:has(.ds-page) .ft-cta { background: #fff; color: var(--intiza-azul-oscuro); font-weight: var(--fw-medium);
  box-shadow: 0 10px 26px rgba(5,38,208,.28); }
body:has(.ds-page) .ft-cta:hover { background: var(--intiza-celeste); transform: none; box-shadow: 0 14px 32px rgba(5,38,208,.34); }
body:has(.ds-page) .ft-socials a:hover { background: rgba(2,174,185,.22); }