/* ==========================================================
   NZ Group — hoja de estilos de marca (v1, octubre 2026)
   Pegar en el CSS del tema o subir como archivo y enlazar.
   Todas las variables llevan prefijo --nz- para no chocar con el tema.
   ========================================================== */

:root {
  --nz-brand-midnight: #0D1530;
  --nz-brand-pulse: #FF4B1F;
  --nz-brand-white: #FFFFFF;
  --nz-surface: #F5F6FA;
  --nz-surface-raised: #FFFFFF;
  --nz-surface-inverse: #0D1530;
  --nz-ink: #0D1530;
  --nz-ink-muted: #4A5470;
  --nz-ink-inverse: #FFFFFF;
  --nz-pulse-text: #C8360B;
  --nz-on-pulse: #0D1530;
  --nz-pulse-soft: #FFE3D8;
  --nz-ice: #E8ECF7;
  --nz-line: #DDE1EC;
  --nz-control-border: #7A84A3;
  --nz-focus-ring: #C8360B;
  --nz-success: #127A55;
  --nz-warning: #9A5B00;
  --nz-danger: #B3261E;
  --nz-space-1: 4px;
  --nz-space-2: 8px;
  --nz-space-3: 12px;
  --nz-space-4: 16px;
  --nz-space-6: 24px;
  --nz-space-8: 32px;
  --nz-space-12: 48px;
  --nz-space-16: 64px;
  --nz-radius-sm: 4px;
  --nz-radius-md: 10px;
  --nz-radius-lg: 20px;
  --nz-font-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --nz-font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --nz-font-data: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --nz-shadow-card: 0 1px 2px rgba(13,21,48,0.06), 0 8px 24px rgba(13,21,48,0.08);
}

/* Tema oscuro: se activa solo si agregas la clase .nz-dark a <body> o a una sección */
.nz-dark {
  --nz-surface: #0A0F22;
  --nz-surface-raised: #141B38;
  --nz-surface-inverse: #EEF1F8;
  --nz-ink: #EEF1F8;
  --nz-ink-muted: #A3ACC8;
  --nz-ink-inverse: #0D1530;
  --nz-pulse-text: #FF7A55;
  --nz-pulse-soft: #3A1C17;
  --nz-ice: #1C2447;
  --nz-line: #263056;
  --nz-control-border: #56608A;
  --nz-focus-ring: #FF7A55;
  --nz-success: #4FD1A1;
  --nz-warning: #F2B544;
  --nz-danger: #FF8A80;
}

/* ---------- Base (opcional: comenta este bloque si el tema ya define estilos) ---------- */
body { font-family: var(--nz-font-body); color: var(--nz-ink); background: var(--nz-surface); }
h1, h2, h3, .nz-wide { font-family: var(--nz-font-display); font-stretch: 125%; color: var(--nz-ink); text-wrap: balance; }
a { color: var(--nz-pulse-text); }
:focus-visible { outline: 2px solid var(--nz-focus-ring); outline-offset: 2px; }

/* ---------- Escala tipográfica ---------- */
.nz-display-xl { font-family: var(--nz-font-display); font-size: 72px; line-height: 0.95; font-weight: 800; letter-spacing: -0.01em; }
.nz-display-l { font-family: var(--nz-font-display); font-size: 48px; line-height: 1; font-weight: 800; letter-spacing: -0.005em; }
.nz-h1 { font-family: var(--nz-font-display); font-size: 36px; line-height: 1.1; font-weight: 700; }
.nz-h2 { font-family: var(--nz-font-display); font-size: 28px; line-height: 1.15; font-weight: 700; }
.nz-h3 { font-family: var(--nz-font-display); font-size: 21px; line-height: 1.25; font-weight: 700; }
.nz-body-l { font-family: var(--nz-font-body); font-size: 18px; line-height: 28px; font-weight: 400; }
.nz-body { font-family: var(--nz-font-body); font-size: 16px; line-height: 26px; font-weight: 400; }
.nz-small { font-family: var(--nz-font-body); font-size: 14px; line-height: 20px; font-weight: 500; }
.nz-label { font-family: var(--nz-font-body); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.12em; }
.nz-button { font-family: var(--nz-font-body); font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: 0.02em; }
.nz-data { font-family: var(--nz-font-data); font-size: 14px; line-height: 20px; font-weight: 500; }

/* ---------- Componentes ---------- */


/* Display siempre en Archivo Expanded (ancho 125%) */
.nz-display-xl, .nz-display-l, .nz-h1, .nz-h2, .nz-h3, .nz-wide { font-stretch: 125%; }
.nz-display-xl, .nz-display-l { text-transform: uppercase; }
.nz-label { text-transform: uppercase; }

.nz-row { display: flex; flex-wrap: wrap; gap: var(--nz-space-4); align-items: center; padding: var(--nz-space-4); }

/* Botones */
.nz-btn {
  display: inline-flex; align-items: center; gap: var(--nz-space-2);
  padding: var(--nz-space-3) var(--nz-space-6); border-radius: var(--nz-radius-md);
  font-family: var(--nz-font-body); font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: .02em;
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, background-color .12s ease;
}
.nz-btn:focus-visible { outline: 2px solid var(--nz-focus-ring); outline-offset: 2px; }
.nz-btn:active { transform: translateY(1px); }
.nz-btn--primary { background: var(--nz-brand-pulse); color: var(--nz-on-pulse); }
.nz-btn--primary:hover { background: var(--nz-pulse-text); color: var(--nz-brand-white); }
.nz-btn--dark { background: var(--nz-surface-inverse); color: var(--nz-ink-inverse); }
.nz-btn--secondary { background: transparent; color: var(--nz-ink); border-color: var(--nz-control-border); }
.nz-btn--secondary:hover { border-color: var(--nz-ink); }
.nz-btn[disabled] { opacity: .45; cursor: not-allowed; }
.nz-btn .nz-arrow { font-stretch: 125%; }

/* Badges */
.nz-badge {
  display: inline-flex; align-items: center; gap: var(--nz-space-1);
  padding: 4px var(--nz-space-2); border-radius: var(--nz-radius-sm);
  font-family: var(--nz-font-body); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.nz-badge--official { background: var(--nz-surface-inverse); color: var(--nz-ink-inverse); }
.nz-badge--offer { background: var(--nz-brand-pulse); color: var(--nz-on-pulse); }
.nz-badge--soft { background: var(--nz-pulse-soft); color: var(--nz-ink); }
.nz-badge--neutral { background: var(--nz-ice); color: var(--nz-ink); }
.nz-badge--stock { background: transparent; color: var(--nz-success); padding-left: 0; }
.nz-badge--low { background: transparent; color: var(--nz-warning); padding-left: 0; }
.nz-badge--out { background: transparent; color: var(--nz-danger); padding-left: 0; }

/* Tarjeta de producto */
.nz-card {
  display: flex; flex-direction: column; gap: var(--nz-space-2);
  background: var(--nz-surface-raised); border: 1px solid var(--nz-line); border-radius: var(--nz-radius-md);
  padding: var(--nz-space-4); min-width: 0;
  transition: box-shadow .15s ease;
}
.nz-card:hover { box-shadow: var(--nz-shadow-card); }
.nz-card__media {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--nz-radius-sm); background: var(--nz-ice);
  display: grid; place-items: center; overflow: hidden;
}
.nz-card__media .nz-badge { position: absolute; top: var(--nz-space-2); left: var(--nz-space-2); }
.nz-card__brand { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--nz-ink-muted); }
.nz-card__name { margin: 0; font-family: var(--nz-font-display); font-stretch: 125%; font-size: 17px; line-height: 1.25; font-weight: 700; color: var(--nz-ink); text-wrap: balance; }
.nz-card__spec { font-family: var(--nz-font-data); font-size: 13px; line-height: 18px; color: var(--nz-ink-muted); }
.nz-card__price { display: flex; align-items: baseline; gap: var(--nz-space-2); font-variant-numeric: tabular-nums; }
.nz-card__now { font-family: var(--nz-font-display); font-stretch: 125%; font-size: 22px; font-weight: 800; color: var(--nz-pulse-text); }
.nz-card__was { font-size: 14px; color: var(--nz-ink-muted); text-decoration: line-through; }