/* ============================================================
   site.css — estilos compartidos por todas las páginas
   (reset, header/nav, dropdown Soluciones, nav móvil, footer)
   Los tokens de marca viven en tokens.css.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; }
/* Scroll suave en los anclajes internos (#soluciones, #contacto…) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-family: var(--font-sans); background: #0A1238; color: #fff; }
:root { --c-cob: #067AFB; --c-prov: #02AEB9; }

.wrap { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 0 36px; }

/* ============ HEADER ============
   Barra fija, el mismo mecanismo que la barra de la landing de Proveedores:
   transparente sobre el hero —así el hero se lee como una sola imagen— y
   sólida al scrollear, para que el menú no se pierda. El estado lo marca la
   clase .nav-solid en <html>, que pone el script de _includes/header.njk.

   El sólido tiene dos pieles, porque el sitio convive en dos diseños:
   oscuro en las páginas que aún no se migraron y blanco en las del design
   system. Sobre el hero las dos son iguales (logo y menú en blanco).

   Al ser fija, la barra deja de ocupar lugar: cada página recupera ese alto
   con padding-top en su propio hero (76px de barra + el aire que ya tenía).
   ============================================================ */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; max-width: none; padding: 0;
  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); }
header.nav { max-width: 1240px; margin: 0 auto; height: 76px; display: flex; align-items: center; gap: 8px;
  padding: 0 36px; background: transparent; box-shadow: none;
  transition: height var(--dur-slow) var(--ease-out); }
.brandlogo { height: 24px; display: block; filter: brightness(0) invert(1);
  transition: filter var(--dur-slow) var(--ease-out); }
nav.links { display: flex; align-items: center; gap: 4px; margin-left: 28px; }
.navlink { display: inline-flex; align-items: center; font-size: 15px; font-weight: 500; color: #fff;
  text-decoration: none; padding: 9px 13px; border-radius: 10px; transition: background var(--dur-base), color var(--dur-base); }
.navlink:hover, .navlink.active { background: rgba(255,255,255,.16); color: #fff; }
.spacer { flex: 1 1 auto; }
.btn-ing { display: inline-flex; align-items: center; font-size: 14.5px; font-weight: 600;
  color: var(--intiza-azul-oscuro); background: #fff; border-radius: 999px; padding: 11px 24px;
  text-decoration: none; box-shadow: 0 8px 22px rgba(3,20,120,.24);
  transition: background var(--dur-base), color var(--dur-base), box-shadow var(--dur-base); }
.btn-ing:hover { background: var(--intiza-celeste); }

/* variante de las páginas de producto: entra directo al login de ese producto,
   sin desplegable, así que lleva flecha en vez de chevron (ver header.njk) */
.btn-ing.directo { gap: 8px; }
.btn-ing.directo .ingarr { flex: 0 0 auto; transition: transform var(--dur-base) var(--ease-out); }
.btn-ing.directo:hover .ingarr { transform: translateX(3px); }

/* ---- al scrollear: piel oscura (páginas del diseño anterior) ---- */
html.nav-solid .topbar { background: rgba(10,18,56,.88);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: rgba(255,255,255,.12); box-shadow: 0 10px 30px rgba(0,0,0,.34); }
html.nav-solid header.nav { height: 64px; }

/* ---- al scrollear: piel blanca (páginas del design system) ---- */
html.nav-solid body:has(.ds-page) .topbar { background: rgba(255,255,255,.86);
  border-bottom-color: var(--border-soft); box-shadow: 0 10px 28px rgba(5,38,208,.14); }
html.nav-solid body:has(.ds-page) .brandlogo { filter: none; }
html.nav-solid body:has(.ds-page) .navlink { color: var(--fg-1); }
html.nav-solid body:has(.ds-page) .navlink:hover,
html.nav-solid body:has(.ds-page) .navlink.active { background: var(--celeste-30); color: var(--intiza-azul-oscuro); }
html.nav-solid body:has(.ds-page) .btn-ing { background: var(--intiza-azul-oscuro); color: #fff;
  box-shadow: 0 6px 16px rgba(5,38,208,.34); }
html.nav-solid body:has(.ds-page) .btn-ing:hover { background: #0420B8; }

@media (prefers-reduced-motion: reduce) {
  .topbar, header.nav, .brandlogo, .btn-ing { transition: none; }
}
@media (max-width: 760px) {
  header.nav { height: 64px; padding: 0 24px; }
  html.nav-solid header.nav { height: 58px; }
}

/* Ingresar: desplegable con los accesos a las dos plataformas */
.ingwrap { position: relative; }
.ingwrap > .btn-ing { gap: 7px; border: 0; cursor: pointer; font-family: inherit; }
.ingchev { flex: 0 0 auto; transition: transform var(--dur-base) var(--ease-out); }
.ingwrap:hover .ingchev, .ingwrap:focus-within .ingchev, .ingwrap.open .ingchev { transform: rotate(180deg); }
.ingmenu { position: absolute; top: calc(100% + 12px); right: 0; z-index: 60; min-width: 280px;
  background: #fff; border: 1px solid var(--border-soft); border-radius: 18px; padding: 10px;
  /* Dos sombras y un anillo: el panel tiene que leerse como una capa POR ENCIMA
     del menú, y el menú puede estar sobre el degradé azul o sobre fondo claro.
     Una sola sombra difusa se perdia contra el azul. */
  box-shadow: 0 2px 0 rgba(255,255,255,.55), 0 18px 28px -10px rgba(3,20,120,.42),
    0 40px 80px -24px rgba(3,20,120,.50);
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.ingmenu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.ingwrap:hover .ingmenu, .ingwrap:focus-within .ingmenu, .ingwrap.open .ingmenu { opacity: 1; transform: none; pointer-events: auto; }
/* el pico ancla el panel a su botón: sin él, flota sin dueño */
.dropdown::after, .ingmenu::after { content: ""; position: absolute; top: -7px; width: 14px; height: 14px;
  background: #fff; border-left: 1px solid var(--border-soft); border-top: 1px solid var(--border-soft);
  border-radius: 4px 0 0 0; transform: rotate(45deg); }
.dropdown::after { left: 30px; }
.ingmenu::after { right: 34px; }

.ingmenu a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 13px;
  font-size: 14.5px; font-weight: 500; color: var(--fg-1); text-decoration: none;
  transition: background var(--dur-base) var(--ease-out); }
.ingmenu a:hover { background: var(--celeste-30); }
.ingmenu a img { flex: 0 0 auto; }
.ingmenu a span { flex: 1 1 auto; }
.ingmenu .arr { flex: 0 0 auto; transition: transform var(--dur-base) var(--ease-out); }
.ingmenu a:hover .arr { transform: translateX(3px); }
.ingmenu .arr.cob { color: var(--c-cob); }
.ingmenu .arr.prov { color: var(--c-prov); }

/* Soluciones dropdown */
.navitem { position: relative; }
.navitem > .navlink { border: 0; background: none; cursor: pointer; font: inherit; gap: 7px; }
/* el ítem con desplegable repite los dos estados de la barra, igual que .navlink */
.navitem > .navlink:hover, .navitem:focus-within > .navlink, .navitem > .navlink.active {
  background: rgba(255,255,255,.16); color: #fff; }
html.nav-solid body:has(.ds-page) .navitem > .navlink:hover,
html.nav-solid body:has(.ds-page) .navitem:focus-within > .navlink,
html.nav-solid body:has(.ds-page) .navitem > .navlink.active {
  background: var(--celeste-30); color: var(--intiza-azul-oscuro); }
.navitem .chev { flex: 0 0 auto; color: rgba(255,255,255,.72); transition: transform var(--dur-base) var(--ease-out); }
html.nav-solid body:has(.ds-page) .navitem .chev { color: var(--fg-3); }
.navitem:hover .chev, .navitem:focus-within .chev { transform: rotate(180deg); }
.dropdown { position: absolute; top: calc(100% + 12px); left: -8px; z-index: 60; width: 392px;
  background: #fff; border: 1px solid var(--border-soft); border-radius: 18px; padding: 10px;
  /* Dos sombras y un anillo: el panel tiene que leerse como una capa POR ENCIMA
     del menú, y el menú puede estar sobre el degradé azul o sobre fondo claro.
     Una sola sombra difusa se perdia contra el azul. */
  box-shadow: 0 2px 0 rgba(255,255,255,.55), 0 18px 28px -10px rgba(3,20,120,.42),
    0 40px 80px -24px rgba(3,20,120,.50);
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.navitem:hover .dropdown, .navitem:focus-within .dropdown { opacity: 1; transform: none; pointer-events: auto; }
.drow { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 13px; text-decoration: none;
  transition: background var(--dur-base) var(--ease-out); }
.drow:hover { background: var(--celeste-30); }
.drow .mark { flex: 0 0 auto; display: flex; }
.drow .dt { display: block; font-weight: 500; color: var(--fg-1); font-size: 15px; }
.drow .dd { display: block; font-size: 12.5px; color: var(--fg-3); margin-top: 3px; line-height: 1.42; }
.drow .arr { margin-left: auto; color: var(--fg-3); display: flex; transition: transform var(--dur-base) var(--ease-out); }
.drow:hover .arr { transform: translateX(3px); color: var(--intiza-azul-oscuro); }

/* mobile nav */
header.nav, .topbar .nav { position: relative; }
.mburger { display: none; align-items: center; justify-content: center; width: 42px; height: 42px;
  margin-left: 2px; border: 0; border-radius: 12px; background: transparent; color: #fff;
  cursor: pointer; flex: 0 0 auto; }
.mburger:hover { background: rgba(255,255,255,.16); color: #fff; }
html.nav-solid body:has(.ds-page) .mburger { color: var(--fg-1); }
html.nav-solid body:has(.ds-page) .mburger:hover { background: var(--celeste-30); color: var(--intiza-azul-oscuro); }
.mburger svg { width: 22px; height: 22px; display: block; }
.mmenu { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 70;
  display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 18px; background: #fff;
  border: 1px solid var(--border-soft); box-shadow: 0 28px 64px rgba(5,38,208,.18); }
.mmenu[hidden] { display: none; }
.mmenu a { display: block; padding: 12px 14px; border-radius: 10px; font-size: 15px; font-weight: 500;
  color: var(--fg-1); text-decoration: none; }
.mmenu a:hover { background: var(--celeste-30); color: var(--intiza-azul-oscuro); }
@media (max-width: 720px) {
  nav.links { display: none; }
  .mburger { display: inline-flex; }
}

/* ============ CTA CONTACTO (form HubSpot) ============ */
.cta-contacto { padding: 64px 0; }
.cta-shell { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start;
  border-radius: 28px; padding: 48px 56px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.10); box-shadow: 0 30px 70px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05); }
.cta-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8FB4FF; margin: 0 0 14px; }
.cta-shell h2 { font-size: 32px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; margin: 0; color: #fff; }
.cta-sub { font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.72); margin: 16px 0 0; }
.cta-bullets { display: grid; gap: 13px; list-style: none; margin: 18px 0 0; padding: 0; }
.cta-bullets li { display: grid; grid-template-columns: 21px 1fr; gap: 11px; align-items: start;
  font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.80); }
.cta-bullets svg { width: 21px; height: 21px; color: #8FB4FF; margin-top: 1px; }
.cta-form { min-height: 220px; border-radius: 18px; padding: 26px 28px; background: #fff; color: var(--fg-1); }
.cta-form-ph { font-size: 13.5px; line-height: 1.6; color: var(--fg-3); margin: 0; }
.cta-form-ph code { font-size: 12px; background: var(--celeste-30); padding: 2px 5px; border-radius: 5px; }
/* estilos base para el form embebido de HubSpot */
.cta-form .hs-form label { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.cta-form .hs-form input[type=text], .cta-form .hs-form input[type=email], .cta-form .hs-form input[type=tel],
.cta-form .hs-form select, .cta-form .hs-form textarea { width: 100%; font-family: inherit; font-size: 14.5px;
  color: var(--fg-1); background: #fff; border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px 12px; }
.cta-form .hs-form .hs-button { display: inline-flex; align-items: center; font-size: 15px; font-weight: 600; color: #fff;
  background: var(--intiza-azul-oscuro); border: 0; border-radius: 999px; padding: 13px 28px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(5,38,208,.34); transition: background var(--dur-base); }
.cta-form .hs-form .hs-button:hover { background: #0420B8; }
.cta-form .hs-error-msgs { color: #c0285c; font-size: 12.5px; list-style: none; padding: 0; margin: 6px 0 0; }
@media (max-width: 920px) { .cta-shell { grid-template-columns: 1fr; gap: 30px; padding: 36px 28px; } }

/* ============ SITE FOOTER ============ */
.sitefooter { position: relative; width: 100%; overflow: hidden; margin-top: 30px;
  background: linear-gradient(180deg, #0A1340 0%, #070D28 100%); border-top: 1px solid rgba(255,255,255,.08); }
.sitefooter::before { content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 60%; height: 2px;
  background: linear-gradient(90deg, transparent, #67A6FF, #46D6C5, transparent); opacity: .8; }
.sitefooter .fwrap { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 64px 36px 0; }
.ft-top { display: grid; grid-template-columns: 1.2fr 1.6fr; gap: 48px; padding-bottom: 48px; }
.ft-brand .ft-logo { height: 30px; filter: brightness(0) invert(1); display: block; }
.ft-brand .ft-tag { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.66); margin: 20px 0 26px; max-width: 34ch; }
.ft-cta { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: #04303a;
  background: linear-gradient(120deg, #46D6C5, #7FF0E4); border: 0; border-radius: 999px; padding: 14px 26px;
  cursor: pointer; font-family: inherit; text-decoration: none; box-shadow: 0 12px 30px rgba(46,214,197,.32);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base); }
.ft-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(46,214,197,.45); }
.ft-cta svg { width: 16px; height: 16px; }
.ft-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.ft-col h4 { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #67A6FF; margin: 4px 0 18px; }
.ft-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.ft-col a { font-size: 15px; color: rgba(255,255,255,.8); text-decoration: none; transition: color var(--dur-base), padding-left var(--dur-base); }
.ft-col a:hover { color: #fff; padding-left: 4px; }
.ft-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.08); padding: 22px 0 28px; }
.ft-copy { font-size: 13px; color: rgba(255,255,255,.5); }
.ft-socials { display: flex; gap: 10px; }
.ft-socials a { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.78);
  transition: background var(--dur-base), color var(--dur-base), transform var(--dur-fast); }
.ft-socials a:hover { background: rgba(103,166,255,.16); color: #fff; transform: translateY(-2px); }
.ft-socials svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .ft-top { grid-template-columns: 1fr; gap: 36px; }
}

/* ============================================================
   SECCIÓN "socio tecnológico" (.sx-socio)
   Compartida por home, Cobranzas y Proveedores — markup en _includes/sections/socio.njk
   ============================================================ */
.sx-socio .section { position: relative; overflow: hidden; padding: 48px 0;
    background: #0A1238;
  }
  .sx-socio .wrap { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 36px; }

  .sx-socio .head { text-align: center; max-width: none; margin: 0 auto 56px; }
  .sx-socio .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: #67A6FF; margin: 0 0 16px; }
  .sx-socio .eyebrow .sq { width: 7px; height: 7px; border-radius: 2px; background: #67A6FF; box-shadow: 0 0 10px rgba(103,166,255,.8); }
  .sx-socio h2 { font-size: var(--h2-size, 38px); font-weight: 500; line-height: 1.12; letter-spacing: -.025em; text-transform: none;
    color: #fff; margin: 0; white-space: nowrap; }
  .sx-socio #socio.wrap2 h2 { white-space: normal; text-wrap: balance; max-width: 760px; margin: 0 auto; }
  .sx-socio h2 em { font-style: normal; background: linear-gradient(90deg, #67A6FF, #46D6C5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

  /* sin contenedor: la jerarquia la da el numeral, no una caja */
  .sx-socio .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 52px; }
  .sx-socio .card { position: relative; transition: transform .7s var(--ease-out); }
  .sx-socio .section:not(.in) .card { transform: translateY(26px); }
  .sx-socio .section:not(.in) .card:nth-child(2) { transition-delay: .1s; }
  .sx-socio .section:not(.in) .card:nth-child(3) { transition-delay: .2s; }

  .sx-socio .chead { display: block; margin-bottom: 14px; }
  /* el relleno solido es el fallback si el navegador no soporta text-stroke */
  .sx-socio .num { display: block; font-size: 62px; font-weight: 700; line-height: 1; letter-spacing: -.03em;
    color: color-mix(in srgb, var(--accent) 55%, transparent); }
  @supports (-webkit-text-stroke: 1px red) {
    .sx-socio .num { color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 70%, transparent); }
  }

  .sx-socio .card h3 { font-size: 21px; font-weight: 600; line-height: 1.22; color: #fff; margin: 0; letter-spacing: -.01em; }
  .sx-socio .card p { font-size: 14.5px; line-height: 1.62; color: rgba(255,255,255,.68); margin: 14px 0 0; }
  .sx-socio .phase { display: inline-block; margin-top: 18px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: color-mix(in srgb, var(--accent) 75%, #fff); }

  .sx-socio #socio.no-num .num { display: none; }
  .sx-socio #socio.no-phase .phase { display: none; }

  @media (prefers-reduced-motion: reduce) { .sx-socio .card { transition: none !important; } .sx-socio .section:not(.in) .card { transform: none !important; } }
  @media (max-width: 880px) { .sx-socio .cards { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
  @media (max-width: 760px) { .sx-socio h2 { white-space: normal !important; font-size: 30px; } }

/* ============================================================
   SECCIÓN "logos de clientes + casos de éxito" (.sx-casos)
   Compartida por home, Cobranzas y Proveedores — markup en _includes/sections/casos.njk,
   datos en _data/casos.json y _data/logos.json
   ============================================================ */
.sx-casos .section { position: relative; overflow: hidden; padding: 48px 0;
    background: #0A1238;
  }
  .sx-casos .wrap { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 36px; }

  .sx-casos /* container shell around the whole block */
  .shell { position: relative; overflow: hidden; border-radius: 32px;
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 30px 70px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05);
    padding: 56px 48px 48px; }
  .sx-casos .shell::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 46%; height: 2px;
    background: linear-gradient(90deg, transparent, #67A6FF, transparent); opacity: .6; }
  @media (max-width: 560px) { .sx-casos .shell { padding: 36px 20px 28px; border-radius: 24px; } }

  .sx-casos .head { text-align: center; margin: 0 auto 18px; }
  .sx-casos .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: #67A6FF; margin: 0 0 16px; }
  .sx-casos .eyebrow .sq { width: 7px; height: 7px; border-radius: 2px; background: #67A6FF; box-shadow: 0 0 10px rgba(103,166,255,.8); }
  .sx-casos h2 { font-size: 38px; font-weight: 500; line-height: 1.12; letter-spacing: -.025em; text-transform: none;
    color: #fff; margin: 0; text-wrap: balance; }
  .sx-casos h2 em { font-style: normal; color: #67A6FF; }

  .sx-casos /* trusted strip — carousel */
  .trust { position: relative; overflow: hidden; margin: 34px 0 56px;
    -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%); }
  .sx-casos .ttrack { display: flex; flex-wrap: nowrap; align-items: center; width: max-content; will-change: transform;
    animation: tscroll 36s linear infinite; }
  .sx-casos .trust:hover .ttrack { animation-play-state: paused; }
  .sx-casos .tgroup { display: flex; flex-wrap: nowrap; align-items: center; gap: 34px; padding-right: 34px; }
  @keyframes tscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .sx-casos .ttrack { animation: none; } .sx-casos .trust { overflow-x: auto; } }
  .sx-casos .tlogo { width: 110px; height: 45px; flex: 0 0 auto; }

  .sx-casos /* case cards — horizontal scroller with arrow nav */
  .casesvp { position: relative; }
  .sx-casos .cases { display: flex; flex-wrap: nowrap; gap: 20px; overflow-x: auto; overflow-y: hidden;
    padding: 20px 4px 24px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; }
  .sx-casos .cases::-webkit-scrollbar { display: none; }
  .sx-casos .nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 48px; height: 48px;
    border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(13,28,90,.82); color: #fff;
    cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px rgba(0,0,0,.45);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: opacity .22s var(--ease-out), background .2s, border-color .2s, transform .12s; }
  .sx-casos .nav:hover { background: rgba(24,46,128,.95); border-color: rgba(103,166,255,.5); }
  .sx-casos .nav:active { transform: translateY(-50%) scale(.94); }
  .sx-casos .nav.prev { left: -10px; } .sx-casos .nav.next { right: -10px; }
  .sx-casos .nav[hidden] { display: flex; opacity: 0; pointer-events: none; }
  .sx-casos .nav svg { width: 22px; height: 22px; }
  .sx-casos .case { flex: 0 0 300px; scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
    background: linear-gradient(170deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.10); box-shadow: 0 20px 48px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
    transition: transform .7s var(--ease-out), border-color var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }
  .sx-casos .case:hover { transform: translateY(-6px); border-color: rgba(103,166,255,.4);
    box-shadow: 0 30px 64px rgba(0,0,0,.44), 0 0 0 1px rgba(103,166,255,.18), inset 0 1px 0 rgba(255,255,255,.1); }
  .sx-casos .section:not(.in) .case { transform: translateY(26px); }
  .sx-casos .section:not(.in) .case:nth-child(2) { transition-delay: .07s; }
  .sx-casos .section:not(.in) .case:nth-child(3) { transition-delay: .14s; }
  .sx-casos .section:not(.in) .case:nth-child(4) { transition-delay: .21s; }

  .sx-casos .cover { position: relative; }
  .sx-casos .cover::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(7,13,40,0) 45%, rgba(10,18,66,.55)); }

  /* covers que no traen el circulo con el logo incrustado (coverLogo en casos.json) */
  .sx-casos .coverlogo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
    height: 68%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
  .sx-casos .coverlogo img { width: 100%; height: 100%; display: block; object-fit: contain; }

  .sx-casos .cbody { display: flex; flex-direction: column; flex: 1 1 auto; padding: 22px 20px 22px; }
  .sx-casos .cbody h3 { font-size: 18px; font-weight: 600; color: #fff; margin: 0; letter-spacing: -.01em; }
  .sx-casos .cbody p { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.66); margin: 10px 0 0; }
  .sx-casos .more { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: #67A6FF; text-decoration: none; text-transform: none;
    transition: gap var(--dur-base) var(--ease-out), color var(--dur-base); }
  .sx-casos .more svg { width: 15px; height: 15px; transition: transform var(--dur-base) var(--ease-out); }
  .sx-casos .more:hover { color: #A9D0FF; } .sx-casos .more:hover svg { transform: translateX(4px); }

  .sx-casos .foot { display: flex; justify-content: center; margin-top: 44px; }
  .sx-casos .btn { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: #fff;
    background: linear-gradient(120deg, #0A2BD6, #2A57E8); border: 0; border-radius: 999px; padding: 14px 30px;
    text-transform: none; cursor: pointer; font-family: inherit; text-decoration: none;
    box-shadow: 0 12px 30px rgba(10,43,214,.45); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base); }
  .sx-casos .btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(10,43,214,.55); }
  .sx-casos .btn:active { transform: scale(.98); }

  @media (prefers-reduced-motion: reduce) { .sx-casos .case { transition: none !important; } .sx-casos .section:not(.in) .case { transform: none !important; } }

  /* chip de producto sobre la portada (venía del bloque de la home) */
  .sx-casos .ctag { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 10.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
  .sx-casos .ctag.cob { background: rgba(6,122,251,.92); color: #fff; }
  .sx-casos .ctag.prov { background: rgba(2,174,185,.94); color: #04303a; }

/* ============================================================
   PRUEBA — sección "Conversemos" en blanco a todo el ancho.
   Todo lo de acá abajo son overrides: para volver atrás, borrar este bloque
   entero y las reglas originales de .cta-* siguen intactas más arriba.
   Aplica a las tres páginas (home, Cobranzas, Proveedores).
   ============================================================ */
/* la franja blanca ocupa el ancho completo de la pantalla */
/* .section de page-home.css también pega acá: hace falta más especificidad */
.section.cta-contacto, .cta-contacto { background: #fff; padding: 72px 0 76px; }
/* el contenedor deja de ser una tarjeta: sin fondo, borde, sombra ni radio */
.cta-shell { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; }
.cta-kicker { color: var(--intiza-azul-oscuro); }
.cta-shell h2 { color: var(--fg-1); }
.cta-sub { color: var(--fg-2); }
.cta-bullets li { color: var(--fg-2); }
.cta-bullets svg { color: var(--intiza-azul-oscuro); }
/* el formulario ya no necesita su propio panel: se funde con la franja */
.cta-form { background: transparent; padding: 0; min-height: 0; }
/* sin aire entre la franja blanca y el footer */
.cta-contacto + .sitefooter { margin-top: 0; }
@media (max-width: 920px) { .cta-shell { padding: 0; } }

/* ============================================================
   MODAL DE CONTACTO (markup y script en _includes/footer.njk)
   Se abre desde "Agenda una conversación" del footer, solo en las
   páginas que no tienen la sección #contacto.
   ============================================================ */
.ctamodal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center;
  justify-content: center; padding: 24px; }
.ctamodal[hidden] { display: none; }
.ctamodal-fondo { position: absolute; inset: 0; background: rgba(5,16,60,.58);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .22s var(--ease-out); }
.ctamodal.abierto .ctamodal-fondo { opacity: 1; }
.ctamodal-caja { position: relative; z-index: 1; width: 100%; max-width: 560px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  background: #fff; color: var(--fg-1); border-radius: 22px; padding: 32px 34px 34px;
  box-shadow: 0 40px 90px rgba(3,20,120,.45);
  opacity: 0; transform: translateY(10px) scale(.985);
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out); }
.ctamodal.abierto .ctamodal-caja { opacity: 1; transform: none; }
.ctamodal-caja:focus { outline: none; }
.ctamodal-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0;
  border-radius: 50%; background: var(--celeste-30); color: var(--fg-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-base), color var(--dur-base); }
.ctamodal-x:hover { background: var(--celeste-60); color: var(--intiza-azul-oscuro); }
.ctamodal-x svg { width: 18px; height: 18px; }
/* el aire bajo el título lo ponían los bullets; sin ellos va acá */
.ctamodal-caja h2 { font-size: 28px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15;
  color: var(--fg-1); margin: 0 0 24px; }
.ctamodal-ph { font-size: 13.5px; color: var(--fg-3); margin: 0; }
body.sin-scroll { overflow: hidden; }
@media (max-width: 560px) {
  .ctamodal { padding: 14px; }
  .ctamodal-caja { padding: 26px 20px 28px; border-radius: 18px; }
  .ctamodal-caja h2 { font-size: 24px; }
}