/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║  PARLOX BRAND KIT v1.0                                      ║
 * ║  Fuente de verdad para todos los proyectos Parlox            ║
 * ║                                                              ║
 * ║  Uso: <link rel="stylesheet" href="parlox-brand.css">       ║
 * ║  Fonts: Incluir Google Fonts por separado (ver abajo)        ║
 * ║                                                              ║
 * ║  Google Fonts link:                                          ║
 * ║  https://fonts.googleapis.com/css2?family=Outfit:wght@       ║
 * ║  100;300;400;500;600;700;900&family=JetBrains+Mono:wght@    ║
 * ║  300;400;500;600&display=swap                                ║
 * ╚══════════════════════════════════════════════════════════════╝
 *
 * INSTRUCCIÓN PARA CLAUDE:
 * Cuando Luis diga "usá el brand kit", "respetá la marca",
 * "colores Parlox" o similar, aplicar estos tokens y componentes
 * sin preguntar. Este archivo es la referencia absoluta.
 */


/* ═══════════════════════════════════════════
   1. DESIGN TOKENS — COLORES
   ═══════════════════════════════════════════ */
:root {
  /* ── Superficies (de más oscura a más clara) ── */
  --px-black:        #030508;
  --px-surface-0:    #080d14;
  --px-surface-1:    #0c1420;
  --px-surface-2:    #101c2e;
  --px-surface-3:    #162236;

  /* ── Bordes ── */
  --px-border:       #162236;
  --px-border-hover: #1a3a6a;
  --px-border-glow:  #1e4a8a;

  /* ── Texto ── */
  --px-text:         #e4eaf4;
  --px-text-mid:     #8899b4;
  --px-text-dim:     #3d5070;
  --px-text-inverse: #030508;

  /* ── Marca primarios ── */
  --px-cyan:         #00e5ff;
  --px-magenta:      #ff2d8a;
  --px-violet:       #7c3aed;
  --px-gold:         #f0c040;

  /* ── Estados ── */
  --px-green:        #22c55e;
  --px-red:          #ef4444;
  --px-orange:       #f97316;

  /* ── Alphas (para fondos sutiles) ── */
  --px-cyan-5:       rgba(0, 229, 255, 0.05);
  --px-cyan-10:      rgba(0, 229, 255, 0.10);
  --px-cyan-20:      rgba(0, 229, 255, 0.20);
  --px-magenta-5:    rgba(255, 45, 138, 0.05);
  --px-magenta-10:   rgba(255, 45, 138, 0.10);
  --px-violet-5:     rgba(124, 58, 237, 0.05);
  --px-violet-10:    rgba(124, 58, 237, 0.10);
  --px-gold-5:       rgba(240, 192, 64, 0.05);
  --px-gold-10:      rgba(240, 192, 64, 0.10);
  --px-green-5:      rgba(34, 197, 94, 0.05);
  --px-green-10:     rgba(34, 197, 94, 0.10);
  --px-red-5:        rgba(239, 68, 68, 0.05);
  --px-red-10:       rgba(239, 68, 68, 0.10);

  /* ── Gradientes de marca ── */
  --px-gradient-brand:    linear-gradient(135deg, var(--px-cyan), var(--px-magenta));
  --px-gradient-commerce: linear-gradient(135deg, var(--px-cyan), #0099cc);
  --px-gradient-gov:      linear-gradient(135deg, var(--px-magenta), #cc1166);
  --px-gradient-platform: linear-gradient(135deg, var(--px-violet), #5b21b6);
  --px-gradient-surface:  linear-gradient(180deg, var(--px-surface-0), var(--px-surface-1));

  /* ── Líneas de negocio (semánticos) ── */
  --px-commerce:     var(--px-cyan);
  --px-gov:          var(--px-magenta);
  --px-platform:     var(--px-violet);

  /* ── Tipografía ── */
  --px-font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --px-font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* ── Radios ── */
  --px-radius-sm:    6px;
  --px-radius-md:    10px;
  --px-radius-lg:    14px;
  --px-radius-xl:    20px;
  --px-radius-full:  100px;

  /* ── Sombras ── */
  --px-shadow-sm:    0 1px 3px rgba(0,0,0,0.4);
  --px-shadow-md:    0 4px 12px rgba(0,0,0,0.5);
  --px-shadow-lg:    0 8px 32px rgba(0,0,0,0.6);
  --px-shadow-glow-cyan:    0 0 20px rgba(0,229,255,0.15);
  --px-shadow-glow-magenta: 0 0 20px rgba(255,45,138,0.15);

  /* ── Transiciones ── */
  --px-transition:   all 0.25s ease;
  --px-transition-fast: all 0.15s ease;

  /* ── Z-index scale ── */
  --px-z-base:       1;
  --px-z-dropdown:   10;
  --px-z-sticky:     20;
  --px-z-modal:      50;
  --px-z-toast:      60;
  --px-z-overlay:    100;
}


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

html {
  scroll-behavior: smooth;
  background: var(--px-black);
  color: var(--px-text);
  font-family: var(--px-font-display);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--px-black);
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: var(--px-cyan);
  text-decoration: none;
  transition: var(--px-transition-fast);
}
a:hover { opacity: 0.8; }

::selection {
  background: var(--px-cyan-20);
  color: var(--px-text);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--px-surface-0); }
::-webkit-scrollbar-thumb {
  background: var(--px-surface-3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--px-text-dim); }


/* ═══════════════════════════════════════════
   3. TIPOGRAFÍA
   ═══════════════════════════════════════════ */

/* Display — logos, heroes */
.px-display {
  font-family: var(--px-font-display);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* Headings */
h1, .px-h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
h2, .px-h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
h3, .px-h3 { font-size: clamp(17px, 2vw, 22px); font-weight: 600; line-height: 1.3; }
h4, .px-h4 { font-size: 15px; font-weight: 600; line-height: 1.4; }

/* Body */
.px-body    { font-size: 14px; color: var(--px-text-mid); line-height: 1.7; }
.px-body-sm { font-size: 13px; color: var(--px-text-mid); line-height: 1.6; }

/* Mono — datos, código, métricas */
.px-mono {
  font-family: var(--px-font-mono);
  font-size: 13px;
  letter-spacing: -0.01em;
}

/* Labels — secciones, categorías */
.px-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--px-cyan);
}
.px-label.commerce { color: var(--px-commerce); }
.px-label.gov      { color: var(--px-gov); }
.px-label.platform  { color: var(--px-platform); }

/* Caption */
.px-caption {
  font-size: 11px;
  color: var(--px-text-dim);
  letter-spacing: 0.08em;
}

/* Gradient text */
.px-text-gradient {
  background: var(--px-gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ═══════════════════════════════════════════
   4. COMPONENTES — BOTONES
   ═══════════════════════════════════════════ */
.px-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--px-radius-md);
  font-family: var(--px-font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--px-transition);
  white-space: nowrap;
}
.px-btn:active { transform: scale(0.97); }

/* Primary — fondo cyan */
.px-btn-primary {
  background: var(--px-cyan);
  color: var(--px-text-inverse);
  border-color: var(--px-cyan);
}
.px-btn-primary:hover {
  background: #00ccee;
  box-shadow: var(--px-shadow-glow-cyan);
}

/* Secondary — outline */
.px-btn-secondary {
  background: transparent;
  color: var(--px-cyan);
  border-color: var(--px-border-hover);
}
.px-btn-secondary:hover {
  background: var(--px-cyan-5);
  border-color: var(--px-cyan);
}

/* Ghost — sin borde */
.px-btn-ghost {
  background: transparent;
  color: var(--px-text-mid);
  border-color: transparent;
}
.px-btn-ghost:hover {
  background: var(--px-surface-1);
  color: var(--px-text);
}

/* Danger */
.px-btn-danger {
  background: var(--px-red);
  color: white;
  border-color: var(--px-red);
}
.px-btn-danger:hover { background: #dc2626; }

/* Tamaños */
.px-btn-sm { padding: 6px 14px; font-size: 12px; border-radius: var(--px-radius-sm); }
.px-btn-lg { padding: 14px 28px; font-size: 15px; border-radius: var(--px-radius-lg); }


/* ═══════════════════════════════════════════
   5. COMPONENTES — CARDS
   ═══════════════════════════════════════════ */
.px-card {
  background: var(--px-surface-0);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-lg);
  padding: 24px;
  transition: var(--px-transition);
}
.px-card:hover {
  border-color: var(--px-border-hover);
}

/* Card con acento de color superior */
.px-card-accent {
  position: relative;
  overflow: hidden;
}
.px-card-accent::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--px-gradient-brand);
  opacity: 0;
  transition: opacity 0.3s;
}
.px-card-accent:hover::before { opacity: 1; }

.px-card-accent.commerce::before { background: var(--px-commerce); opacity: 1; }
.px-card-accent.gov::before      { background: var(--px-gov); opacity: 1; }
.px-card-accent.platform::before  { background: var(--px-platform); opacity: 1; }

/* Card elevada */
.px-card-elevated {
  background: var(--px-surface-1);
  box-shadow: var(--px-shadow-md);
}


/* ═══════════════════════════════════════════
   6. COMPONENTES — BADGES & STATUS
   ═══════════════════════════════════════════ */
.px-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--px-radius-full);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.px-badge-cyan    { background: var(--px-cyan-10); color: var(--px-cyan); border: 1px solid var(--px-cyan-20); }
.px-badge-magenta { background: var(--px-magenta-10); color: var(--px-magenta); border: 1px solid rgba(255,45,138,0.2); }
.px-badge-violet  { background: var(--px-violet-10); color: var(--px-violet); border: 1px solid rgba(124,58,237,0.2); }
.px-badge-gold    { background: var(--px-gold-10); color: var(--px-gold); border: 1px solid rgba(240,192,64,0.2); }
.px-badge-green   { background: var(--px-green-10); color: var(--px-green); border: 1px solid rgba(34,197,94,0.2); }
.px-badge-red     { background: var(--px-red-10); color: var(--px-red); border: 1px solid rgba(239,68,68,0.2); }

/* Status con dot animado */
.px-status { display: inline-flex; align-items: center; gap: 6px; }
.px-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--px-green);
  animation: px-pulse 2s infinite;
}
.px-status-dot.offline { background: var(--px-red); animation: none; }
.px-status-dot.warning { background: var(--px-orange); }

@keyframes px-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}


/* ═══════════════════════════════════════════
   7. COMPONENTES — CHIPS / TAGS
   ═══════════════════════════════════════════ */
.px-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--px-radius-sm);
  font-family: var(--px-font-mono);
  font-size: 11px;
  background: var(--px-surface-1);
  border: 1px solid var(--px-border);
  color: var(--px-text-mid);
  transition: var(--px-transition-fast);
}
.px-chip:hover { border-color: var(--px-border-hover); }
.px-chip.active { border-color: var(--px-cyan-20); color: var(--px-cyan); background: var(--px-cyan-5); }


/* ═══════════════════════════════════════════
   8. COMPONENTES — INPUTS
   ═══════════════════════════════════════════ */
.px-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--px-surface-1);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-md);
  color: var(--px-text);
  font-family: var(--px-font-display);
  font-size: 14px;
  transition: var(--px-transition);
  outline: none;
}
.px-input::placeholder { color: var(--px-text-dim); }
.px-input:focus {
  border-color: var(--px-cyan);
  box-shadow: 0 0 0 3px var(--px-cyan-10);
}
.px-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.px-input-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--px-text-mid);
  margin-bottom: 6px;
}

textarea.px-input {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

select.px-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238899b4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}


/* ═══════════════════════════════════════════
   9. COMPONENTES — TABLAS
   ═══════════════════════════════════════════ */
.px-table {
  width: 100%;
  border-collapse: collapse;
}
.px-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--px-text-dim);
  border-bottom: 1px solid var(--px-border);
  background: var(--px-surface-0);
  position: sticky;
  top: 0;
  z-index: var(--px-z-sticky);
}
.px-table td {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--px-text-mid);
  border-bottom: 1px solid var(--px-border);
  transition: background 0.15s;
}
.px-table tr:hover td {
  background: var(--px-surface-0);
}
.px-table td.mono {
  font-family: var(--px-font-mono);
}
.px-table td.highlight {
  color: var(--px-text);
  font-weight: 500;
}
.px-table td.price {
  font-family: var(--px-font-mono);
  color: var(--px-gold);
  font-weight: 500;
}


/* ═══════════════════════════════════════════
   10. COMPONENTES — SECTION LABELS
   ═══════════════════════════════════════════ */
.px-section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--px-cyan);
  margin-bottom: 14px;
}
.px-section-label::before {
  content: '';
  width: 20px;
  height: 1px;
  background: currentColor;
}
.px-section-label.commerce { color: var(--px-commerce); }
.px-section-label.gov      { color: var(--px-gov); }
.px-section-label.platform  { color: var(--px-platform); }
.px-section-label.gold     { color: var(--px-gold); }


/* ═══════════════════════════════════════════
   11. EFFECTS
   ═══════════════════════════════════════════ */

/* Grain overlay — aplicar a body o contenedor principal */
.px-grain::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* Grid de fondo sutil */
.px-grid-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(0,229,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 50% 20%, black 10%, transparent 60%);
}

/* Divider horizontal */
.px-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--px-border-hover), transparent);
  max-width: 1200px;
  margin: 0 auto;
}

/* Orb glow — decorativo */
.px-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.12;
  pointer-events: none;
  animation: px-orb-float 14s ease-in-out infinite;
}
.px-orb.cyan    { background: var(--px-cyan); }
.px-orb.magenta { background: var(--px-magenta); }
.px-orb.violet  { background: var(--px-violet); }

@keyframes px-orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(25px, -15px) scale(1.08); }
  66%      { transform: translate(-15px, 25px) scale(0.95); }
}


/* ═══════════════════════════════════════════
   12. ANIMACIONES
   ═══════════════════════════════════════════ */
.px-fade-up {
  animation: px-fadeUp 0.6s ease both;
}
.px-fade-up-delay-1 { animation-delay: 0.1s; }
.px-fade-up-delay-2 { animation-delay: 0.2s; }
.px-fade-up-delay-3 { animation-delay: 0.3s; }
.px-fade-up-delay-4 { animation-delay: 0.4s; }

@keyframes px-fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.px-fade-in {
  animation: px-fadeIn 0.4s ease both;
}
@keyframes px-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ═══════════════════════════════════════════
   13. LAYOUT UTILITIES
   ═══════════════════════════════════════════ */
.px-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.px-section {
  padding: 80px 0;
}

.px-grid-2  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.px-grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.px-grid-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.px-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

.px-flex     { display: flex; }
.px-flex-col { display: flex; flex-direction: column; }
.px-flex-center { display: flex; align-items: center; justify-content: center; }
.px-flex-between { display: flex; align-items: center; justify-content: space-between; }
.px-gap-sm  { gap: 8px; }
.px-gap-md  { gap: 16px; }
.px-gap-lg  { gap: 24px; }
.px-gap-xl  { gap: 32px; }

.px-text-center { text-align: center; }
.px-text-right  { text-align: right; }

/* ═══════════════════════════════════════════
   14. RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .px-grid-2, .px-grid-3, .px-grid-4 {
    grid-template-columns: 1fr;
  }
  .px-container {
    padding: 0 16px;
  }
  .px-section {
    padding: 48px 0;
  }
  .px-hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
  .px-hide-desktop { display: none !important; }
}
</style>