/** Shopify CDN: Minification failed

Line 38:0 All "@import" rules must come first

**/
/* ============================================
   VOLTEX PRO — PALETA Y ESTILOS DE MARCA
   Pegar en: Editor de temas > Personalizar > 
   (icono de código </>) > Agregar CSS personalizado
   ============================================ */

:root {
  /* Colores primarios */
  --voltex-black: #0D0D0D;
  --voltex-black-soft: #1A1A1A;

  /* Colores secundarios (dorado) */
  --voltex-gold: #C9A227;
  --voltex-gold-bright: #D4AF37;

  /* Colores de soporte */
  --voltex-gray: #B8B8B8;
  --voltex-off-white: #F5F5F5;

  /* Texto */
  --voltex-text-light: #FFFFFF;
  --voltex-text-light-soft: #E5E5E5;
  --voltex-text-dark: #1A1A1A;

  /* Estado / urgencia */
  --voltex-red: #B33A3A;
}

/* ============================================
   TIPOGRAFÍA
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&family=Inter:wght@400;500;600&display=swap');

h1, h2, h3,
.hero__heading,
.banner__heading {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
}

body, p, span, .rte {
  font-family: 'Inter', sans-serif !important;
}

/* ============================================
   HEADER — de morado a negro carbón
   ============================================ */

.header,
.header-wrapper,
.section-header {
  background-color: var(--voltex-black) !important;
  border-bottom: 1px solid var(--voltex-gold);
}

.header a,
.header .header__menu-item,
.header nav a {
  color: var(--voltex-text-light) !important;
}

.header a:hover,
.header .header__menu-item:hover {
  color: var(--voltex-gold) !important;
}

/* Botón activo del menú (ej. "Inicio") */
.header__menu-item--active,
.header .link--active {
  background-color: var(--voltex-gold) !important;
  color: var(--voltex-black) !important;
}

/* ============================================
   BOTONES PRINCIPALES (CTA)
   ============================================ */

.button,
.button--primary,
button[type="submit"],
.shopify-payment-button__button {
  background-color: var(--voltex-gold) !important;
  color: var(--voltex-black) !important;
  border: none !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: background-color 0.2s ease;
}

.button:hover,
.button--primary:hover {
  background-color: var(--voltex-gold-bright) !important;
}

/* Botón secundario (outline) */
.button--secondary {
  background-color: transparent !important;
  border: 2px solid var(--voltex-gold) !important;
  color: var(--voltex-gold) !important;
}

/* ============================================
   HERO / IMAGE SLIDE
   ============================================ */

.banner,
.slideshow {
  background-color: var(--voltex-black) !important;
}

.banner__box,
.slideshow__text-wrapper {
  background-color: rgba(13, 13, 13, 0.85) !important;
  border: 1px solid var(--voltex-gold);
}

.banner__heading,
.slideshow__title {
  color: var(--voltex-text-light) !important;
}

.banner__text,
.slideshow__text {
  color: var(--voltex-text-light-soft) !important;
}

/* ============================================
   TABLA COMPARATIVA
   ============================================ */

.comparison-table,
table.comparison {
  background-color: var(--voltex-off-white);
}

.comparison-table__column--featured,
.comparison-table th.featured {
  background-color: var(--voltex-black) !important;
  color: var(--voltex-gold) !important;
}

.comparison-table__check,
.icon-checkmark {
  color: var(--voltex-gold) !important;
}

.comparison-table__cross,
.icon-cross {
  color: var(--voltex-gray) !important;
}

/* ============================================
   SECCIONES ALTERNADAS (respiración visual)
   ============================================ */

.section-alternate-dark {
  background-color: var(--voltex-black-soft) !important;
  color: var(--voltex-text-light) !important;
}

.section-alternate-light {
  background-color: var(--voltex-off-white) !important;
  color: var(--voltex-text-dark) !important;
}

/* ============================================
   FOOTER
   ============================================ */

.footer,
.section-footer {
  background-color: var(--voltex-black) !important;
  color: var(--voltex-text-light-soft) !important;
}

.footer a {
  color: var(--voltex-gray) !important;
}

.footer a:hover {
  color: var(--voltex-gold) !important;
}