/* =============================================================
   base.css — Design tokens, reset, scrollbar y utilidades
   Cargado primero: define las variables que todos los demás
   archivos CSS usan.
   ============================================================= */

/* ── LOGO: mismo color y tipografía en todo el sitio ────────── */
.logo-name em, .lb-name em, .panel-logo em,
.chk-logo-name em, .adm-logo em, .adm-auth-logo em,
.dom-logo-name em, .pago-logo-name em, .ped-logo-name em {
  font-style: normal;
  color: inherit;
}

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* ── Paleta Mística ── */
  --cream:    #cc99ff;   /* fondo principal */
  --cream-dk: #bb88ee;   /* fondo secundario más oscuro */
  --white:    #f0e6ff;   /* superficies / cards */
  --dark:     #3d1f6e;   /* header y footer oscuro */
  --dark2:    #4a2880;

  /* Acento dorado (llama) */
  --copper:   #a0660e;
  --copper-l: #E8A020;
  --copper-p: rgba(180, 120, 20, 0.12);
  --copper-b: rgba(180, 120, 20, 0.28);
  --amber:    #E8A020;

  /* Acento violeta oscuro */
  --mystic:   #6633aa;
  --mystic-l: #9966cc;
  --mystic-p: rgba(102, 51, 170, 0.12);
  --mystic-b: rgba(102, 51, 170, 0.25);

  /* Verde */
  --forest:   #1a7a40;
  --forest-p: rgba(26, 122, 64, 0.12);
  --red:      #c0392b;

  /* Texto */
  --text:  #2d1155;    /* texto principal — violeta oscuro */
  --text2: #5e3d8a;    /* texto secundario */
  --text3: #8a66aa;    /* texto tenue */

  /* Bordes */
  --border:  rgba(102, 51, 170, 0.22);
  --border2: rgba(102, 51, 170, 0.35);

  /* Sombras */
  --s0: 0 1px 3px  rgba(0, 0, 0, 0.30);
  --s1: 0 2px 8px  rgba(0, 0, 0, 0.40);
  --s2: 0 8px 24px rgba(0, 0, 0, 0.50);
  --s3: 0 16px 48px rgba(0, 0, 0, 0.60);
  --sc: 0 4px 20px rgba(212, 175, 55, 0.30);

  /* Radios */
  --r:  6px;
  --r2: 10px;
  --r3: 16px;

  /* Easing */
  --e:        0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --e-spring: 0.4s  cubic-bezier(0.34, 1.36, 0.64, 1);

  /* Layout */
  --max:   1200px;
  --bar-h: 36px;
  --nav-h: 64px;
  --cat-h: 48px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
  background: var(--cream);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.store {
  background: #cc99ff;
  color: #2d1155;
}

::-webkit-scrollbar-track  { background: #cc99ff; }
::-webkit-scrollbar-thumb  { background: rgba(102,51,170,0.30); }

a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }
button, input, select { font-family: inherit; }
button { cursor: pointer; }

/* ── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: var(--cream); }
::-webkit-scrollbar-thumb  { background: var(--border2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--copper); }

/* ── UTILIDADES ─────────────────────────────────────────────── */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

/* ── SCROLL REVEAL ──────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.0s ease-out,
              transform 1.0s ease-out;
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.prod-card.reveal {
  transition: opacity 1.0s ease-out,
              transform 1.0s ease-out,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}
.reveal-delay-1 { transition-delay: 0.00s; }
.reveal-delay-2 { transition-delay: 0.12s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.36s; }