/* ==========================================================================
   industry.css — sistema de diseño del sitio
   --------------------------------------------------------------------------
   La primera parte sale tal cual del diseño del index (web/index.html), para
   que las páginas internas usen exactamente los mismos tokens, tipografías y
   componentes. Las tipografías (Barlow / Barlow Condensed) se cargan por
   Google Fonts en el <head> de cada página, en vez de los archivos que el
   bundle del diseño trae embebidos.
   ========================================================================== */

/* Industry — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --color-accent-2-100: #eef6ff;
  --color-accent-2-200: #d6ebff;
  --color-accent-2-300: #bdd8f2;
  --color-accent-2-400: #9ebbd8;
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: #627d98;
  --color-accent-2-700: #486077;
  --color-accent-2-800: #314457;
  --color-accent-2-900: #1f2d3a;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
/* The overlay image treatments (halftone, duotone) clip their overlay
   (overflow:hidden); a blueprint wrapper draws its registration marks
   outside the box, so when both classes share a wrapper the frame must
   win. */
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.duotone{position:relative;overflow:hidden}
.duotone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--color-accent);mix-blend-mode:color}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — blueprint frame: components are wireframe objects (see .blueprint
     and .corner above) — square, transparent, hairline-bordered — */
.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; }
.card, .dialog { background: transparent; border: 1px solid var(--color-divider); }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
.btn-ghost { border-color: transparent; }
/* ==========================================================================
   Páginas de detalle de módulos
   --------------------------------------------------------------------------
   Componentes de ventas-caja / productos-stock / comercial-cobros /
   documentos / maestros / reportes-admin, vestidos con el mismo sistema de
   diseño del index. El HTML de contenido de esas páginas NO cambió: solo
   cambia cómo se ve.
   ========================================================================== */

/* Alias de las variables que usan los estilos inline heredados del sitio viejo,
   mapeadas a la paleta nueva. */
:root {
  --accent:      var(--color-accent);
  --accent-soft: color-mix(in srgb, var(--color-accent) 14%, transparent);
  --border:      var(--color-divider);
  --muted:       color-mix(in srgb, var(--color-text) 62%, transparent);
  --text:        var(--color-text);
  --radius-sm:   3px;
}

body { background: var(--color-bg); }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* El "ruido" de fondo del sitio viejo no va con este diseño. */
.noise { display: none; }

/* ------------------------------------------------------------------ header */
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-divider);
}
.header__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-text);
  margin-right: auto;
}
.logo__img { height: 30px; width: auto; }
.logo__text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.01em;
}
.header .nav { display: flex; align-items: center; gap: 22px; }
.header .nav a {
  font-family: var(--font-heading);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--color-text);
  border: 0;
}
.header .nav a:hover { color: var(--color-accent-700); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 1px solid var(--color-divider);
  padding: 9px 10px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-text);
}
.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 14px;
  padding: 16px 24px 22px;
  border-top: 1px solid var(--color-divider);
}
.nav-mobile[hidden] { display: none; }
.nav-mobile a {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--color-text);
  border: 0;
}

/* ----------------------------------------------------------------- botones */
.btn--primary,
.btn--whatsapp {
  background: var(--color-accent-800);
  color: var(--color-neutral-100);
  border: 1px solid var(--color-accent-800);
}
.btn--primary:hover,
.btn--whatsapp:hover { background: var(--color-accent-900); color: #fff; }
.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-text);
}
.btn--ghost:hover { background: var(--color-neutral-200); }
.btn--lg { padding: 12px 22px; font-size: 15px; }
.btn--sm { padding: 8px 16px; font-size: 14px; }
.btn--block { display: flex; width: 100%; }

/* Marcas de esquina, el gesto "blueprint" del index, sin markup extra. */
.blueprint-auto {
  position: relative;
  background:
    linear-gradient(var(--color-text), var(--color-text)) 0 0 / 9px 1px no-repeat,
    linear-gradient(var(--color-text), var(--color-text)) 0 0 / 1px 9px no-repeat,
    linear-gradient(var(--color-text), var(--color-text)) 100% 0 / 9px 1px no-repeat,
    linear-gradient(var(--color-text), var(--color-text)) 100% 0 / 1px 9px no-repeat,
    linear-gradient(var(--color-text), var(--color-text)) 0 100% / 9px 1px no-repeat,
    linear-gradient(var(--color-text), var(--color-text)) 0 100% / 1px 9px no-repeat,
    linear-gradient(var(--color-text), var(--color-text)) 100% 100% / 9px 1px no-repeat,
    linear-gradient(var(--color-text), var(--color-text)) 100% 100% / 1px 9px no-repeat,
    var(--color-bg);
}

/* -------------------------------------------------------------------- hero */
.mod-hero {
  border-bottom: 3px solid var(--color-text);
  background: var(--color-bg);
  padding: 52px 0 46px;
}
.mod-hero__bg { display: none; }
.mod-hero__inner { position: relative; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: 18px;
}
.breadcrumb a { color: var(--color-accent-700); text-decoration: none; border: 0; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb__sep { opacity: 0.5; }

.mod-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 5px 12px;
  margin-bottom: 18px;
}
.mod-hero__icon { font-size: 14px; }

.mod-hero h1 {
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  max-width: 20ch;
}
.text-gradient {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--color-accent-700);
}
.lead {
  margin: 0 0 26px;
  max-width: 58ch;
  font-size: 16px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
}
.mod-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }

.mod-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--color-text);
}
.mod-stat {
  padding: 16px 18px 0 0;
  border-right: 1px solid var(--color-divider);
}
.mod-stat:last-child { border-right: 0; }
.mod-stat__value {
  display: block;
  font-family: var(--font-heading);
  font-size: 30px;
  line-height: 1;
  margin-bottom: 6px;
}
.mod-stat__label {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

/* --------------------------------------------------------------- secciones */
.feat-section { padding: 48px 0 56px; border-top: 1px solid var(--color-divider); }
.feat-section--alt { background: var(--color-surface); }

.section__head { margin-bottom: 26px; }
.section__head h2 {
  font-size: clamp(24px, 2.6vw, 30px) !important;
  margin: 0 0 8px;
  white-space: normal !important;
}
.section__head p {
  margin: 0;
  max-width: 62ch;
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
}

/* -------------------------------------------------------- tarjetas 01·02·03 */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  counter-reset: beneficio;
}
.benefit-card {
  padding: 26px 24px;
  border: 1px solid var(--color-divider);
  background: var(--color-bg);
  position: relative;
}
.feat-section--alt .benefit-card { background: var(--color-neutral-100); }
.benefit-card::before {
  counter-increment: beneficio;
  content: "0" counter(beneficio);
  display: block;
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--color-accent-700);
  margin-bottom: 14px;
}
.benefit-card__icon { font-size: 22px; display: block; margin-bottom: 10px; }
.benefit-card h3 { font-size: 20px; margin: 0 0 8px; }
.benefit-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
}

/* ------------------------------------------------------- bloques con figura */
.feat-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.feat-group--reverse .feat-group__text { order: 2; }

.feat-group__label {
  display: block;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: 8px;
}
.feat-group__title { font-size: clamp(24px, 2.6vw, 30px); margin: 0 0 12px; }
.feat-group__desc {
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
}

.feat-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-text); }
.feat-list__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--color-divider);
}
.feat-list__icon {
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--color-accent-700);
  line-height: 1.5;
}
.feat-list__text { display: block; }
.feat-list__text strong { display: block; font-size: 15px; margin-bottom: 2px; }
.feat-list__text span {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}

/* Maquetas decorativas: se conservan, con la paleta nueva y marco de plano. */
.feat-visual { position: sticky; top: 90px; }
.feat-visual__panel {
  padding: 18px;
  border: 1px solid var(--color-text);
  background: var(--color-neutral-100);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feat-section--alt .feat-visual__panel { background: var(--color-bg); }
.feat-visual__bar { display: flex; gap: 6px; margin-bottom: 6px; }
.feat-visual__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-text) 25%, transparent);
}
.feat-visual__row {
  height: 10px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--color-text) 12%, transparent);
}
.feat-visual__row--wide { width: 100%; }
.feat-visual__row--med  { width: 62%; }
.feat-visual__row--sm   { width: 34%; }
.feat-visual__table { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.feat-visual__table-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--color-divider);
  background: var(--color-bg);
}
.feat-visual__badge {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid currentColor;
  color: var(--color-accent-700);
  white-space: nowrap;
}
.feat-visual__badge--blue   { color: var(--color-accent-700); }
.feat-visual__badge--green  { color: #3f6b4a; }
.feat-visual__badge--yellow { color: #8a6a25; }
.feat-visual__card-row { display: flex; gap: 10px; }
.feat-visual__mini-card {
  flex: 1;
  padding: 12px;
  border: 1px solid var(--color-divider);
  background: var(--color-bg);
}

/* ------------------------------------------------------------- escenarios */
.scenarios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--color-text);
}
.scenario-card {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  padding: 18px 24px 18px 0;
  border-bottom: 1px solid var(--color-divider);
}
.scenario-card__emoji {
  grid-row: 1;
  font-size: 18px;
  line-height: 1.2;
}
.scenario-card h4 {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.25;
}
.scenario-card p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
}

/* -------------------------------------------------------------------- CTA */
.section--cta { padding: 56px 0 64px; border-top: 1px solid var(--color-divider); }
.cta__box {
  border: 1px solid var(--color-text);
  background: var(--color-accent-900);
  color: var(--color-neutral-100);
  padding: 40px 36px;
  text-align: center;
}
.cta__box h2 { color: var(--color-neutral-100); margin: 0 0 10px; }
.cta__box p { color: color-mix(in srgb, #fff 78%, transparent); margin: 0 0 22px; }
.cta__box .btn--whatsapp {
  background: var(--color-neutral-100);
  color: var(--color-accent-900);
  border-color: var(--color-neutral-100);
}
.cta__box .btn--whatsapp:hover { background: #fff; color: var(--color-accent-900); }
.cta__note { font-size: 12px; margin: 16px 0 0 !important; }

/* ------------------------------------------------------------------ footer */
.footer { border-top: 1px solid var(--color-divider); }
.footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 24px;
  padding-bottom: 24px;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.footer__inner p { margin: 0; }
.footer__inner strong { font-family: var(--font-heading); color: var(--color-text); }
.footer a { color: var(--color-accent-700) !important; }

/* ------------------------------------------------------------------ mobile */
@media (max-width: 900px) {
  .feat-group { grid-template-columns: 1fr; gap: 32px; }
  .feat-group--reverse .feat-group__text { order: 0; }
  .feat-visual { position: static; }
  .benefit-grid { grid-template-columns: 1fr; gap: 18px; }
  .scenarios { grid-template-columns: 1fr; }
  .mod-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mod-stat { padding-right: 14px; }
  .mod-stat:nth-child(2) { border-right: 0; }
}
@media (max-width: 720px) {
  .header .nav { display: none; }
  .nav-toggle { display: flex; }
  .nav-mobile:not([hidden]) { display: flex; }
  .mod-hero h1 { font-size: 34px; }
}

/* ==========================================================================
   Celular
   --------------------------------------------------------------------------
   El diseño exportado del canvas define sus grillas con estilos inline y sin
   puntos de corte: en pantallas angostas el encabezado se salía y el hero
   quedaba en dos columnas de ~150px, con el texto partido palabra por palabra.
   Estas reglas llevan todo a una columna. Necesitan !important porque compiten
   contra estilos inline; es la única forma de corregirlo sin tocar el diseño.
   ========================================================================== */
@media (max-width: 900px) {
  /* hero, bloques de dos columnas y grillas de tres */
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)"],
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)"],
  [style*="grid-template-columns:repeat(3,minmax(0,1fr))"],
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  /* filas de módulos: número + descripción + precio + botón */
  [style*="grid-template-columns:22px minmax(0,1.6fr) minmax(0,1fr) auto"] {
    grid-template-columns: 22px minmax(0, 1fr) !important;
    row-gap: 12px !important;
  }
  [style*="grid-template-columns:22px minmax(0,1.6fr) minmax(0,1fr) auto"] > *:nth-child(3),
  [style*="grid-template-columns:22px minmax(0,1.6fr) minmax(0,1fr) auto"] > *:nth-child(4) {
    grid-column: 2 !important;
    justify-content: flex-start !important;
  }

  section > div { padding-left: 20px !important; padding-right: 20px !important; }

  /* La tira "Multi-sucursal / ARCA / Roles" trae un padding distinto por celda
     para separarlas entre columnas; apiladas, eso las dejaba en escalera. */
  dl[style*="repeat(3,1fr)"] > div {
    padding: 12px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--color-divider) !important;
  }
  dl[style*="repeat(3,1fr)"] > div:last-child { border-bottom: 0 !important; }
}

@media (max-width: 720px) {
  /* encabezado: la marca arriba, la navegación abajo y sin desbordar */
  header > div {
    flex-wrap: wrap !important;
    gap: 12px !important;
    row-gap: 10px !important;
  }
  header nav {
    width: 100%;
    flex-wrap: wrap !important;
    gap: 14px !important;
    justify-content: flex-start !important;
  }
  header nav a { font-size: 14px !important; }

  /* la tabla comparativa se desplaza sola en vez de romper la página */
  .table { display: block; overflow-x: auto; }

  h1 { font-size: 34px !important; }
}

/* ==========================================================================
   Comparación de características
   --------------------------------------------------------------------------
   tools/generar-index.py rearma la comparación del diseño con la estructura y
   las clases de la de sislab.com.ar; estas son sus mismas reglas, para que
   los dos sitios se vean igual (también en celular).
   ========================================================================== */
/* — comparación de características (las mismas reglas que sislab.com.ar) — */
.comparacion { margin-top: 0; }  /* el separador lo da la grilla de planes */
.comp-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; margin-bottom: 6px; flex-wrap: wrap;
}
.comp-head h3 { font-size: 22px; margin: 0; }
.comp-cuenta {
  font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.comp-sub {
  margin: 0 0 26px; font-size: 14px; max-width: 60ch;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.comp-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--color-text); align-items: start;
}
.comp-col { padding: 14px 20px 20px; }
.comp-col:first-child { padding-left: 0; }
.comp-col:last-child { padding-right: 0; border-left: 1px solid var(--color-divider); }
.comp-col-destacada {
  border-left: 1px solid var(--color-accent); border-right: 1px solid var(--color-accent);
}
.comp-col-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.comp-col-head h4 { margin: 0; font-size: 19px; }
.comp-col-kicker {
  font-family: var(--font-heading); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-accent-700);
}
.comp-col-kicker-base { color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.comp-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.comp-lista li {
  display: grid; grid-template-columns: 16px 1fr; gap: 8px;
  font-size: 13.5px; line-height: 1.45;
}
.comp-marca { color: var(--color-accent-700); font-family: var(--font-heading); }

.comp-tabla .table { margin-top: 18px; }
.comp-tabla { margin-top: 32px; border-top: 1px solid var(--color-divider); padding-top: 18px; }
.comp-tabla summary {
  font-family: var(--font-heading); font-size: 14px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-accent-700); cursor: pointer;
}
.table .valor, .table .si, .table .no { text-align: center; }
.table td.valor, .table .si, .table .no { font-family: var(--font-heading); font-size: 16px; }
.table .si, .table td.valor { color: var(--color-accent-700); }
.table .no { color: color-mix(in srgb, var(--color-text) 35%, transparent); }
.table .col-destacada {
  border-left: 1px solid var(--color-divider); border-right: 1px solid var(--color-divider);
}
.table td.col-destacada { background: color-mix(in srgb, var(--color-accent) 7%, transparent); }

@media (max-width: 900px) {
  /* las tres columnas pasan a ir una debajo de la otra */
  .comp-grid { grid-template-columns: minmax(0, 1fr); }
  .comp-col,
  .comp-col:first-child,
  .comp-col:last-child,
  .comp-col-destacada {
    padding: 14px 0 20px; border-left: 0; border-right: 0;
  }
  .comp-col + .comp-col { border-top: 1px solid var(--color-divider); }
}

/* ==========================================================================
   Módulos adicionales ("Se suman a cualquier plan")
   --------------------------------------------------------------------------
   tools/generar-index.py rearma la sección del diseño con la estructura y las
   clases de la de sislab.com.ar; estas son sus mismas reglas (encabezado de
   sección, rótulo con rayita y una fila por módulo), también en celular.
   ========================================================================== */
/* — rótulo de sección — */
.kicker {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-accent-700);
}
.kicker::before {
  content: ""; width: 26px; height: 1px; background: var(--color-accent); flex: none;
}

.seccion-inner { max-width: 1180px; margin: 0 auto; padding: 72px 24px 80px; }
.seccion-head { margin-bottom: 36px; }
.seccion-head h2 {
  font-size: clamp(32px, 4.4vw, 54px); line-height: 1; letter-spacing: -0.02em;
  margin: 10px 0 0;
}
.seccion-head p {
  margin: 12px 0 0; max-width: 58ch; font-size: 15.5px;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
}
.seccion-head-fila {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}

/* — módulos adicionales: una fila por módulo — */
.mod-lista { border-top: 1px solid var(--color-text); }
.mod-fila {
  display: grid; grid-template-columns: 22px minmax(0, 1.6fr) minmax(0, 1fr) auto;
  gap: 20px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--color-divider);
}
.mod-num {
  font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.mod-fila h3 { font-size: 18px; margin: 0 0 2px; }
.mod-fila p {
  margin: 0; font-size: 13.5px; line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
}
.mod-precio { display: flex; align-items: baseline; gap: 5px; justify-content: flex-end; }
.mod-precio .signo { font-family: var(--font-heading); font-size: 14px; }
.mod-precio .monto { font-family: var(--font-heading); font-size: 22px; line-height: 1; }
.mod-precio .por {
  font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.mod-fila .btn { text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }

@media (max-width: 900px) {
  .seccion-inner { padding: 56px 24px 60px; }
  /* módulos: número + descripción arriba; precio y botón debajo */
  .mod-fila { grid-template-columns: 22px minmax(0, 1fr); row-gap: 12px; }
  .mod-fila > .mod-precio,
  .mod-fila > .btn { grid-column: 2; justify-content: flex-start; justify-self: start; }
}

/* ==========================================================================
   Portada
   --------------------------------------------------------------------------
   El diseño del canvas trae el texto a la izquierda y una captura chica a la
   derecha; tools/generar-index.py la convierte en esta portada, igual a la de
   sislab.com.ar: la captura del tablero a todo el ancho, detrás del texto. El
   degradado de la izquierda es lo que garantiza que el título se lea sobre la
   captura. Los textos conservan los estilos inline del diseño.
   ========================================================================== */
.hero { position: relative; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
/* La foto (images/dashboard.webp, cuadrada) es la terminal en el mostrador:
   el cliente con la tarjeta a la izquierda, la terminal en el centro y la
   cajera a la derecha. Entra un 18 % más ancha, pegada a la izquierda, para
   que la terminal y el ticket queden en la mitad derecha, nítidos, y el
   cliente quede detrás del texto, difuminado. De alto se muestra la franja
   de la terminal entera y las manos (sin el cajón). */
.hero-media img {
  position: absolute; top: 0; left: 0; width: 118%; max-width: none; height: 100%;
  object-fit: cover; object-position: 0% 46%;
}
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, #f2f2f3 98%, transparent) 0%,
    color-mix(in srgb, #f2f2f3 95%, transparent) 46%,
    color-mix(in srgb, #f2f2f3 72%, transparent) 66%,
    color-mix(in srgb, #f2f2f3 30%, transparent) 100%
  );
}
.hero-inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 88px 24px 72px; }
.hero-inner > h1 { max-width: 16ch; }
.hero-inner > dl { max-width: 720px; }

@media (max-width: 900px) {
  .hero-inner { padding-top: 60px !important; padding-bottom: 52px !important; }
  .hero-media img { width: 100%; object-position: 55% 45%; }
  .hero-media::after {
    background: linear-gradient(
      170deg,
      color-mix(in srgb, #f2f2f3 97%, transparent) 0%,
      color-mix(in srgb, #f2f2f3 94%, transparent) 60%,
      color-mix(in srgb, #f2f2f3 72%, transparent) 100%
    );
  }
}

/* ==========================================================================
   Movimiento
   --------------------------------------------------------------------------
   Todo lo de este bloque vive bajo html.anim. Esa clase la pone el script
   chico del <head> (y main.js la confirma o la saca) solo en la portada,
   cuando el navegador tiene IntersectionObserver y la persona no pidió
   "reducir movimiento" en su sistema. Sin ella la página se ve exactamente
   igual que antes, quieta; las páginas internas no la tienen (por ahora).

   Las clases las reparte main.js (sección "movimiento"):
     .rv       aparece al entrar en pantalla: fundido + leve ascenso, una sola
               vez. --d es el retraso de cada pieza dentro de su tanda.
     .on       ya apareció. .rv se saca al terminar (libera will-change).
     .trazo    la línea superior se dibuja de izquierda a derecha al aparecer
               (.trazo-suave: en color divisor en vez de tinta).
     .linea    la rayita del rótulo de la portada, que se extiende.
     .mod-fila / .mod-num   fila de módulo y su número (las escribe el generador; guía al pasar el mouse).
     .contado  precio que ya contó hasta su valor (main.js, precios).
     .compacto el encabezado, cuando la página ya bajó un poco.
   ========================================================================== */
html.anim {
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
}

/* La portada no debe verse quieta ni un instante antes de que corra main.js:
   queda invisible desde el primer cuadro y main.js la hace aparecer. Si
   main.js no llegara a correr, a los 3 s se muestra igual. */
html.anim .hero-inner > :not(.on) { opacity: 0; animation: rv-red 0s linear 3s forwards; }
@keyframes rv-red { to { opacity: 1; } }

/* — aparición — */
.anim .rv {
  opacity: 0; transform: translateY(18px);
  will-change: opacity, transform;
  transition: opacity 0.6s var(--ease) var(--d, 0ms), transform 0.7s var(--ease) var(--d, 0ms);
}
.anim .rv.on { opacity: 1; transform: none; }

/* esquinas del marco: se dibujan apenas la pieza terminó de aparecer */
.anim .rv:not(.on) > .corner::before { transform: scaleY(0); }
.anim .rv:not(.on) > .corner::after  { transform: scaleX(0); }
.anim .on > .corner::before,
.anim .on > .corner::after { transition: transform 0.45s var(--ease) calc(var(--d, 0ms) + 0.3s); }

/* la rayita de los rótulos (portada y módulos adicionales) se extiende */
.anim .linea { transform-origin: left; transition: transform 0.7s var(--ease) calc(var(--d, 0ms) + 0.3s); }
.anim .rv:not(.on) .linea { transform: scaleX(0); }
.anim .kicker::before { transform-origin: left; transition: transform 0.7s var(--ease) calc(var(--d, 0ms) + 0.3s); }
.anim .rv:not(.on) .kicker::before { transform: scaleX(0); }

/* — líneas que se trazan — */
.anim .trazo { position: relative; border-top-color: transparent !important; }
.anim .trazo::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--color-text);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.9s var(--ease) calc(var(--d, 0ms) + 0.15s);
}
.anim .trazo-suave::before { background: var(--color-divider); }
.anim .trazo.on::before { transform: scaleX(1); }

/* — al pasar el mouse — */
.anim .blueprint > .corner { transition: transform 0.3s var(--ease); }
.anim .blueprint:hover > .corner.tl { transform: translate(-2px, -2px); }
.anim .blueprint:hover > .corner.tr { transform: translate(2px, -2px); }
.anim .blueprint:hover > .corner.bl { transform: translate(-2px, 2px); }
.anim .blueprint:hover > .corner.br { transform: translate(2px, 2px); }

.anim .card.blueprint:not(.rv) { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.anim .card.blueprint:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.anim .btn {
  transition: background-color 0.25s, border-color 0.25s, color 0.25s,
              transform 0.2s var(--ease), box-shadow 0.25s;
}
.anim .btn:hover { transform: translateY(-1px); }
.anim .btn:active { transform: translateY(0); transition-duration: 0.08s; }
.anim .btn-primary:hover { box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--color-text) 60%, transparent); }

.anim .seg-opt { transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }

/* "Ver detalles →" de los módulos se corre a la derecha */
.anim #modulos article a { display: inline-block; transition: transform 0.25s var(--ease); }
.anim #modulos article a:hover { transform: translateX(4px); }

/* menú: subrayado que se dibuja */
.anim header > div > nav > a:not(.btn) { position: relative; }
.anim header > div > nav > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: var(--color-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.anim header > div > nav > a:not(.btn):hover::after { transform: scaleX(1); }

/* encabezado: se compacta al bajar (los estilos de base son inline: !important) */
.anim header { transition: box-shadow 0.3s var(--ease); }
.anim header > div { transition: padding 0.3s var(--ease); }
.anim header img { transition: height 0.3s var(--ease); }
.anim header.compacto { box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--color-text) 50%, transparent); }
.anim header.compacto > div { padding-top: 7px !important; padding-bottom: 7px !important; }
.anim header.compacto img { height: 25px !important; }

/* portada: la captura se acerca muy despacio y acompaña el scroll (--py la
   pone main.js; la captura es un 12 % más alta para que nunca se vea el borde) */
.anim .hero { overflow: hidden; }
.anim .hero-media { animation: hero-zoom 14s var(--ease) both; }
@keyframes hero-zoom { from { transform: scale(1.07); } to { transform: scale(1); } }
@media (min-width: 901px) {
  .anim .hero-media img {
    height: 112%;
    transform: translateY(calc(-5.4% + var(--py, 0px)));
    will-change: transform;
  }
}

/* módulos: una guía a la izquierda de la fila al pasar el mouse */
.anim .mod-fila { position: relative; }
.anim .mod-fila::before {
  content: ""; position: absolute; left: -14px; top: 16px; bottom: 16px; width: 2px;
  background: var(--color-accent);
  transform: scaleY(0); transition: transform 0.3s var(--ease);
}
.anim .mod-fila:hover::before { transform: scaleY(1); }
.anim .mod-num { transition: color 0.25s; }
.anim .mod-fila:hover .mod-num { color: var(--color-accent-700); }

@media (prefers-reduced-motion: reduce) {
  html.anim { scroll-behavior: auto; }
  .anim .hero-media { animation: none; }
}