/* JC Software — estilos compartidos por todas las páginas del sitio.
   Concepto: papelería comercial (remito, planilla, etiqueta). Tinta azul de copia sobre fondo frío,
   una etiqueta amarilla como golpe de color. Cada producto tiene su color de acento. */
:root{
  --bg:#F1F4F2; --surface:#FFFFFF; --soft:#E5EBE8; --ink:#0F1A16; --muted:#55645D; --line:#D0D8D4;
  --tag:#F3C32B; --tag-ink:#1B1500;
  --ok:#12794A; --logo-bg:transparent; --warn:#8F5600; --bad:#B3261E;
  /* acentos por producto */
  --p-ventas:#1B3FD0; --p-ventas-ink:#FFFFFF;
  --p-transporte:#2C6A48; --p-transporte-ink:#FFFFFF;
  --accent:var(--p-ventas); --accent-ink:var(--p-ventas-ink);
  --f-display:'Archivo','Arial Narrow',Arial,sans-serif; --f-body:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --gut:clamp(16px,4vw,40px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0D1311; --surface:#141C19; --soft:#1B2622; --ink:#E7EEEA; --muted:#95A39C; --line:#25312C;
  --ok:#4CC38A; --logo-bg:#fff; --warn:#E5A64B; --bad:#FF8A80;
  --p-ventas:#8AA2FF; --p-ventas-ink:#0A1033; --p-transporte:#74C597; --p-transporte-ink:#0B1F14; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0D1311; --surface:#141C19; --soft:#1B2622; --ink:#E7EEEA; --muted:#95A39C; --line:#25312C;
  --ok:#4CC38A; --logo-bg:#fff; --warn:#E5A64B; --bad:#FF8A80;
  --p-ventas:#8AA2FF; --p-ventas-ink:#0A1033; --p-transporte:#74C597; --p-transporte-ink:#0B1F14; color-scheme:dark}
body[data-producto="transporte"]{--accent:var(--p-transporte);--accent-ink:var(--p-transporte-ink)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--f-body);padding-inline:var(--gut);padding-block:0}
.wrap{max-width:1120px;margin-inline:auto}
a{color:inherit}
img{max-width:100%}
h1,h2,h3{font-family:var(--f-display);font-stretch:118%;font-weight:800;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5.6vw,3.7rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.4rem)}
h3{font-size:1.05rem;font-stretch:100%;font-weight:700;letter-spacing:0}
p{margin:0}
.mono{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.15rem;border-radius:6px;border:1.5px solid var(--ink);font:600 .95rem var(--f-body);text-decoration:none;cursor:pointer;background:transparent;color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.sm{padding:.55rem .9rem;font-size:.88rem}
.btn:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.mini{padding:5px 10px;border-radius:5px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:600 .8rem var(--f-body);cursor:pointer;white-space:nowrap}
.mini.p{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
input,select{font:400 .95rem var(--f-body);padding:8px 10px;border:1.5px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);min-width:0;max-width:100%}

/* cabecera */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line);margin-inline:calc(-1*var(--gut));padding-inline:var(--gut)}
.top .wrap{display:flex;align-items:center;gap:8px 18px;padding-block:10px;flex-wrap:wrap}
.logo{font:800 1.15rem var(--f-display);font-stretch:125%;text-decoration:none;display:flex;align-items:center;gap:10px;margin-right:auto;white-space:nowrap}
.logo img{height:40px;width:auto;background:var(--logo-bg);border-radius:6px;padding:2px 4px}
.logo .prod{font-stretch:100%;font-weight:700;color:var(--accent)}
.logo .sep{color:var(--line);font-weight:400}
.top nav{display:flex;gap:6px 18px;flex-wrap:wrap}
.top nav a{font-size:.92rem;text-decoration:none;color:var(--muted)}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,64px);align-items:center;padding-block:clamp(36px,7vw,84px)}
.hero p.lead{font-size:1.15rem;color:var(--muted);max-width:56ch;margin-top:20px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero .note{margin-top:18px}
.remito{background:var(--surface);border:1.5px solid var(--ink);padding:18px;position:relative;box-shadow:8px 8px 0 var(--soft)}
.remito .row{display:flex;justify-content:space-between;gap:12px;font-family:var(--f-mono);font-size:.82rem;padding-block:6px;border-bottom:1px dashed var(--line)}
.remito .row b{font-weight:500;color:var(--ink);white-space:nowrap}
.remito .tear{margin-block:14px;border-top:2px dashed var(--ink);padding-top:6px}
.remito .big{font:800 1.6rem var(--f-display);font-stretch:118%;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.remito .big span{font:500 .8rem var(--f-mono);letter-spacing:0}
.sello{position:absolute;right:14px;bottom:-16px;background:var(--tag);color:var(--tag-ink);font:500 .72rem var(--f-mono);letter-spacing:.08em;padding:6px 10px;border:1.5px solid var(--ink);transform:rotate(-3deg);text-transform:uppercase}

/* secciones */
section{padding-block:clamp(40px,7vw,80px)}
.sec-head{display:grid;gap:10px;margin-bottom:28px;max-width:62ch}
.sec-head p:not(.mono){color:var(--muted)}
.band{background:var(--soft);margin-inline:calc(-1*var(--gut));padding-inline:var(--gut)}
.ledger{border-top:1.5px solid var(--ink)}
.ledger .item{display:grid;grid-template-columns:130px minmax(0,1fr) minmax(0,1.5fr);gap:8px 24px;padding-block:18px;border-bottom:1px solid var(--line)}
.ledger .item p{color:var(--muted)}
.ledger .item .nuevo{display:inline-block;margin-left:8px;vertical-align:middle;background:var(--tag);color:var(--tag-ink);font:500 .66rem var(--f-mono);letter-spacing:.08em;padding:2px 6px;text-transform:uppercase}

/* tarjetas de productos */
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:20px}
.prod-card{background:var(--surface);border:1.5px solid var(--ink);display:grid;grid-template-rows:auto 1fr auto;position:relative}
.prod-card .franja{height:8px;background:var(--accent)}
.prod-card .cuerpo{padding:22px 22px 8px;display:grid;gap:12px;align-content:start}
.prod-card h3{font-size:1.6rem;font-stretch:118%;font-weight:800}
.prod-card h3 small{display:block;font:500 .74rem var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;font-stretch:100%}
.prod-card ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;border-top:1px solid var(--line);padding-top:12px}
.prod-card li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:8px;font-size:.93rem;color:var(--muted)}
.prod-card li::before{content:"";width:8px;height:8px;margin-top:.5em;background:var(--accent);transform:rotate(45deg)}
.prod-card .acc{display:flex;gap:10px;flex-wrap:wrap;padding:16px 22px 22px}
.prod-card.otro{border-style:dashed;background:transparent}
.prod-card.otro h3 small{color:var(--muted)}
.prod-card.otro .franja{background:repeating-linear-gradient(90deg,var(--line) 0 10px,transparent 10px 18px)}
.prod-card[data-producto="ventas"]{--accent:var(--p-ventas);--accent-ink:var(--p-ventas-ink)}
.prod-card[data-producto="transporte"]{--accent:var(--p-transporte);--accent-ink:var(--p-transporte-ink)}

/* pasos */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1.5px solid var(--ink);counter-reset:s;padding:0;margin:0}
.steps li{list-style:none;padding:20px;border-right:1px solid var(--line);display:grid;gap:8px;align-content:start}
.steps li:last-child{border-right:0}
.steps li::before{counter-increment:s;content:"Paso " counter(s);font:500 .74rem var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.steps p{color:var(--muted)}

/* contacto */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,48px)}
.contact form{display:grid;gap:12px;background:var(--surface);border:1.5px solid var(--ink);padding:18px}
.contact label{display:grid;gap:5px;font:500 .72rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.chan{display:grid;gap:14px;align-content:start}
.chan .line{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:6px}
.copyrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.copyrow code{font:500 .95rem var(--f-mono);overflow-wrap:anywhere}
.msgout{display:grid;gap:10px}
.msgout[hidden]{display:none}
.msgout .txt{background:var(--bg);padding:10px;border:1px solid var(--line)}

footer{border-top:1.5px solid var(--ink);padding-block:24px 40px;color:var(--muted);font-size:.85rem;display:grid;gap:6px}
footer nav{display:flex;flex-wrap:wrap;gap:4px 16px}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:6px;font-size:.92rem;z-index:30;max-width:calc(100vw - 32px)}
.toast[hidden]{display:none}

@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .ledger .item{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .steps li{border-right:0;border-bottom:1px solid var(--line)}
  .steps li:last-child{border-bottom:0}
  .contact{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .top nav{gap:4px 14px}
  .top nav a{font-size:.86rem}
  .logo{font-size:1rem}
  .logo img{height:34px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}