/* ============================================================
   SKYELTE — PALETA DE COLORES
   Inspirada en Saraviamtech | fondo oscuro conservado
   Para usar: var(--color-nombre)
   ============================================================ */

:root {

  /* ── ACENTOS PRINCIPALES (reemplaza el dorado #D4AF37) ── */
  --accent-primary:   #6D30FB;   /* violeta eléctrico  — botones CTA, íconos activos    */
  --accent-secondary: #AB33F5;   /* magenta-violeta     — hover, degrade, badges         */
  --accent-warm:      #FF6914;   /* naranja vibrante    — etiquetas, destacados, precios */
  --accent-gold:      #D4AF37;   /* dorado original     — disponible si se necesita      */

  /* ── FONDOS (mantenemos el oscuro de SkyElite) ── */
  --bg-base:          #0a0906;   /* fondo raíz — no cambiar                              */
  --bg-surface:       #111008;   /* cards, secciones sobre base                          */
  --bg-elevated:      #1a1505;   /* cards destacadas, modales                            */
  --bg-overlay:       rgba(10,9,6,.92); /* overlays hero, navbar scrolled               */

  /* ── TEXTOS ── */
  --text-white:       #FFFFFF;   /* títulos principales sobre oscuro                     */
  --text-light:       #E8E4DC;   /* párrafos principales                                 */
  --text-muted:       #9A9488;   /* texto secundario, placeholders, meta info            */
  --text-dim:         #5C5648;   /* texto deshabilitado, divisores                       */

  /* ── BORDES Y SEPARADORES ── */
  --border-subtle:    rgba(255,255,255,.07);   /* bordes de cards suaves                 */
  --border-accent:    rgba(109,48,251,.35);    /* bordes con tono violeta                */
  --border-gold:      rgba(212,175,55,.3);     /* bordes dorados (acento original)       */

  /* ── GRADIENTES PREDEFINIDOS ── */
  --gradient-accent:  linear-gradient(135deg, #6D30FB 0%, #AB33F5 100%);
  --gradient-warm:    linear-gradient(135deg, #FF6914 0%, #AB33F5 100%);
  --gradient-gold:    linear-gradient(135deg, #D4AF37 0%, #FF6914 100%);
  --gradient-dark:    linear-gradient(145deg, #1a1505, #25200a);

  /* ── BRILLOS / GLOWS ── */
  --glow-primary:     rgba(109,48,251,.20);
  --glow-secondary:   rgba(171,51,245,.15);
  --glow-warm:        rgba(255,105,20,.18);
  --glow-gold:        rgba(212,175,55,.15);

  /* ── TIPOGRAFÍA (fuentes actuales de SkyElite) ── */
  --font-display:     'Bodoni Moda', serif;
  --font-body:        'Jost', sans-serif;

  /* ── ESPACIADO Y RADIOS (referencia rápida) ── */
  --radius-sm:        0.75rem;
  --radius-md:        1.25rem;
  --radius-lg:        1.5rem;
  --transition-fast:  all .25s ease;
  --transition-base:  all .35s ease;
  --transition-slow:  all .65s ease;
}

/* ============================================================
   CLASES DE UTILIDAD RÁPIDA
   Úsalas directamente en los HTML para aplicar la paleta
   ============================================================ */

/* Textos */
.text-accent         { color: var(--accent-primary); }
.text-accent-2       { color: var(--accent-secondary); }
.text-warm           { color: var(--accent-warm); }
.text-gold           { color: var(--accent-gold); }
.text-muted-sky      { color: var(--text-muted); }

/* Fondos */
.bg-surface-sky      { background: var(--bg-surface); }
.bg-elevated-sky     { background: var(--bg-elevated); }

/* Botones acento */
.btn-accent {
  background: var(--gradient-accent);
  color: #fff;
  border: none;
  padding: .75rem 2rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .05em;
  cursor: pointer;
  transition: var(--transition-fast);
}
.btn-accent:hover {
  box-shadow: 0 8px 28px var(--glow-primary);
  transform: translateY(-2px);
}

/* Botón cálido */
.btn-warm {
  background: var(--gradient-warm);
  color: #fff;
  border: none;
  padding: .75rem 2rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .05em;
  cursor: pointer;
  transition: var(--transition-fast);
}
.btn-warm:hover {
  box-shadow: 0 8px 28px var(--glow-warm);
  transform: translateY(-2px);
}

/* Línea separadora acento */
.divider-accent {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent-primary), transparent);
  border: none;
  margin: 2rem 0;
}

/* Badge / etiqueta */
.badge-accent {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .85rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: rgba(109,48,251,.15);
  color: var(--accent-secondary);
  border: 1px solid rgba(109,48,251,.25);
}
.badge-warm {
  background: rgba(255,105,20,.12);
  color: var(--accent-warm);
  border-color: rgba(255,105,20,.25);
}
.badge-gold {
  background: rgba(212,175,55,.1);
  color: var(--accent-gold);
  border-color: rgba(212,175,55,.25);
}

/* Stroke de texto */
.text-stroke-accent  { -webkit-text-stroke: 1.5px var(--accent-primary); color: transparent; }
.text-stroke-gold    { -webkit-text-stroke: 1.5px var(--accent-gold);    color: transparent; }

/* Glow en ícono / elemento */
.glow-accent  { text-shadow: 0 0 18px var(--glow-primary); }
.glow-warm    { text-shadow: 0 0 18px var(--glow-warm); }

/* ============================================================
   BOTONES ESTILO SARAVIAMTECH — adaptados a fondo oscuro
   Uso: agrega la clase al <a> o <button> y quita el style=""
   ============================================================

   1. sky-btn            → violeta sólido (CTA principal)
   2. sky-btn style2     → blanco sólido, hover violeta
   3. sky-btn style3     → oscuro sólido, hover violeta
   4. sky-btn style-border  → borde blanco, fondo transparente, hover blanco
   5. sky-btn style-gradient → degradado violeta→naranja (más llamativo)
   ============================================================ */

/* BASE — propiedades compartidas por todos */
.sky-btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 14px 28px;
  border-radius: 10px;
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  transition: color .3s ease, box-shadow .3s ease, transform .25s ease;
  background-color: var(--accent-primary);
  color: #fff;
}
.sky-btn:hover {
  box-shadow: 0 8px 30px var(--glow-primary);
  transform: translateY(-2px);
  color: #fff;
}

/* ESTILO 2 — fondo blanco, texto oscuro, hover violeta */
.sky-btn.style2 {
  background-color: #fff;
  color: #0a0906;
}
.sky-btn.style2:hover {
  background-color: var(--accent-primary);
  color: #fff;
  box-shadow: 0 8px 30px var(--glow-primary);
}

/* ESTILO 3 — fondo muy oscuro, hover violeta */
.sky-btn.style3 {
  background-color: #111008;
  color: #fff;
}
.sky-btn.style3:hover {
  background-color: var(--accent-primary);
  color: #fff;
  box-shadow: 0 8px 30px var(--glow-primary);
}

/* ESTILO BORDER — solo borde blanco, fondo transparente */
.sky-btn.style-border {
  background: transparent;
  border: 2px solid rgba(255,255,255,.35);
  color: #fff;
  padding: 12px 28px;
}
.sky-btn.style-border:hover {
  background: #fff;
  border-color: #fff;
  color: #0a0906;
  box-shadow: 0 8px 24px rgba(255,255,255,.12);
}

/* ESTILO BORDER ACENTO — borde violeta, hover relleno violeta */
.sky-btn.style-border-accent {
  background: transparent;
  border: 2px solid var(--accent-primary);
  color: var(--accent-primary);
  padding: 12px 28px;
}
.sky-btn.style-border-accent:hover {
  background: var(--accent-primary);
  color: #fff;
  box-shadow: 0 8px 30px var(--glow-primary);
}

/* ESTILO GRADIENTE — violeta→naranja (el más llamativo) */
.sky-btn.style-gradient {
  background: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-warm) 100%);
  color: #fff;
}
.sky-btn.style-gradient:hover {
  box-shadow: 0 8px 30px var(--glow-warm);
  filter: brightness(1.1);
}

/* ── REFERENCIA RÁPIDA DE USO ──────────────────────────────
   CTA principal:      class="sky-btn"
   Secundario claro:   class="sky-btn style2"
   Oscuro discreto:    class="sky-btn style3"
   Solo borde blanco:  class="sky-btn style-border"
   Borde violeta:      class="sky-btn style-border-accent"
   Gradiente llamativo:class="sky-btn style-gradient"
   ─────────────────────────────────────────────────────── */