/* ===========================================================================
   Subpágina /sincro-hub/ — se apoya en styles.css + adjustments.css.
   Solo la carga esta página; la landing no toca nada de esto.
   =========================================================================== */

.pagina-sincro{background:#020a0f}

/* ---------- Portada ---------- */
.sh-hero{position:relative;overflow:hidden;padding:170px 0 84px;background:#020a0f}
.sh-hero:before{content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:linear-gradient(rgba(94,141,158,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(94,141,158,.06) 1px,transparent 1px);
  background-size:42px 42px}
.sh-glow{position:absolute;width:680px;height:680px;right:-6%;top:-260px;border-radius:50%;
  background:rgba(0,157,208,.1);filter:blur(60px);pointer-events:none}
.sh-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(420px,1fr) minmax(300px,360px);gap:90px;align-items:center}
.sh-hero-copy{max-width:610px}

.sh-volver{display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;
  color:#8fa0a8;font-size:.78rem;font-weight:700;transition:color .2s,gap .2s}
.sh-volver svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sh-volver:hover{color:var(--lime);gap:14px}

.sh-hero h1{margin:0;font-size:clamp(2.9rem,4.9vw,4.6rem);line-height:.98;letter-spacing:-.045em;font-weight:900}
.sh-hero h1 span{color:var(--lime)}
.sh-lead{max-width:560px;margin:0 0 34px;color:#c1c9cd;font-size:1.02rem;line-height:1.72}
.sh-lead strong{color:#fff}
.sh-cta-row{display:flex;flex-wrap:wrap;gap:14px}

.sh-hero-side{display:grid;gap:4px}
.sh-hero-side article{display:grid;grid-template-columns:52px 1fr;gap:18px;padding:15px 0}
.sh-hero-side article+article{border-top:1px solid rgba(255,255,255,.07)}
.sh-side-icon{width:52px;height:52px;border:1px solid #5c6a72;border-radius:50%;display:grid;place-items:center;background:#081117}
.sh-side-icon svg{width:24px;height:24px;fill:none;stroke:var(--lime);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sh-hero-side h2{margin:4px 0 6px;font-size:.8rem;text-transform:uppercase;letter-spacing:.02em}
.sh-hero-side p{margin:0;color:#a8b2b7;font-size:.78rem;line-height:1.55}

/* ---------- El hilo del reparto ---------- */
.sh-hilo{position:relative;padding:76px 0 84px;
  background:radial-gradient(circle at 50% 0,#15212a 0,#0b1319 55%,#080e12 100%)}
.sh-intro{max-width:820px;margin:0 auto 62px;text-align:center}
.sh-intro h2{margin:0 0 20px;font-size:clamp(1.9rem,3vw,2.8rem);line-height:1.15;letter-spacing:-.035em}
.sh-intro>p:last-child{margin:0;color:#aeb8bd;font-size:.95rem;line-height:1.75}

/* El número que aparece en las tres capturas: es el gancho del relato. */
.sh-chip{display:inline-block;padding:2px 11px;border:1px solid rgba(199,237,0,.45);border-radius:5px;
  background:rgba(199,237,0,.1);color:var(--lime);font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.sh-chip-mini{padding:1px 8px;font-size:.9em;font-weight:700}

.sh-paso{margin-bottom:74px}
.sh-paso:last-of-type{margin-bottom:0}
.sh-paso-doble{display:grid;grid-template-columns:1fr minmax(230px,285px);gap:64px;align-items:center}
.sh-paso-copy-ancho{max-width:760px;margin-bottom:32px}

.sh-paso-num{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.sh-paso-num span{font-size:1.5rem;font-weight:900;color:var(--lime);letter-spacing:-.04em;line-height:1}
.sh-paso-num i{flex:1;max-width:180px;height:1px;background:linear-gradient(90deg,var(--lime),rgba(199,237,0,0))}
.sh-paso-donde{display:flex;align-items:center;gap:9px;margin:0 0 14px;
  color:#8ea0a8;font-size:.7rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.sh-paso-donde svg{width:16px;height:16px;fill:none;stroke:var(--lime);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sh-paso h3{margin:0 0 16px;font-size:clamp(1.25rem,2.1vw,1.72rem);line-height:1.25;letter-spacing:-.03em}
.sh-paso p{margin:0;color:#adb7bc;font-size:.92rem;line-height:1.75}

.sh-detalle{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.sh-detalle li{position:relative;padding-left:22px;color:#9fabb1;font-size:.85rem;line-height:1.55}
.sh-detalle li:before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--lime)}

/* ---------- Marco de las capturas ---------- */
.sh-marco{margin:0;border:1px solid #33424c;border-radius:14px;overflow:hidden;background:#0b1218;
  box-shadow:0 34px 78px rgba(0,0,0,.5);transition:transform .3s ease,box-shadow .3s ease}
.sh-marco:hover{transform:translateY(-4px);box-shadow:0 42px 90px rgba(0,0,0,.58)}
.sh-marco img{display:block;width:100%;height:auto}
.sh-lienzo{display:block}
/* En pantallas anchas el panel entra entero: no hace falta el aviso de deslizar. */
.sh-hint{display:none}
.sh-barra{height:36px;padding:0 14px;display:flex;align-items:center;gap:7px;
  border-bottom:1px solid #24333c;background:#0b1218;color:#93a1a8;font-size:.64rem;letter-spacing:.02em}
.sh-barra i{width:7px;height:7px;border-radius:50%;background:#374650;flex:none}
.sh-barra i:first-child{background:var(--lime)}
.sh-barra span{margin-left:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-barra-celular span{margin-left:0}
/* La captura del celular es muy alta (720x1600). Pasada de 300px de ancho se come
   el bloque y deja al texto flotando en el medio de un montón de aire. */
.sh-marco-celular{max-width:285px;justify-self:center;border-radius:20px}

/* ---------- Nota de privacidad ---------- */
.sh-nota{display:flex;align-items:flex-start;gap:13px;max-width:840px;margin:64px auto 0;
  padding:17px 20px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(255,255,255,.03)}
.sh-nota svg{width:19px;height:19px;flex:none;margin-top:1px;fill:none;stroke:#8ea0a8;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sh-nota span{color:#93a0a6;font-size:.8rem;line-height:1.65}

/* ---------- La objeción número uno: "ya tengo un ERP" ---------- */
.sh-erp{padding:64px 0;background:#050f15;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.sh-erp-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:70px;align-items:center}
.sh-erp-copy h2{margin:0 0 20px;font-size:clamp(1.9rem,3.1vw,2.9rem);line-height:1.08;letter-spacing:-.04em}
.sh-erp-copy>p:last-child{margin:0;color:#aeb8bd;font-size:.96rem;line-height:1.75}
.sh-erp-copy strong{color:var(--lime)}
.sh-erp-vias{display:grid;gap:14px}
.sh-erp-vias article{position:relative;padding:24px 26px 24px 68px;border:1px solid rgba(255,255,255,.1);border-radius:10px;
  background:rgba(255,255,255,.03)}
.sh-via-num{position:absolute;left:24px;top:23px;color:var(--lime);font-size:.9rem;font-weight:900;letter-spacing:-.03em}
.sh-erp-vias h3{margin:0 0 8px;font-size:.95rem;letter-spacing:-.01em}
.sh-erp-vias p{margin:0;color:#a4aeb3;font-size:.84rem;line-height:1.65}

/* ---------- De dónde salió (cierra el hilo) ---------- */
.sh-origen{max-width:840px;margin:58px auto 0;padding:22px 26px;border-left:3px solid var(--lime);
  background:linear-gradient(90deg,rgba(199,237,0,.07),rgba(199,237,0,0))}
.sh-origen p{margin:0;color:#c3ccd0;font-size:.95rem;line-height:1.75}
.sh-origen strong{color:#fff}

/* ---------- Lo que ya resuelve ---------- */
.sh-todo{padding:76px 0 70px;background:#020a0f}
.sh-todo .section-heading{margin-bottom:50px}
.sh-todo-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.sh-bloque{padding:32px 30px;border:1px solid rgba(255,255,255,.09);border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  transition:border-color .22s ease}
.sh-bloque:hover{border-color:rgba(199,237,0,.3)}
.sh-bloque-cab{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.sh-bloque-cab svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--lime);stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.sh-bloque-cab h3{margin:0;font-size:1.12rem;letter-spacing:-.025em}
.sh-bloque-idea{margin:0 0 22px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.08);
  color:#dfe6e3;font-size:.9rem;line-height:1.6}
.sh-bloque ul{margin:0;padding:0;list-style:none;display:grid;gap:15px}
.sh-bloque li{position:relative;padding-left:20px;color:#9ba5aa;font-size:.845rem;line-height:1.65}
.sh-bloque li:before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--lime);opacity:.85}
.sh-bloque li b{color:#eef2f1;font-weight:700}
.sh-bloque li em{color:var(--lime);font-style:normal}

/* ---------- Lo que no se ve ---------- */
.sh-fondo{margin-top:26px;padding:30px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.02)}
.sh-fondo-titulo{margin:0 0 24px;color:#8b969c;font-size:.72rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.sh-fondo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.sh-fondo-grid article{display:grid;grid-template-columns:26px 1fr;gap:14px}
.sh-fondo-grid svg{width:24px;height:24px;fill:none;stroke:var(--lime);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sh-fondo-grid h4{margin:2px 0 6px;font-size:.86rem;letter-spacing:-.01em}
.sh-fondo-grid p{margin:0;color:#9ba5aa;font-size:.8rem;line-height:1.6}

/* ---------- Hacia dónde va ---------- */
.sh-viene{padding:70px 0;background:#050f15;border-top:1px solid rgba(255,255,255,.06)}
.sh-viene-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:center}
.sh-viene h2{margin:0 0 18px;font-size:clamp(1.8rem,2.9vw,2.6rem);line-height:1.12;letter-spacing:-.04em}
.sh-viene>div>p:last-child{margin:0;color:#aeb8bd;font-size:.93rem;line-height:1.75}
.sh-viene-lista{display:grid;gap:14px}
/* Borde punteado: señal visual de que esto todavía no está terminado. */
.sh-viene-lista article{display:grid;grid-template-columns:30px 1fr;gap:18px;padding:24px 26px;
  border:1px dashed rgba(199,237,0,.32);border-radius:10px;background:rgba(199,237,0,.03)}
.sh-viene-lista svg{width:28px;height:28px;fill:none;stroke:var(--lime);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sh-viene-lista h3{margin:2px 0 8px;font-size:.95rem;letter-spacing:-.01em}
.sh-viene-lista p{margin:0;color:#a4aeb3;font-size:.84rem;line-height:1.65}
.sh-viene-lista b{color:#e7edea}
.sh-viene-lista em{color:var(--lime);font-style:normal}

/* ---------- Cierre ---------- */
.sh-cierre{padding:80px 0;background:radial-gradient(circle at 15% 30%,#17252c 0,#081015 47%,#05090c 100%)}
.sh-cierre-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:70px;align-items:center}
.sh-cierre h2{margin:0 0 18px;font-size:clamp(2rem,3.4vw,3.2rem);line-height:1.05;letter-spacing:-.045em}
.sh-cierre p:last-child{max-width:520px;margin:0;color:#aeb8bd;line-height:1.72}
.sh-cierre-acciones{display:grid;gap:13px;justify-items:stretch}
.sh-cierre-acciones .button{width:100%}

/* ---------- Adaptación a pantallas chicas ---------- */
@media(max-width:1180px){
  .sh-hero-grid{gap:52px}
  .sh-paso-doble{gap:44px}
  .sh-erp-grid,.sh-viene-grid{gap:46px}
  .sh-todo-grid{gap:18px}
  .sh-cierre-grid{gap:48px}
}
@media(max-width:900px){
  .sh-hero{padding:140px 0 66px}
  .sh-hero-grid{grid-template-columns:1fr;gap:46px}
  .sh-hero-side{max-width:560px}
  .sh-paso-doble{grid-template-columns:1fr;gap:34px}
  .sh-marco-celular{max-width:265px;justify-self:start}
  /* El panel es una captura de escritorio: achicada a 400px no se lee nada.
     Se deja a un ancho legible y se desliza con el dedo. */
  .sh-lienzo{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .sh-lienzo img{width:860px;max-width:none}
  .sh-hint{display:block;padding:9px 14px;border-top:1px solid #24333c;background:#0b1218;
    color:#8ea0a8;font-size:.68rem;letter-spacing:.02em}
  .sh-erp-grid,.sh-viene-grid{grid-template-columns:1fr;gap:34px}
  .sh-todo-grid{grid-template-columns:1fr}
  .sh-fondo-grid{grid-template-columns:1fr;gap:22px}
  .sh-origen{margin-top:44px}
  .sh-cierre-grid{grid-template-columns:1fr;gap:36px}
  .sh-cierre-acciones{justify-items:start}
  .sh-cierre-acciones .button{width:auto}
}
@media(max-width:620px){
  .sh-hero{padding:124px 0 56px}
  .sh-hero h1{font-size:clamp(2.4rem,10vw,3.2rem)}
  .sh-lead{font-size:.92rem}
  .sh-cta-row .button{width:100%}
  .sh-hilo{padding:58px 0 64px}
  .sh-intro{margin-bottom:46px;text-align:left}
  .sh-paso{margin-bottom:56px}
  /* En el teléfono, a ancho completo la captura del teléfono queda enorme. */
  .sh-marco-celular{max-width:265px;justify-self:center}
  .sh-erp,.sh-viene{padding:56px 0}
  .sh-erp-vias article{padding:20px 20px 20px 58px}
  .sh-via-num{left:20px;top:19px}
  .sh-todo{padding:58px 0 56px}
  .sh-bloque{padding:26px 22px}
  .sh-fondo{padding:24px 20px}
  .sh-viene-lista article{padding:20px;grid-template-columns:26px 1fr;gap:14px}
  .sh-origen{padding:18px 20px}
  .sh-nota{margin-top:46px}
  .sh-cierre-acciones{justify-items:stretch}
  .sh-cierre-acciones .button{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .sh-marco,.sh-bloque,.sh-volver{transition:none}
  .sh-marco:hover{transform:none}
}