/* ============================================================
   page-nosotros.css — Nosotros, con el Intiza design system.
   Cuarta pantalla migrada, después de Cobranzas, Proveedores y la home.

   Mismas reglas del sistema que el resto:

   · Fondo por defecto blanco + superficies celeste; el azul oscuro
     queda para las franjas de acento y el footer.
   · Sombras siempre tintadas en azul rgba(5,38,208,…), nunca negras.
   · Tipografía Archivo, títulos en peso 500 (medium) y sentence case.
   · Contenedores 12–24px de radio, hairline var(--border-soft).

   La diferencia con las otras páginas: esta no tiene un hero con gráfico.
   El bloque del título es solo la etiqueta y el titular, pero sobre el mismo
   degradé azul, así que el menú se comporta igual que en el resto.

   Todo está scopeado en .ds-page; 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 y sobre blanco no se ven. Acá se re-tiñen por CSS. */
  --tint-oscuro: brightness(0);
}
.ds-page .section { position: relative; padding: 48px 0; background: var(--bg); overflow: hidden; }
.ds-page .wrap { max-width: 1240px; margin: 0 auto; padding: 0 36px; }
.ds-page .wrap.narrow { max-width: 980px; }
/* 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; }
@media (max-width: 760px) {
  .ds-page .section { padding: 32px 0; }
  .ds-page .wrap { padding: 0 24px; }
}

/* ============================================================
   ENCABEZADO DE PÁGINA — el título, sobre el degradé del sistema.
   Nosotros no tiene un hero como las páginas de producto (no hay
   producto que mostrar), pero el bloque del título usa el mismo azul,
   así que la página entra en la misma familia y el menú se comporta
   igual que en el resto: transparente arriba, sólido al bajar.
   Los 148px de arriba son los mismos que usan los otros heroes:
   despejan la barra fija de 76px.
   ============================================================ */
.dsx-head .section { padding: 148px 0 96px;
  background: linear-gradient(135deg, #0526D0 0%, #1735C5 52%, #067AFB 100%); }
.dsx-head .eyebrow { display: inline-flex; align-items: center; font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: #fff; 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); margin: 0 0 24px; }
/* el tamaño está atado a que el título entre en 2 líneas: la primera hasta
   "Latinoamérica a" y la segunda el resaltado. Si crece, la primera se parte */
.dsx-head h1 { font-size: clamp(30px, calc(4vw - 4px), 47px); font-weight: var(--fw-medium);
  line-height: var(--lh-tight); letter-spacing: -.03em; color: #fff; margin: 0; text-wrap: balance; }
/* mismo resaltado que el hero de las páginas de producto */
.dsx-head h1 em { font-style: normal;
  background-image: linear-gradient(90deg, var(--intiza-celeste) 0%, #FFFFFF 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 760px) {
  .dsx-head .section { padding: 120px 0 64px; }
  /* el salto de línea del título está pensado para desktop */
  .dsx-head h1 br { display: none; }
}

/* ============================================================
   EL PROBLEMA — hilo narrativo.
   Se mantiene el hilo y no se pasa a tarjetas a propósito: las tres
   partes son una secuencia, y tres tarjetas las igualarían.
   ============================================================ */
.dsx-hilo .section { background: var(--bg-soft); padding: 48px 0; }
.dsx-hilo .thread { position: relative; max-width: 820px; padding-left: 34px; }
.dsx-hilo .thread::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg, var(--intiza-azul-oscuro), rgba(5,38,208,.08)); }
.dsx-hilo .step { position: relative; padding: 0 0 34px; }
.dsx-hilo .step:last-child { padding-bottom: 0; }
.dsx-hilo .step::before { content: ""; position: absolute; left: -34px; top: 7px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--surface-card); border: 2px solid var(--intiza-azul-oscuro); }
.dsx-hilo .step .lbl { 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 9px; }
.dsx-hilo .step p { font-size: 16.5px; line-height: var(--lh-relaxed); color: var(--fg-2); margin: 0; }
.dsx-hilo .step p + p { margin-top: 15px; }
/* el último paso —la misión— cierra el hilo, así que pesa un poco más */
.dsx-hilo .step.final p:not(.lbl) { color: var(--fg-1); font-size: 17.5px; }
.dsx-hilo .step strong { color: var(--fg-1); font-weight: var(--fw-medium); }
@media (max-width: 640px) {
  .dsx-hilo .thread { padding-left: 26px; }
  .dsx-hilo .step::before { left: -26px; }
}

/* ============================================================
   NUESTRA FILOSOFÍA DE TRABAJO — intro lateral + escalera.
   ============================================================ */
.dsx-fil .section { background: var(--bg-soft); padding: 48px 0; }
/* la columna izquierda se ensancha para que el título entre en una línea */
.dsx-fil .msplit { display: grid; grid-template-columns: 1fr 1.7fr; gap: 56px; align-items: start; }
.dsx-fil .mintro .rule { width: 56px; height: 3px; margin: 0 0 22px;
  background: linear-gradient(90deg, var(--intiza-azul-oscuro), var(--acc-cob)); }
.dsx-fil .mintro h2 { font-size: clamp(26px, calc(3.2vw - 5px), 34px); font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); color: var(--fg-1); margin: 0; }
.dsx-fil .mintro h2 em { font-style: normal; color: var(--intiza-azul-oscuro); }
.dsx-fil .mintro p { font-size: 15.5px; line-height: var(--lh-relaxed); color: var(--fg-2); margin: 20px 0 0; }

/* los peldaños se separan con hairline: sobre fondo claro el contraste solo
   no alcanza para ordenarlos */
.dsx-fil .rung { display: grid; grid-template-columns: 42px 1fr; gap: 18px; align-items: start; padding: 22px 0; }
.dsx-fil .rung + .rung { border-top: 1px solid var(--border-soft); }
.dsx-fil .rung:first-child { padding-top: 0; }
.dsx-fil .rung:last-child { padding-bottom: 0; }
.dsx-fil .rung .pic { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: var(--radius-md); color: var(--acc-cob);
  background: var(--celeste-60); border: 1px solid var(--border-soft); }
.dsx-fil .rung .pic svg { width: 20px; height: 20px; }
.dsx-fil .rung h3 { font-size: 16.5px; font-weight: var(--fw-medium); color: var(--fg-1); margin: 2px 0 0; letter-spacing: -.01em; }
.dsx-fil .rung p { font-size: 14px; line-height: var(--lh-snug); color: var(--fg-2); margin: 5px 0 0; }
@media (max-width: 980px) {
  .dsx-fil .msplit { grid-template-columns: 1fr; gap: 30px; }
  .dsx-fil .mintro h2 { font-size: 30px; }
}
@media (max-width: 640px) { .dsx-fil .mintro h2 { font-size: 28px; } }

/* ============================================================
   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 96px; }
.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 del resto del sistema */
.ds-page .sx-casos .shell::before { content: ""; display: block; 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 { border-color: var(--border); box-shadow: var(--shadow-3); }
.ds-page .sx-casos .ctag { background: var(--intiza-azul-oscuro); color: #fff; }
.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 .clink { color: var(--intiza-azul-oscuro); font-weight: var(--fw-medium); }
.ds-page .sx-casos .cover::after { background: linear-gradient(180deg, rgba(10,18,51,0) 55%, rgba(10,18,51,.28)); }
.ds-page .sx-casos .allcases { margin-top: 8px; }
.ds-page .sx-casos .btn { background: var(--intiza-azul-oscuro); color: #fff; 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 64px; } }

/* ============================================================
   CTA "Conversemos" — franja azul de cierre, antes del footer.
   La página no lo tenía: era la única de las cinco que terminaba
   sin un próximo paso.
   ============================================================ */
.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
   no se puede estilar desde el sitio: sobre un fondo azul queda ilegible, así
   que va en un contenedor blanco. */
.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); }