/* hoja.css — plantilla de hoja de servicio v3 + índice de servicios (24-sep-2026).
 * Composición de las pantallas de Stitch «AxisWorks ERP — Flagship Business OS»
 * y «AxisWorks — Services // 11 Products on Two Axes»; tokens nuestros (site.css).
 * Todo bajo `.hj` (hojas) y `.hb` (índice). */

.hj,.hb{ --mar:clamp(16px,3.4vw,48px); --tint:#ECEAE3; --ws:#15181C; --ws2:#1D2126; --wsl:#2C3238; padding-top:64px }
.hj .shell,.hb .shell{ width:min(1280px, 100% - 2*var(--mar)) }

/* registro CAD en las esquinas de banda */
.hj-reg{ position:absolute; font-family:var(--f-mono); font-size:14px; color:var(--steel); line-height:1; pointer-events:none }
.hj-reg--tl{ top:10px; left:12px } .hj-reg--tr{ top:10px; right:12px }

.hj-chip{ display:inline-block; padding:4px 10px; border:1px solid var(--line); background:var(--paper);
  font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink) }
.hj-tag{ font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--signal-ink) }

/* ── Cabecera ─────────────────────────────────────────── */
.hj-head{ position:relative; z-index:4; padding-block:clamp(48px,6vw,88px) clamp(40px,5vw,64px); border-bottom:1px solid var(--line) }
.hj-head h1{ font-weight:600; font-size:clamp(38px,5vw,68px); line-height:1.04; letter-spacing:-.035em; max-width:18ch; margin-top:22px; text-transform:none }
.hj-lead{ font-size:clamp(18px,1.7vw,21px); line-height:1.5; color:var(--graphite); max-width:44rem; margin-top:20px }
.hj-proof{ font-size:15px; line-height:1.55; color:var(--graphite); padding-left:12px; border-left:2px solid var(--signal-ink); max-width:44rem; margin-top:18px }
.hj-proof b{ color:var(--ink); font-weight:600 }
.hj-acts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px }

/* ── Secciones ────────────────────────────────────────── */
.hj-sec{ position:relative; z-index:4; padding-block:clamp(48px,6vw,88px); border-bottom:1px solid var(--line) }
.hj-sec--tint{ background:var(--tint) }
.hj-shead{ margin-bottom:28px; padding-bottom:14px; border-bottom:1px solid var(--line) }
.hj-shead h2{ font-weight:500; font-size:clamp(28px,3vw,42px); line-height:1.12; letter-spacing:-.025em; max-width:28ch; margin-top:8px; text-transform:none }
.hj-shead__sub{ font-size:16px; line-height:1.6; color:var(--graphite); max-width:70ch; margin-top:12px }
.hj-note{ margin-top:12px; font-family:var(--f-mono); font-size:11px; color:var(--steel-text) }
.hj-split{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:clamp(20px,4vw,56px) }
.hj .prosa .hj-first{ font-size:clamp(20px,2vw,26px); line-height:1.45; color:var(--ink); letter-spacing:-.01em; max-width:46ch }
.hj .prosa p{ font-size:17px; line-height:1.65 }
.hj-more{ margin-top:18px; border-top:1px solid var(--line) }
.hj-more summary{ cursor:pointer; list-style:none; padding:14px 0 4px; font-family:var(--f-mono); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--signal-ink) }
.hj-more summary::-webkit-details-marker{ display:none }
.hj-more summary::before{ content:"+ " } .hj-more[open] summary::before{ content:"− " }

/* ── Espacio de trabajo (el caso, en oscuro) ──────────── */
.ws{ background:var(--ws); color:#E7E5DF; border:1px solid var(--ws) }
.ws__bar{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 16px;
  border-bottom:1px solid var(--wsl); font-family:var(--f-mono); font-size:11px; letter-spacing:.08em }
.ws__name{ font-weight:600; color:#fff } .ws__name b{ color:var(--signal); font-weight:600 }
.ws__sample{ padding:3px 9px; border:1px solid #3FA66B; color:#6BD796; font-weight:600 }
.ws__body{ display:grid; grid-template-columns:240px minmax(0,1fr) }
.ws__side{ border-right:1px solid var(--wsl); padding:14px 0 }
.ws__lbl{ padding:0 16px 10px; font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; color:#8B929A }
.ws__side ul{ list-style:none; max-height:420px; overflow:auto }
.ws__side li{ padding:6px 16px; font-family:var(--f-mono); font-size:12px; color:#B9BEC4; border-left:2px solid transparent }
.ws__side li.on{ color:#fff; border-left-color:var(--signal); background:var(--ws2) }
.ws__main{ min-width:0; display:flex; flex-direction:column }
.ws__alert{ margin:14px 16px 0; padding:9px 12px; border:1px solid #6B3A22; background:#2A1C15; font-size:14px; line-height:1.5; color:#F1E6DF }
.ws__alert span{ display:inline-block; margin-right:10px; padding:2px 7px; background:var(--signal-ink); color:#fff;
  font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em }
.ws__tbl{ margin:14px 16px 0; border:1px solid var(--wsl); overflow-x:auto }
.ws__tbl table{ width:100%; border-collapse:collapse; font-family:var(--f-mono); font-size:12px }
.ws__tbl th{ text-align:left; padding:9px 12px; font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:#8B929A; border-bottom:1px solid var(--wsl); background:var(--ws2); white-space:nowrap }
.ws__tbl td{ padding:11px 12px; border-bottom:1px solid #23282E; white-space:nowrap; color:#B9BEC4 }
.ws__tbl tr:last-child td{ border-bottom:0 }
.ws__tbl tr:hover td{ background:#1A1E23 }
.ws__tbl .ref{ color:var(--signal) }
.ws__tbl .it{ color:#fff; font-weight:600 }
.ws__tbl .r{ text-align:right }
.ws__tbl .due{ color:#FF8A57; font-weight:600 }
.ws__st{ display:inline-block; padding:2px 8px; border:1px solid var(--wsl); color:#DADDE0 }
.ws__kpis{ display:grid; grid-template-columns:repeat(3,1fr); margin:14px 16px 16px; border:1px solid var(--wsl) }
.ws__kpis div{ padding:12px 14px; display:flex; flex-direction:column; gap:6px }
.ws__kpis div+div{ border-left:1px solid var(--wsl) }
.ws__kpis span{ font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#8B929A }
.ws__kpis b{ font-family:var(--f-mono); font-size:clamp(22px,2.4vw,30px); font-weight:700; color:#fff; letter-spacing:-.02em }
.ws__kpis b.acc{ color:var(--signal) }

/* ── La regla, como cita centrada ─────────────────────── */
.hj-quote{ position:relative; margin:clamp(40px,5vw,72px) auto 0; max-width:880px; padding:36px clamp(20px,4vw,56px);
  border:1px solid var(--line); background:var(--paper); text-align:center }
.hj-quote figcaption{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--signal-ink) }
.hj-quote blockquote{ font-family:var(--f-display); font-weight:500; font-size:clamp(22px,2.4vw,30px); line-height:1.35; letter-spacing:-.015em; margin-top:14px }
.hj-quote__bridge{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft); font-size:15px; color:var(--graphite) }

/* ── Flujo como esquema enmarcado ─────────────────────── */
.sch{ border:1px solid var(--line); background:var(--paper) }
.sch__bar{ display:flex; justify-content:space-between; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--steel-text) }
.sch__flow{ list-style:none; display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:16px;
  padding:clamp(24px,3vw,40px) clamp(16px,2.5vw,32px); position:relative }
.sch__flow::before{ content:""; position:absolute; left:clamp(16px,2.5vw,32px); right:clamp(16px,2.5vw,32px);
  top:calc(clamp(24px,3vw,40px) + 16px); border-top:1px solid var(--steel) }
.sch__flow li{ position:relative; display:flex; flex-direction:column; gap:10px }
.sch__n{ align-self:flex-start; position:relative; font-family:var(--f-mono); font-size:12px; font-weight:600; padding:7px 10px;
  background:#fff; border:1px solid var(--ink); color:var(--ink) }
.sch__flow li.first .sch__n{ background:var(--signal-ink); border-color:var(--signal-ink); color:#fff }
.sch__flow li:not(:last-child)::after{ content:"→"; position:absolute; right:-12px; top:6px; font-family:var(--f-mono); color:var(--steel-text) }
.sch__flow b{ font-family:var(--f-display); font-weight:500; font-size:19px; letter-spacing:-.01em; margin-top:6px }
.sch__d{ font-size:14px; line-height:1.5; color:var(--graphite) }

/* ── Directorio de tarjetas ───────────────────────────── */
.dir-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px }
.dir-card{ border:1px solid var(--line); background:var(--paper); padding:16px 18px 20px; transition:border-color .2s }
.dir-card:hover{ border-color:var(--ink) }
.dir-card__c{ font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; color:var(--signal-ink);
  padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid var(--line-soft) }
.dir-card h3{ font-family:var(--f-display); font-weight:500; font-size:19px; letter-spacing:-.01em; line-height:1.25 }
.dir-card p:last-child{ font-size:14px; line-height:1.55; color:var(--graphite); margin-top:8px }

/* ── Preguntas en tarjetas ────────────────────────────── */
.faq-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.faq-card{ border:1px solid var(--line); background:var(--paper); padding:18px 20px 22px }
.faq-card__c{ font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; color:var(--signal-ink) }
.faq-card h3{ font-family:var(--f-display); font-weight:500; font-size:20px; line-height:1.3; letter-spacing:-.01em; margin-top:8px }
.faq-card__a{ font-size:15px; line-height:1.6; color:var(--graphite); margin-top:10px }
.faq-card__a a{ color:var(--signal-ink); border-bottom:1px solid var(--line) }

.hj .sheetnav{ margin-top:0; border-top:0 }

/* ── Cierre en caja ───────────────────────────────────── */
.hj-close{ position:relative; z-index:4; background:var(--tint); padding-block:clamp(56px,7vw,104px); border-top:1px solid var(--line) }
.hj-close__box{ max-width:760px; margin:0 auto; padding:clamp(28px,4vw,48px); border:1px solid var(--line); background:var(--paper); text-align:center }
.hj-chip--c{ color:var(--signal-ink) }
.hj-close__box h2{ font-weight:500; font-size:clamp(28px,3.2vw,44px); line-height:1.12; letter-spacing:-.025em; margin-top:16px; text-transform:none }
.hj-close__box > p{ font-size:16px; line-height:1.6; color:var(--graphite); margin:14px auto 24px; max-width:48ch }
.hj-close__meta{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:28px; padding-top:14px;
  border-top:1px solid var(--line-soft); font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--steel-text) }
.hj-close__meta a{ color:var(--signal-ink) }

/* ══ ÍNDICE DE SERVICIOS (.hb) ═════════════════════════ */
.hb-head{ position:relative; z-index:4; padding-block:clamp(48px,6vw,88px) 32px; border-bottom:1px solid var(--line) }
.hb-head__grid{ display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:32px; align-items:end }
.hb-head h1{ font-weight:600; font-size:clamp(38px,5vw,68px); line-height:1.04; letter-spacing:-.035em; max-width:16ch; margin-top:22px; text-transform:none }
.hb-spec{ border:1px solid var(--line); background:var(--paper); font-family:var(--f-mono); font-size:11px }
.hb-spec p{ display:flex; justify-content:space-between; gap:12px; padding:8px 12px; border-bottom:1px solid var(--line-soft); color:var(--steel-text); letter-spacing:.06em }
.hb-spec p:last-child{ border-bottom:0 } .hb-spec b{ color:var(--ink); font-weight:600 } .hb-spec b.acc{ color:var(--signal-ink) }

.hb-axes{ position:relative; z-index:4; border-bottom:1px solid var(--line) }
.hb-axes__grid{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); border-left:1px solid var(--line); border-right:1px solid var(--line) }
.hb-axes__txt{ padding:clamp(24px,3vw,40px); border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; gap:24px }
.hb-axes__txt h2{ font-weight:500; font-size:clamp(22px,2.2vw,28px); line-height:1.25; letter-spacing:-.015em; text-transform:none }
.hb-axes__txt p{ font-size:15px; line-height:1.6; color:var(--graphite); margin-top:12px }
.hb-legend{ border:1px solid var(--line); background:var(--paper); padding:10px 12px; font-family:var(--f-mono); font-size:11px; line-height:1.8 }
.hb-legend b{ color:var(--signal-ink); font-weight:600 }
.hb-plane{ position:relative; min-height:380px;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:32px 32px; background-color:#fff }
.hb-plane::before{ content:""; position:absolute; left:0; right:0; top:50%; border-top:1px solid var(--steel) }
.hb-plane::after{ content:""; position:absolute; top:0; bottom:0; left:50%; border-left:1px solid var(--steel) }
.hb-q{ position:absolute; z-index:2; padding:6px 10px; border:1px solid var(--line); background:var(--paper); font-family:var(--f-mono); font-size:11px; letter-spacing:.04em; max-width:44% }
.hb-q--tl{ top:16px; left:16px } .hb-q--tr{ top:16px; right:16px } .hb-q--bl{ bottom:16px; left:16px } .hb-q--br{ bottom:16px; right:16px }
.hb-ax{ position:absolute; z-index:2; font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; color:var(--steel-text); background:#fff; padding:0 6px }
.hb-ax--x{ right:16px; top:calc(50% - 20px) } .hb-ax--y{ left:calc(50% + 8px); top:60px }
.hb-core{ position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--ink); color:var(--bone);
  padding:14px 22px; text-align:center; border:1px solid var(--ink) }
.hb-core span{ display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; color:var(--signal) }
.hb-core b{ display:block; font-family:var(--f-display); font-weight:600; font-size:19px; margin-top:4px }
.hb-core a{ color:inherit }

.hb-cat{ position:relative; z-index:4; padding-block:clamp(48px,6vw,88px); border-bottom:1px solid var(--line) }
.hb-cat h2{ font-weight:500; font-size:clamp(28px,3vw,42px); letter-spacing:-.025em; line-height:1.12; text-transform:none; margin-top:8px }
.hb-axis{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:36px 0 14px; padding:8px 12px; background:var(--tint);
  border-left:3px solid var(--signal-ink); font-family:var(--f-mono); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase }
.hb-axis span{ color:var(--steel-text); font-weight:400 }
.hb-axis--ink{ background:var(--ink); color:var(--bone); border-left-color:var(--signal) } .hb-axis--ink span{ color:#9AA0A8 }
.hb-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.hb-card{ display:flex; flex-direction:column; border:1px solid var(--line); background:var(--paper); padding:16px 18px; min-height:170px; transition:border-color .2s }
a.hb-card:hover{ border-color:var(--ink) }
.hb-card__top{ display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:11px; color:var(--signal-ink); font-weight:600 }
.hb-card__top span:last-child{ color:var(--steel-text); font-weight:400 }
.hb-card h3{ font-family:var(--f-display); font-weight:500; font-size:22px; letter-spacing:-.015em; line-height:1.2; margin-top:14px }
.hb-card p{ font-size:14px; line-height:1.55; color:var(--graphite); margin-top:6px }
.hb-card__go{ margin-top:auto; padding-top:14px; border-top:1px solid var(--line-soft); font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; color:var(--ink) }
a.hb-card:hover .hb-card__go{ color:var(--signal-ink) }
.hb-card--wide{ grid-column:1 / -1; min-height:0 }

/* ── Responsive ───────────────────────────────────────── */
@media(max-width:1023px){
  .ws__body{ grid-template-columns:1fr }
  .ws__side{ border-right:0; border-bottom:1px solid var(--wsl) }
  .ws__side ul{ display:flex; flex-wrap:wrap; gap:6px; padding:0 16px; max-height:none }
  .ws__side li{ padding:3px 8px; border:1px solid var(--wsl); font-size:11px } .ws__side li.on{ border-color:var(--signal) }
  .sch__flow{ grid-template-columns:1fr; gap:18px }
  .sch__flow::before{ left:calc(clamp(16px,2.5vw,32px) + 17px); right:auto; top:clamp(24px,3vw,40px); bottom:clamp(24px,3vw,40px); border-top:0; border-left:1px solid var(--steel) }
  .sch__flow li{ flex-direction:row; flex-wrap:wrap; align-items:baseline; column-gap:14px }
  .sch__flow li:not(:last-child)::after{ display:none }
  .sch__flow b{ margin-top:0 } .sch__d{ flex-basis:100%; padding-left:52px }
  .hb-head__grid,.hb-axes__grid{ grid-template-columns:1fr }
  .hb-axes__txt{ border-right:0; border-bottom:1px solid var(--line) }
  .hb-cards{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media(max-width:820px){
  .hj-split{ grid-template-columns:1fr }
  .faq-grid{ grid-template-columns:1fr }
}
@media(max-width:560px){
  .ws__kpis{ grid-template-columns:1fr } .ws__kpis div+div{ border-left:0; border-top:1px solid var(--wsl) }
  .hb-cards{ grid-template-columns:1fr }
  .hb-plane{ min-height:320px } .hb-q{ font-size:10px; padding:4px 6px }
}

/* El formulario dentro del cierre en caja (fondo claro). */
.hj-close__box .intake{ text-align:left; margin-top:8px }
.hj-close__box .field__l{ color:var(--steel-text) }
.hj-close__box .field input,.hj-close__box .field textarea{ background:#fff; border-color:var(--line) }
.hj-close__box .fc-capa1{ color:var(--graphite) }

/* Páginas legales: una columna legible, secciones numeradas. */
.lg__body{ max-width:760px }
.lg__sec{ padding-block:22px; border-top:1px solid var(--line) }
.lg__sec:first-child{ border-top:0; padding-top:0 }
.lg__sec h2{ font-weight:500; font-size:22px; letter-spacing:-.01em; text-transform:none; margin-bottom:12px }
.lg__sec h2 span{ font-family:var(--f-mono); font-size:12px; color:var(--signal-ink); margin-right:6px }
.lg__sec p,.lg__sec li{ font-size:16px; line-height:1.65; color:var(--graphite) }
.lg__sec p+p,.lg__sec p+ul,.lg__sec ul+p{ margin-top:10px }
.lg__sec ul{ padding-left:20px } .lg__sec li+li{ margin-top:4px }
.lg__sec a{ color:var(--signal-ink); border-bottom:1px solid var(--line) }