/* ============================================================
   page-cobranzas.css — landing de Cobranzas, con el Intiza design system.

   Reglas del sistema que se siguen acá:

   · Fondo por defecto blanco + superficies celeste; el azul oscuro
     queda para el hero, las franjas de acento y el footer.
   · Sombras siempre tintadas en azul rgba(5,38,208,…), nunca negras.
   · Acento de producto: Cobranzas = Azul claro #067AFB. El verde
     (#02AEB9) es de Proveedores y el violeta #4C49BD fue retirado
     del sistema; ninguno de los dos aparece en esta página.
   · Tipografía Archivo, títulos en peso 500 (medium) y sentence case.
   · Contenedores 12–24px de radio, hairline var(--border-soft).
   · Efecto glass solo donde aporta profundidad; sobre datos densos
     gana la claridad (regla del manual: clarity always wins).
   · Ornamento de marca: grilla de celdas (assets/ds/cell-grid.svg).

   Todo está scopeado en .ds-page para no afectar a ninguna otra
   página; las secciones compartidas (casos, CTA) y el footer se
   re-tematizan desde acá con :has(), sin tocar site.css.
   ============================================================ */

/* ---------- 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-cob: var(--intiza-azul-claro);
  /* 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-cob); }
@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%, #1735C5 52%, #067AFB 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 104px; }
.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-cob); 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-cob); }
.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; }
}

/* ============================================================
   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; } }

/* ============================================================
   FUNCIONES — carrusel en claro
   ============================================================ */
.dsx-func .section { background: var(--bg-soft); padding: 48px 0; position: relative; overflow: hidden; }
.dsx-func .wrap { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding: 0 36px; }
/* 32px debajo del titulo: el mismo valor que usa /cobranzas/ */
.dsx-func .head { text-align: center; margin: 0 auto 32px; }
.dsx-func 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; }
.dsx-func h2 em { font-style: normal; color: var(--intiza-azul-oscuro); }

.dsx-func .carousel { position: relative; }
.dsx-func .arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface-card); color: var(--intiza-azul-oscuro); cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-3);
  transition: background var(--dur-base), border-color var(--dur-base), opacity var(--dur-base), transform var(--dur-fast); }
.dsx-func .arrow.prev { left: -26px; }
.dsx-func .arrow.next { right: -26px; }
.dsx-func .arrow:hover { background: var(--celeste-40); }
.dsx-func .arrow:active { transform: translateY(-50%) scale(.98); }
.dsx-func .arrow:disabled { opacity: 0; pointer-events: none; }
.dsx-func .arrow svg { width: 21px; height: 21px; }

/* El aire alrededor de la tarjeta va en el slide y no en la ventana: la ventana recorta,
   y si el aire estuviera ahi asomaria la tarjeta siguiente por el costado. */
.dsx-func .vp { overflow: hidden; padding: 10px 0 30px; }
.dsx-func .track { display: flex; transition: transform .5s var(--ease-out); will-change: transform; }
.dsx-func .slide { flex: 0 0 100%; min-width: 0; padding: 4px 28px; display: flex; }
.dsx-func .card { position: relative; display: grid; grid-template-columns: 1fr 460px; gap: 30px;
  align-items: stretch; width: 100%; border-radius: var(--radius-xl); border: 1px solid var(--border);
  padding: 44px 48px; min-height: 332px; overflow: hidden; background: var(--surface-card);
  box-shadow: 0 20px 34px -16px rgba(5,38,208,.30), 0 3px 10px -4px rgba(5,38,208,.10); }
/* franja de acento de Cobranzas en el borde superior */
.dsx-func .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 3;
  background: linear-gradient(90deg, var(--intiza-azul-oscuro), var(--acc-cob)); }
.dsx-func .copy .ic { width: 52px; height: 52px; border-radius: var(--radius-lg); display: flex;
  align-items: center; justify-content: center; margin-bottom: 20px;
  background: var(--celeste-60); border: 1px solid var(--border-soft); color: var(--acc-cob); }
.dsx-func .copy .ic svg { width: 26px; height: 26px; }
.dsx-func .copy h3 { font-size: 25px; font-weight: var(--fw-medium); line-height: var(--lh-snug);
  color: var(--fg-1); margin: 0; letter-spacing: -.01em; }
.dsx-func .copy p { font-size: 15.5px; line-height: var(--lh-relaxed); color: var(--fg-2); margin: 16px 0 0; max-width: 46ch; }
/* el mock va embebido en una superficie celeste, no sangrado contra el borde */
/* los margenes negativos llevan el panel hasta los bordes de la tarjeta: tienen que
   coincidir con el padding de .card (44px 48px) */
.dsx-func .visual { min-width: 0; display: flex; justify-content: center; align-items: center; align-self: stretch;
  background: var(--celeste-50); margin: -44px -48px -44px 0; padding: 40px 44px;
  border-left: 1px solid var(--border-soft); }
.dsx-func .mock { width: 100%; height: 100%; min-height: 300px; display: flex; flex-direction: column;
  background: var(--surface-card); color: var(--fg-1); overflow: hidden;
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.dsx-func .mock-h { padding: 14px 16px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 10px;
  background: var(--celeste-20); }
.dsx-func .mock-h .mt { font-weight: var(--fw-medium); color: var(--fg-1); font-size: 12.5px; }
.dsx-func .mock-h .tabnum { margin-left: auto; font-size: 11px; color: var(--fg-3); }
.dsx-func .mock-b { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 16px; }

.dsx-func table.inv { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.dsx-func table.inv th { text-align: left; color: var(--fg-3); font-weight: var(--fw-medium); padding: 6px 8px;
  border-bottom: 1px solid var(--border-soft); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.dsx-func table.inv td { padding: 8px; border-bottom: 1px solid var(--celeste-30); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.dsx-func table.inv tr:last-child td { border-bottom: 0; font-weight: var(--fw-medium); color: var(--fg-1); }
.dsx-func .due { color: #c0285c; font-weight: var(--fw-medium); }
.dsx-func .mailtop { font-size: 12.5px; color: var(--fg-2); line-height: var(--lh-base); }
.dsx-func .mailtop b { color: var(--fg-1); font-weight: var(--fw-medium); }

.dsx-func .chat { display: flex; flex-direction: column; gap: 9px; }
.dsx-func .bub { max-width: 84%; padding: 9px 12px; border-radius: var(--radius-md); font-size: 12px; line-height: 1.42; }
.dsx-func .bub.in { align-self: flex-start; background: var(--celeste-40); color: var(--fg-1); border-bottom-left-radius: 3px; }
/* el agente responde en azul de marca: el verde es de Proveedores */
.dsx-func .bub.out { align-self: flex-end; background: var(--intiza-azul-oscuro); color: #fff; border-bottom-right-radius: 3px; }
.dsx-func .bub .who { display: block; font-size: 9.5px; font-weight: var(--fw-medium); letter-spacing: .04em;
  text-transform: uppercase; opacity: .75; margin-bottom: 3px; }

.dsx-func .rows { display: flex; flex-direction: column; gap: 9px; }
.dsx-func .row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--celeste-30); }
.dsx-func .row .rname { display: block; font-weight: var(--fw-medium); color: var(--fg-1); font-size: 12.5px; }
.dsx-func .row .rmeta { display: block; font-size: 11px; color: var(--fg-3); margin-top: 2px; }
.dsx-func .row .rt { min-width: 0; }
.dsx-func .pill { margin-left: auto; flex: 0 0 auto; font-size: 10.5px; font-weight: var(--fw-medium);
  padding: 4px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.dsx-func .pill.red { background: rgba(214,51,108,.12); color: #c0285c; }
.dsx-func .pill.amber { background: rgba(224,168,0,.16); color: #9a7400; }
.dsx-func .pill.blue { background: var(--celeste-60); color: var(--intiza-azul-oscuro); }
.dsx-func .pill.green { background: rgba(6,122,251,.12); color: #0560d8; }
.dsx-func .sev { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.dsx-func .sev.red { background: var(--danger); }
.dsx-func .sev.amber { background: var(--warning); }
.dsx-func .sev.blue { background: var(--acc-cob); }
.dsx-func .score { flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--radius-md); display: flex;
  align-items: center; justify-content: center; font-weight: var(--fw-medium); font-size: 14px; color: #fff; }
.dsx-func .av { flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--radius-md); display: flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: var(--fw-medium); color: #fff; }

.dsx-func .prof-top { display: flex; align-items: center; gap: 12px; }
.dsx-func .prof-kpis { display: flex; gap: 10px; margin-top: 14px; }
.dsx-func .kpi { flex: 1; background: var(--celeste-30); border-radius: var(--radius-md); padding: 11px 12px; }
.dsx-func .kpi .kl { font-size: 10px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .04em; }
.dsx-func .kpi .kv { font-size: 16px; font-weight: var(--fw-medium); color: var(--fg-1); margin-top: 3px; font-variant-numeric: tabular-nums; }
.dsx-func .seg { display: flex; gap: 6px; margin-top: 14px; }
.dsx-func .seg span { font-size: 11px; padding: 5px 11px; border-radius: var(--radius-pill); background: var(--celeste-30); color: var(--fg-2); }
.dsx-func .seg span.on { background: var(--intiza-azul-oscuro); color: #fff; }

.dsx-func .portal-bal { text-align: center; padding: 6px 0 14px; }
.dsx-func .portal-bal .pl { font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .06em; }
.dsx-func .portal-bal .pv { font-size: 26px; font-weight: var(--fw-medium); color: var(--fg-1); margin-top: 4px; }
.dsx-func .paybtns { display: flex; gap: 10px; }
.dsx-func .paybtn { flex: 1; text-align: center; padding: 11px; border-radius: var(--radius-md); font-size: 12.5px; font-weight: var(--fw-medium); }
.dsx-func .paybtn.primary { background: var(--intiza-azul-oscuro); color: #fff; }
.dsx-func .paybtn.ghost { background: var(--celeste-40); color: var(--intiza-azul-oscuro); }

.dsx-func .dots { display: flex; justify-content: center; gap: 9px; margin-top: 10px; }
.dsx-func .dot { width: 8px; height: 8px; border-radius: var(--radius-pill); border: 0; padding: 0; cursor: pointer;
  background: var(--intiza-celeste); transition: width var(--dur-base) var(--ease-out), background var(--dur-base); }
.dsx-func .dot.active { width: 28px; background: var(--intiza-azul-oscuro); }

@media (prefers-reduced-motion: reduce) { .dsx-func .track { transition: none; } }
@media (max-width: 820px) {
  .dsx-func .card { grid-template-columns: 1fr; gap: 26px; padding: 32px 28px; min-height: 0; }
  .dsx-func .visual { order: -1; background: transparent; margin: 0; padding: 0; border-left: 0; }
  .dsx-func .mock { height: auto; min-height: 0; }
  .dsx-func .arrow.prev { left: 4px; } .dsx-func .arrow.next { right: 4px; }
  .dsx-func .mock-b { padding: 12px 10px; overflow-x: auto; }
  .dsx-func table.inv { font-size: 10.5px; }
  .dsx-func table.inv th, .dsx-func table.inv td { padding: 6px 5px; }
}
@media (max-width: 760px) { .dsx-func .section { padding: 32px 0; } .dsx-func .wrap { padding: 0 24px; } .dsx-func h2 { font-size: 30px; } .dsx-func .slide { padding: 4px 14px; } }

/* ============================================================
   CONCILIACIÓN — pipeline sobre celeste suave
   ============================================================ */
.dsx-concil .section { background: var(--bg-soft); padding: 48px 0; position: relative; overflow: hidden; }
.dsx-concil .wrap { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 36px; }
.dsx-concil .head { text-align: center; max-width: 760px; margin: 0 auto 72px; }
.dsx-concil 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; }
.dsx-concil h2 em { font-style: normal; color: var(--intiza-azul-oscuro); }

.dsx-concil .flow { position: relative; }
.dsx-concil .track { position: absolute; top: 44px; left: 12.5%; right: 12.5%; height: 2px; z-index: 0;
  background: linear-gradient(90deg, rgba(6,122,251,.14), rgba(6,122,251,.45), rgba(5,38,208,.45), rgba(5,38,208,.14)); }
.dsx-concil .pulse { position: absolute; top: 50%; left: 0; width: 56px; height: 4px; transform: translate(-50%,-50%);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, transparent, var(--acc-cob), transparent);
  animation: dstravel 4.2s var(--ease-in-out) infinite; }
@keyframes dstravel { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

.dsx-concil .steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dsx-concil .step { text-align: center; padding: 0 8px; transition: transform .7s var(--ease-out); }
.dsx-concil .section:not(.in) .step { transform: translateY(24px); }
.dsx-concil .section:not(.in) .step:nth-child(2) { transition-delay: .08s; }
.dsx-concil .section:not(.in) .step:nth-child(3) { transition-delay: .16s; }
.dsx-concil .section:not(.in) .step:nth-child(4) { transition-delay: .24s; }

/* nodos: contenedor blanco con hairline, icono lineal en azul de producto */
.dsx-concil .node { position: relative; width: 88px; height: 88px; margin: 0 auto 22px; border-radius: var(--radius-xl);
  background: var(--surface-card); border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-2);
  display: flex; align-items: center; justify-content: center; color: var(--acc-cob);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }
.dsx-concil .step:hover .node { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.dsx-concil .node svg { width: 36px; height: 36px; }
.dsx-concil .step h3 { font-size: 17px; font-weight: var(--fw-medium); color: var(--fg-1); margin: 0; }
.dsx-concil .step p { font-size: 13.5px; line-height: var(--lh-base); color: var(--fg-2); margin: 8px auto 0; max-width: 21ch; }

@media (prefers-reduced-motion: reduce) {
  .dsx-concil .pulse { display: none; }
  .dsx-concil .step, .dsx-concil .node { transition: none !important; }
  .dsx-concil .section:not(.in) .step { transform: none !important; }
}
@media (max-width: 820px) {
  .dsx-concil .steps { grid-template-columns: repeat(2, 1fr); gap: 40px 16px; }
  .dsx-concil .track { display: none; }
}
@media (max-width: 760px) { .dsx-concil .section { padding: 32px 0; } .dsx-concil .wrap { padding: 0 24px; } .dsx-concil h2 { font-size: 30px; } }
@media (max-width: 460px) { .dsx-concil .steps { grid-template-columns: 1fr; } }

/* ============================================================
   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);
  box-shadow: 0 20px 34px -16px rgba(5,38,208,.30), 0 3px 10px -4px rgba(5,38,208,.10); }
/* franja de acento en el borde superior, el mismo recurso que el contenedor de funcionalidades.
   El bloque compartido trae una linea centrada: la reemplazamos por la franja a todo el ancho. */
.ds-page .sx-casos .shell::before { content: ""; position: absolute; top: 0; left: 0; right: 0;
  width: auto; height: 4px; transform: none; opacity: 1; z-index: 3;
  background: linear-gradient(90deg, var(--intiza-azul-oscuro), var(--acc-cob)); }
.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-cob); }
.ds-page .sx-casos .ctag.cob { 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-cob); }
.dsx-seg .shield svg { width: 32px; height: 32px; }

/* sin cards: las tres certificaciones van sobre el fondo, separadas por hairlines */
.dsx-seg .certs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.dsx-seg .cert { position: relative; padding: 10px 26px; background: transparent;
  border: 0; border-left: 1px solid var(--border); border-radius: 0; box-shadow: none;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: transform .7s var(--ease-out); }
.dsx-seg .cert:first-child { border-left: 0; }
.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: 96px; 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 .cert { border-left: 0; border-top: 1px solid var(--border); padding: 22px 16px; }
  .dsx-seg .cert:first-child { border-top: 0; }
  .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-cob), 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(6,122,251,.22); }