/* ═══════════════════════════════════════════════════════════════
   NICACOMP — /sistemas-para-negocios (plantilla "mostrador")

   Los sistemas se venden en el mostrador, así que la página usa el
   lenguaje del punto de venta: ticket térmico, código de barras,
   letra monoespaciada, bordes perforados y un libro de registro.
   Mantiene las superficies oscuras y el celeste de la marca; el papel
   del ticket es el segundo color.

   Todo cuelga de <main class="ms">: esta hoja se carga solo en esta
   página (landings-render.js) y no toca las demás landings, que
   comparten nc-landing.css. Subir SISTEMAS_CSS_V en cada cambio.
   ═══════════════════════════════════════════════════════════════ */
.ms{
  --ms-papel:#F1EFE9;
  --ms-tinta:#17191C;
  --ms-tinta2:#4A4F57;
  --ms-regla:rgba(255,255,255,.16);
  --ms-regla-papel:rgba(23,25,28,.42);
  --ms-sale:cubic-bezier(.16,1,.3,1);
  /* Borde perforado arriba y abajo: dos capas de máscara, cada una cubre la
     mitad del alto y le muerde semicírculos a su borde. */
  --ms-perforado:
    radial-gradient(circle 6px at 50% 0,#0000 97%,#000) 50% 0/16px 51% repeat-x,
    radial-gradient(circle 6px at 50% 100%,#0000 97%,#000) 50% 100%/16px 51% repeat-x;
  overflow-x:clip;
}
.ms-wrap{max-width:1200px;margin:0 auto;padding:0 16px}
@media(min-width:640px){.ms-wrap{padding:0 24px}}
@media(min-width:1100px){.ms-wrap{padding:0 32px}}

/* La miga compartida pierde el margen lateral de .wrap (su padding lo pisa):
   en esta página se le devuelve el mismo gutter que al resto. */
.ms .migas{max-width:1200px;padding:.9rem 16px 0}
@media(min-width:640px){.ms .migas{padding:.9rem 24px 0}}
@media(min-width:1100px){.ms .migas{padding:.9rem 32px 0}}

.ms h1,.ms h2,.ms h3{text-wrap:balance}
.ms p{text-wrap:pretty}

.ms-ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.ms-ctas .btn{min-height:48px}
@media(max-width:479px){.ms-ctas .btn{flex:1 1 100%}}

/* ═══ PORTADA ══════════════════════════════════════════════════ */
.ms .ms-hero{padding:clamp(2rem,5vw,4.5rem) 0 clamp(3.5rem,7vw,6rem)}
.ms-hero .ms-wrap{display:grid;gap:3.25rem;align-items:center}
@media(min-width:960px){
  .ms-hero .ms-wrap{grid-template-columns:minmax(0,1.35fr) minmax(300px,.8fr);gap:clamp(3rem,6vw,6rem)}
}
.ms-kicker{display:flex;align-items:center;gap:.7rem;font-family:var(--fm);font-size:.82rem;color:var(--cyan);margin-bottom:1.4rem}
.ms-kicker::before{content:"";width:1.6rem;height:2px;background:currentColor;flex-shrink:0}
.ms .ms-hero h1{font-family:var(--fd);font-weight:800;font-size:clamp(2.35rem,1.2rem + 4.6vw,5rem);line-height:.98;letter-spacing:-.035em;max-width:13ch}
.ms-lead{color:var(--text2);font-size:clamp(1.02rem,.95rem + .35vw,1.2rem);line-height:1.65;max-width:46ch;margin-top:1.5rem}

/* ── Ticket de cotización ── */
.ms-ticket{justify-self:center;width:min(100%,350px);transform:rotate(1.5deg);filter:drop-shadow(0 26px 34px rgba(0,0,0,.5))}
@media(min-width:960px){.ms-ticket{justify-self:end;transform:rotate(2.5deg)}}
.ms-ticket-papel{
  background:var(--ms-papel);color:var(--ms-tinta);
  font-family:var(--fm);font-size:.8rem;line-height:1.55;
  padding:2rem 1.4rem 1.7rem;
  -webkit-mask:var(--ms-perforado);mask:var(--ms-perforado);
}
.ms-tk-marca{font-weight:700;font-size:1.3rem;letter-spacing:.22em;text-align:center;padding-left:.22em}
.ms-tk-sub{text-align:center;color:var(--ms-tinta2);font-size:.72rem;margin-top:.25rem}
.ms .ms-tk-titulo{font-family:var(--fm);font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;text-align:center;margin:1.2rem 0 .8rem;padding:.55rem 0;border-block:1px dashed var(--ms-regla-papel)}
.ms-tk-lineas{display:grid;gap:.3rem}
.ms-tk-lineas div{display:flex;align-items:baseline;gap:.5rem}
.ms-tk-lineas dt{display:flex;align-items:baseline;gap:.5rem;flex:1 1 auto;min-width:0;white-space:nowrap}
.ms-tk-lineas dt::after{content:"";flex:1;min-width:1rem;border-bottom:1px dotted var(--ms-regla-papel)}
.ms-tk-lineas dd{font-weight:700;text-align:right}
.ms-tk-total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:1rem;padding-top:.75rem;border-top:2px solid var(--ms-tinta)}
.ms-tk-total span{font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.ms-tk-total strong{font-family:var(--fd);font-size:1.1rem;font-weight:800;line-height:1.15;text-align:right;max-width:13ch;letter-spacing:-.01em}
.ms-tk-datos{list-style:none;margin-top:1.1rem;padding-top:.85rem;border-top:1px dashed var(--ms-regla-papel);font-size:.72rem;color:var(--ms-tinta2);display:grid;gap:.25rem}
.ms-tk-datos li{display:flex;gap:.5rem}
.ms-tk-datos li::before{content:"*";color:var(--ms-tinta)}
.ms-tk-pie{text-align:center;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ms-tinta2)}

/* Código de barras de adorno: un solo degradado con anchos irregulares. */
.ms-barras{color:var(--ms-tinta);background:repeating-linear-gradient(90deg,
  currentColor 0 3px,transparent 3px 4px,currentColor 4px 5px,transparent 5px 7px,
  currentColor 7px 9px,transparent 9px 10px,currentColor 10px 11px,transparent 11px 14px,
  currentColor 14px 15px,transparent 15px 16px,currentColor 16px 19px,transparent 19px 21px,
  currentColor 21px 22px,transparent 22px 23px,currentColor 23px 25px,transparent 25px 28px)}
.ms-tk-barras{height:46px;width:86%;margin:1.3rem auto .45rem}

/* El ticket "sale de la impresora" al cargar. Sin animación, ya está entero. */
@media(prefers-reduced-motion:no-preference){
  .ms-ticket-papel{animation:ms-imprimir 1s var(--ms-sale) .2s both}
  @keyframes ms-imprimir{
    from{clip-path:inset(0 0 100% 0);transform:translateY(-18px)}
    to{clip-path:inset(0);transform:none}
  }
}

/* ═══ ÍNDICE DE SISTEMAS (libro de registro) ═══════════════════ */
.ms-indice{border-top:1px dashed var(--ms-regla);padding:clamp(3rem,6vw,5.5rem) 0 clamp(2rem,4vw,3rem)}
.ms-indice-nota{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1rem;font-family:var(--fm);font-size:.78rem;color:var(--text3);padding-bottom:.85rem;border-bottom:2px solid var(--text)}
.ms-capitulo{display:grid;gap:1.25rem;padding:2.5rem 0 1.25rem}
.ms-capitulo+.ms-capitulo{border-top:1px solid var(--ms-regla)}
@media(min-width:960px){
  .ms-capitulo{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:4rem;padding:3.25rem 0 2rem}
  .ms-cap-cabeza{position:sticky;top:6.5rem;align-self:start}
}
.ms-cap-rango{font-family:var(--fm);font-size:clamp(2rem,1.5rem + 2vw,3.2rem);font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--cyan)}
.ms-cap-rango span{color:var(--text3);font-weight:400;margin:0 .1em}
.ms .ms-cap-cabeza h2{font-family:var(--fd);font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);font-weight:700;line-height:1.12;letter-spacing:-.02em;margin-top:1rem}
.ms-cap-sub{color:var(--text2);font-size:.95rem;max-width:40ch;margin-top:.75rem}

.ms-libro{display:grid}
/* .card-wa (nc-landing.css) la vuelve flex: acá cada fila es una grilla. */
.ms .ms-fila{
  display:grid;grid-template-columns:3rem minmax(0,1fr);
  grid-template-areas:"num tit" "num txt" ". btn";
  column-gap:1rem;padding:1.35rem 0;border-bottom:1px dashed var(--ms-regla);
}
.ms-fila:last-child{border-bottom:0}
.ms-num{grid-area:num;font-family:var(--fm);font-size:1.5rem;font-weight:700;line-height:1;color:var(--text3);padding-top:.1rem;transition:color .2s var(--ms-sale)}
.ms .ms-fila h3{grid-area:tit;font-family:var(--fd);font-size:1.15rem;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.ms .ms-fila p{grid-area:txt;color:var(--text2);font-size:.93rem;line-height:1.6;max-width:60ch;margin:.35rem 0 0}
/* Botón de fila: contorno verde; el verde lleno queda para el CTA principal. */
.ms .ms-wa{grid-area:btn;justify-self:start;margin-top:1rem;min-height:44px;background:transparent;color:var(--wa);border:1px solid rgba(37,211,102,.55);font-size:.88rem;padding:.6rem 1.1rem;transition:background-color .2s var(--ms-sale),color .2s var(--ms-sale),border-color .2s var(--ms-sale)}
.ms .ms-wa:hover{filter:none;background:var(--wa);color:var(--wa-ink);border-color:var(--wa)}
@media(min-width:720px){
  /* La fila sale .75rem a cada lado para que el fondo del hover respire; la
     regla punteada se dibuja aparte para seguir alineada con el texto. */
  .ms .ms-fila{grid-template-columns:4.75rem minmax(0,1fr) auto;grid-template-areas:"num tit btn" "num txt btn";padding:1.5rem .75rem;margin:0 -.75rem;border-bottom:0;position:relative}
  .ms .ms-fila:not(:last-child)::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:0;border-bottom:1px dashed var(--ms-regla)}
  .ms-num{font-size:2.4rem}
  .ms .ms-wa{align-self:center;margin:0 0 0 1.75rem}
}
@media(pointer:fine){
  .ms .ms-fila{transition:background-color .25s var(--ms-sale)}
  .ms .ms-fila:hover{background:rgba(12,149,243,.06)}
  .ms .ms-fila:hover .ms-num{color:var(--cyan)}
}
.ms .ms-fila:focus-within .ms-num{color:var(--cyan)}

/* ═══ CAJAFLOW: plan mensual con talón ═════════════════════════ */
.ms-plan{padding:clamp(2.5rem,5vw,4rem) 0 clamp(3rem,6vw,5rem)}
.ms-plan-tarjeta{display:grid;background:var(--card);border:1px solid var(--border2);border-radius:var(--r);overflow:hidden}
@media(min-width:860px){.ms-plan-tarjeta{grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr)}}
.ms-plan-cuerpo{padding:clamp(1.5rem,4vw,3rem)}
.ms .ms-plan h2{font-family:var(--fd);font-size:clamp(1.5rem,1.1rem + 1.6vw,2.3rem);font-weight:800;line-height:1.1;letter-spacing:-.025em;max-width:20ch}
.ms .ms-plan-cuerpo p{color:var(--text2);max-width:58ch;margin-top:1rem}
.ms-plan-lista{list-style:none;display:grid;gap:.45rem;margin-top:1.3rem;font-family:var(--fm);font-size:.85rem;color:var(--text)}
.ms-plan-lista li{display:flex;gap:.7rem}
.ms-plan-lista li::before{content:"+";color:var(--cyan);font-weight:700}
.ms-plan-talon{
  background:var(--ms-papel);color:var(--ms-tinta);font-family:var(--fm);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;
  padding:2rem 1.5rem;text-align:center;
  /* Perforación del lado que se corta: arriba en el celular, a la izquierda en escritorio. */
  -webkit-mask:radial-gradient(circle 6px at 50% 0,#0000 97%,#000) 50% 0/16px 100% repeat-x;
  mask:radial-gradient(circle 6px at 50% 0,#0000 97%,#000) 50% 0/16px 100% repeat-x;
}
@media(min-width:860px){
  .ms-plan-talon{
    -webkit-mask:radial-gradient(circle 6px at 0 50%,#0000 97%,#000) 0 50%/100% 16px repeat-y;
    mask:radial-gradient(circle 6px at 0 50%,#0000 97%,#000) 0 50%/100% 16px repeat-y;
  }
}
.ms-plan-et{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ms-tinta2)}
.ms-plan-talon strong{font-family:var(--fd);font-size:clamp(2.1rem,1.4rem + 2vw,3.2rem);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.ms-plan-barras{height:44px;width:min(180px,80%);margin-top:1rem}

/* ═══ CÓMO TRABAJAMOS: línea de tiempo ═════════════════════════ */
.ms-proceso{padding:clamp(3rem,6vw,5rem) 0;border-top:1px dashed var(--ms-regla)}
.ms .ms-proceso h2{font-family:var(--fd);font-size:clamp(1.6rem,1.2rem + 1.8vw,2.6rem);font-weight:800;line-height:1.05;letter-spacing:-.03em}
.ms-proceso-sub{color:var(--text2);margin-top:.75rem;max-width:48ch}
.ms-pasos{list-style:none;display:grid;margin-top:2.4rem}
.ms-pasos li{position:relative;padding:0 0 2rem 2.25rem}
.ms-pasos li::before{content:"";position:absolute;left:0;top:.3rem;width:12px;height:12px;background:var(--cyan)}
.ms-pasos li::after{content:"";position:absolute;left:5px;top:1.35rem;bottom:.2rem;border-left:1px dashed var(--ms-regla)}
.ms-pasos li:last-child{padding-bottom:0}
.ms-pasos li:last-child::after{display:none}
.ms-paso-n{font-family:var(--fm);font-size:.78rem;color:var(--cyan)}
.ms .ms-pasos h3{font-family:var(--fd);font-size:1.15rem;font-weight:700;margin-top:.2rem}
.ms .ms-pasos p{color:var(--text2);font-size:.93rem;margin-top:.4rem;max-width:34ch}
@media(min-width:860px){
  .ms-pasos{grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
  .ms-pasos li{padding:2rem 0 0}
  .ms-pasos li::before{top:0}
  .ms-pasos li::after{left:1.6rem;right:-1.6rem;top:5px;bottom:auto;border-left:0;border-top:1px dashed var(--ms-regla)}
}

/* ═══ PREGUNTAS ════════════════════════════════════════════════ */
.ms-faq{padding:clamp(3rem,6vw,5rem) 0;border-top:1px dashed var(--ms-regla)}
.ms-faq .ms-wrap{display:grid;gap:1.75rem}
@media(min-width:960px){.ms-faq .ms-wrap{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:4rem;align-items:start}}
.ms .ms-faq h2{font-family:var(--fd);font-size:clamp(1.6rem,1.2rem + 1.8vw,2.6rem);font-weight:800;line-height:1.05;letter-spacing:-.03em}
.ms-faq-lista{border-top:2px solid var(--text)}
.ms-faq details{border-bottom:1px dashed var(--ms-regla)}
.ms-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:1.25rem;padding:1.15rem 0;font-family:var(--fd);font-weight:600;font-size:1.05rem;line-height:1.35}
.ms-faq summary::-webkit-details-marker{display:none}
.ms-faq summary::after{content:"+";font-family:var(--fm);font-size:1.2rem;color:var(--cyan);flex-shrink:0}
.ms-faq details[open] summary::after{content:"−"}
.ms-faq .faq-body{color:var(--text2);padding:0 0 1.35rem;max-width:62ch}
@media(pointer:fine){.ms-faq summary:hover{color:var(--cyan)}}

/* ═══ CIERRE: la tira de papel ═════════════════════════════════ */
.ms-cierre{background:var(--ms-papel);color:var(--ms-tinta);padding:clamp(3.5rem,8vw,6.5rem) 0;margin-top:1rem;-webkit-mask:var(--ms-perforado);mask:var(--ms-perforado)}
.ms-cierre .ms-wrap{display:grid;gap:1.25rem}
@media(min-width:960px){
  .ms-cierre .ms-wrap{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:4rem;align-items:end}
  .ms .ms-cierre h2{grid-row:1/3}
}
.ms .ms-cierre h2{font-family:var(--fd);font-weight:800;font-size:clamp(2rem,1.2rem + 3.6vw,4.2rem);line-height:1;letter-spacing:-.035em;max-width:15ch}
.ms .ms-cierre p{color:var(--ms-tinta2);font-size:clamp(1.02rem,.95rem + .4vw,1.2rem);max-width:44ch}
.ms-cierre .ms-ctas{margin-top:.5rem}
.ms-btn-tinta{border:1.5px solid var(--ms-tinta);color:var(--ms-tinta);transition:background-color .2s var(--ms-sale),color .2s var(--ms-sale)}
.ms-btn-tinta:hover{background:var(--ms-tinta);color:var(--ms-papel)}
.ms-cierre :focus-visible{outline-color:var(--ms-tinta)}

/* ═══ RELACIONADOS ═════════════════════════════════════════════ */
.ms-rel{padding:clamp(2.5rem,5vw,4rem) 0 clamp(3rem,6vw,5rem)}
.ms .ms-rel h2{font-family:var(--fm);font-size:.82rem;font-weight:500;color:var(--text3)}
.ms-rel-lista{display:grid;margin-top:1rem;border-top:1px solid var(--ms-regla)}
@media(min-width:720px){.ms-rel-lista{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ms-rel-lista a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.05rem 0;border-bottom:1px dashed var(--ms-regla);font-family:var(--fd);font-weight:600;color:var(--text);transition:color .2s var(--ms-sale)}
.ms-rel-lista svg{color:var(--text3);transition:transform .2s var(--ms-sale),color .2s var(--ms-sale)}
@media(min-width:720px){.ms-rel-lista a{padding:1.1rem 1rem}.ms-rel-lista a:first-child{padding-left:0}}
@media(pointer:fine){
  .ms-rel-lista a:hover{color:var(--cyan)}
  .ms-rel-lista a:hover svg{color:var(--cyan);transform:translateX(3px)}
}

@media(prefers-reduced-motion:reduce){
  .ms *,.ms *::before,.ms *::after{transition:none!important;animation:none!important}
}