/*
 * Green Conexion — Liquid Glass Design 2026
 * Navbar y Footer: siempre dark (no cambian con el tema)
 * Resto: responde al toggle dark/light
 */

/* ======================================================
   VARIABLES FIJAS DE MARCA
====================================================== */
:root {
  --gc-primary:        #00e676;
  --gc-primary-dark:   #00a152;
  --gc-secondary:      #1de9b6;
  --gc-gradient:       linear-gradient(135deg, #00e676 0%, #1de9b6 100%);
  --gc-gradient-btn:   linear-gradient(135deg, #00c853 0%, #00e676 60%, #1de9b6 100%);
  --gc-radius:         14px;
  --gc-radius-lg:      20px;
  --gc-transition:     0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --gc-glass-blur:     blur(22px) saturate(160%);
  --gc-glass-blur-sm:  blur(14px) saturate(140%);
}

/* ======================================================
   TEMA OSCURO
====================================================== */
[data-theme="dark"] {
  --gc-glow:            rgba(0, 230, 118, 0.30);
  --gc-glow-sm:         rgba(0, 230, 118, 0.10);
  --gc-bg:              #0d1520;
  --gc-bg-alt:          #111b28;
  --gc-bg-alt2:         #0f1d2a;
  --gc-bg-card:         rgba(255, 255, 255, 0.05);
  --gc-glass-border:    rgba(255, 255, 255, 0.09);
  --gc-glass-border-top:rgba(255, 255, 255, 0.15);
  --gc-glass-highlight: rgba(255, 255, 255, 0.06);
  --gc-glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.38);
  --gc-border:          rgba(0, 230, 118, 0.15);
  --gc-border-hover:    rgba(0, 230, 118, 0.32);
  --gc-heading:         #ffffff;
  --gc-text:            rgba(210, 235, 250, 0.90);
  --gc-text-muted:      rgba(170, 200, 225, 0.55);
  --gc-primary-text:    #00e676;
  --gc-hero-radial-1:   rgba(0, 230, 118, 0.07);
  --gc-hero-radial-2:   rgba(29, 233, 182, 0.04);
  --gc-grid-dot:        rgba(255, 255, 255, 0.030);
  --gc-orb-1:           rgba(0, 230, 118, 0.09);
  --gc-orb-2:           rgba(29, 233, 182, 0.06);
  --gc-orb-3:           rgba(0, 180, 120, 0.11);
  --gc-img-shadow:      drop-shadow(0 8px 32px rgba(0,0,0,0.55));
  --gc-img-hover:       drop-shadow(0 12px 40px rgba(0, 230, 118, 0.18));
  --gc-svc-divider:     rgba(255, 255, 255, 0.07);
  --gc-stat-divider:    rgba(255, 255, 255, 0.10);
  --gc-section-glow:    rgba(0, 230, 118, 0.06);
  --gc-card-shadow:     0 16px 50px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.06);
  --gc-preloader-bg:    #0d1520;
  color-scheme: dark;
}

/* ======================================================
   TEMA CLARO
====================================================== */
[data-theme="light"] {
  --gc-glow:            rgba(4, 120, 87, 0.14);
  --gc-glow-sm:         rgba(4, 120, 87, 0.07);
  --gc-bg:              #ffffff;
  --gc-bg-alt:          #f5f7fa;
  --gc-bg-alt2:         #eef1f6;
  --gc-bg-card:         #ffffff;
  --gc-glass-border:    rgba(0, 0, 0, 0.08);
  --gc-glass-border-top:rgba(255, 255, 255, 0.90);
  --gc-glass-highlight: rgba(255, 255, 255, 0.80);
  --gc-glass-shadow:    0 2px 16px rgba(0, 0, 0, 0.07);
  --gc-border:          rgba(0, 0, 0, 0.12);
  --gc-border-hover:    rgba(0, 0, 0, 0.22);
  --gc-heading:         #111827;
  --gc-text:            #374151;
  --gc-text-muted:      #6b7280;
  --gc-primary-text:    #1f2937;
  --gc-hero-radial-1:   rgba(0, 0, 0, 0.02);
  --gc-hero-radial-2:   rgba(0, 0, 0, 0.01);
  --gc-grid-dot:        rgba(0, 0, 0, 0.04);
  --gc-orb-1:           rgba(0, 0, 0, 0.02);
  --gc-orb-2:           rgba(0, 0, 0, 0.02);
  --gc-orb-3:           rgba(0, 0, 0, 0.02);
  --gc-img-shadow:      drop-shadow(0 6px 20px rgba(0, 0, 0, 0.10));
  --gc-img-hover:       drop-shadow(0 10px 28px rgba(0, 0, 0, 0.16));
  --gc-svc-divider:     rgba(0, 0, 0, 0.07);
  --gc-stat-divider:    rgba(0, 0, 0, 0.10);
  --gc-section-glow:    rgba(4, 120, 87, 0.03);
  --gc-card-shadow:     0 1px 4px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.07);
  --gc-preloader-bg:    #ffffff;
  color-scheme: light;
}

/* ======================================================
   BASE
====================================================== */
html { transition: background-color 0.4s ease, color 0.4s ease; }

body {
  background: var(--gc-bg) !important;
  font-family: 'Nunito', sans-serif !important;
  color: var(--gc-text) !important;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.4s ease, color 0.4s ease;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Exo 2', sans-serif !important; }

/* Ambient glow fijo — solo en dark */
[data-theme="dark"] body::after {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 55% 50% at 100% 100%, rgba(0,230,118,0.055) 0%, transparent 60%),
    radial-gradient(ellipse 35% 35% at 0%   0%,   rgba(0,180,120,0.030) 0%, transparent 60%);
  pointer-events: none; z-index: 0;
}
.main-wrapper { position: relative; z-index: 1; }


/* ======================================================
   PRELOADER
====================================================== */
#preloader { background: var(--gc-preloader-bg) !important; }
.loader-icon { border-color: var(--gc-glass-border) !important; border-top-color: var(--gc-primary) !important; }

/* ======================================================
   NAVBAR — TRANSPARENTE AL INICIO, GLASS AL HACER SCROLL
====================================================== */
header { z-index: 100 !important; }

/* Estado por defecto: completamente transparente — solo letras y logo */
.navbar-default {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  transition: background 0.4s ease, border-color 0.4s ease,
  box-shadow 0.4s ease, backdrop-filter 0.4s ease !important;
}

/* Al hacer scroll — DARK MODE: glass oscuro */
[data-theme="dark"] header.scrollHeader .navbar-default {
  background: rgba(8, 14, 24, 0.90) !important;
  backdrop-filter: blur(28px) saturate(100%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(28px) saturate(100%) brightness(1.05) !important;
  border-bottom: 1px solid rgba(0, 230, 118, 0.22) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 6px 32px rgba(0, 0, 0, 0.38),
    0 0 40px rgba(0, 230, 118, 0.04) !important;
}

/* Al hacer scroll — LIGHT MODE: blanco sólido */
[data-theme="light"] header.scrollHeader .navbar-default {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.10) !important;
}

/* Logo blanco por defecto (transparente) */
.navbar-brand.inner-logo img,
#logo { filter: brightness(1) !important; }

/* Dark mode scrolleado desktop: main.js fuerza lgh-black.png → forzar blanco puro */
[data-theme="dark"] header.scrollHeader #logo,
[data-theme="dark"] header.scrollHeader .navbar-brand.inner-logo img { filter: brightness(0) invert(1) !important; }

/* Móvil: logo gestionado por js/theme-logo.js — sin filtros CSS */
@media (max-width: 991px) {
  #logo,
  .navbar-brand.inner-logo img { filter: none !important; }
}

/* Links del nav — blancos por defecto (dark mode y páginas con hero oscuro) */
#nav li a {
  color: rgba(255, 255, 255, 0.90) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 600 !important; font-size: 14px !important;
  letter-spacing: 0.2px !important;
  transition: color var(--gc-transition) !important;
  padding: 6px 14px !important;
}
#nav li a:hover, #nav li.active > a { color: var(--gc-primary) !important; }

/* Compensar los 2px de la línea animada para alinear logo con texto del nav */
@media (min-width: 992px) {
  .navbar-header-custom { padding-top: 8px !important; }
}

/* Navbar index.html — logo izquierda, links derecha (igual que otras páginas) */
@media (min-width: 992px) {
  header.header-light-hero nav.navbar {
    justify-content: space-between !important;
  }
  header.header-light-hero #nav {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* Light mode + hero claro (index.html): links y logo oscuros desde el inicio */
[data-theme="light"] .header-light-hero #nav li a               { color: #111827 !important; }
[data-theme="light"] .header-light-hero #nav li a:hover,
[data-theme="light"] .header-light-hero #nav li.active > a      { color: #374151 !important; }
/* Light mode index desktop: logo original sin filtro (main.js carga lgh-black.png al scrollear) */
[data-theme="light"] .header-light-hero #logo,
[data-theme="light"] .header-light-hero .navbar-brand.inner-logo img { filter: none !important; }

/* Dark mode index: invertir logo negro a blanco */
[data-theme="dark"] .header-light-hero #logo,
[data-theme="dark"] .header-light-hero .navbar-brand.inner-logo img { filter: brightness(0) invert(1) !important; }

/* Light mode scrolleado (páginas internas — excluye index que tiene header-light-hero) */
[data-theme="light"] header.scrollHeader:not(.header-light-hero) #nav li a               { color: #111827 !important; }
[data-theme="light"] header.scrollHeader:not(.header-light-hero) #nav li a:hover,
[data-theme="light"] header.scrollHeader:not(.header-light-hero) #nav li.active > a      { color: #374151 !important; }

.navbar-toggler { border-color: rgba(0, 230, 118, 0.30) !important; }

/* ── MÓVIL ── */
@media (max-width: 991px) {
  /* ── TODAS LAS PÁGINAS: header fijo y transparente al tope, sólido al scrollear ── */
  header.transparent-header {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
  }
  /* Cancela sm-bg-theme-90 (camaras) en ambos temas — especificidad (0,2,1) > (0,2,0) */
  [data-theme="dark"] header.transparent-header,
  [data-theme="light"] header.transparent-header {
    background: transparent !important;
    border-bottom: none !important;
  }
  header.transparent-header .navbar-default {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid transparent !important;
    box-shadow: none !important;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
  }
  [data-theme="dark"] header.transparent-header.scrollHeader .navbar-default {
    background: rgba(8, 14, 24, 0.97) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(0, 230, 118, 0.18) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
  }
  [data-theme="light"] header.transparent-header.scrollHeader .navbar-default {
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10) !important;
  }

  /* Dark: navbar oscuro — fallback para headers sin transparent-header */
  [data-theme="dark"] .navbar-default {
    background: rgba(8, 14, 24, 0.97) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(0, 230, 118, 0.18) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
  }
  /* Light: navbar blanco — fallback para headers sin transparent-header */
  [data-theme="light"] .navbar-default {
    background: #ffffff !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10) !important;
  }

  /* Dark: dropdown oscuro */
  [data-theme="dark"] .navbar-nav {
    background: rgba(8, 14, 24, 0.98) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-top: 1px solid rgba(0, 230, 118, 0.15) !important;
    border-bottom: 1px solid rgba(0, 230, 118, 0.10) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
  }
  /* Light: dropdown blanco */
  [data-theme="light"] .navbar-nav {
    background: #ffffff !important;
    backdrop-filter: none !important;
    border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10) !important;
  }

  /* Divisores */
  [data-theme="dark"] .navbar-nav li  { border-top: 1px solid rgba(255, 255, 255, 0.05) !important; }
  [data-theme="light"] .navbar-nav li { border-top: 1px solid rgba(0, 0, 0, 0.05) !important; }
  .navbar-nav li:first-child { border-top: none !important; }

  /* Links — dark */
  [data-theme="dark"] .navbar-nav > li > a {
    color: rgba(210, 235, 255, 0.80) !important;
    padding: 13px 20px !important; font-size: 14px !important; font-weight: 600 !important;
  }
  [data-theme="dark"] .navbar-nav > li > a:hover,
  [data-theme="dark"] .navbar-nav li.active > a {
    color: var(--gc-primary) !important; background: rgba(0, 230, 118, 0.07) !important;
  }
  /* Links — light (usa #nav para superar especificidad de "#nav li a" global) */
  [data-theme="light"] #nav li a {
    color: #374151 !important;
    padding: 13px 20px !important; font-size: 14px !important; font-weight: 600 !important;
  }
  [data-theme="light"] #nav li a:hover,
  [data-theme="light"] #nav li.active > a {
    color: #111827 !important; background: rgba(0, 0, 0, 0.04) !important;
  }

  /* Hamburguesa — dark */
  [data-theme="dark"] .navbar-toggler {
    background: rgba(0, 230, 118, 0.08) !important;
    border: 1px solid rgba(0, 230, 118, 0.32) !important;
    border-radius: 10px !important;
  }
  /* sm-bg-theme-90 (camaras-proyectos) — cancelar gradiente en light mode */
  [data-theme="light"] .sm-bg-theme-90 {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  /* Hamburguesa — light */
  [data-theme="light"] .navbar-toggler {
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 10px !important;
  }
  [data-theme="light"] .navbar-toggler::after {
    border-top-color: #374151 !important;
    border-bottom-color: #374151 !important;
  }
  [data-theme="light"] .navbar-toggler.menu-opened::after {
    border-color: #374151 !important; background-color: #374151 !important;
  }
  [data-theme="light"] .navbar-toggler::before,
  [data-theme="light"] .navbar-toggler span { background-color: #374151 !important; }

  /* Posicionamiento del toggle de tema */
  nav.navbar { position: relative !important; }
  .theme-toggle {
    position: absolute !important;
    right: 58px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
  }

  /* Líneas del hamburguesa dark */
  [data-theme="dark"] .navbar-toggler::after {
    border-top-color: var(--gc-primary) !important;
    border-bottom-color: var(--gc-primary) !important;
  }
  [data-theme="dark"] .navbar-toggler.menu-opened::after {
    border-color: var(--gc-primary) !important;
    background-color: var(--gc-primary) !important;
  }

  /* Hero y otras secciones */
  .main-banner-style03 { padding: 110px 0 70px !important; }
  .hero-stats { gap: 24px; }
  .hero-stat-value { font-size: 1.5rem; }
  .hero-orb-1 { width: 300px; height: 300px; }
  .hero-orb-2 { display: none; }
  .cameras-section-bg .col-lg-6:first-child { padding: 26px 18px; margin-bottom: 24px; }
}

/* ======================================================
   TOGGLE DE TEMA — botón con SVG inline
====================================================== */
.theme-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0, 230, 118, 0.35) !important;
  background: rgba(0, 230, 118, 0.08) !important;
  cursor: pointer;
  transition: background var(--gc-transition), border-color var(--gc-transition),
              box-shadow var(--gc-transition), transform var(--gc-transition);
  margin-left: 10px; flex-shrink: 0; outline: none;
  padding: 0;
  color: #00e676 !important;
}
.theme-toggle:hover {
  background: rgba(0, 230, 118, 0.18) !important;
  border-color: rgba(0, 230, 118, 0.70) !important;
  box-shadow: 0 0 16px rgba(0, 230, 118, 0.30) !important;
}
@media (hover: hover) {
  .theme-toggle:hover { transform: scale(1.10) !important; }
}
.theme-toggle:focus-visible { outline: 2px solid var(--gc-primary); outline-offset: 2px; }
.theme-toggle svg { display: block; width: 16px; height: 16px; fill: currentColor; }

/* Visibilidad de íconos */
.theme-icon-sun  { display: flex !important; }
.theme-icon-moon { display: none  !important; }
[data-theme="light"] .theme-icon-sun  { display: none  !important; }
[data-theme="light"] .theme-icon-moon { display: flex  !important; }
[data-theme="dark"]  .theme-icon-sun  { display: flex  !important; }
[data-theme="dark"]  .theme-icon-moon { display: none  !important; }

/* ======================================================
   HERO SECTION — SIEMPRE DARK (no cambia con el tema)
====================================================== */
.main-banner-style03 {
  background: #0d1520 !important;       /* fijo, nunca cambia */
  position: relative !important; overflow: hidden !important;
  min-height: 100vh !important; display: flex !important; align-items: center !important;
  padding: 130px 0 100px !important;
}
/* Radial de fondo — fijos en dark */
.main-banner-style03::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 80% 28%, rgba(0, 230, 118, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 45% 65% at 12% 80%, rgba(29, 233, 182, 0.04) 0%, transparent 65%);
  z-index: 0; pointer-events: none;
}

/* Gradient fade al fondo del hero hacia la siguiente sección */
.main-banner-style03 .wave-area { display: none !important; }
.main-banner-style03::after {
  content: '' !important; display: block !important;
  position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 120px !important;
  background: linear-gradient(to bottom, transparent 0%, #111b28 100%) !important;
  z-index: 3 !important; pointer-events: none !important;
}

/* ── HERO LIGHT MODE ── */
[data-theme="light"] .main-banner-style03 {
  background: #ffffff !important;
}
[data-theme="light"] .main-banner-style03::before {
  background:
    radial-gradient(ellipse 65% 55% at 80% 28%, rgba(0, 180, 80, 0.05) 0%, transparent 65%),
    radial-gradient(ellipse 45% 65% at 12% 80%, rgba(4, 120, 87, 0.03) 0%, transparent 65%) !important;
}
[data-theme="light"] .main-banner-style03::after {
  background: linear-gradient(to bottom, transparent 0%, #f5f7fa 100%) !important;
}
[data-theme="light"] .main-banner-style03 h1  { color: #111827 !important; }
[data-theme="light"] .main-banner-style03 p   { color: #374151 !important; }
[data-theme="light"] .hero-stat-label         { color: #6b7280 !important; }
[data-theme="light"] .hero-stat-divider       { background: rgba(0,0,0,0.12) !important; }
[data-theme="light"] .hero-badge {
  background:    rgba(0, 0, 0, 0.05) !important;
  border-color:  rgba(0, 0, 0, 0.12) !important;
  color:         #374151 !important;
}
[data-theme="light"] .hero-badge .badge-dot   { background: #6b7280 !important; }
[data-theme="light"] .hero-network-canvas     { opacity: 0.05 !important; }

/* Grid de puntos — siempre dark */
.hero-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.030) 1px, transparent 1px);
  background-size: 44px 44px;
  z-index: 0; pointer-events: none;
}

/* Orbs — siempre dark */
.hero-orb { position: absolute; border-radius: 50%; filter: blur(75px); pointer-events: none; z-index: 0; }
.hero-orb-1 { width: 540px; height: 540px; background: rgba(0, 230, 118, 0.09); top: -180px; right: 3%; animation: orbFloat 12s ease-in-out infinite; }
.hero-orb-2 { width: 380px; height: 380px; background: rgba(29, 233, 182, 0.06); bottom: -90px; left: 22%; animation: orbFloat 16s ease-in-out infinite reverse; }
.hero-orb-3 { width: 240px; height: 240px; background: rgba(0, 180, 120, 0.11); top: 42%; left: 2%; animation: orbFloat 9s ease-in-out infinite 4s; }

@keyframes orbFloat {
  0%, 100% { transform: translateY(0px) scale(1); }
  33%       { transform: translateY(-28px) scale(1.04); }
  66%       { transform: translateY(20px) scale(0.96); }
}

/* Canvas de red — siempre dark */
.hero-network-canvas {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  z-index: 0 !important; pointer-events: none !important; opacity: 0.65 !important;
}

/* Corrige styles.css: .creative-banner-img { position: absolute; top: -15% } */
.main-banner-style03 .creative-banner-img {
  position: relative !important; left: auto !important; top: auto !important;
}

/* Row centrada verticalmente */
.main-banner-style03 .row { align-items: center !important; }
.main-banner-style03 .container { position: relative; z-index: 2; }

/* Badge del héroe — siempre dark */
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0, 230, 118, 0.08);
  border: 1px solid rgba(0, 230, 118, 0.22);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 50px; padding: 6px 18px; margin-bottom: 22px;
  font-size: 12px; font-weight: 700; color: #00e676;
  letter-spacing: 1.2px; text-transform: uppercase; font-family: 'Nunito', sans-serif;
}
.hero-badge .badge-dot {
  width: 7px; height: 7px; background: #00e676;
  border-radius: 50%; animation: pulseDot 2.2s ease-in-out infinite; flex-shrink: 0;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.35); }
  50%       { box-shadow: 0 0 0 8px transparent; }
}

/* Título del héroe — siempre blanco */
.main-banner-style03 h1 {
  font-family: 'Exo 2', sans-serif !important;
  font-size: clamp(1.8rem, 4.5vw, 3.3rem) !important;
  font-weight: 900 !important; line-height: 1.13 !important;
  letter-spacing: -0.6px !important; color: #ffffff !important;
  text-shadow: none !important; margin-bottom: 20px !important;
}
.hero-title-accent {
  background: var(--gc-gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Párrafo del héroe — siempre dark */
.main-banner-style03 p {
  color: rgba(200, 225, 245, 0.72) !important;
  font-size: 16px !important; line-height: 1.78 !important; text-shadow: none !important;
}

/* Stats — siempre dark */
.hero-stats { display: flex; gap: 36px; margin-top: 38px; flex-wrap: wrap; }
.hero-stat  { display: flex; flex-direction: column; gap: 4px; }
.hero-stat-value {
  font-family: 'Exo 2', sans-serif; font-size: 1.9rem; font-weight: 900; line-height: 1;
  background: var(--gc-gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-stat-label { font-size: 11px; font-weight: 700; color: rgba(170, 200, 225, 0.60); letter-spacing: 0.8px; text-transform: uppercase; }
.hero-stat-divider { width: 1px; background: rgba(255, 255, 255, 0.10); align-self: stretch; margin: 4px 0; }
.hero-ctas { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; align-items: center; }

/* Imagen del héroe */
.main-banner-style03 .creative-banner-img img {
  filter: drop-shadow(0 0 45px rgba(0, 230, 118, 0.16));
  animation: imgFloat 6s ease-in-out infinite;
}
@keyframes imgFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

/* ======================================================
   BOTONES
====================================================== */
.butn, a.butn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: var(--gc-gradient-btn) !important; color: #07100a !important;
  font-family: 'Nunito', sans-serif !important; font-weight: 800 !important;
  font-size: 14px !important; letter-spacing: 0.4px !important;
  padding: 13px 30px !important; border-radius: 8px !important; border: none !important;
  transition: transform var(--gc-transition), box-shadow var(--gc-transition) !important;
  box-shadow: 0 4px 22px var(--gc-glow) !important;
  position: relative !important; overflow: hidden !important; text-decoration: none !important;
}
.butn::before { display: none !important; }
.butn:hover, a.butn:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 38px var(--gc-glow) !important; color: #07100a !important; }

.butn.style-two, a.butn.style-two {
  background: rgba(0, 230, 118, 0.06) !important;
  backdrop-filter: var(--gc-glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--gc-glass-blur-sm) !important;
  border: 1.5px solid var(--gc-primary) !important;
  color: var(--gc-primary-text) !important;
  box-shadow: none !important;
}
.butn.style-two:hover, a.butn.style-two:hover {
  background: var(--gc-gradient-btn) !important; color: #07100a !important;
  box-shadow: 0 10px 32px var(--gc-glow) !important;
}
[data-theme="dark"] .butn.style-two.reverse {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}
[data-theme="dark"] .butn.style-two.reverse:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.80) !important;
  color: #ffffff !important;
}
.butn.style-three, a.butn.style-three { background: var(--gc-gradient-btn) !important; color: #ffffff !important; }

/* ======================================================
   SEPARADORES DE SECCIÓN
====================================================== */
.features-section::before,
.cameras-section-bg::before {
  content: '';
  display: block; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gc-border) 25%, var(--gc-primary) 50%, var(--gc-border) 75%, transparent 100%);
  opacity: 0.5;
}
.features-section { position: relative; overflow: hidden; }
.features-section::after {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 70%; height: 220px;
  background: radial-gradient(ellipse at top, var(--gc-section-glow) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.features-section .container,
.features-section .row { position: relative; z-index: 1; }

/* ======================================================
   SECCIÓN FEATURES — LIQUID GLASS CARDS
====================================================== */
.features-section {
  background: var(--gc-bg-alt) !important;
  padding: 90px 0 !important;
  transition: background-color 0.4s ease !important;
}
.features-section .section-title h2 { color: var(--gc-heading) !important; }
.features-section .section-title p  { color: var(--gc-text-muted) !important; }

.section-badge {
  display: inline-block; font-size: 11px; font-weight: 800;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--gc-primary-text);
  background: rgba(0, 230, 118, 0.08); border: 1px solid var(--gc-border);
  backdrop-filter: var(--gc-glass-blur-sm); -webkit-backdrop-filter: var(--gc-glass-blur-sm);
  border-radius: 50px; padding: 5px 16px; margin-bottom: 16px;
}
[data-theme="light"] .section-badge {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

/* LIQUID GLASS CARDS */
.card.card-style04 {
  background: var(--gc-bg-card) !important;
  backdrop-filter: var(--gc-glass-blur) !important;
  -webkit-backdrop-filter: var(--gc-glass-blur) !important;
  border: 1px solid var(--gc-glass-border) !important;  
  border-radius: var(--gc-radius-lg) !important;
  padding: 40px 28px !important; text-align: center !important;
  transition: transform var(--gc-transition), box-shadow var(--gc-transition), border-color var(--gc-transition) !important;
  position: relative !important; overflow: hidden !important; height: 100% !important;
  box-shadow: var(--gc-card-shadow) !important;
}
.card.card-style04::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  opacity: 0; transition: opacity var(--gc-transition);
}
.card.card-style04:hover {
  transform: translateY(-8px) !important;
  border-color: var(--gc-border-hover) !important;
  box-shadow: 0 10px 60px rgba(0,0,0,0.10), 0 0 30px var(--gc-glow-sm), inset 0 1px 0 var(--gc-glass-highlight) !important;
}
.card.card-style04:hover::before { opacity: 1; }
.card.card-style04 h3 { color: var(--gc-heading) !important; }
.card.card-style04 p  { color: var(--gc-text-muted) !important; }

.icon-box5.bg-theme-90 {
  background: var(--gc-gradient) !important;
  box-shadow: 0 6px 24px var(--gc-glow) !important;
  border-radius: 12px !important; width: 72px !important; height: 72px !important;
  margin: 0 auto 24px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: box-shadow var(--gc-transition), transform var(--gc-transition) !important;
}
.card.card-style04:hover .icon-box5.bg-theme-90 { box-shadow: 0 10px 36px rgba(0,230,118,0.42) !important; transform: scale(1.06) !important; }
.icon-box5 i { font-size: 26px !important; color: #07100a !important; }

/* ======================================================
   SECCIÓN SERVICIOS
====================================================== */
.services-section {
  background: var(--gc-bg) !important;
  padding: 90px 0 !important;
  transition: background-color 0.4s ease !important;
}
.services-section .section-title h2 { color: var(--gc-heading) !important; }
.services-section .section-title p  { color: var(--gc-text-muted) !important; }
.services-section h2.font-weight-700,
.services-section h2.font-weight-700 span.font-weight-300 { color: var(--gc-heading) !important; }
.services-section p.small-title, .services-section p.mb-2-3 {
  color: var(--gc-text-muted) !important; font-size: 15.5px !important; line-height: 1.76 !important;
}

.list-style7 { list-style: none; padding: 0; margin: 0 0 24px !important; }
.list-style7 li {
  display: flex; align-items: flex-start; gap: 12px;
  color: var(--gc-text) !important; margin-bottom: 12px !important;
  font-size: 14.5px; line-height: 1.6;
}
.list-style7 li i {
  width: 20px; height: 20px; min-width: 20px;
  background: var(--gc-gradient) !important; border-radius: 50% !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  font-size: 10px !important; color: #07100a !important; margin-top: 2px;
}
.list-style7 li b { color: var(--gc-primary-text) !important; }

.services-section img:hover { transform: scale(1.02); filter: var(--gc-img-hover); }


.service-row-divider { height: 1px; background: var(--gc-svc-divider); margin: 16px 0 56px; }
.camera-icon-container iframe, .services-section iframe { border: none !important; border-radius: var(--gc-radius); }

/* ======================================================
   SECCIÓN CÁMARAS
====================================================== */
.cameras-section-bg {
  background: var(--gc-bg-alt2) !important;
  transition: background-color 0.4s ease !important;
  position: relative; overflow: hidden;
}
.cameras-section-bg .container { position: relative; z-index: 2; }
.cameras-section-bg .text-primary { color: var(--gc-primary-text) !important; }
.cameras-section-bg h2 { color: var(--gc-heading) !important; font-family: 'Exo 2', sans-serif !important; font-weight: 800 !important; }
.cameras-section-bg p.lead { color: var(--gc-text-muted) !important; }
.cameras-section-bg .list-style7 li b    { color: var(--gc-primary-text) !important; }
.cameras-section-bg .list-style7 li span { color: var(--gc-text-muted) !important; }

/* Glass panel en cámaras */
.cameras-section-bg .col-lg-6:first-child {
  background: var(--gc-bg-card); border-radius: var(--gc-radius-lg);
  border: 1px solid var(--gc-glass-border); border-top-color: var(--gc-glass-border-top);
  backdrop-filter: var(--gc-glass-blur-sm); -webkit-backdrop-filter: var(--gc-glass-blur-sm);
  padding: 40px 36px; box-shadow: var(--gc-card-shadow);
  transition: background 0.4s ease;
}

/* ======================================================
   FOOTER — SIEMPRE DARK + GLASS ACCENT (no cambia con el tema)
====================================================== */
.footer-style3 {
  background: #080f1a !important;
  border-top: none !important;
  position: relative !important;
}
/* Línea verde brillante en el borde superior del footer */
.footer-style3::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 230, 118, 0.25) 20%,
    rgba(0, 230, 118, 0.80) 50%,
    rgba(0, 230, 118, 0.25) 80%,
    transparent 100%
  );
  z-index: 1;
}
/* Glow verde suave detrás del borde */
.footer-style3::after {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 55%; height: 180px;
  background: radial-gradient(ellipse at top, rgba(0, 230, 118, 0.055) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}
.footer-style3 .container { position: relative; z-index: 2; }

/* Footer mismo ancho que el navbar (cancela lg-container en pantallas grandes) */
@media screen and (min-width: 1400px) {
  footer .container.lg-container { max-width: 1320px; }
}
.footer-style3 h3 {
  font-family: 'Exo 2', sans-serif !important; color: var(--gc-primary) !important;
  font-size: 15px !important; font-weight: 700 !important;
  letter-spacing: 0.3px !important; margin-bottom: 18px !important;
}
.footer-style3 ul li { margin-bottom: 8px !important; }
.footer-style3 ul li a {
  color: rgba(170, 200, 225, 0.55) !important; font-size: 14px !important;
  transition: color var(--gc-transition), padding-left var(--gc-transition) !important;
  text-decoration: none !important;
}
.footer-style3 ul li a:hover { color: var(--gc-primary) !important; padding-left: 4px !important; }
.footer-style3 ul li a i { color: var(--gc-primary) !important; margin-right: 7px; }
.footer-icon ul li a { color: rgba(170, 200, 225, 0.55) !important; transition: color var(--gc-transition) !important; }
.footer-icon ul li a:hover { color: var(--gc-primary) !important; }
.footer-icon .fab.fa-facebook:hover, .footer-icon .fab.fa-whatsapp:hover { text-shadow: 0 0 14px var(--gc-primary); }
.footer-logo img { filter: brightness(1.05); transition: filter var(--gc-transition); }
.footer-logo img:hover { filter: brightness(1.2) drop-shadow(0 0 12px rgba(0,230,118,0.35)); }

.footer-style3-bottom {
  background: rgba(0, 230, 118, 0.03) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.footer-style3-bottom p,
.footer-style3-bottom span { color: rgba(170, 200, 225, 0.42) !important; font-size: 13px !important; }
.footer-style3-bottom a[href="https://tecnochapin.com"] { color: var(--gc-primary) !important; }

/* ======================================================
   SECTION TITLES
====================================================== */
.section-title h2 { color: var(--gc-heading) !important; }
.section-title p  { color: var(--gc-text-muted) !important; }
.section-title-line {
  width: 50px; height: 3px; background: var(--gc-gradient);
  border-radius: 2px; margin: 12px auto 0; animation: lineGrow 0.8s ease forwards;
}
@keyframes lineGrow { from { width: 0; opacity: 0; } to { width: 50px; opacity: 1; } }

/* ======================================================
   PÁGINAS INTERNAS — FONDOS (dark + light)
   Corrige secciones que tienen bg propio en styles.css
====================================================== */

/* -- Fondos de sección -- */
/* Anula default.css «section { background: #fff }» en dark mode */
[data-theme="dark"] section:not(.page-title-section) { background: var(--gc-bg) !important; }
[data-theme="dark"] .main-wrapper       { background: var(--gc-bg)     !important; }

/* Fondos específicos de sección (mayor especificidad que "section") */
[data-theme="dark"] .bg-grey            { background: var(--gc-bg-alt) !important; }
[data-theme="dark"] .bg-light           { background: var(--gc-bg-alt) !important; }
[data-theme="dark"] .bg-theme-solid     { background: #1a3a2a          !important; }
[data-theme="dark"] section.bg-white,
[data-theme="dark"] div.bg-white:not(img) { background: var(--gc-bg-alt) !important; }

[data-theme="light"] .bg-grey  { background: var(--gc-bg-alt2) !important; }
[data-theme="light"] .bg-light { background: var(--gc-bg-alt)  !important; }

/* -- Textos genéricos en secciones -- */
[data-theme="dark"] section h2:not(.text-white),
[data-theme="dark"] section h3:not(.text-white),
[data-theme="dark"] section h4:not(.text-white),
[data-theme="dark"] section h5:not(.text-white) { color: var(--gc-heading) !important; }
[data-theme="dark"] section p:not(.text-white)  { color: var(--gc-text)    !important; }
[data-theme="dark"] section li:not(.active)     { color: var(--gc-text)    !important; }
[data-theme="dark"] section .small-title { color: var(--gc-text-muted) !important; }

/* Light mode: solo textos sin class text-white (misma lógica que dark mode) */
[data-theme="light"] section h2:not(.text-white),
[data-theme="light"] section h3:not(.text-white),
[data-theme="light"] section h4:not(.text-white),
[data-theme="light"] section h5:not(.text-white) { color: var(--gc-heading) !important; }
[data-theme="light"] section p:not(.text-white)  { color: var(--gc-text)    !important; }

/* .text-primary global → neutral en light mode (era verde #48d58b en styles.css) */
[data-theme="light"] .text-primary { color: #1f2937 !important; }

/* page-title-section siempre tiene overlay oscuro → texto blanco en ambos temas */
[data-theme="light"] .page-title-section h1,
[data-theme="light"] .page-title-section li,
[data-theme="light"] .page-title-section li a  { color: #ffffff !important; }

/* -- Cards genéricas -- */
[data-theme="dark"] .card:not(.card-style04) {
  background: var(--gc-bg-card) !important;
  backdrop-filter: var(--gc-glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--gc-glass-blur-sm) !important;
  border: 1px solid var(--gc-glass-border) !important;
  border-top-color: var(--gc-glass-border-top) !important;
  box-shadow: var(--gc-card-shadow) !important;
  color: var(--gc-text) !important;
}
[data-theme="dark"] .card h3,
[data-theme="dark"] .card h4,
[data-theme="dark"] .card h5,
[data-theme="dark"] .card h6 { color: var(--gc-heading) !important; }
[data-theme="dark"] .card p,
[data-theme="dark"] .card .small { color: var(--gc-text-muted) !important; }
[data-theme="dark"] .card-style07 .title-box i { color: var(--gc-primary) !important; }
[data-theme="dark"] .card-style07 a           { color: var(--gc-primary-text) !important; }
[data-theme="dark"] .box-circle-large,
[data-theme="dark"] .box-circle-small         { border-color: var(--gc-border) !important; }

/* -- card-style10 (proyectos carousel — service.html) -- */
[data-theme="dark"] .card-style10 {
  background: var(--gc-bg-card) !important;
  border: 1px solid var(--gc-glass-border) !important;
  box-shadow: var(--gc-card-shadow) !important;
}
[data-theme="dark"] .card-style10 .card-img {
  background-color: rgba(0, 230, 118, 0.08) !important;
}
[data-theme="dark"] .card-style10 h4 a { color: var(--gc-heading) !important; }
[data-theme="dark"] .card-style10 h4 a:hover { color: var(--gc-primary) !important; }
[data-theme="dark"] .card-style10 p { color: var(--gc-text-muted) !important; }
[data-theme="dark"] .card-style10 a.text-primary { color: var(--gc-primary-text) !important; }

/* -- media-style1 (servicios — service.html) -- */
[data-theme="dark"] .media-style1 {
  background: var(--gc-bg-card) !important;
  border: 1px solid var(--gc-glass-border) !important;
  box-shadow: var(--gc-card-shadow) !important;
}
[data-theme="dark"] .media-style1 h3 { color: var(--gc-heading)   !important; }
[data-theme="dark"] .media-style1 p  { color: var(--gc-text-muted) !important; }
[data-theme="dark"] .media-style1 i  { color: var(--gc-primary)    !important; }

/* -- feature-box-camera (cámaras) -- */
[data-theme="dark"] .feature-box-camera {
  background: var(--gc-bg-card) !important;
  backdrop-filter: var(--gc-glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--gc-glass-blur-sm) !important;
  border: 1px solid var(--gc-glass-border) !important;  
  box-shadow: var(--gc-card-shadow) !important;
}
[data-theme="dark"] .feature-box-camera h4 { color: var(--gc-heading)    !important; }
[data-theme="dark"] .feature-box-camera p  { color: var(--gc-text-muted)  !important; }
[data-theme="dark"] .feature-box-camera i  { color: var(--gc-primary)     !important; }

/* -- project-item (cámaras) -- */
[data-theme="dark"] .project-item {
  background: var(--gc-bg-card) !important;
  border: 1px solid var(--gc-glass-border) !important;
  box-shadow: var(--gc-card-shadow) !important;
}
[data-theme="dark"] .project-info        { background: transparent !important; }
[data-theme="dark"] .project-title       { color: var(--gc-heading)   !important; }
[data-theme="dark"] .project-description { color: var(--gc-text-muted) !important; }
[data-theme="light"] .project-link       { color: #1f2937 !important; }
[data-theme="light"] .project-link:hover { color: #374151 !important; }

/* -- Hero cámaras — cambia gradiente a dark brand -- */
[data-theme="dark"] .hero-cameras {
  background: linear-gradient(135deg, #0a1a28 0%, #0d1e35 50%, #0f1628 100%) !important;
}

/* -- team-style02 (about) -- */
[data-theme="dark"] .team-style02 {
  background: var(--gc-bg-card) !important;
  border: 1px solid var(--gc-glass-border) !important;
  border-radius: var(--gc-radius) !important;
}
[data-theme="dark"] .team-style02 h5,
[data-theme="dark"] .team-style02 h6   { color: var(--gc-heading)   !important; }
[data-theme="dark"] .team-style02 .opacity5 { color: var(--gc-text-muted) !important; }

/* -- Carousel de cuentas bancarias (about) -- */
[data-theme="dark"] .testmonial-style08 { background: var(--gc-bg-alt2) !important; }

/* -- Streaming hero (futuristic-bg) -- */
[data-theme="dark"] .futuristic-bg {
  background: linear-gradient(135deg, #0a1a28 0%, #0d2238 40%, #0f1a30 100%) !important;
  animation: none !important;
}

/* -- Streaming movies section — light mode -- */
[data-theme="light"] .futuristic-bg {
  background: #f1f5f9 !important;
  animation: none !important;
}
[data-theme="light"] .futuristic-bg::before {
  display: none !important;
}
/* Títulos y textos sobre futuristic-bg en light mode */
[data-theme="light"] .futuristic-bg .text-white:not(.movie-info *) { color: #111827 !important; }
[data-theme="light"] .futuristic-bg .neon-text {
  color: #111827 !important;
  text-shadow: none !important;
}
/* Movie cards — fondo claro */
[data-theme="light"] .movie-card {
  background: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .movie-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14) !important;
}
/* Skeleton loading — tonos grises claros */
[data-theme="light"] .loading-skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%) !important;
  background-size: 200% 100% !important;
}
[data-theme="light"] .skeleton-poster {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%) !important;
  background-size: 200% 100% !important;
}
[data-theme="light"] .skeleton-text,
[data-theme="light"] .skeleton-badge { background: #cbd5e1 !important; }
/* Owl nav — botones oscuros sobre fondo claro */
[data-theme="light"] .movies-carousel .owl-nav button {
  background: rgba(0, 0, 0, 0.08) !important;
  color: #374151 !important;
}
[data-theme="light"] .movies-carousel .owl-nav button:hover {
  background: rgba(0, 0, 0, 0.15) !important;
}

/* -- Botones del hero principal (main-banner-style03, siempre fondo oscuro) en light mode -- */
[data-theme="light"] .main-banner-style03 .butn.style-two,
[data-theme="light"] .main-banner-style03 a.butn.style-two {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.70) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="light"] .main-banner-style03 .butn.style-two:hover,
[data-theme="light"] .main-banner-style03 a.butn.style-two:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20) !important;
}

[data-theme="light"] .main-banner-style03 .butn.style-three,
[data-theme="light"] .main-banner-style03 a.butn.style-three {
  background: linear-gradient(135deg, #00b847 0%, #00d96a 60%, #1ad4a6 100%) !important;
  color: #0a2a15 !important;
  box-shadow: 0 4px 20px rgba(0, 200, 100, 0.35) !important;
}
[data-theme="light"] .main-banner-style03 .butn.style-three:hover,
[data-theme="light"] .main-banner-style03 a.butn.style-three:hover {
  box-shadow: 0 10px 32px rgba(0, 200, 100, 0.45) !important;
}

/* -- Botones sobre hero-cameras (siempre fondo oscuro, cualquier tema) -- */
.hero-cameras .butn.style-two,
.hero-cameras a.butn.style-two {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.75) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.hero-cameras .butn.style-two:hover,
.hero-cameras a.butn.style-two:hover {
  background: rgba(255, 255, 255, 0.20) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}

/* -- Botones de filtro en streaming — light mode (futuristic-bg pasa a fondo claro) -- */
[data-theme="light"] .futuristic-bg .butn.style-two,
[data-theme="light"] .futuristic-bg button.butn.style-two {
  border-color: #00a152 !important;
  color: #1f2937 !important;
  background: rgba(0, 161, 82, 0.08) !important;
}
[data-theme="light"] .futuristic-bg .butn.style-two:hover,
[data-theme="light"] .futuristic-bg button.butn.style-two:hover {
  background: var(--gc-gradient-btn) !important;
  border-color: #00c853 !important;
  color: #07100a !important;
  box-shadow: 0 5px 18px rgba(0, 161, 82, 0.30) !important;
}
[data-theme="light"] .futuristic-bg .filter-btn.active {
  background: var(--gc-gradient-btn) !important;
  border-color: #00c853 !important;
  color: #07100a !important;
  box-shadow: 0 5px 15px rgba(0, 161, 82, 0.25) !important;
}

/* -- Secciones .md sin bg explícito (stacking context blanco) -- */
[data-theme="dark"] section.md { background: var(--gc-bg) !important; }

/* -- streaming-card (streaming.html) -- */
[data-theme="dark"] .streaming-card {
  background: var(--gc-bg-card) !important;
  border-color: var(--gc-glass-border) !important;
  box-shadow: var(--gc-card-shadow) !important;
}
[data-theme="dark"] .streaming-card h4       { color: var(--gc-heading)   !important; }
[data-theme="dark"] .streaming-card p        { color: var(--gc-text-muted) !important; }
[data-theme="dark"] .streaming-card .list-style6 li { color: var(--gc-text) !important; }

/* -- feature-icon (streaming.html — beneficios) -- */
[data-theme="dark"] .feature-icon { color: var(--gc-primary) !important; }

/* -- Tabla de precios .item (streaming.html) — solo las NO activas -- */
[data-theme="dark"] .price-style1 .item:not(.active) {
  background: var(--gc-bg-card) !important;
  backdrop-filter: var(--gc-glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--gc-glass-blur-sm) !important;
  border: 1px solid var(--gc-glass-border) !important;
  border-top-color: var(--gc-glass-border-top) !important;
  box-shadow: var(--gc-card-shadow) !important;
}
[data-theme="dark"] .price-style1 .item:not(.active) h4,
[data-theme="dark"] .price-style1 .item:not(.active) .value h3,
[data-theme="dark"] .price-style1 .item:not(.active) .value h3 span,
[data-theme="dark"] .price-style1 .item:not(.active) .value .per { color: var(--gc-heading) !important; }
[data-theme="dark"] .price-style1 .item:not(.active) .text-muted  { color: var(--gc-text-muted) !important; }
[data-theme="dark"] .price-style1 .item:not(.active) .features li { color: var(--gc-text) !important; border-bottom-color: var(--gc-glass-border) !important; }
[data-theme="dark"] .price-style1 .item:not(.active) .type        { border-color: var(--gc-glass-border) !important; }

/* -- Plan MÁS POPULAR (.active) — texto siempre blanco sobre fondo verde -- */
[data-theme="dark"] .price-style1 .item.active h4,
[data-theme="dark"] .price-style1 .item.active .value h3,
[data-theme="dark"] .price-style1 .item.active .value h3 span,
[data-theme="dark"] .price-style1 .item.active .value .per,
[data-theme="dark"] .price-style1 .item.active .features li,
[data-theme="dark"] .price-style1 .item.active .d-block { color: #fff !important; }

/* -- Accordion (preguntas frecuentes) — usar selector exacto de styles.css -- */
[data-theme="dark"] .accordion-style01 {
  background: var(--gc-bg-alt) !important;
  box-shadow: 0 1px 18px 10px rgba(0,0,0,0.15) !important;
}
[data-theme="dark"] .accordion-style01 .card {
  background: var(--gc-bg-alt) !important;
  border-bottom: 1px solid var(--gc-glass-border) !important;
}
[data-theme="dark"] .accordion-style01 .card-header {
  background: var(--gc-bg-alt) !important;
  border-color: var(--gc-glass-border) !important;
}
[data-theme="dark"] .accordion-style01 .card-header:hover {
  background: rgba(0,230,118,0.06) !important;
}
[data-theme="dark"] .accordion-style01 .btn-link.collapsed {
  color: var(--gc-text) !important;
  border-bottom-color: var(--gc-glass-border) !important;
}
[data-theme="dark"] .accordion-style01 .btn-link.collapsed .counts {
  border-color: var(--gc-primary) !important;
  color: var(--gc-primary) !important;
  background: transparent !important;
}
[data-theme="dark"] .accordion-style01 .card-body {
  background: var(--gc-bg) !important;
  border-bottom-color: var(--gc-glass-border) !important;
  color: var(--gc-text) !important;
}
[data-theme="dark"] .accordion-style01 .card:last-child {
  border-bottom-color: var(--gc-glass-border) !important;
}

/* -- page-title: tiene bg-img+overlay → no necesita override -- */
/* -- bg-theme-solid counter: tiene gradiente propio → no override -- */

/* ======================================================
   RESPONSIVE
====================================================== */
@media (max-width: 767px) {
  .hero-ctas { flex-direction: column; align-items: flex-start; }
  .hero-ctas .butn { width: 100%; justify-content: center; }
  .hero-stats { gap: 20px; }
  .hero-stat-divider { display: none; }
  .service-row-divider { margin: 8px 0 40px; }
}