/* ═══════════════════════════════════════════════════════════════════════════
   ARJ Suministros Integrales — hoja única.
   Base: design system "Industry" (design-source/_ds/industry-…/styles.css).
   Los tokens son los mismos; lo que se agrega aquí es la capa responsive y de
   página que el documento de diseño no traía (era un lienzo fijo de 1280 px).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  --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;

  --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;

  --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);

  /* Añadidos de la conversión: canal y ritmo vertical fluidos. */
  --gutter: clamp(20px, 4.5vw, 56px);
  --measure: 1280px;
  --band: clamp(48px, 7vw, 88px);

  /* Escala z — una sola fuente de verdad. */
  --z-sticky: 30;
  --z-drawer: 40;
  --z-float: 50;
  --z-skip: 60;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* El `display:none` que el navegador da a [hidden] tiene la misma especificidad
   que cualquier `.clase { display: … }` de autor, así que un `.product { display:
   flex }` lo gana y el elemento sigue en pantalla aunque el atributo esté puesto.
   Esta regla lo blinda: si algo está marcado hidden, no se ve. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;          /* Industry usaba 15 px; 16 es el mínimo legible en móvil. */
  line-height: 1.6;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;       /* red de seguridad: nada debe desbordar horizontalmente */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
/* Escala fluida — sustituye a los font-size fijos del lienzo de 1280 px. */
h1 { font-size: clamp(38px, 6.4vw, 76px); }
h2 { font-size: clamp(28px, 3.6vw, 44px); }
h3 { font-size: clamp(21px, 2.2vw, 26px); }
h4 { font-size: clamp(18px, 1.7vw, 22px); }

p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-800); }
img, svg { display: block; max-width: 100%; }
figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

: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); }

.text-muted { color: color-mix(in srgb, var(--color-text) 65%, transparent); } /* 4.92:1 sobre el fondo claro */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Kicker / regla: el rótulo que abre cada sección ──────────────────────── */
.kicker {
  display: block;
  font-size: 13px; line-height: 1.25;
  letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  color: var(--color-accent-700);
}
.rule { height: 1px; border: 0; margin: 12px 0 28px; background: var(--color-divider); }

/* ── Marco blueprint ──────────────────────────────────────────────────────── */
.blueprint { position: relative; border: 1px solid var(--color-divider); border-radius: 0; }
.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; }
/* Sobre fondo oscuro las marcas se invierten. */
.on-dark .blueprint > .corner { color: rgba(242, 242, 243, .55); }
.on-dark .blueprint { border-color: rgba(242, 242, 243, .22); }

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

/* ── Botones ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; line-height: 1.2; letter-spacing: .03em; text-transform: uppercase;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-divider); border-radius: 0;
  padding: 12px 20px;
  min-height: 44px;                    /* objetivo táctil mínimo */
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn svg { display: block; flex: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.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-block { width: 100%; }
/* Variantes sobre el campo de acero. */
.on-dark .btn { color: var(--color-bg); border-color: rgba(242, 242, 243, .4); }
.on-dark .btn-primary { background: var(--color-bg); color: var(--color-accent-900); border-color: var(--color-bg); }
.on-dark .btn-primary:hover { background: var(--color-accent-200); border-color: var(--color-accent-200); color: var(--color-accent-900); }
.on-dark .btn-secondary:hover { background: rgba(242, 242, 243, .14); }
.on-dark :focus-visible { outline-color: var(--color-accent-200); }

/* ── Chips (filtros) ──────────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 14px; letter-spacing: .02em;
  padding: 9px 12px; min-height: 40px;
  cursor: pointer; text-align: left;
  color: var(--color-text); background: transparent;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.chip:hover { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.chip[aria-pressed="true"] {
  background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg);
  font-weight: 500;
}
.chip[aria-pressed="true"]::before { content: "✓"; font-size: 12px; line-height: 1; }

/* ── Etiquetas ────────────────────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center;
  font-size: 12px; letter-spacing: .02em; padding: 4px 10px; border-radius: 0;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent-700); }

/* ── Formularios ──────────────────────────────────────────────────────────── */
.field { margin-bottom: var(--space-4); }
.field > label {
  display: block; font-size: 13px; margin-bottom: 6px; font-weight: 500;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.input {
  width: 100%; min-height: 46px; padding: 10px 12px;
  font: inherit; font-size: 16px;      /* 16 px evita el zoom automático de iOS */
  color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-bg);
  border: 1px solid var(--color-divider); border-radius: 0;
  transition: border-color .18s ease;
}
.input::placeholder { color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.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: 96px; resize: vertical; }

/* ── Tablas ───────────────────────────────────────────────────────────────── */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
  padding: 12px var(--space-3); border-bottom: 1px solid var(--color-divider);
  white-space: nowrap;
}
.table td {
  padding: 12px var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent);
  vertical-align: top;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.sheet-note {
  margin: 0; padding: 12px var(--space-4);
  border-top: 1px solid var(--color-divider);
  font-size: 13px; line-height: 1.7;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}