/* ==========================================================================
   NASHIRA — alma: el mostrador de una paquetería.
   Cartón kraft, cinta de embalaje, etiquetas con cordel y QR, sellos de entrega y recibos perforados.
   Paleta de la app: cobre #C25928 · pergamino #F7F5F0 · verde pino (éxito) #2A6B4F.
   ========================================================================== */
body.np { --c: #C25928; --cg: #F0A070; --cd: #A8471A; --np-paper: #F7F5F0; --np-paper2: #EFE9DD; --np-kraft: #D8BC92; --np-kraft2: #C6A474; --np-ink: #1f1510; --np-ok: #2A6B4F; --np-oks: #E2F0E8; --np-line: #e4d9c6; }

/* ---------- Hero: panel oscuro de cartón con mostrador ---------- */
.np-hero { position: relative; border-radius: 28px; overflow: hidden; isolation: isolate; color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(110% 70% at 50% 108%, #8a3c17 0%, #4e2210 28%, #2a140a 52%, #130b06 100%); }
.np-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(90deg, rgba(255,214,170,.055) 0 2px, transparent 2px 9px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%); mask-image: linear-gradient(180deg, transparent 0%, #000 70%); }
.np-hero::after { content: ''; position: absolute; z-index: -1; left: 50%; bottom: -26%; width: 70%; height: 46%; translate: -50% 0; pointer-events: none; background: radial-gradient(ellipse at 50% 100%, rgba(255,196,140,.9), rgba(240,150,90,.35) 38%, transparent 70%); filter: blur(8px); }
.np-top { position: relative; z-index: 3; padding: clamp(40px, 7vh, 84px) 20px 0; max-width: 980px; display: grid; justify-items: center; }
.np-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; border: 1px solid rgba(255,214,170,.35); border-radius: 99px; font: 500 .74rem "Geist Mono", monospace; letter-spacing: .1em; color: #ffd9b8; background: rgba(255,214,170,.07); }
.np-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--cg); box-shadow: 0 0 0 4px rgba(240,160,112,.22); animation: pulse 2.4s infinite; }
.np-top h1 { font-size: clamp(2.3rem, 4.6vw, 4.2rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.03; margin: 1.3rem 0 1rem; max-width: 18ch; color: #fff; }
.np-top h1 em { font-family: 'Bricolage Grotesque', 'Geist', sans-serif; font-style: normal; font-weight: 600; letter-spacing: -.035em; color: var(--cg); }
.np-top .lead { color: rgba(255,238,222,.82); max-width: 56ch; font-size: clamp(1.05rem, 1.25vw, 1.22rem); }
.np-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 1.6rem; }
.np-cta .btn-primary { background: var(--c); border-color: var(--c); color: #fff; } .np-cta .btn-primary:hover { background: var(--cd); }
.np-cta .btn-line { background: transparent; border: 1px solid rgba(255,214,170,.45); color: #fff; } .np-cta .btn-line:hover { background: rgba(255,214,170,.12); border-color: rgba(255,214,170,.7); }

.np-stage { position: relative; z-index: 2; width: 100%; max-width: 1060px; height: 604px; margin-top: 34px; display: grid; place-items: end center; }
.np-phone-wrap { position: relative; width: 292px; margin-bottom: -46px; }

/* ---------- Teléfono de maqueta ---------- */
.np-ph { position: relative; width: 100%; aspect-ratio: 292 / 600; border-radius: 40px; background: #1b110b; padding: 9px; box-shadow: 0 50px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,214,170,.18), inset 0 0 0 2px #3a2a1f; color: #1f1510; text-align: left; }
.np-ph .np-notch { position: absolute; z-index: 5; top: 17px; left: 50%; translate: -50% 0; width: 76px; height: 20px; border-radius: 99px; background: #0e0804; }
.np-scr { position: relative; height: 100%; border-radius: 32px; overflow: hidden; background: var(--np-paper); display: flex; flex-direction: column; font: 400 12px/1.35 'Geist', sans-serif; }
.np-scr .np-sb { flex: none; height: 34px; padding: 11px 20px 0; display: flex; justify-content: space-between; font: 600 10px 'Geist', sans-serif; color: #3b2a1e; }
.np-h { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 14px 8px; }
.np-h b { font-size: 15px; letter-spacing: -.02em; }
.np-h .np-on { font: 500 9.5px 'Geist Mono', monospace; color: var(--np-ok); display: inline-flex; gap: 5px; align-items: center; } .np-h .np-on i { width: 6px; height: 6px; border-radius: 50%; background: #34a574; animation: pulse 2s infinite; }
.np-body { flex: 1; min-height: 0; overflow: hidden; padding: 0 12px; display: grid; gap: 8px; align-content: start; position: relative; }
.np-nav { flex: none; height: 54px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; background: #fff; border-top: 1px solid var(--np-line); padding: 0 6px; }
.np-nav span { display: grid; justify-items: center; gap: 2px; font: 500 8.5px 'Geist', sans-serif; color: #8b7a6a; } .np-nav svg { width: 17px; height: 17px; }
.np-nav span.on { color: var(--cd); }
.np-nav span.mid { margin-top: -22px; } .np-nav span.mid i { width: 42px; height: 42px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 16px -6px rgba(194,89,40,.8); } .np-nav span.mid svg { width: 20px; height: 20px; }
.np-lab { font: 600 9px 'Geist', sans-serif; text-transform: uppercase; letter-spacing: .09em; color: #8b7a6a; margin-bottom: 3px; }
.np-inp { height: 34px; border-radius: 10px; background: #fff; border: 1px solid var(--np-line); padding: 0 11px; display: flex; align-items: center; gap: 4px; font: 500 13px 'Geist', sans-serif; }
.np-inp .caret { width: 1.5px; height: 15px; background: var(--c); animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } }
.np-inp.num { font-family: 'Geist Mono', monospace; letter-spacing: .02em; }
.np-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.np-chips span { min-height: 28px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--np-line); background: #fff; display: inline-flex; align-items: center; font: 500 11px 'Geist', sans-serif; transition: all .25s; }
.np-chips span.on { background: var(--c); border-color: var(--c); color: #fff; }
.np-seg { display: grid; grid-template-columns: 1fr 1fr; border-radius: 10px; background: #ece4d4; padding: 3px; } .np-seg span { height: 28px; display: grid; place-items: center; border-radius: 8px; font: 600 11px 'Geist', sans-serif; color: #7a6a5a; transition: all .25s; } .np-seg span.on { background: #fff; color: var(--cd); box-shadow: 0 1px 3px rgba(60,30,10,.2); }
.np-bar { flex: none; padding: 8px 12px 8px; background: linear-gradient(0deg, var(--np-paper) 70%, transparent); }
.np-btn { width: 100%; height: 42px; border-radius: 12px; background: var(--c); color: #fff; border: 0; font: 700 13px 'Geist', sans-serif; display: flex; align-items: center; justify-content: center; gap: 7px; transition: transform .15s, background .25s; }
.np-btn.press { transform: scale(.96); background: var(--cd); } .np-btn.ok { background: var(--np-ok); }
.np-btn.wa { background: #1fa855; } .np-btn.ghost { background: #fff; color: var(--cd); border: 1.5px solid var(--c); }
.np-btn svg { width: 16px; height: 16px; }
.np-photo { position: relative; height: 112px; border-radius: 14px; overflow: hidden; background: #2a1c12; display: grid; place-items: center; color: #f3d9bf; }
.np-photo .np-cam { display: grid; justify-items: center; gap: 4px; font: 600 11px 'Geist', sans-serif; } .np-photo .np-cam svg { width: 26px; height: 26px; }
.np-photo .np-shot { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .35s; background: linear-gradient(160deg, #d8c3a3, #b89b72); } .np-photo.shot .np-shot { opacity: 1; } .np-photo.shot .np-cam { opacity: 0; }
.np-photo .np-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; } .np-photo.flash .np-flash { animation: flash .5s ease-out; } @keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }
.np-photo .np-chg { position: absolute; right: 7px; bottom: 7px; padding: 5px 9px; border-radius: 9px; background: rgba(0,0,0,.6); color: #fff; font: 600 9.5px 'Geist', sans-serif; opacity: 0; transition: opacity .3s; } .np-photo.shot .np-chg { opacity: 1; }
.np-info { min-height: 22px; font: 500 10.5px 'Geist', sans-serif; color: var(--cd); background: #faece2; border-radius: 9px; padding: 4px 9px; opacity: 0; transition: opacity .3s; display: flex; gap: 6px; align-items: center; } .np-info.on { opacity: 1; }
.np-info svg { width: 12px; height: 12px; }

/* QR de maqueta */
.np-qr { display: block; width: 100%; height: 100%; } .np-qr rect { fill: #1f1510; }
.np-qrbox { position: relative; background: #fff; border-radius: 12px; padding: 9px; border: 1px solid var(--np-line); }
.np-qrbox svg { width: 100%; height: auto; display: block; } .np-qrbox svg rect { opacity: 0; animation: qrIn .9s calc(var(--i, 0) * 1ms) forwards; } @keyframes qrIn { to { opacity: 1; } }
.np-code { text-align: center; } .np-code small { font: 600 9px 'Geist', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8b7a6a; display: block; } .np-code b { font: 700 28px 'Geist Mono', monospace; letter-spacing: .08em; color: var(--np-ink); }
.np-okrow { display: flex; align-items: center; gap: 9px; } .np-okrow .tk { width: 30px; height: 30px; border-radius: 50%; background: var(--np-ok); color: #fff; display: grid; place-items: center; } .np-okrow .tk svg { width: 16px; height: 16px; }
.np-okrow b { font-size: 15px; letter-spacing: -.02em; display: block; } .np-okrow small { color: #8b7a6a; font-size: 10.5px; }

/* escáner */
.np-scan { position: relative; height: 150px; border-radius: 14px; background: radial-gradient(circle at 50% 40%, #3a281b, #1b110b); overflow: hidden; }
.np-scan .cn { position: absolute; width: 22px; height: 22px; border: 3px solid var(--cg); } .np-scan .cn.a { left: 38px; top: 26px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; } .np-scan .cn.b { right: 38px; top: 26px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; } .np-scan .cn.c { left: 38px; bottom: 26px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; } .np-scan .cn.d { right: 38px; bottom: 26px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.np-scan .tg { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; translate: -50% -50%; background: #fff; border-radius: 6px; padding: 4px; opacity: .92; transform: rotate(-4deg); }
.np-scan .ln { position: absolute; left: 36px; right: 36px; top: 30px; height: 2px; border-radius: 2px; background: var(--cg); box-shadow: 0 0 14px 3px rgba(240,160,112,.8); animation: scanY 1.4s ease-in-out infinite alternate; } @keyframes scanY { to { transform: translateY(88px); } }
.np-scan.found .ln { animation: none; opacity: 0; } .np-scan.found .cn { border-color: #5ee0a8; }
.np-scan .hint { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 500 9.5px 'Geist', sans-serif; color: #f3d9bf; }
.np-card { background: #fff; border: 1px solid var(--np-line); border-radius: 14px; padding: 10px; }
.np-pk { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; }
.np-pk .im { width: 52px; height: 52px; border-radius: 10px; background: linear-gradient(160deg, #d8c3a3, #b89b72); display: grid; place-items: center; overflow: hidden; }
.np-pk b { font-size: 13.5px; letter-spacing: -.02em; display: block; } .np-pk small { color: #8b7a6a; font-size: 10px; display: block; }
.np-sal { display: grid; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--np-line); font-size: 11.5px; }
.np-sal > div { display: flex; justify-content: space-between; } .np-sal .mono { font-family: 'Geist Mono', monospace; }
.np-sal .tot { margin-top: 3px; padding-top: 6px; border-top: 1px solid var(--np-line); font-weight: 700; } .np-sal .tot b { font: 700 20px 'Geist Mono', monospace; letter-spacing: -.04em; color: var(--cd); }
.np-stamp-o { position: absolute; z-index: 6; left: 50%; top: 60%; translate: -50% -50%; rotate: -12deg; padding: 8px 18px; border: 3.5px solid var(--np-ok); color: var(--np-ok); border-radius: 10px; font: 800 24px 'Geist', sans-serif; letter-spacing: .08em; text-transform: uppercase; background: rgba(247,245,240,.82); opacity: 0; transform: scale(2.2); }
.np-stamp-o small { display: block; font: 600 10px 'Geist Mono', monospace; letter-spacing: .06em; text-align: center; }
.np-stamp-o.on { animation: stampIn .5s cubic-bezier(.2,1.5,.4,1) forwards; } @keyframes stampIn { 60% { opacity: 1; transform: scale(.94); } 100% { opacity: 1; transform: scale(1); } }

/* caja */
.np-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--np-line); font-size: 11.5px; } .np-row:first-child { border-top: 0; } .np-row b { font: 600 13px 'Geist Mono', monospace; letter-spacing: -.03em; }
.np-big { text-align: center; padding: 8px 0 2px; } .np-big small { font: 600 9px 'Geist', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #8b7a6a; display: block; } .np-big b { font: 700 28px 'Geist Mono', monospace; letter-spacing: -.05em; color: var(--np-ink); }
.np-diff { border-radius: 10px; padding: 7px 10px; font: 600 11px 'Geist', sans-serif; display: flex; justify-content: space-between; background: #ece4d4; color: #7a6a5a; transition: all .3s; } .np-diff.ok { background: var(--np-oks); color: var(--np-ok); }

/* wasap */
.np-chat { position: absolute; inset: 0; z-index: 4; background: #e6dccb; display: flex; flex-direction: column; transform: translateY(100%); transition: transform .5s cubic-bezier(.2,.9,.3,1); }
.np-chat.on { transform: none; }
.np-chat .ct { flex: none; height: 52px; background: #1f6f4a; color: #fff; display: flex; align-items: center; gap: 9px; padding: 12px 14px 0; font: 600 12.5px 'Geist', sans-serif; } .np-chat .ct i { width: 26px; height: 26px; border-radius: 50%; background: #bfe3d0; color: #1f6f4a; display: grid; place-items: center; font: 700 10px 'Geist', sans-serif; font-style: normal; }
.np-chat .ms { flex: 1; padding: 14px 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; background-image: radial-gradient(rgba(120,90,50,.1) 1px, transparent 1.4px); background-size: 12px 12px; }
.np-bub { align-self: flex-end; max-width: 88%; background: #dcf8c6; border-radius: 12px 12px 3px 12px; padding: 6px; font-size: 11.5px; box-shadow: 0 1px 1px rgba(0,0,0,.12); opacity: 0; transform: translateY(10px) scale(.96); transition: all .4s var(--ease); } .np-bub.on { opacity: 1; transform: none; }
.np-bub .tj { background: #fff; border-radius: 9px; padding: 8px; display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: center; margin-bottom: 5px; } .np-bub .tj .q { width: 64px; height: 64px; } .np-bub .tj b { font-size: 10.5px; display: block; color: var(--cd); letter-spacing: .02em; } .np-bub .tj small { font: 700 13px 'Geist Mono', monospace; letter-spacing: .06em; } .np-bub .tj em { font-style: normal; font-size: 9.5px; color: #8b7a6a; display: block; }
.np-bub p { padding: 0 3px; line-height: 1.35; } .np-bub time { display: block; text-align: right; font-size: 8.5px; color: #7a8a6a; padding: 1px 3px 0; }

/* página del cliente (/n/token) */
.np-pub-h { background: linear-gradient(135deg, var(--cd), var(--c)); color: #fff; padding: 8px 14px 14px; border-radius: 0 0 22px 22px; } .np-pub-h small { font: 500 9.5px 'Geist Mono', monospace; letter-spacing: .1em; text-transform: uppercase; opacity: .8; display: block; } .np-pub-h b { font-size: 17px; letter-spacing: -.03em; display: block; margin-top: 2px; } .np-pub-h span { font-size: 10.5px; opacity: .85; }
.np-tl { display: flex; align-items: center; gap: 0; margin-top: 8px; } .np-tl i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); flex: none; } .np-tl i.on { background: #fff; } .np-tl s { flex: 1; height: 2px; background: rgba(255,255,255,.35); } .np-tl s.on { background: #fff; }
.np-tlt { display: flex; justify-content: space-between; font: 500 8.5px 'Geist', sans-serif; opacity: .85; margin-top: 3px; }
.np-kv { display: flex; justify-content: space-between; font-size: 11.5px; padding: 5px 0; border-top: 1px solid var(--np-line); } .np-kv:first-child { border-top: 0; } .np-kv b { font-weight: 600; } .np-kv .mono { font-family: 'Geist Mono', monospace; }
.np-badge { font: 700 9px 'Geist', sans-serif; padding: 2px 8px; border-radius: 99px; background: var(--np-oks); color: var(--np-ok); } .np-badge.am { background: #fdebd2; color: #a35a10; }
.np-link { text-align: center; font: 600 11px 'Geist', sans-serif; color: var(--cd); text-decoration: underline; text-underline-offset: 3px; padding: 4px 0 8px; }
.np-scrl { animation: npScroll 9s ease-in-out infinite alternate; animation-delay: 1.4s; } @keyframes npScroll { 0%, 10% { transform: translateY(0); } 90%, 100% { transform: translateY(var(--np-sc, -120px)); } }

/* ---------- Etiquetas con cordel (hero) ---------- */
.np-tag { position: absolute; z-index: 1; top: -30px; width: 190px; transform-origin: 50% 0; animation: tagSwing 5.5s ease-in-out infinite alternate; filter: drop-shadow(0 18px 18px rgba(0,0,0,.45)); }
.np-tag.l { left: 4%; --h: 118px; } .np-tag.r { right: 4%; --h: 168px; animation-delay: -2.4s; animation-duration: 6.4s; } .np-tag.l2 { left: 22%; --h: 232px; animation-delay: -1.1s; animation-duration: 5.9s; scale: .82; } .np-tag.r2 { right: 22%; --h: 262px; animation-delay: -3.3s; animation-duration: 6.9s; scale: .82; }
@keyframes tagSwing { from { transform: rotate(-3.6deg); } to { transform: rotate(3.6deg); } }
.np-tag .str { width: 2px; height: var(--h); background: linear-gradient(#e8cba2, #b99568); margin: 0 auto; position: relative; } .np-tag .str::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 14px; height: 14px; translate: -50% 0; border: 2.5px solid #e0c298; border-radius: 50%; }
.np-tag .bd { position: relative; margin-top: 4px; padding: 26px 16px 16px; background: linear-gradient(165deg, #e2c89f, var(--np-kraft) 55%, #c9a672); clip-path: polygon(14% 0, 86% 0, 100% 16%, 100% 100%, 0 100%, 0 16%); color: #3b2515; text-align: left; font: 500 11px/1.35 'Geist', sans-serif; }
.np-tag .bd::before { content: ''; position: absolute; left: 50%; top: 8px; width: 12px; height: 12px; translate: -50% 0; border-radius: 50%; background: #2a140a; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.np-tag .bd small { font: 600 8.5px 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #7a4a24; display: block; }
.np-tag .bd b { font-size: 15px; letter-spacing: -.02em; display: block; color: #2a140a; } .np-tag .bd .cd { font: 700 17px 'Geist Mono', monospace; letter-spacing: .06em; margin: 4px 0 2px; display: block; }
.np-tag .bd .q { width: 64px; height: 64px; background: #fff; padding: 4px; border-radius: 5px; margin-top: 6px; display: block; }
.np-tag .bd .st { display: inline-block; margin-top: 6px; padding: 3px 8px; border: 2px solid var(--np-ok); color: var(--np-ok); font: 800 11px 'Geist', sans-serif; letter-spacing: .08em; border-radius: 6px; rotate: -6deg; }

/* ---------- Cinta de embalaje ---------- */
.np-tape { position: relative; overflow: hidden; background: var(--c); color: #fff3e6; padding: 13px 0; transform: rotate(-1.2deg); margin: 30px -2% 10px; box-shadow: 0 10px 20px -12px rgba(120,50,15,.7); border-block: 3px solid rgba(255,255,255,.18); z-index: 4; }
.np-tape .tr { display: flex; width: max-content; gap: 38px; animation: tapeRun 38s linear infinite; font: 700 .86rem 'Geist Mono', monospace; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.np-tape .tr span { display: inline-flex; align-items: center; gap: 38px; } .np-tape .tr span::after { content: '✦'; opacity: .6; font-size: .8em; }
@keyframes tapeRun { to { transform: translateX(-50%); } }

/* ---------- Secciones ---------- */
.np-sec-paper { background: var(--np-paper); } .np-sec-kraft { background: var(--np-paper2); } .np-sec-dark { background: #150d08; color: #f6e8da; }
.np-sec-dark .eyebrow { color: var(--cg); } .np-sec-dark .lead { color: rgba(255,232,214,.78); } .np-sec-dark h2 { color: #fff; }
.np-sec-paper .eyebrow, .np-sec-kraft .eyebrow, .np-sec-white .eyebrow { color: var(--cd); }
.np-strip { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--np-paper); }
.np-strip > div { padding: 30px 28px 34px; display: grid; gap: 8px; align-content: start; border-left: 1px dashed #c9b79a; } .np-strip > div:first-child { border-left: 0; }
.np-strip svg { width: 26px; height: 26px; color: var(--c); } .np-strip h3 { font-size: 1.28rem; letter-spacing: -.025em; } .np-strip p { color: var(--mut); font-family: var(--serif); font-size: 1.08rem; line-height: 1.4; }
.np-strip .n { font: 700 2.4rem 'Geist Mono', monospace; letter-spacing: -.06em; color: var(--cd); line-height: 1; }
@media (max-width: 860px) { .np-strip { grid-template-columns: 1fr; } .np-strip > div { border-left: 0; border-top: 1px dashed #c9b79a; } .np-strip > div:first-child { border-top: 0; } }

/* recorrido por pestañas */
.np .sc-stage { background: color-mix(in srgb, var(--c) 11%, #efe6d6); }
.np .sc-pane .np-host { display: grid; place-items: center; padding: 6px 0 0; }
.np .np-host .np-ph { width: min(292px, 78vw); }
.np-info-b { display: grid; gap: .7rem; max-width: 62ch; padding-top: 6px; } .np-info-b h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); letter-spacing: -.035em; } .np-info-b p { color: var(--mut); font-family: var(--serif); font-size: 1.15rem; line-height: 1.42; }
.np-info-b ul { display: grid; gap: 8px; margin-top: 4px; } .np-info-b li { display: flex; gap: 10px; font-size: .97rem; color: var(--ink2); } .np-info-b li svg { width: 17px; height: 17px; color: var(--np-ok); flex: none; margin-top: 3px; }

/* simulador de multa */
.np-fine { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 84px); align-items: center; }
.np-fine > * { min-width: 0; }
.np-sim { position: relative; background: #fffdf8; border-radius: 6px 6px 0 0; padding: 26px 26px 38px; box-shadow: 0 30px 50px -30px rgba(70,35,10,.5), 0 0 0 1px var(--np-line); font-family: 'Geist Mono', monospace; color: var(--np-ink); }
.np-sim::after { content: ''; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: linear-gradient(-45deg, transparent 8px, #fffdf8 0), linear-gradient(45deg, transparent 8px, #fffdf8 0); background-size: 16px 16px; background-position: left bottom; background-repeat: repeat-x; filter: drop-shadow(0 4px 3px rgba(70,35,10,.12)); }
.np-sim .hd { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-bottom: 1px dashed #cdb998; padding-bottom: 12px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: #8a6f58; } .np-sim .hd b { color: var(--cd); font-weight: 600; }
.np-days { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin: 18px 0 8px; }
.np-days button { appearance: none; border: 1px solid var(--np-line); background: #fff; border-radius: 8px; padding: 8px 0 6px; font: 600 .8rem 'Geist Mono', monospace; color: #8a6f58; display: grid; gap: 2px; justify-items: center; cursor: pointer; transition: all .25s; }
.np-days button small { font: 500 .56rem 'Geist', sans-serif; letter-spacing: .04em; text-transform: uppercase; opacity: .8; }
.np-days button.fr { background: var(--np-oks); border-color: #c4e0d0; color: var(--np-ok); } .np-days button.fi { background: #fdebd2; border-color: #f2cf9f; color: #a35a10; } .np-days button.tp { background: #f9d9c8; border-color: #eba98a; color: var(--cd); }
.np-days button.sel { outline: 2.5px solid var(--c); outline-offset: 1px; transform: translateY(-3px); background: var(--c); border-color: var(--c); color: #fff; }
.np-sim input[type=range] { width: 100%; accent-color: var(--c); margin: 4px 0 14px; }
.np-sim .ln { display: flex; justify-content: space-between; padding: 7px 0; font-size: .86rem; border-bottom: 1px dotted #d9c7a6; } .np-sim .ln span:first-child { font-family: 'Geist', sans-serif; color: #5f4630; }
.np-sim .pt { display: flex; align-items: center; gap: 9px; margin: 10px 0 2px; font: 500 .82rem 'Geist', sans-serif; color: #5f4630; cursor: pointer; } .np-sim .pt input { width: 18px; height: 18px; accent-color: var(--np-ok); }
.np-sim .tt { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; font: 600 .78rem 'Geist', sans-serif; letter-spacing: .1em; text-transform: uppercase; } .np-sim .tt b { font: 700 2.5rem 'Geist Mono', monospace; letter-spacing: -.06em; color: var(--cd); text-transform: none; }
.np-sim .sello { position: absolute; right: 24px; bottom: 112px; rotate: 9deg; padding: 6px 14px; border: 3px solid var(--np-ok); color: var(--np-ok); border-radius: 8px; font: 800 1.05rem 'Geist', sans-serif; letter-spacing: .08em; opacity: .9; transition: all .35s; background: rgba(255,253,248,.7); }
.np-sim .sello.fi { border-color: var(--c); color: var(--c); } .np-sim .sello.ab { border-color: #b3261e; color: #b3261e; }
.np-sim .tp { color: #8a6f58; font: 500 .7rem 'Geist', sans-serif; margin-top: 12px; }
@media (max-width: 980px) { .np-fine { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .np-sim .sello { bottom: 118px; right: 14px; } .np-days { gap: 3px; } .np-days button { padding: 7px 0 5px; font-size: .72rem; } .np-days button small { display: none; } .np-sim { padding: 20px 16px 34px; } .np-sim .sello { font-size: .86rem; } }

/* panel del dueño */
.np-own { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 84px); align-items: center; } .np-own > * { min-width: 0; }
.np-own ul { display: grid; gap: 0; margin-top: 1.6rem; } .np-own li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 15px 0; border-top: 1px solid rgba(255,214,170,.16); } .np-own li:last-child { border-bottom: 1px solid rgba(255,214,170,.16); }
.np-own li svg { width: 18px; height: 18px; color: var(--cg); margin-top: 3px; } .np-own li b { display: block; color: #fff; font-weight: 600; } .np-own li span { color: rgba(255,232,214,.7); font-size: .95rem; }
.np-win { background: #fbf8f2; border-radius: 16px; overflow: hidden; box-shadow: 0 50px 90px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,214,170,.18); color: #1f1510; font-family: 'Geist', sans-serif; }
.np-win .bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #efe6d6; border-bottom: 1px solid var(--np-line); } .np-win .bar i { width: 9px; height: 9px; border-radius: 50%; background: #d7c3a4; } .np-win .bar span { margin-left: 10px; font: 500 10.5px 'Geist Mono', monospace; color: #8b7a6a; }
.np-win .in { padding: 16px; display: grid; gap: 12px; }
.np-win .hd { display: flex; justify-content: space-between; align-items: center; } .np-win .hd b { font-size: 15px; letter-spacing: -.02em; } .np-win .hd span { font: 500 10px 'Geist Mono', monospace; color: var(--np-ok); display: inline-flex; gap: 6px; align-items: center; } .np-win .hd span i { width: 6px; height: 6px; border-radius: 50%; background: #34a574; animation: pulse 2s infinite; }
.np-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.np-tile { background: #fff; border: 1px solid var(--np-line); border-radius: 12px; padding: 10px 12px; } .np-tile small { font: 600 9px 'Geist', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8b7a6a; display: block; } .np-tile b { font: 700 24px 'Geist Mono', monospace; letter-spacing: -.05em; display: block; margin-top: 3px; } .np-tile b.am { color: #b86a14; } .np-tile b.rd { color: #b3261e; }
.np-2c { display: grid; grid-template-columns: 1.15fr .85fr; gap: 8px; } .np-2c > div { background: #fff; border: 1px solid var(--np-line); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.np-2c h4 { font: 600 9px 'Geist', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8b7a6a; margin-bottom: 9px; }
.np-bars { display: flex; align-items: flex-end; gap: 5px; height: 96px; } .np-bars span { flex: 1; border-radius: 4px 4px 0 0; background: #e8d3bf; height: var(--h); transform-origin: bottom; animation: barUp 1.2s var(--ease) both; animation-delay: calc(var(--i) * 60ms); } .np-bars span.pk { background: var(--c); } @keyframes barUp { from { transform: scaleY(0); } }
.np-hx { display: flex; justify-content: space-between; font: 500 8.5px 'Geist Mono', monospace; color: #a08b78; margin-top: 5px; }
.np-pl { display: grid; gap: 7px; } .np-pl > div { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; gap: 8px; } .np-pl small { color: #8b7a6a; display: block; font-size: 9.5px; } .np-pl b.mono { font: 600 11.5px 'Geist Mono', monospace; color: var(--cd); white-space: nowrap; }
.np-ok { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 7px 9px; background: var(--np-oks); color: var(--np-ok); border-radius: 9px; font: 600 10.5px 'Geist', sans-serif; } .np-ok svg { width: 14px; height: 14px; }
@media (max-width: 980px) { .np-own { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .np-tiles { grid-template-columns: 1fr 1fr; } .np-2c { grid-template-columns: 1fr; } }

/* sin conexión */
.np-off { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 84px); align-items: center; } .np-off > * { min-width: 0; }
.np-oc { background: #fff; border-radius: 20px; padding: 20px; border: 1px solid var(--np-line); box-shadow: 0 30px 60px -36px rgba(70,35,10,.5); display: grid; gap: 14px; }
.np-st { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 8px 15px; border-radius: 99px; font: 600 .86rem 'Geist', sans-serif; background: var(--np-oks); color: var(--np-ok); transition: all .4s; } .np-st i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; } .np-st.off { background: #fde4dc; color: #b3261e; } .np-st.sy { background: #fdebd2; color: #a35a10; } .np-st.sy i { animation: pulse 1s infinite; }
.np-q { display: grid; gap: 8px; } .np-q > div { display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; align-items: center; padding: 11px 13px; border: 1px solid var(--np-line); border-radius: 12px; background: #fffdf9; transition: all .4s; opacity: 0; transform: translateY(8px); } .np-q > div.on { opacity: 1; transform: none; }
.np-q .ic { width: 34px; height: 34px; border-radius: 10px; background: #faece2; color: var(--cd); display: grid; place-items: center; } .np-q .ic svg { width: 17px; height: 17px; } .np-q b { font-size: .93rem; display: block; letter-spacing: -.01em; } .np-q small { color: var(--mut); font-size: .76rem; }
.np-q .s { font: 600 .72rem 'Geist Mono', monospace; color: #a35a10; background: #fdebd2; padding: 3px 9px; border-radius: 99px; transition: all .4s; } .np-q > div.done .s { background: var(--np-oks); color: var(--np-ok); }
.np-inst { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1.4rem; } .np-inst span { display: inline-flex; gap: 8px; align-items: center; padding: .5rem .95rem; border: 1px solid #cfc5b0; border-radius: 99px; font-weight: 500; font-size: .9rem; background: #fffdf9; } .np-inst svg { width: 16px; height: 16px; color: var(--c); }
@media (max-width: 900px) { .np-off { grid-template-columns: 1fr; } }

/* planes en definición */
.np-mods { display: grid; gap: 22px; }
.np-mods .g { display: grid; gap: 10px; } .np-mods .lab { font: 500 .72rem 'Geist Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #8a6f58; }
.np-mods .cs { display: flex; flex-wrap: wrap; gap: 9px; } .np-mods .cs span { display: inline-flex; gap: 8px; align-items: center; padding: .55rem 1rem; border-radius: 99px; background: #fffdf9; border: 1px solid var(--np-line); font-weight: 500; font-size: .93rem; transition: transform .25s, border-color .25s; } .np-mods .cs span:hover { transform: translateY(-2px); border-color: var(--c); }
.np-mods .cs span::before { content: ''; width: 15px; height: 15px; flex: none; background: var(--np-ok); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.500l4.500 4.500L19 7.500'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.500l4.500 4.500L19 7.500'/%3E%3C/svg%3E") center/contain no-repeat; }
.np-mods .cs.opt span::before { background: var(--c); }
.np-mods .cs.inc span { background: var(--np-oks); border-color: #c4e0d0; }
.np-prov { display: inline-block; vertical-align: middle; margin-left: .7rem; padding: .25rem .7rem; border-radius: 99px; border: 1px dashed var(--c); color: var(--cd); font: 500 .7rem 'Geist Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.np-quote { margin-top: 26px; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: 22px 26px; border: 1px dashed #c9a67a; border-radius: 16px; background: #fffdf9; } .np-quote b { display: block; font-size: 1.12rem; letter-spacing: -.02em; } .np-quote span { color: var(--mut); font-size: .95rem; }
.np-quote .btn { white-space: nowrap; background: #1fa855; border-color: #1fa855; color: #fff; font-weight: 600; } .np-quote .btn:hover { background: #17924a; } .np-quote .btn svg { width: 18px; height: 18px; }
@media (max-width: 700px) { .np-quote { grid-template-columns: 1fr; } }

/* secciones con lista de funciones y FAQ reutilizan .rows y .faq de v2.css */
.np .rows em { color: var(--cd); }

/* mock de escritorio (pestañas de la portada) */
.mk.n { --c: #C25928; --mk-bg: #f7f5f0; --mk-bd: #eadfcd; --mk-sb: #2a1a12; --mk-sbt: #c9ab98; --mk-sba: #4a2c1e; --mk-sbat: #ffd9c2; }
.mk.n .mk-sb .br { background: #C25928; }

@media (max-width: 1000px) { .np-tag { display: none; } .np-stage { height: 590px; } .np-ann { display: none; } }
@media (max-width: 760px) { .np-hero { min-height: 0; } .np-stage { height: 560px; margin-top: 22px; } .np-phone-wrap { width: min(292px, 82vw); margin-bottom: -40px; } .np-tape { margin-block: 18px 4px; } }
@media (prefers-reduced-motion: reduce) { .np-tag, .np-tape .tr, .np-scan .ln, .np-scrl { animation: none; } }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } }
/* modo captura: sin animaciones temporales */
html.still .np-bars span, html.still .np-qrbox svg rect, html.still .np-scrl, html.still .np-scan .ln { animation: none !important; }
html.still .np-qrbox svg rect { opacity: 1 !important; }
html.still .np-bars span { transform: none !important; }
html.still .np-scr { transition: none !important; }

/* anotaciones junto al teléfono (pestañas) */
.np .sc-stage { min-height: 560px; }
.np-ann { position: absolute; top: var(--y); z-index: 1; width: clamp(150px, 19vw, 236px); display: flex; gap: 11px; align-items: center; font: 500 .84rem/1.32 'Geist', sans-serif; color: #6b4228; }
.np-ann b { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font: 700 .68rem 'Geist Mono', monospace; box-shadow: 0 0 0 5px rgba(194,89,40,.16); }
.np-ann::after { content: ''; flex: none; width: clamp(14px, 4vw, 54px); height: 0; border-top: 1.5px dashed rgba(194,89,40,.55); order: -1; }
.np-ann.l { right: calc(50% + 160px); flex-direction: row-reverse; text-align: right; } .np-ann.l::after { order: 3; }
.np-ann.r { left: calc(50% + 160px); }
.np-quote .btn span { color: #fff; font-size: inherit; }
.np-stamp-o { font-size: 21px; }