/* ================================================================
   RESET.CSS — Variables globales + reset base
   Todos los design tokens viven aquí. Ningún color hardcodeado
   fuera de este archivo: siempre var(--token).
   ================================================================ */

:root {
  /* ── Paleta ─────────────────────────────────────────────── */
  --bg:              #ffffff;   /* fondo principal: blanco puro             */
  --bg-alt:          #f2f2f2;   /* fondo secundario, un tono más oscuro     */
  --bg-card:         #ffffff;   /* superficie de tarjetas de producto       */
  --bg-invert:       #0e0d0c;   /* negro profundo para secciones invertidas */

  --ink:             #0e0d0c;   /* texto principal                          */
  --ink-muted:       #5a5750;   /* texto secundario / muted                 */
  --ink-faint:       #9c9890;   /* texto muy atenuado / placeholders        */
  --ink-on-dark:     #f0ede7;   /* texto sobre fondo oscuro                 */

  --red:             #c01717;   /* acento rojo — usarlo con moderación      */
  --red-dim:         rgba(192, 23, 23, 0.10);

  --border:          rgba(14, 13, 12, 0.09);
  --border-strong:   rgba(14, 13, 12, 0.20);
  --border-invert:   rgba(240, 237, 231, 0.15);

  /* ── Tipografía ─────────────────────────────────────────── */
  --font-display:    Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --font-body:       Arial, 'Helvetica Neue', Helvetica, sans-serif;

  /* ── Espaciado (múltiplos de 4px) ───────────────────────── */
  --s-1:   0.25rem;   /*  4px */
  --s-2:   0.5rem;    /*  8px */
  --s-3:   0.75rem;   /* 12px */
  --s-4:   1rem;      /* 16px */
  --s-5:   1.25rem;   /* 20px */
  --s-6:   1.5rem;    /* 24px */
  --s-8:   2rem;      /* 32px */
  --s-10:  2.5rem;    /* 40px */
  --s-12:  3rem;      /* 48px */
  --s-16:  4rem;      /* 64px */
  --s-20:  5rem;      /* 80px */
  --s-24:  6rem;      /* 96px */
  --s-32:  8rem;      /* 128px */

  /* ── Movimiento ─────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    160ms;
  --dur-base:    300ms;
  --dur-slow:    600ms;
  --dur-xslow:   900ms;

  /* ── Índices Z ──────────────────────────────────────────── */
  --z-bg:     -1;
  --z-nav:    100;
  --z-cart:   200;
  --z-toast:  300;
  --z-cursor: 9999;
}

/* ================================================================
   RESET
   ================================================================ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  background-color: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  cursor: auto;
}

/* Cursor por defecto en móvil (sin cursor custom) */

img, video {
  display: block;
  max-width: 100%;
  object-fit: cover;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
  color: inherit;
}

@media (pointer: coarse) {
  button { cursor: pointer; }
}

ul, ol { list-style: none; }

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
  background: none;
  color: inherit;
}

::selection {
  background: var(--ink);
  color: var(--bg);
}