/* =========================================================
   Movimiento y elementos llamativos
   ========================================================= */

/* Grano de papel */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .45  0 0 0 0 .4  0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Barra de progreso de lectura */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }

/* Botón con relleno */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: translateY(101%); transition: transform .35s cubic-bezier(.7, 0, .2, 1); }
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--ink); }
.btn:hover::before { transform: none; }

/* Hero */
.hero__title { font-size: clamp(2.4rem, 5.4vw, 4.9rem); max-width: none !important; line-height: .98; }
@media (max-width: 980px) { .hero__title { font-size: min(8.6vw, 4.9rem); } }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .08em; }
.hero__title .line > span { display: inline-block; transform: translateY(110%); animation: rise 1s cubic-bezier(.2, .8, .2, 1) forwards; }
.hero__title .line:nth-child(2) > span { animation-delay: .1s; }
.hero__title .line:nth-child(3) > span { animation-delay: .2s; }
.hero__title .line:nth-child(4) > span { animation-delay: .3s; }
@keyframes rise { to { transform: none; } }
.rotator { display: inline-block; color: var(--accent); transition: opacity .3s, transform .3s, filter .3s; }
.rotator.out { opacity: 0; transform: translateY(-.35em); filter: blur(4px); }
.rotator.in { opacity: 0; transform: translateY(.35em); filter: blur(4px); transition: none; }
.dot-accent { color: var(--ink); }

.hero__side { position: relative; }
@keyframes spin { to { transform: rotate(360deg); } }

.ticket { opacity: 0; animation: print 1.1s .5s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes print {
  from { opacity: 0; transform: translateY(-30px) rotate(2deg); clip-path: inset(0 0 100% 0); }
  to { opacity: 1; transform: rotate(2deg); clip-path: inset(-20px -20px -20px -20px); }
}
.ticket__rows div { opacity: 0; animation: fadeIn .4s forwards; }
.ticket__rows div:nth-child(1) { animation-delay: 1.2s; }
.ticket__rows div:nth-child(2) { animation-delay: 1.35s; }
.ticket__rows div:nth-child(3) { animation-delay: 1.5s; }
.ticket__rows div:nth-child(4) { animation-delay: 1.65s; }
@keyframes fadeIn { to { opacity: 1; } }
.ticket__stamp {
  position: absolute; right: 18px; bottom: 64px; padding: 4px 12px; z-index: 1;
  font: 700 1.05rem var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--accent);
  border: 3px solid var(--accent); border-radius: 4px; transform: rotate(-14deg) scale(2.4); opacity: 0;
  animation: stamp .35s 2.1s cubic-bezier(.3, 1.6, .5, 1) forwards; mix-blend-mode: multiply;
}
@keyframes stamp { to { opacity: .9; transform: rotate(-14deg) scale(1); } }

main { overflow-x: clip; }
.cal > *, .pos > *, .wa > *, .dash__row > *, .demos__head > * { min-width: 0; }

/* Servicios con relleno al pasar */
.service {
  position: relative; isolation: isolate;
  grid-template-columns: 56px 240px 1fr 150px; gap: 12px 40px; padding: 38px 20px;
  transition: color .35s;
}
.service::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform .45s cubic-bezier(.7, 0, .2, 1); }
.service__n { grid-row: span 2; font: 500 .85rem var(--mono); color: var(--accent-ink); padding-top: .5em; transition: color .35s; }
.service h3 { grid-column: 2; grid-row: span 2; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.service > p:not(.service__tags) { grid-column: 3; }
.service__tags { grid-column: 3; }
.service__time { grid-column: 4; grid-row: 1; }
.service__demo { grid-column: 4; grid-row: 2; justify-self: end; font-weight: 600; font-size: .92rem; text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 2px; white-space: nowrap; }
.service p, .service__tags, .service__time { transition: color .35s; }
@media (hover: hover) {
  .service:hover { color: var(--paper); }
  .service:hover::before { transform: scaleY(1); transform-origin: top; }
  .service:hover p, .service:hover .service__time { color: #c7cce0 !important; }
  .service:hover .service__tags { color: #9aa2c4 !important; }
  .service:hover .service__n { color: var(--accent); }
}

/* Revelado al hacer scroll (solo si JS está activo) */
.js [data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity .9s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.hero [data-reveal] { transition-delay: .45s; }
.process { border-top: 0; position: relative; }
.process::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--ink); transform-origin: left; transition: transform 1.2s .2s cubic-bezier(.7, 0, .2, 1); }
.js .process::before { transform: scaleX(0); }
.js .process.is-in::before { transform: none; }
.process li::before { font-size: 2.6rem; font-family: var(--display); font-weight: 700; letter-spacing: -.04em; color: var(--accent); content: counter(p, decimal-leading-zero); line-height: 1; }

.contact__title { display: inline-block; transition: color .3s; }
.contact__title:hover { color: var(--accent-ink); }

/* =========================================================
   Demos
   ========================================================= */
.demos { background: var(--ink); color: #e9ecf7; padding: 120px 0; position: relative; overflow: hidden; }
.demos::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(#ffffff14 1px, transparent 1px); background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.demos .wrap { position: relative; z-index: 1; }
.demos__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.demos__head h2 em { color: var(--accent); }
.demos__head p { color: #aab1cf; max-width: 46ch; font-size: 1.05rem; }

.tabs { position: relative; display: inline-flex; gap: 4px; padding: 5px; background: #252e57; border: 1px solid #333d68; border-radius: 999px; margin-bottom: 26px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { position: relative; z-index: 1; flex-shrink: 0; cursor: pointer; border: 0; background: none; color: #aab1cf; font: 600 .95rem var(--sans); padding: 11px 20px; min-height: 44px; border-radius: 999px; transition: color .25s; white-space: nowrap; }
.tabs button:hover { color: #fff; }
.tabs button[aria-selected="true"] { color: var(--ink); }
.tabs__ink { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; background: var(--accent); border-radius: 999px; transition: transform .45s cubic-bezier(.7, 0, .2, 1), width .45s cubic-bezier(.7, 0, .2, 1); }

.panel { animation: panelIn .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px) scale(.99); } }

.app { position: relative; background: #f6f7fb; color: var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 0 40px 80px -30px #000, 0 0 0 1px #333d68; }
.app__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; background: #fff; border-bottom: 1px solid #e1e5f0; }
.app__brand { font-weight: 700; font-size: .95rem; }
.app__clock { font: .85rem var(--mono); color: var(--muted); }

.toast {
  position: absolute; left: 50%; bottom: 22px; z-index: 5; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 10px; font-weight: 600; font-size: .92rem;
  display: flex; align-items: center; gap: 10px; transition: opacity .3s, transform .3s; max-width: calc(100% - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast::before { content: "✓"; flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #2f9e44; font-size: .8rem; }

.pos__pay { cursor: pointer; margin-top: 14px; padding: 15px; min-height: 50px; border: 0; border-radius: 10px; background: var(--accent); color: var(--ink); font: 800 1.05rem var(--sans); letter-spacing: .02em; transition: filter .2s, opacity .2s, transform .1s; }
.pos__pay:hover:not([disabled]) { filter: brightness(1.08); }
.pos__pay:active:not([disabled]) { transform: scale(.98); }
.pos__pay[disabled] { opacity: .35; cursor: not-allowed; }

/* ---------- Agenda de citas ---------- */
.daynav { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; }
.daynav button { cursor: pointer; width: 34px; height: 34px; border-radius: 8px; border: 1px solid #d5d9e8; background: #fff; font-size: 1.2rem; line-height: 1; color: var(--ink); }
.daynav button:hover { border-color: var(--ink); }
.daynav span { min-width: 150px; text-align: center; text-transform: capitalize; }
.cal { display: grid; grid-template-columns: 1fr 300px; min-height: 520px; }
.cal__main { padding: 16px 20px 20px; overflow-x: auto; }
.cal__stats { display: flex; gap: 26px; margin-bottom: 14px; }
.cal__stats div { display: flex; align-items: baseline; gap: 6px; }
.cal__stats b { font-size: 1.35rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cal__stats span { font-size: .82rem; color: var(--muted); }
.cal__grid { display: grid; grid-template-columns: 56px repeat(3, minmax(120px, 1fr)); min-width: 460px; border: 1px solid #e1e5f0; border-radius: 10px; overflow: hidden; background: #fff; }
.cal__staff { padding: 10px 12px; font-weight: 700; font-size: .85rem; border-bottom: 1px solid #e1e5f0; border-left: 1px solid #eceff7; display: flex; align-items: center; gap: 8px; background: #fafbfe; }
.cal__staff i { width: 10px; height: 10px; border-radius: 50%; }
.cal__corner { border-bottom: 1px solid #e1e5f0; background: #fafbfe; }
.cal__time { font: .72rem var(--mono); color: var(--muted); padding: 6px 8px; border-bottom: 1px solid #eef0f7; height: 46px; }
.slot { position: relative; height: 46px; border-left: 1px solid #eceff7; border-bottom: 1px solid #eef0f7; cursor: pointer; padding: 3px; background: none; border-top: 0; border-right: 0; font: inherit; text-align: left; }
.slot:not(.busy):hover { background: #fff4ee; }
.slot:not(.busy):hover::after { content: "+ Libre"; position: absolute; inset: 3px; display: grid; place-items: center; font: .75rem var(--mono); color: var(--accent-ink); border: 1px dashed var(--accent); border-radius: 6px; }
.slot.sel { background: #fff4ee; }
.slot.sel::after { content: "Seleccionado"; position: absolute; inset: 3px; display: grid; place-items: center; font: 600 .75rem var(--sans); color: var(--ink); background: #ffd9c9; border: 2px solid var(--accent); border-radius: 6px; }
.slot.busy { cursor: default; }
.slot.past { cursor: not-allowed; background: repeating-linear-gradient(135deg, transparent 0 6px, #eef0f7 6px 7px); }
.slot.past:hover::after { content: none; }
.appt { position: absolute; inset: 3px; z-index: 1; border-radius: 6px; padding: 4px 8px; font-size: .74rem; line-height: 1.25; overflow: hidden; border-left: 3px solid; }
.appt b { display: block; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt span { opacity: .8; white-space: nowrap; }
.appt.new { animation: pop .6s cubic-bezier(.3, 1.6, .5, 1); box-shadow: 0 0 0 2px var(--accent); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.cal__side { background: #fff; border-left: 1px solid #e1e5f0; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.cal__hint { font-size: .85rem; color: var(--accent-ink); font-weight: 500; }
.cal__field { display: grid; gap: 8px; }
.cal__field > span, .cal__field > label { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.cal__field input { padding: 10px 12px; min-height: 42px; border: 1px solid #d5d9e8; border-radius: 8px; font: inherit; font-size: .95rem; background: #fafbfe; color: var(--ink); }
.cal__field input:focus { outline: none; border-color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { cursor: pointer; padding: 7px 11px; min-height: 36px; border-radius: 8px; border: 1px solid #d5d9e8; background: #fafbfe; font: 500 .82rem var(--sans); color: var(--ink-2); transition: background-color .2s, color .2s, border-color .2s; }
.chips button:hover { border-color: var(--ink); }
.chips button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.cal__summary { font-size: .85rem; color: var(--muted); background: #fafbfe; border: 1px dashed #d5d9e8; border-radius: 8px; padding: 10px 12px; line-height: 1.45; }
.cal__summary b { color: var(--ink); }
.cal__side .pos__pay { margin-top: auto; }

/* Flujo de sincronización */
.sync { display: grid; grid-template-columns: .8fr 1.1fr 1.1fr; gap: 18px; margin-top: 22px; }
.sync__step { padding: 20px 4px; color: #aab1cf; font-size: .92rem; }
.sync__step b { display: block; color: #fff; font-size: 1.1rem; margin: 8px 0 6px; }
.sync__n { font: .8rem var(--mono); color: var(--accent); }
.sync__card { position: relative; background: #fff; color: #202124; border-radius: 12px; padding: 14px; min-height: 180px; box-shadow: 0 0 0 1px #333d68; transition: box-shadow .4s, transform .4s; }
.sync__card.lit { box-shadow: 0 0 0 2px var(--accent), 0 20px 40px -20px var(--accent); transform: translateY(-4px); }
.sync__tag { position: absolute; top: -10px; right: 12px; font: 500 .7rem var(--mono); background: var(--accent); color: var(--ink); padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.sync__card.lit .sync__tag { opacity: 1; transform: none; }
.sync__card::before { content: ""; position: absolute; top: 50%; left: -18px; width: 18px; height: 2px; background: #333d68; }
.sync__card.lit::before { background: var(--accent); }
.gcal__head, .wamsg__head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee; margin-bottom: 10px; font-size: .9rem; }
.gcal__head small { margin-left: auto; color: #5f6368; font-size: .78rem; text-transform: capitalize; }
.gcal__logo { width: 22px; height: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.gcal__logo i { border-radius: 2px; }
.gcal__logo i:nth-child(1) { background: #4285f4; }
.gcal__logo i:nth-child(2) { background: #ea4335; }
.gcal__logo i:nth-child(3) { background: #34a853; }
.gcal__logo i:nth-child(4) { background: #fbbc04; }
.gcal__empty { font-size: .82rem; color: #80868b; text-align: center; padding: 34px 10px; }
.gcal__row { display: grid; grid-template-columns: 46px 1fr; gap: 8px; align-items: start; font-size: .78rem; color: #5f6368; padding: 3px 0; }
.gcal__ev { background: #039be5; color: #fff; border-radius: 6px; padding: 6px 9px; font-size: .8rem; line-height: 1.3; }
.gcal__ev b { display: block; }
.gcal__ev.old { background: #e8f0fe; color: #1967d2; }
.gcal__ev.new { animation: gIn .7s cubic-bezier(.3, 1.5, .5, 1); background: #ff6a3d; }
@keyframes gIn { from { opacity: 0; transform: translateX(30px) scale(.9); } }
.wamsg { background: #efeae2; }
.wamsg__head { color: #111b21; border-color: #ddd5c8; }
.wamsg__body { display: grid; gap: 6px; }
.wamsg .bubble { animation: gIn .6s cubic-bezier(.3, 1.5, .5, 1); }

/* ---------- Agente de WhatsApp ---------- */
.wa { display: grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: center; }
.phone { background: #111; border-radius: 40px; padding: 12px; box-shadow: 0 40px 80px -30px #000, 0 0 0 1px #333d68; }
.phone > * { background: #efeae2; }
.phone__head { display: flex; align-items: center; gap: 10px; padding: 18px 16px 12px; background: #075e54 !important; color: #fff; border-radius: 30px 30px 0 0; }
.phone__head b { display: block; font-size: .95rem; }
.phone__head small { font-size: .75rem; opacity: .85; }
.phone__avatar { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--accent); color: var(--ink); font-weight: 800; font-size: .95rem; }
.phone__chat { height: 380px; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; scroll-behavior: smooth;
  background-image: radial-gradient(#d9d2c5 1px, transparent 1px); background-size: 16px 16px; }
.bubble { max-width: 82%; padding: 7px 10px 6px; border-radius: 8px; font-size: .88rem; line-height: 1.4; color: #111b21; background: #fff; align-self: flex-start; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); animation: bIn .3s cubic-bezier(.2, .8, .2, 1); white-space: pre-line; }
.bubble.me { align-self: flex-end; background: #d9fdd3; }
.bubble small { display: block; text-align: right; font-size: .66rem; color: #667781; margin-top: 2px; }
.bubble.card { border-left: 3px solid var(--accent); }
@keyframes bIn { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.typing { align-self: flex-start; background: #fff; border-radius: 8px; padding: 10px 12px; display: flex; gap: 4px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #8696a0; animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: .2; transform: translateY(-2px); } }
.phone__quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; min-height: 8px; }
.phone__quick button { cursor: pointer; border: 1px solid #b8d8d0; background: #fff; color: #008069; border-radius: 999px; padding: 7px 12px; min-height: 34px; font: 600 .8rem var(--sans); animation: bIn .3s; }
.phone__quick button:hover { background: #e7f7f2; }
.phone__input { display: flex; gap: 8px; padding: 8px 10px 14px; border-radius: 0 0 30px 30px; }
.phone__input input { flex: 1; min-width: 0; border: 0; border-radius: 999px; padding: 11px 16px; font: inherit; font-size: .9rem; background: #fff; color: #111b21; }
.phone__input input:focus { outline: 2px solid #00a884; }
.phone__input button { cursor: pointer; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #00a884; color: #fff; display: grid; place-items: center; }
.phone__input button svg { width: 20px; height: 20px; }
.wa__side h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -.03em; color: #fff; }
.wa__side h3 em { font-style: normal; color: var(--accent); }
.wa__side > p { margin: 18px 0 22px; color: #aab1cf; max-width: 52ch; }
.wa__log { list-style: none; display: grid; gap: 8px; min-height: 40px; }
.wa__log li { display: flex; align-items: center; gap: 10px; font: .85rem var(--mono); color: #e9ecf7; background: #252e57; border: 1px solid #333d68; border-radius: 8px; padding: 10px 12px; animation: bIn .35s; }
.wa__log li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.wa__log li.ok::before { background: #2f9e44; }
.wa__reset { margin-top: 16px; cursor: pointer; background: none; border: 0; color: #9aa2c4; font: .82rem var(--mono); text-decoration: underline; padding: 6px 0; }
.wa__reset:hover { color: #fff; }

/* ---------- POS ---------- */
.pos { display: grid; grid-template-columns: 1fr 340px; min-height: 470px; }
.pos__catalog { padding: 18px 20px; }
.pos__cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pos__cats button { cursor: pointer; border: 1px solid #d5d9e8; background: #fff; padding: 8px 14px; min-height: 38px; border-radius: 999px; font: 500 .88rem var(--sans); color: var(--ink-2); transition: background-color .2s, color .2s; }
.pos__cats button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.prod {
  cursor: pointer; text-align: left; border: 1px solid #e1e5f0; background: #fff; border-radius: 12px; padding: 14px; min-height: 108px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px; font: inherit; color: var(--ink);
  transition: border-color .2s, transform .15s, box-shadow .2s;
}
.prod:hover { border-color: var(--ink); box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .4); }
.prod:active { transform: scale(.96); }
.prod__ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font: 700 .85rem var(--sans); color: #fff; }
.prod b { font-size: .95rem; line-height: 1.25; }
.prod__meta { display: flex; justify-content: space-between; align-items: baseline; font-size: .85rem; }
.prod__meta span { font-weight: 700; }
.prod__meta small { font: .72rem var(--mono); color: var(--muted); }
.prod__meta small.low { color: var(--accent-ink); font-weight: 500; }
.prod[disabled] { opacity: .45; cursor: not-allowed; }
.prod.bump { animation: bump .35s; }
@keyframes bump { 40% { transform: scale(.94); border-color: var(--accent); } }
.pos__cart { display: flex; flex-direction: column; background: #fff; border-left: 1px solid #e1e5f0; padding: 18px 20px; }
.pos__cart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pos__clear { cursor: pointer; background: none; border: 0; font: .82rem var(--mono); color: var(--muted); text-decoration: underline; padding: 6px; }
.pos__lines { list-style: none; flex: 1; overflow: auto; max-height: 230px; }
.pos__lines li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px dashed #e1e5f0; font-size: .92rem; animation: lineIn .3s; }
@keyframes lineIn { from { opacity: 0; transform: translateX(12px); } }
.pos__lines .pos__empty { display: block; color: var(--muted); border: 0; text-align: center; padding: 40px 0; font-size: .9rem; animation: none; }
.qty { display: inline-flex; align-items: center; gap: 6px; }
.qty button { cursor: pointer; width: 26px; height: 26px; border-radius: 6px; border: 1px solid #d5d9e8; background: #f6f7fb; font: 600 .9rem var(--sans); line-height: 1; color: var(--ink); }
.qty button:hover { border-color: var(--ink); }
.pos__lines li > span:last-child { font-weight: 600; min-width: 64px; text-align: right; }
.pos__sum { border-top: 2px solid var(--ink); padding-top: 12px; margin-top: 10px; font-size: .92rem; }
.pos__sum div { display: flex; justify-content: space-between; padding: 3px 0; color: var(--ink-2); }
.pos__total { font-weight: 800; font-size: 1.5rem; color: var(--ink) !important; letter-spacing: -.02em; }
.flash { animation: flash .4s; }
@keyframes flash { 50% { color: var(--accent); } }
.pos__sales { margin-top: 10px; font: .78rem var(--mono); color: var(--muted); text-align: center; }

/* ---------- Dashboard ---------- */
.seg { display: inline-flex; padding: 3px; background: #eceff7; border-radius: 9px; gap: 2px; }
.seg button { cursor: pointer; border: 0; background: none; padding: 7px 14px; min-height: 34px; border-radius: 7px; font: 600 .85rem var(--sans); color: var(--muted); transition: background-color .2s, color .2s; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.dash { padding: 20px; display: grid; gap: 16px; min-height: 470px; align-content: start; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi { background: #fff; border: 1px solid #e1e5f0; border-radius: 12px; padding: 16px; display: grid; gap: 4px; }
.kpi span { font-size: .82rem; color: var(--muted); }
.kpi strong { font-size: 1.7rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi em { font: normal .78rem var(--mono); }
.kpi em.up { color: #2f9e44; }
.kpi em.warn { color: var(--accent-ink); }
.dash__row { display: grid; grid-template-columns: 1fr 280px; gap: 16px; }
.chart, .top { background: #fff; border: 1px solid #e1e5f0; border-radius: 12px; padding: 18px; }
.chart__head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 18px; font-size: .92rem; }
.chart__head span { font: .78rem var(--mono); color: var(--muted); }
.chart__bars { display: flex; align-items: flex-end; gap: 10px; height: 220px; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; cursor: pointer; background: none; border: 0; font: inherit; }
.bar__fill { width: 100%; max-width: 46px; height: 0; background: var(--ink); border-radius: 6px 6px 2px 2px; transition: height .9s cubic-bezier(.2, .8, .2, 1), background-color .2s; }
.bar:hover .bar__fill, .bar.on .bar__fill { background: var(--accent); }
.bar small { font: .72rem var(--mono); color: var(--muted); }
.top ol { list-style: none; margin-top: 14px; display: grid; gap: 12px; counter-reset: t; }
.top li { counter-increment: t; display: grid; gap: 6px; font-size: .88rem; }
.top li div { display: flex; justify-content: space-between; gap: 8px; }
.top li div span:first-child::before { content: counter(t) ". "; color: var(--muted); }
.top li div span:last-child { font: .78rem var(--mono); color: var(--muted); }
.top li i { display: block; height: 6px; border-radius: 3px; background: #eceff7; overflow: hidden; }
.top li i b { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width 1s cubic-bezier(.2, .8, .2, 1); }

/* ---------- Sitio web ---------- */
.seg--device { margin-bottom: 16px; background: #252e57; }
.seg--device button { color: #aab1cf; }
.seg--device button.on { background: var(--accent); color: var(--ink); }
.device { margin: 0 auto; width: 100%; max-width: 100%; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 40px 80px -30px #000, 0 0 0 1px #333d68; transition: max-width .7s cubic-bezier(.7, 0, .2, 1), border-radius .7s; }
.device.mobile { max-width: 360px; border-radius: 30px; }
.device__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: #eceff7; }
.device__bar i { width: 10px; height: 10px; border-radius: 50%; background: #d5d9e8; }
.device__bar span { margin-left: 10px; flex: 1; max-width: 300px; padding: 4px 12px; background: #fff; border-radius: 999px; font: .75rem var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site { background: #fbf6ec; color: #3b2a1a; container-type: inline-size; min-height: 420px; }
.site__nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 24px; border-bottom: 1px solid #ecdfc8; font-size: .85rem; }
.site__nav b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.5rem; }
.site__hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; padding: 40px 24px; }
.site__hero small { font: .78rem var(--mono); color: #a0643a; }
.site__hero h3 { font-family: var(--serif); font-weight: 400; font-size: 2.6rem; line-height: 1.05; margin: 10px 0 20px; letter-spacing: -.01em; }
.site__btn { cursor: pointer; border: 0; background: #3b2a1a; color: #fbf6ec; padding: 12px 22px; min-height: 44px; border-radius: 999px; font: 600 .92rem var(--sans); transition: background-color .2s; }
.site__btn:hover { background: #a0643a; }
.site__img { position: relative; height: 210px; border-radius: 16px; background: linear-gradient(160deg, #e7b77a, #b8733c); overflow: hidden; }
.site__img span { position: absolute; border-radius: 50%; background: #f3d3a2; box-shadow: inset -8px -10px 0 #d99a5b; }
.site__img span:nth-child(1) { width: 110px; height: 80px; left: 18%; top: 30%; animation: bob 4s ease-in-out infinite; }
.site__img span:nth-child(2) { width: 80px; height: 60px; left: 55%; top: 18%; animation: bob 4s -1.3s ease-in-out infinite; }
.site__img span:nth-child(3) { width: 90px; height: 64px; left: 50%; top: 58%; animation: bob 4s -2.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(4deg); } }
.site__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 24px 30px; }
.site__cards div { background: #fff; border: 1px solid #ecdfc8; border-radius: 12px; padding: 16px; display: flex; justify-content: space-between; gap: 8px; font-size: .9rem; transition: transform .2s; }
.site__cards div:hover { transform: translateY(-3px); }
.site__cards span { color: #a0643a; font-weight: 600; }
@container (max-width: 520px) {
  .site__nav span { display: none; }
  .site__hero { grid-template-columns: 1fr; padding: 26px 18px; }
  .site__hero h3 { font-size: 2rem; }
  .site__img { height: 150px; order: -1; }
  .site__cards { grid-template-columns: 1fr; padding: 0 18px 24px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .service { grid-template-columns: 1fr; padding: 30px 0; }
  .service__n, .service h3, .service > p:not(.service__tags), .service__tags, .service__time, .service__demo { grid-column: auto; grid-row: auto; justify-self: start; }
  .demos__head { grid-template-columns: 1fr; gap: 16px; }
  .cal, .pos { grid-template-columns: 1fr; }
  .cal__side, .pos__cart { border-left: 0; border-top: 1px solid #e1e5f0; }
  .sync { grid-template-columns: 1fr 1fr; }
  .sync__step { grid-column: 1 / -1; padding: 6px 0; }
  .sync__step b { margin: 4px 0; }
  .sync__card::before { display: none; }
  .wa { grid-template-columns: 1fr; gap: 36px; }
  .phone { max-width: 380px; width: 100%; margin: 0 auto; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .dash__row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .demos { padding: 80px 0; }
  .tabs button { padding: 10px 14px; font-size: .85rem; }
  .sync { grid-template-columns: 1fr; }
  .cal__main { padding: 14px; }
  .cal__stats { gap: 16px; }
  .daynav span { min-width: 0; font-size: .8rem; }
  .app__bar { padding: 12px 14px; flex-wrap: wrap; }
  .app__brand { font-size: .85rem; }
  .pos__grid { grid-template-columns: 1fr 1fr; }
  .pos__catalog, .pos__cart, .dash, .cal__side { padding: 14px; }
  .chart__bars { gap: 6px; height: 170px; }
  .chart__head span { display: none; }
  .kpi strong { font-size: 1.35rem; }
  .phone__chat { height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__title .line > span, .ticket__rows div { animation: none; opacity: 1; transform: none; }
  .ticket { animation: none; opacity: 1; transform: rotate(2deg); }
  .ticket__stamp { animation: none; opacity: .9; transform: rotate(-14deg); }
    .js [data-reveal] { opacity: 1; transform: none; }
  .js .process::before { transform: none; }
}

/* =========================================================
   Bento: mini interfaces vivas
   ========================================================= */
.bento-wrap { padding: 8px 0 96px; }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; gap: 16px; }
.tile {
  position: relative; display: flex; flex-direction: column; gap: 18px; overflow: hidden;
  padding: 24px; border-radius: 22px; text-decoration: none; color: var(--ink);
  background: #fff; border: 1px solid var(--line);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s;
}
.tile:hover { transform: translateY(-4px); border-color: #b9c0d8; box-shadow: 0 24px 48px -28px rgba(27, 35, 71, .45); }
.tile__head h3 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); margin-top: 10px; max-width: 16ch; }
.tile__tag { font: 500 .74rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.tile__go { margin-top: auto; font-weight: 600; font-size: .9rem; color: var(--accent-ink); }
.tile__go span { display: inline-block; transition: transform .25s; }
.tile:hover .tile__go span { transform: translateX(4px); }

.tile--cal { grid-column: span 2; grid-row: span 2; background: var(--ink); color: #fff; border-color: var(--ink); }
.tile--cal .tile__tag { color: #9aa2c4; }
.tile--cal .tile__go { color: var(--accent); }
.tile--cal:hover { border-color: var(--ink); }
.tile--wa { grid-column: span 2; background: #e7f6ef; border-color: #cdeadb; }
.tile--wa .tile__go { color: #0b7a55; }

/* Agenda */
.mcal { position: relative; background: #252e57; border: 1px solid #333d68; border-radius: 14px; padding: 14px; }
.mcal__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; font: .72rem var(--mono); color: #9aa2c4; }
.mcal__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 38px; gap: 8px; }
.mcal__grid i { border-radius: 8px; background: #2b3460; font-style: normal; }
.mcal__grid .b { border-left: 3px solid; }
.mcal__grid .a { background: #ff6a3d26; border-color: #ff6a3d; }
.mcal__grid .b2 { background: #2f9e4426; border-color: #40c057; }
.mcal__grid .c { background: #4dabf726; border-color: #4dabf7; }
.mcal__new {
  display: grid; place-items: center; font: 600 .74rem var(--sans); color: var(--ink);
  background: var(--accent) !important; box-shadow: 0 0 0 0 #ff6a3d80;
  animation: calNew 7s infinite;
}
@keyframes calNew {
  0%, 12% { opacity: 0; transform: scale(.5); }
  18% { opacity: 1; transform: scale(1.08); box-shadow: 0 0 0 10px #ff6a3d00; }
  22%, 88% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: scale(.9); }
}
.mcal__chip {
  position: absolute; right: -6px; display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 12px; border-radius: 10px; background: #fff; color: #202124; font-size: .78rem; font-weight: 600;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55); opacity: 0;
}
.mcal__chip--g { top: 40%; animation: chipG 7s infinite; }
.mcal__chip--w { bottom: -14px; right: auto; left: 14px; animation: chipW 7s infinite; }
@keyframes chipG { 0%, 28% { opacity: 0; transform: translateX(16px); } 34%, 86% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; } }
@keyframes chipW { 0%, 46% { opacity: 0; transform: translateY(12px); } 52%, 86% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; } }
.gdot { width: 14px; height: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.gdot b { border-radius: 1px; }
.gdot b:nth-child(1) { background: #4285f4; } .gdot b:nth-child(2) { background: #ea4335; }
.gdot b:nth-child(3) { background: #34a853; } .gdot b:nth-child(4) { background: #fbbc04; }
.wdot { width: 14px; height: 14px; border-radius: 50%; background: #25d366; }

/* Chat */
.mchat { display: flex; flex-direction: column; gap: 7px; }
.mchat p { max-width: 78%; padding: 8px 12px; border-radius: 12px 12px 12px 4px; background: #fff; font-size: .86rem; line-height: 1.35; color: #111b21; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); opacity: 0; }
.mchat .me { align-self: flex-end; background: #d9fdd3; border-radius: 12px 12px 4px 12px; }
.mchat .m1 { animation: m1 8s infinite; }
.mchat .m2 { animation: m2 8s infinite; }
.mchat .m3 { animation: m3 8s infinite; }
.mchat .m4 { animation: m4 8s infinite; }
@keyframes m1 { 0%, 4% { opacity: 0; transform: translateY(8px); } 9%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes m2 { 0%, 20% { opacity: 0; transform: translateY(8px); } 25%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes m3 { 0%, 38% { opacity: 0; transform: translateY(8px); } 43%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes m4 { 0%, 55% { opacity: 0; transform: translateY(8px) scale(.95); } 60%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

/* POS */
.mpos { display: grid; gap: 10px; }
.mpos ul { list-style: none; min-height: 88px; display: grid; align-content: start; gap: 4px; font-size: .84rem; }
.mpos li { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-2); animation: lineIn .3s; }
.mpos__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--ink); padding-top: 8px; }
.mpos__total span { font-size: .84rem; color: var(--muted); }
.mpos__total b { font-family: var(--display); font-size: 1.6rem; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.mpos__btn { text-align: center; padding: 9px; border-radius: 10px; background: var(--accent); color: var(--ink); font-weight: 700; font-size: .86rem; transition: background-color .3s, color .3s; }
.mpos__btn.done { background: #2f9e44; color: #fff; }

/* Reportes */
.tile--dash .tile__head { display: flex; justify-content: space-between; align-items: baseline; }
.mdash__kpi { font-family: var(--display); font-size: 1.3rem; color: #2f9e44; }
.mdash { display: flex; align-items: flex-end; gap: 7px; height: 130px; }
.mdash i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: var(--ink); transform-origin: bottom; animation: barUp 6s infinite; }
.mdash i:nth-child(6) { background: var(--accent); }
.mdash i:nth-child(2) { animation-delay: .08s; } .mdash i:nth-child(3) { animation-delay: .16s; }
.mdash i:nth-child(4) { animation-delay: .24s; } .mdash i:nth-child(5) { animation-delay: .32s; }
.mdash i:nth-child(6) { animation-delay: .4s; } .mdash i:nth-child(7) { animation-delay: .48s; }
@keyframes barUp { 0% { transform: scaleY(0); } 14%, 88% { transform: scaleY(1); } 100% { transform: scaleY(0); } }

@media (max-width: 980px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .tile--cal, .tile--wa { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 560px) {
  .bento-wrap { padding-bottom: 72px; }
  .bento { grid-template-columns: 1fr; }
  .tile--cal, .tile--wa { grid-column: auto; }
  .tile { padding: 20px; }
  .mcal__chip { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mcal__new, .mcal__chip, .mchat p, .mdash i { animation: none; opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) { .site__img span { animation: none; } }

.tile--cal .mcal { flex: 1; display: flex; flex-direction: column; }
.tile--cal .mcal__grid { flex: 1; grid-auto-rows: minmax(34px, 1fr); }
.mcal__new { display: flex !important; justify-content: center; align-items: center; white-space: nowrap; }
@media (max-width: 560px) { .mcal__new span { display: none; } }