/* ============================================================
   COMPRA TU PANEL — Design System
   Estética: Premium · Minimalista · Tecnológico (All-Black)
   ============================================================ */

/* ── 1. TOKENS / VARIABLES ─────────────────────────────────── */
:root {
  /* Paleta principal */
  --color-primary:          #111111;
  --color-primary-hover:    #2C3136;
  --color-bg:               #F8F9FA;     /* zinc-50 */
  --color-surface:          #FFFFFF;
  --color-text-dark:        #111111;     /* zinc-900 */
  --color-text-muted:       #71717A;     /* zinc-500 */
  --color-text-subtle:      #A1A1AA;     /* zinc-400 */
  --color-border:           #E4E4E7;     /* zinc-200 */
  --color-border-light:     rgba(228,228,231,0.8);
  --color-white:            #FFFFFF;

  /* Zinc scale (usada en hover states y fondos) */
  --zinc-100:               #F4F4F5;
  --zinc-200:               #E4E4E7;
  --zinc-300:               #D4D4D8;
  --zinc-400:               #A1A1AA;
  --zinc-500:               #71717A;
  --zinc-800:               #27272A;
  --zinc-900:               #18181B;

  /* Accent — Emerald (hover de cards, badges "más vendido", iconos tech) */
  --color-accent:           #10B981;     /* emerald-500 */
  --color-accent-hover:     #059669;     /* emerald-600 */
  --color-accent-light:     #ECFDF5;     /* emerald-50 */
  --color-accent-border:    rgba(16,185,129,0.2);
  --color-accent-text:      #065F46;     /* emerald-800 */

  /* Tipografía */
  --font-base:              'Inter', sans-serif;
  --text-h1-size:           clamp(2.5rem, 5vw, 4.375rem); /* 5xl→7xl */
  --text-h1-weight:         600;
  --text-h2-size:           clamp(1.875rem, 3vw, 2.5rem);
  --text-h2-weight:         600;
  --text-h3-size:           1.25rem;
  --text-h3-weight:         600;
  --text-h4-size:           1.125rem;
  --text-h4-weight:         500;
  --text-body-size:         1rem;
  --text-body-line:         1.6;
  --text-sm-size:           0.875rem;
  --text-xs-size:           0.75rem;

  /* Letter spacing (tracking) */
  --tracking-tight:         -0.025em;
  --tracking-tighter:       -0.05em;

  /* Border radius */
  --radius-sm:              4px;         /* badges, etiquetas */
  --radius:                 8px;         /* inputs, elementos pequeños */
  --radius-lg:              16px;        /* cards (rounded-2xl) */
  --radius-xl:              24px;        /* kit banner (rounded-3xl) */
  --radius-full:            9999px;      /* pills, botones redondeados */

  /* Sombras */
  --shadow-card-hover:      0 8px 30px rgba(0,0,0,0.06);
  --shadow-hero-btn:        0 0 30px -5px rgba(255,255,255,0.3);
  --shadow-nav:             0 1px 0 var(--color-border-light);

  /* Espaciado */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2rem;
  --space-xl:   3rem;
  --space-2xl:  5rem;
  --space-3xl:  7rem;

  /* Contenedor */
  --container-max:   1280px;
  --container-pad:   clamp(1.5rem, 5vw, 2rem);

  /* Transiciones */
  --transition:       0.2s ease;
  --transition-slow:  0.5s ease;

  /* Efectos especiales */
  --backdrop-blur:    blur(12px);
  --glass-bg:         linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
}

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

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

body {
  font-family: var(--font-base);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--color-text-dark);
  background-color: var(--color-bg);
}

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
button { font-family: var(--font-base); cursor: pointer; }

/* Selección de texto */
::selection {
  background-color: rgba(16,185,129,0.2);
  color: var(--color-accent-text);
}

/* ── 3. TIPOGRAFÍA ──────────────────────────────────────────── */
h1 {
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}
h2 {
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
}
h3 {
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
}
h4 {
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  line-height: 1.4;
}
p {
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--color-text-muted);
}

/* ── 4. LAYOUT HELPERS ──────────────────────────────────────── */
.ctp-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ── 5. BOTONES ─────────────────────────────────────────────── */
.ctp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.875rem 2rem;
  font-family: var(--font-base);
  font-size: var(--text-sm-size);
  font-weight: 600;
  line-height: 1;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
}

/* Primario oscuro */
.ctp-btn--primary {
  background-color: var(--zinc-900);
  color: var(--color-white);
}
.ctp-btn--primary:hover {
  background-color: var(--zinc-800);
}

/* Hero: blanco sobre fondo oscuro */
.ctp-btn--hero {
  background-color: var(--color-white);
  color: var(--zinc-900);
  box-shadow: var(--shadow-hero-btn);
  padding: 1rem 2rem;
  font-size: 1rem;
}
.ctp-btn--hero:hover {
  background-color: var(--zinc-100);
}

/* Outline sobre fondo oscuro */
.ctp-btn--outline-dark {
  background-color: transparent;
  color: var(--color-white);
  border: 1.5px solid rgba(255,255,255,0.15);
}
.ctp-btn--outline-dark:hover {
  background-color: rgba(255,255,255,0.06);
}

/* Outline sobre fondo claro */
.ctp-btn--outline {
  background-color: var(--color-white);
  color: var(--zinc-900);
  border: 1.5px solid var(--zinc-200);
}
.ctp-btn--outline:hover {
  background-color: var(--color-bg);
}

/* ── 6. BADGES / ETIQUETAS ──────────────────────────────────── */
.ctp-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  font-size: var(--text-xs-size);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

.ctp-badge--dark {
  background-color: var(--zinc-900);
  color: var(--color-white);
}
.ctp-badge--accent {
  background-color: var(--color-accent-light);
  color: var(--color-accent-text);
  border: 1px solid rgba(16,185,129,0.2);
}
.ctp-badge--outline {
  background-color: var(--color-white);
  color: var(--zinc-900);
  border: 1px solid var(--zinc-200);
}

/* Pill tag (redondeado, para filtros y eyebrows) */
.ctp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  font-size: var(--text-xs-size);
  font-weight: 500;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.1);
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  color: rgba(255,255,255,0.8);
}

/* ── 7. EFECTOS ESPECIALES ──────────────────────────────────── */
.sun-flare {
  background: radial-gradient(circle at 50% 50%, rgba(250,204,21,0.15) 0%, rgba(250,204,21,0) 50%);
  pointer-events: none;
}

.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
}

/* Gradient text */
.ctp-gradient-text {
  background: linear-gradient(to right, #E4E4E7, #71717A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}