/* Concepto: el ticket de comanda es el héroe. Una página larga de mostrador:
   papel, tinta y un solo rojo (el de la marca). El diferenciador (sigue vendiendo
   sin internet) se demuestra con un interruptor real, no se cuenta. */
:root{
  --bg:#FAF8F7; --surface:#FFFFFF; --surface-2:#F3EFEC; --fg:#1D1514; --muted:#6B5F5C;
  --border:#E6DFDB; --accent:#E5233B; --accent-ink:#FFFFFF; --accent-soft:#FCE8EA;
  --ok:#14804A; --ok-soft:#E3F4EA; --warn:#B3361E; --warn-soft:#FBE9E4;
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --radius:14px; --shadow:0 18px 40px -22px rgba(29,21,20,.35);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141010; --surface:#1D1716; --surface-2:#271F1E; --fg:#F5EFED; --muted:#B3A6A2;
    --border:#34292A; --accent:#F0384F; --accent-ink:#FFFFFF; --accent-soft:#3A1A1F;
    --ok:#4CCB89; --ok-soft:#173326; --warn:#FF8A6B; --warn-soft:#3A1F19;
    --shadow:0 18px 40px -22px rgba(0,0,0,.8); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#141010; --surface:#1D1716; --surface-2:#271F1E; --fg:#F5EFED; --muted:#B3A6A2;
  --border:#34292A; --accent:#F0384F; --accent-ink:#FFFFFF; --accent-soft:#3A1A1F;
  --ok:#4CCB89; --ok-soft:#173326; --warn:#FF8A6B; --warn-soft:#3A1F19;
  --shadow:0 18px 40px -22px rgba(0,0,0,.8); color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font:16px/1.55 var(--body);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0}
h1,h2,h3{font-family:var(--display);line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:12px;
  font:600 16px/1 var(--body);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .15s,background .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.07)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--border)}
.btn-ghost:hover{background:var(--surface-2)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.eyebrow{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Encabezado */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font:800 20px/1 var(--display);text-decoration:none}
.top nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.top nav a{font-weight:500;text-decoration:none;color:var(--muted)}
.top nav a:hover{color:var(--fg)}
.top .btn{min-height:42px;padding:0 16px;font-size:15px}
.top nav a.btn-primary{color:var(--accent-ink)}

/* Héroe */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-block:48px 72px}
.hero h1{font-size:clamp(38px,5.6vw,66px);font-weight:800}
.hero h1 em{font-style:normal;color:var(--accent)}
.lead{font-size:19px;color:var(--muted);max-width:52ch;margin-top:20px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.fine{margin-top:14px;font-size:14px;color:var(--muted)}

/* Ticket interactivo */
.demo{display:grid;gap:14px;min-width:0}
.link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;
  border:1px solid var(--border);background:var(--surface)}
.link[data-on="true"]{background:var(--ok-soft);border-color:transparent}
.link[data-on="false"]{background:var(--warn-soft);border-color:transparent}
.link-state{display:flex;align-items:center;gap:10px;font-weight:600;min-width:0}
.link[data-on="true"] .link-state{color:var(--ok)}
.link[data-on="false"] .link-state{color:var(--warn)}
.switch{min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);color:var(--fg);
  font:600 14px/1 var(--body);cursor:pointer;white-space:nowrap}
.switch:hover{background:var(--surface-2)}
.ticket{background:var(--surface);border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow);padding:20px 20px 16px;
  font-family:var(--mono);font-size:13.5px;position:relative}
.t-head{display:flex;justify-content:space-between;gap:10px;font-weight:600;letter-spacing:.04em}
.t-sub{color:var(--muted);margin-top:2px}
.t-rule{border:0;border-top:1.5px dashed var(--border);margin:12px 0}
.t-line{display:flex;justify-content:space-between;gap:12px}
.t-note{color:var(--muted);padding-left:14px}
.t-total{font-weight:600;font-size:15px}
.t-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font:600 12px/1 var(--body);background:var(--surface-2);color:var(--muted)}
.pill[data-state="pending"]{background:var(--warn-soft);color:var(--warn)}
.pill[data-state="synced"]{background:var(--ok-soft);color:var(--ok)}
.sell{width:100%;margin-top:12px}
.sell-note{min-height:22px;margin-top:8px;font:13px/1.4 var(--body);color:var(--muted)}

/* Secciones */
section{padding-block:72px}
.sec-head{max-width:640px;margin-bottom:36px}
.sec-head h2{font-size:clamp(28px,3.6vw,42px);font-weight:800;margin-top:12px}
.sec-head p{color:var(--muted);margin-top:14px;font-size:18px}
.band{background:var(--surface-2);margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));
  padding-inline:max(16px,env(safe-area-inset-left,0px))}

.diff{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px;min-width:0}
.card h3{font-size:22px;font-weight:700;margin:16px 0 10px}
.card p{color:var(--muted)}
.ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.card .tag{display:inline-block;margin-top:14px;font:600 12px/1 var(--mono);letter-spacing:.06em;color:var(--muted)}
.soon{color:var(--warn);font-weight:600}
.card.wide{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.15fr;gap:30px;align-items:center}
.card.wide h3{margin-top:16px}

/* Diagrama del sistema centralizado */
.net{width:100%;height:auto;display:block}
.net .n-box{fill:var(--surface-2);stroke:var(--border);stroke-width:1.5}
.net .n-hub{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2}
.net .n-text{fill:var(--fg);font:600 12px var(--body)}
.net .n-sub{fill:var(--muted);font:500 10.5px var(--body)}
.net .n-line{stroke:var(--accent);stroke-width:2;stroke-dasharray:4 7;fill:none;animation:flow 1.4s linear infinite}
.net .n-dot{fill:var(--ok)}
@keyframes flow{to{stroke-dashoffset:-22}}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px;counter-increment:s;min-width:0}
.steps li::before{content:counter(s);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);font:700 16px/1 var(--display);margin-bottom:16px}
.steps h3{font-size:20px;font-weight:700;margin-bottom:8px}
.steps p{color:var(--muted)}

/* Pantallas del POS (ilustraciones fieles a la app) */
.shots{display:grid;grid-template-columns:1.25fr .6fr 1.15fr;gap:22px;align-items:end}
.shot{margin:0;min-width:0}
.shot figcaption{margin-top:12px;font-weight:600;font-size:15px}
.shot figcaption span{display:block;color:var(--muted);font-weight:400;font-size:14px}
.dev{background:#2A2221;border-radius:22px;padding:10px;box-shadow:var(--shadow)}
.dev.phone{border-radius:28px;padding:9px}
.scr{background:#F7F3F0;border-radius:14px;overflow:hidden;color:#1D1514;font:12px/1.3 var(--body);display:flex;flex-direction:column}
.phone .scr{border-radius:20px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;background:#fff;border-bottom:1px solid #E7E0DC;font-weight:700;font-size:13px}
.bar .ant{display:flex;align-items:center;gap:6px;color:#14804A;font-weight:600;font-size:11px}
.tables{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px}
.tb{border-radius:10px;padding:9px 10px;min-height:64px;display:flex;flex-direction:column;justify-content:space-between;background:#EDE7E3}
.tb.on{background:#3A2E2C;color:#fff}
.tb small{font-size:10px;opacity:.8;font-weight:600}
.tb b{font-size:13px}
.tb i{font-style:normal;font-weight:800;font-size:13px}
.rows{padding:8px 10px;display:grid;gap:6px}
.row{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #E7E0DC;border-radius:9px;padding:6px}
.th{width:34px;height:34px;border-radius:7px;background:#fff;border:1px solid #E7E0DC;display:grid;place-items:center;color:#B8B8B8;flex:none}
.row .nm{flex:1;min-width:0;font-weight:700;font-size:12px}
.row .nm span{display:block;color:#E5233B;font-weight:800}
.row .q{font-weight:700;font-size:11px;background:#F3EFEC;border-radius:6px;padding:3px 7px}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:4px 10px 0}
.chip{font-size:10.5px;font-weight:600;border:1px solid #E0D8D3;border-radius:99px;padding:4px 9px;background:#fff}
.chip.sel{background:#FCE8EA;border-color:#E5233B;color:#B3182C}
.send{margin:10px;background:#E5233B;color:#fff;border-radius:10px;text-align:center;font-weight:700;padding:10px;font-size:13px}
.cash{padding:10px;display:grid;gap:8px}
.cash .hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cash .hd b{font-size:15px}
.cash .btns{display:flex;gap:6px}
.cash .btns span{border:1px solid #D9D0CA;border-radius:8px;padding:5px 9px;font-weight:600;font-size:10.5px;background:#fff}
.cash .btns span.red{background:#E5233B;color:#fff;border-color:#E5233B}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.tile{background:#fff;border:1px solid #E7E0DC;border-radius:10px;padding:8px 10px}
.tile small{display:block;color:#6B5F5C;font-size:10.5px}
.tile b{font-size:15px;font-weight:800}
.tile.em{background:#F3EFEC}
.tile.em b{color:#B3182C}

.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.feat div{padding:18px 20px;border:1px solid var(--border);border-radius:12px;background:var(--surface);min-width:0}
.feat strong{display:block;font-family:var(--display);font-size:17px;margin-bottom:4px}
.feat span{color:var(--muted);font-size:15px}

.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:820px}
.plan{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:28px;display:grid;gap:14px;align-content:start;min-width:0}
.plan.main{border-color:var(--accent)}
.plan h3{font-size:24px}
.price{font:800 44px/1 var(--display);letter-spacing:-.03em}
.price small{font:500 16px/1 var(--body);color:var(--muted);letter-spacing:0}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:var(--muted)}
.plan li::before{content:"✓";color:var(--ok);font-weight:700;margin-right:8px}
.badge{justify-self:start;padding:5px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font:600 12px/1 var(--body)}

.try{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start}
.try h2{font-size:clamp(28px,3.6vw,42px);font-weight:800}
.try .lead{font-size:18px}
.checks{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.checks li::before{content:"✓";color:var(--ok);font-weight:700;margin-right:10px}
form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px;display:grid;gap:16px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:grid;gap:6px;font-weight:600;font-size:14px}
input,select{min-height:48px;padding:0 14px;border-radius:10px;border:1.5px solid var(--border);background:var(--bg);color:var(--fg);font:16px var(--body);width:100%}
input[aria-invalid="true"]{border-color:var(--accent)}
.err{min-height:18px;color:var(--accent);font-size:13px;font-weight:500}
fieldset{border:0;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap}
fieldset legend{font-weight:600;font-size:14px;padding:0;margin-bottom:8px}
.opt{display:flex;align-items:center;gap:10px;padding:0 16px;min-height:48px;border:1.5px solid var(--border);border-radius:10px;cursor:pointer;font-weight:600;flex:1;min-width:170px}
.opt input{width:18px;min-height:18px;accent-color:var(--accent)}
.opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.done{background:var(--ok-soft);border:0;color:var(--fg)}
.done h3{font-size:24px;margin-bottom:8px}
.proto{margin-top:12px;font-size:13px;color:var(--muted)}

details{border-bottom:1px solid var(--border);padding:18px 0}
summary{cursor:pointer;font:700 18px/1.3 var(--display);list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::after{content:"+";color:var(--accent);font-size:22px;line-height:1}
details[open] summary::after{content:"−"}
details p{color:var(--muted);margin-top:10px;max-width:70ch}
.faq{max-width:820px}

footer{padding-block:36px 48px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.powered{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--muted)}
.powered:hover{color:var(--fg)}
.powered strong{color:var(--fg);font-weight:600}

@media (max-width:900px){
  .hero,.try{grid-template-columns:1fr;gap:36px}
  .diff,.plans{grid-template-columns:1fr}
  .card.wide{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .feat{grid-template-columns:1fr 1fr}
  section{padding-block:56px}
}
@media (max-width:560px){
  .feat,.row2{grid-template-columns:1fr}
  .top nav a:not(.btn){display:none}
  .lead{font-size:17px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}.net .n-line{animation:none}}

.mt12{margin-top:12px}.mt16{margin-top:16px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:400}
.consent input{width:20px;min-height:20px;margin-top:2px;accent-color:var(--accent);flex:none}
.form-error{min-height:20px;color:var(--accent);font-size:14px;font-weight:600}
.legal{max-width:720px;margin:0 auto;padding:48px 0}
.legal h1{font-size:34px;margin-bottom:16px}.legal h2{font-size:20px;margin:28px 0 8px}
.legal p,.legal li{line-height:1.6}