/* ============================================================
   GlobalPro BRUTALIST TECH v3.0
   Paleta: Negro puro + Rojo neón + Amber warning
   Tipografía: Space Grotesk + JetBrains Mono
   Vibe: HUD automotriz + terminal de taller
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* === PALETA BRUTALIST === */
  --bt-bg: #0A0A0A;
  --bt-bg-alt: #141414;
  --bt-surface: #1A1A1A;
  --bt-surface-2: #222222;
  --bt-border: #2A2A2A;
  --bt-border-bright: #3A3A3A;

  --bt-text: #FAFAFA;
  --bt-text-muted: #888888;
  --bt-text-subtle: #555555;

  --bt-red: #FF1744;
  --bt-red-bright: #FF4569;
  --bt-red-glow: rgba(255, 23, 68, 0.4);
  --bt-red-bg: rgba(255, 23, 68, 0.08);

  --bt-amber: #FFAB00;
  --bt-amber-glow: rgba(255, 171, 0, 0.4);
  --bt-amber-bg: rgba(255, 171, 0, 0.08);

  --bt-green: #00E676;
  --bt-whatsapp: #25D366;

  /* === TIPOGRAFÍA === */
  --bt-font: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --bt-mono: 'JetBrains Mono', 'SF Mono', Monaco, monospace;

  /* === RADIOS (casi ninguno - bordes filosos) === */
  --bt-radius: 2px;
  --bt-radius-md: 4px;
  --bt-radius-lg: 6px;

  /* === SOMBRAS === */
  --bt-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
  --bt-shadow-red: 0 0 30px rgba(255, 23, 68, 0.3);
  --bt-shadow-amber: 0 0 30px rgba(255, 171, 0, 0.3);

  /* === LAYOUT === */
  --bt-navbar-height: 64px;
  --bt-container: 1440px;
}

/* ============================================================
   RESET Y BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bt-navbar-height) + 20px);
}

body {
  background: var(--bt-bg) !important;
  color: var(--bt-text) !important;
  font-family: var(--bt-font) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  letter-spacing: -0.01em !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: var(--bt-navbar-height) !important;
  overflow-x: hidden;
}

/* Grid de fondo tipo blueprint */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(rgba(255, 23, 68, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 23, 68, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

body > * {
  position: relative;
  z-index: 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bt-font) !important;
  color: var(--bt-text) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
}

h1 {
  font-size: clamp(2.5rem, 7vw, 5rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
}

h2 {
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  font-weight: 600 !important;
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
}

p {
  color: var(--bt-text-muted) !important;
  line-height: 1.7 !important;
  font-size: 0.95rem !important;
}

a {
  color: var(--bt-red-bright);
  text-decoration: none;
  transition: all 0.15s ease;
}

a:hover {
  color: var(--bt-red);
  text-shadow: 0 0 10px var(--bt-red-glow);
}

/* ============================================================
   CONTAINER
   ============================================================ */

.container {
  max-width: var(--bt-container) !important;
  padding: 0 24px !important;
}

/* ============================================================
   STATUS BAR (navbar superior estilo dashboard)
   ============================================================ */

.navbar,
#navbarNav {
  background: var(--bt-bg) !important;
  border-bottom: 1px solid var(--bt-border) !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: var(--bt-navbar-height) !important;
  backdrop-filter: none !important;
}

.navbar .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 100% !important;
  padding: 0 24px !important;
}

.navbar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--bt-mono) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  color: var(--bt-text) !important;
  text-transform: uppercase !important;
}

.navbar-brand .logo-img,
.navbar-brand > div:first-child {
  width: 36px !important;
  height: 36px !important;
  background: var(--bt-red) !important;
  border-radius: 0 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--bt-text) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  font-family: var(--bt-mono) !important;
  box-shadow: 0 0 20px var(--bt-red-glow) !important;
}

.navbar .nav-link {
  color: var(--bt-text-muted) !important;
  font-family: var(--bt-mono) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 8px 14px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  transition: all 0.15s !important;
  border-radius: 0 !important;
}

.navbar .nav-link:hover {
  color: var(--bt-red) !important;
  border-color: var(--bt-red) !important;
  background: var(--bt-red-bg) !important;
}

.navbar .nav-link.active {
  color: var(--bt-red) !important;
  background: var(--bt-red-bg) !important;
  border-color: var(--bt-red) !important;
}

.navbar .dropdown-toggle::after {
  border: none !important;
  content: '▾' !important;
  margin-left: 6px !important;
  font-size: 0.6rem !important;
}

.dropdown-menu {
  background: var(--bt-surface) !important;
  border: 1px solid var(--bt-border-bright) !important;
  border-radius: 0 !important;
  padding: 4px !important;
  min-width: 220px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), var(--bt-shadow-red) !important;
}

.dropdown-item {
  color: var(--bt-text-muted) !important;
  font-family: var(--bt-mono) !important;
  font-size: 0.75rem !important;
  padding: 8px 12px !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: all 0.1s !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--bt-red-bg) !important;
  color: var(--bt-red-bright) !important;
  padding-left: 16px !important;
}

/* ============================================================
   HERO
   ============================================================ */

.hero-section,
.hero-contacto,
.page-hero {
  background: var(--bt-bg) !important;
  border-bottom: 1px solid var(--bt-border) !important;
  padding: 100px 0 80px !important;
  position: relative !important;
  overflow: hidden !important;
}

.hero-section::before,
.hero-contacto::before,
.page-hero::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, var(--bt-red) 50%, transparent 100%) !important;
  box-shadow: 0 0 20px var(--bt-red) !important;
}

.hero-section::after,
.hero-contacto::after,
.page-hero::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  right: -200px !important;
  width: 600px !important;
  height: 600px !important;
  background: radial-gradient(circle, var(--bt-red-glow) 0%, transparent 70%) !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

.hero-title {
  font-family: var(--bt-font) !important;
  font-size: clamp(2.5rem, 8vw, 5.5rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  line-height: 0.95 !important;
  color: var(--bt-text) !important;
  text-transform: uppercase !important;
  margin-bottom: 24px !important;
  position: relative !important;
  z-index: 2 !important;
}

.hero-title::before {
  content: '> ' !important;
  color: var(--bt-red) !important;
  font-family: var(--bt-mono) !important;
  font-weight: 400 !important;
}

/* ============================================================
   SECTION TITLES
   ============================================================ */

.section-title,
.gp-section-title {
  font-family: var(--bt-font) !important;
  font-size: clamp(1.75rem, 4vw, 3rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  color: var(--bt-text) !important;
  text-transform: uppercase !important;
  text-align: left !important;
  margin-bottom: 12px !important;
  position: relative !important;
  padding-left: 16px !important;
}

.section-title::before,
.gp-section-title::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: var(--bt-red) !important;
  box-shadow: 0 0 15px var(--bt-red) !important;
}

/* ============================================================
   BOTONES BRUTALIST
   ============================================================ */

.btn-primary,
.btn-danger,
.gp-btn,
.gp-btn-primary {
  background: var(--bt-red) !important;
  color: var(--bt-text) !important;
  border: 1px solid var(--bt-red) !important;
  border-radius: 0 !important;
  padding: 12px 24px !important;
  font-family: var(--bt-mono) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  transition: all 0.15s !important;
  box-shadow: 0 0 0 0 var(--bt-red-glow) !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-primary:hover,
.btn-danger:hover,
.gp-btn:hover,
.gp-btn-primary:hover {
  background: var(--bt-red-bright) !important;
  border-color: var(--bt-red-bright) !important;
  color: var(--bt-text) !important;
  box-shadow: 0 0 30px var(--bt-red-glow) !important;
  transform: translateY(-2px) !important;
}

.btn-primary::before,
.btn-danger::before {
  content: '→ ' !important;
  font-family: var(--bt-mono) !important;
}

.btn-outline-primary,
.btn-outline-danger,
.btn-light,
.gp-btn-secondary {
  background: transparent !important;
  color: var(--bt-text) !important;
  border: 1px solid var(--bt-border-bright) !important;
  border-radius: 0 !important;
  padding: 12px 24px !important;
  font-family: var(--bt-mono) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  transition: all 0.15s !important;
}

.btn-outline-primary:hover,
.btn-outline-danger:hover,
.btn-light:hover,
.gp-btn-secondary:hover {
  background: var(--bt-surface) !important;
  border-color: var(--bt-red) !important;
  color: var(--bt-red) !important;
}

/* ============================================================
   CARDS BRUTALIST
   ============================================================ */

.card,
.service-card,
.gp-card {
  background: var(--bt-surface) !important;
  border: 1px solid var(--bt-border) !important;
  border-radius: 0 !important;
  padding: 24px !important;
  transition: all 0.2s !important;
  position: relative !important;
  overflow: hidden !important;
}

.card::before,
.service-card::before,
.gp-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background: var(--bt-border) !important;
  transition: all 0.2s !important;
}

.card:hover,
.service-card:hover,
.gp-card:hover {
  border-color: var(--bt-red) !important;
  background: var(--bt-surface-2) !important;
  transform: translateY(-2px) !important;
}

.card:hover::before,
.service-card:hover::before,
.gp-card:hover::before {
  background: var(--bt-red) !important;
  box-shadow: 0 0 15px var(--bt-red) !important;
}

.card h3,
.card h4,
.service-card h3,
.service-card h4 {
  color: var(--bt-text) !important;
  font-size: 1.1rem !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
}

/* ============================================================
   BACKGROUND SECTIONS
   ============================================================ */

.bg-light {
  background: var(--bt-bg-alt) !important;
}

.bg-white {
  background: var(--bt-bg) !important;
}

.bg-dark {
  background: var(--bt-bg) !important;
}

/* ============================================================
   TEXTOS
   ============================================================ */

.text-primary,
.text-danger {
  color: var(--bt-red) !important;
}

.text-warning {
  color: var(--bt-amber) !important;
}

.text-success {
  color: var(--bt-green) !important;
}

.text-muted {
  color: var(--bt-text-muted) !important;
}

.text-white {
  color: var(--bt-text) !important;
}

.text-center {
  text-align: left !important;
}

.display-1, .display-2, .display-3, .display-4 {
  font-family: var(--bt-font) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  text-transform: uppercase !important;
  color: var(--bt-text) !important;
}

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

footer,
.footer {
  background: var(--bt-bg) !important;
  border-top: 1px solid var(--bt-border) !important;
  color: var(--bt-text-muted) !important;
  padding: 80px 0 32px !important;
  position: relative !important;
}

footer::before,
.footer::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, var(--bt-red) 50%, transparent 100%) !important;
  box-shadow: 0 0 20px var(--bt-red) !important;
}

footer a,
.footer a {
  color: var(--bt-text-muted) !important;
  font-family: var(--bt-mono) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: all 0.15s !important;
}

footer a:hover,
.footer a:hover {
  color: var(--bt-red) !important;
  padding-left: 4px !important;
}

footer h4,
footer h5,
.footer h4,
.footer h5 {
  color: var(--bt-text) !important;
  font-family: var(--bt-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  margin-bottom: 16px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--bt-border) !important;
}

/* ============================================================
   FLOATING BUTTONS BRUTALIST
   ============================================================ */

#floating-top-buttons {
  top: calc(var(--bt-navbar-height) + 16px) !important;
  right: 16px !important;
  gap: 8px !important;
  z-index: 10001 !important;
}

.float-top-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  text-decoration: none !important;
  color: var(--bt-text) !important;
  border: 1px solid var(--bt-border-bright) !important;
  background: var(--bt-surface) !important;
  box-shadow: none !important;
  transition: all 0.15s !important;
  cursor: pointer !important;
}

.float-top-btn:hover {
  transform: none !important;
  border-color: var(--bt-red) !important;
  box-shadow: 0 0 20px var(--bt-red-glow) !important;
}

.float-btn-ia {
  background: var(--bt-surface) !important;
  color: var(--bt-amber) !important;
  border-color: var(--bt-amber) !important;
  animation: bt-pulse-amber 2s infinite !important;
}

.float-btn-bell {
  background: var(--bt-surface) !important;
  color: var(--bt-red) !important;
  border-color: var(--bt-red) !important;
  animation: bt-pulse-red 2s infinite !important;
}

.float-btn-agenda {
  background: var(--bt-surface) !important;
  color: var(--bt-text) !important;
  border-color: var(--bt-border-bright) !important;
}

@keyframes bt-pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 var(--bt-red-glow); }
  50% { box-shadow: 0 0 20px 4px var(--bt-red-glow); }
}

@keyframes bt-pulse-amber {
  0%, 100% { box-shadow: 0 0 0 0 var(--bt-amber-glow); }
  50% { box-shadow: 0 0 20px 4px var(--bt-amber-glow); }
}

/* Botón WhatsApp flotante */
.float-whatsapp,
.whatsapp-float,
a[href*="wa.me"].float {
  background: var(--bt-whatsapp) !important;
  color: var(--bt-bg) !important;
  border-radius: 0 !important;
  width: 52px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
  position: fixed !important;
  bottom: 16px !important;
  right: 16px !important;
  z-index: 10000 !important;
  box-shadow: 0 0 30px rgba(37, 211, 102, 0.4) !important;
  transition: all 0.15s !important;
}

.float-whatsapp:hover,
.whatsapp-float:hover {
  background: #1DA851 !important;
  transform: scale(1.05) !important;
}

/* Counter */
#floating-counter {
  background: var(--bt-surface) !important;
  border: 1px solid var(--bt-border-bright) !important;
  border-radius: 0 !important;
  padding: 6px 12px !important;
  font-family: var(--bt-mono) !important;
  font-weight: 500 !important;
  color: var(--bt-text-muted) !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

#floating-counter #live-count {
  color: var(--bt-green) !important;
  font-weight: 700 !important;
}

/* Lang switcher */
#lang-switcher {
  top: calc(var(--bt-navbar-height) + 70px) !important;
  right: 16px !important;
  z-index: 10002 !important;
  gap: 4px !important;
}

#lang-switcher a {
  background: var(--bt-surface) !important;
  border: 1px solid var(--bt-border-bright) !important;
  color: var(--bt-text-muted) !important;
  padding: 6px 10px !important;
  border-radius: 0 !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  font-family: var(--bt-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  text-decoration: none !important;
  transition: all 0.15s !important;
}

#lang-switcher a:hover {
  background: var(--bt-red-bg) !important;
  border-color: var(--bt-red) !important;
  color: var(--bt-red) !important;
}

#lang-switcher a[style*="background:#1a1a2e"],
#lang-switcher a[style*="background: #1a1a2e"] {
  background: var(--bt-red) !important;
  color: var(--bt-text) !important;
  border-color: var(--bt-red) !important;
}

/* ============================================================
   FORMS BRUTALIST
   ============================================================ */

.form-control,
.form-select {
  background: var(--bt-surface) !important;
  border: 1px solid var(--bt-border-bright) !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  color: var(--bt-text) !important;
  font-family: var(--bt-mono) !important;
  font-size: 0.85rem !important;
  transition: all 0.15s !important;
}

.form-control:focus,
.form-select:focus {
  background: var(--bt-surface) !important;
  border-color: var(--bt-red) !important;
  color: var(--bt-text) !important;
  box-shadow: 0 0 0 1px var(--bt-red), 0 0 20px var(--bt-red-glow) !important;
  outline: none !important;
}

.form-control::placeholder {
  color: var(--bt-text-subtle) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 0.75rem !important;
}

.form-label {
  color: var(--bt-text-muted) !important;
  font-family: var(--bt-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 6px !important;
}

/* ============================================================
   ACCORDION FAQ
   ============================================================ */

.accordion-item,
.accordion-button {
  background: var(--bt-surface) !important;
  border: 1px solid var(--bt-border) !important;
  border-radius: 0 !important;
  color: var(--bt-text) !important;
}

.accordion-button {
  font-family: var(--bt-mono) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 16px 20px !important;
}

.accordion-button:not(.collapsed) {
  background: var(--bt-red-bg) !important;
  color: var(--bt-red) !important;
  box-shadow: none !important;
}

.accordion-button::before {
  content: '+ ' !important;
  color: var(--bt-red) !important;
  font-family: var(--bt-mono) !important;
  font-weight: 700 !important;
  margin-right: 8px !important;
}

.accordion-button:not(.collapsed)::before {
  content: '− ' !important;
}

.accordion-button::after {
  display: none !important;
}

.accordion-button:focus {
  box-shadow: 0 0 0 1px var(--bt-red) !important;
  border-color: var(--bt-red) !important;
}

.accordion-body {
  color: var(--bt-text-muted) !important;
  font-family: var(--bt-mono) !important;
  font-size: 0.8rem !important;
  line-height: 1.7 !important;
  padding: 16px 20px !important;
}

/* ============================================================
   STATS / CONTADORES
   ============================================================ */

.stats-section,
.stats {
  background: var(--bt-bg) !important;
  border-top: 1px solid var(--bt-border) !important;
  border-bottom: 1px solid var(--bt-border) !important;
  padding: 60px 0 !important;
}

.stats-section .stat-number,
.stats .stat-number,
.stats-section h2,
.stats h2,
.stats-section h3,
.stats h3 {
  color: var(--bt-red) !important;
  font-family: var(--bt-mono) !important;
  font-weight: 700 !important;
  text-shadow: 0 0 20px var(--bt-red-glow) !important;
}

/* ============================================================
   SEO SECTION
   ============================================================ */

.seo-section,
.seo-h1,
.seo-h2 {
  background: transparent !important;
  color: var(--bt-text-muted) !important;
  font-family: var(--bt-mono) !important;
  font-size: 0.85rem !important;
  line-height: 1.8 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.seo-h1,
.seo-h2 {
  color: var(--bt-text) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 16px !important;
  font-family: var(--bt-font) !important;
  font-size: 1.5rem !important;
}

/* ============================================================
   BADGES
   ============================================================ */

.badge {
  background: var(--bt-surface) !important;
  color: var(--bt-text-muted) !important;
  border: 1px solid var(--bt-border-bright) !important;
  border-radius: 0 !important;
  padding: 4px 10px !important;
  font-family: var(--bt-mono) !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

.badge-success {
  background: var(--bt-green) !important;
  color: var(--bt-bg) !important;
  border-color: var(--bt-green) !important;
}

.badge-danger,
.badge-warning {
  background: var(--bt-red) !important;
  color: var(--bt-text) !important;
  border-color: var(--bt-red) !important;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */

.breadcrumb {
  background: var(--bt-surface) !important;
  border: 1px solid var(--bt-border) !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
  font-family: var(--bt-mono) !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 24px !important;
}

.breadcrumb a {
  color: var(--bt-text-muted) !important;
}

.breadcrumb a:hover {
  color: var(--bt-red) !important;
}

.breadcrumb-item.active {
  color: var(--bt-red) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: '>' !important;
  color: var(--bt-text-subtle) !important;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bt-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--bt-border-bright);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bt-red);
}

::selection {
  background: var(--bt-red);
  color: var(--bt-text);
}

/* ============================================================
   MISCELANEOUS
   ============================================================ */

hr {
  border-color: var(--bt-border) !important;
  opacity: 1 !important;
  margin: 32px 0 !important;
}

.alert {
  background: var(--bt-surface) !important;
  border: 1px solid var(--bt-border-bright) !important;
  border-radius: 0 !important;
  color: var(--bt-text) !important;
  padding: 16px 20px !important;
}

.alert-warning {
  border-color: var(--bt-amber) !important;
  background: var(--bt-amber-bg) !important;
  color: var(--bt-amber) !important;
}

.alert-danger {
  border-color: var(--bt-red) !important;
  background: var(--bt-red-bg) !important;
  color: var(--bt-red) !important;
}

.table {
  color: var(--bt-text-muted) !important;
  border-color: var(--bt-border) !important;
}

.table thead th {
  color: var(--bt-text) !important;
  font-family: var(--bt-mono) !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-color: var(--bt-border-bright) !important;
}

/* Toggler */
.navbar-toggler {
  border: 1px solid var(--bt-border-bright) !important;
  border-radius: 0 !important;
  padding: 6px 10px !important;
}

.navbar-toggler-icon {
  filter: invert(1);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28250, 250, 250, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Responsive */
@media (max-width: 768px) {
  body {
    font-size: 14px !important;
  }
  
  h1 {
    font-size: clamp(2rem, 10vw, 3rem) !important;
  }
  
  .hero-title {
    font-size: clamp(2rem, 9vw, 3rem) !important;
  }
  
  .section-title,
  .gp-section-title {
    font-size: 1.5rem !important;
  }
  
  #floating-top-buttons {
    top: calc(var(--bt-navbar-height) + 12px) !important;
    right: 12px !important;
  }
  
  .float-top-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 1rem !important;
  }
  
  #lang-switcher {
    top: calc(var(--bt-navbar-height) + 60px) !important;
  }
  
  .container {
    padding: 0 16px !important;
  }
}

/* ============================================================
   FIXES v3.1 — Hamburger menu + text visibility + tapizado
   ============================================================ */

/* --- HAMBURGER MENU: fondo oscuro cuando se despliega en mobile --- */
@media (max-width: 991px) {
  .navbar-collapse {
    background: #0A0A0A !important;
    border: 1px solid #3A3A3A !important;
    padding: 20px !important;
    margin-top: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 23, 68, 0.15) !important;
    position: absolute !important;
    top: 100% !important;
    left: 16px !important;
    right: 16px !important;
    z-index: 1000 !important;
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
  }

  .navbar-collapse.show {
    display: block !important;
  }

  .navbar-collapse .navbar-nav {
    width: 100% !important;
    gap: 4px !important;
  }

  .navbar-collapse .nav-item {
    width: 100% !important;
    margin-bottom: 2px !important;
  }

  .navbar-collapse .nav-link {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid #2A2A2A !important;
    border-radius: 2px !important;
  }

  .navbar-collapse .dropdown-menu {
    position: static !important;
    width: 100% !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    box-shadow: none !important;
    border: 1px solid #2A2A2A !important;
    margin-top: 4px !important;
    background: #141414 !important;
  }
}

/* --- SECCIONES CON FONDO BLANCO: forzar texto NEGRO NEGRITA --- */
section[style*="background:#fff"],
section[style*="background: #fff"],
section[style*="background:white"],
section[style*="background: white"],
section[style*="background:#ffffff"],
section[style*="background: #ffffff"],
div[style*="background:#fff"],
div[style*="background: #fff"],
div[style*="background:white"],
div[style*="background: white"],
div[style*="background:#ffffff"],
div[style*="background: #ffffff"] {
  background: #FFFFFF !important;
  color: #18181B !important;
}

section[style*="background:#fff"] h1,
section[style*="background:#fff"] h2,
section[style*="background:#fff"] h3,
section[style*="background:#fff"] h4,
section[style*="background:#fff"] h5,
section[style*="background:#fff"] h6,
section[style*="background: #fff"] h1,
section[style*="background: #fff"] h2,
section[style*="background: #fff"] h3,
section[style*="background: #fff"] h4,
section[style*="background: #fff"] h5,
section[style*="background: #fff"] h6,
section[style*="background:white"] h1,
section[style*="background:white"] h2,
section[style*="background:white"] h3,
section[style*="background:white"] h4,
section[style*="background:white"] h5,
section[style*="background:white"] h6,
div[style*="background:#fff"] h1,
div[style*="background:#fff"] h2,
div[style*="background:#fff"] h3,
div[style*="background:#fff"] h4,
div[style*="background:#fff"] h5,
div[style*="background:#fff"] h6,
div[style*="background: #fff"] h1,
div[style*="background: #fff"] h2,
div[style*="background: #fff"] h3,
div[style*="background: #fff"] h4,
div[style*="background: #fff"] h5,
div[style*="background: #fff"] h6 {
  color: #18181B !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}

section[style*="background:#fff"] p,
section[style*="background:#fff"] li,
section[style*="background:#fff"] span,
section[style*="background:#fff"] div,
section[style*="background: #fff"] p,
section[style*="background: #fff"] li,
section[style*="background: #fff"] span,
section[style*="background: #fff"] div,
section[style*="background:white"] p,
section[style*="background:white"] li,
section[style*="background:white"] span,
section[style*="background:white"] div,
div[style*="background:#fff"] p,
div[style*="background:#fff"] li,
div[style*="background:#fff"] span,
div[style*="background:#fff"] div,
div[style*="background: #fff"] p,
div[style*="background: #fff"] li,
div[style*="background: #fff"] span,
div[style*="background: #fff"] div {
  color: #404040 !important;
  font-weight: 500 !important;
}

/* Section-title y section-subtitle DENTRO de secciones blancas → negro */
section[style*="background:#fff"] .section-title,
section[style*="background: #fff"] .section-title,
section[style*="background:white"] .section-title,
section[style*="background:#fff"] .section-subtitle,
section[style*="background: #fff"] .section-subtitle,
section[style*="background:white"] .section-subtitle {
  color: #18181B !important;
  font-weight: 800 !important;
  text-align: center !important;
  text-transform: none !important;
  padding-left: 0 !important;
}

section[style*="background:#fff"] .section-title::before,
section[style*="background: #fff"] .section-title::before,
section[style*="background:white"] .section-title::before {
  display: none !important;
}

/* Service cards dentro de secciones blancas */
section[style*="background:#fff"] .service-card,
section[style*="background: #fff"] .service-card,
section[style*="background:white"] .service-card,
section[style*="background:#fff"] .card,
section[style*="background: #fff"] .card {
  background: #F8F9FA !important;
  border: 1px solid #DEE2E6 !important;
  color: #18181B !important;
}

section[style*="background:#fff"] .service-card h3,
section[style*="background:#fff"] .service-card h4,
section[style*="background: #fff"] .service-card h3,
section[style*="background: #fff"] .service-card h4,
section[style*="background:#fff"] .card h3,
section[style*="background:#fff"] .card h4 {
  color: #18181B !important;
}

section[style*="background:#fff"] .service-card p,
section[style*="background: #fff"] .service-card p,
section[style*="background:#fff"] .card p,
section[style*="background: #fff"] .card p {
  color: #52525B !important;
}

/* Cajas internas con fondo gris claro */
section[style*="background:#fff"] [style*="background:#f8f9fa"],
section[style*="background: #fff"] [style*="background:#f8f9fa"],
section[style*="background:#fff"] [style*="background: #f8f9fa"],
section[style*="background: #fff"] [style*="background: #f8f9fa"] {
  background: #F1F3F5 !important;
  border-left: 4px solid #DC2626 !important;
}

section[style*="background:#fff"] [style*="background:#f8f9fa"] p,
section[style*="background: #fff"] [style*="background:#f8f9fa"] p,
section[style*="background:#fff"] [style*="background: #f8f9fa"] strong,
section[style*="background: #fff"] [style*="background:#f8f9fa"] strong {
  color: #404040 !important;
  font-weight: 700 !important;
}

/* Check icons en listas */
section[style*="background:#fff"] .fa-check-circle,
section[style*="background: #fff"] .fa-check-circle {
  color: #16A34A !important;
}

/* --- TAPIZADO DE VOLANTES: texto BLANCO NEGRITA --- */
/* Esta sección tiene fondo oscuro, el texto debe ser blanco bold */
h2[style*="font-size: 2rem"],
.text-uppercase.fw-bold.text-dark {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  text-shadow: 0 0 20px rgba(255, 23, 68, 0.4) !important;
}

/* Texto descriptivo del tapizado */
.text-justify[style*="font-size: 1.1rem"] {
  color: #FAFAFA !important;
  font-weight: 500 !important;
}

/* "lead" paragraph en sección tapizado */
.lead {
  color: #E0E0E0 !important;
  font-weight: 500 !important;
}

/* --- BOTÓN "IR AL SITIO WEB" (tapizado) --- */
.btn-success {
  background: #16A34A !important;
  border: 1px solid #16A34A !important;
  color: #FFFFFF !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 0.8rem !important;
  padding: 12px 24px !important;
  border-radius: 2px !important;
}

.btn-success:hover {
  background: #15803D !important;
  border-color: #15803D !important;
  box-shadow: 0 0 20px rgba(22, 163, 74, 0.4) !important;
}

/* --- Asegurar que .text-dark sea visible en fondo oscuro --- */
.text-dark {
  color: #FFFFFF !important;
}

/* --- Ajustes finales para asegurar visibilidad --- */
/* Cualquier elemento con color inline blanco que esté en sección blanca */
section[style*="background:#fff"] [style*="color:#fff"],
section[style*="background:#fff"] [style*="color: #fff"],
section[style*="background:#fff"] [style*="color:white"],
section[style*="background:#fff"] [style*="color: white"],
section[style*="background: #fff"] [style*="color:#fff"],
section[style*="background: #fff"] [style*="color: #fff"],
section[style*="background: #fff"] [style*="color:white"],
section[style*="background: #fff"] [style*="color: white"] {
  color: #18181B !important;
}

/* Strong dentro de párrafos en secciones blancas */
section[style*="background:#fff"] strong,
section[style*="background: #fff"] strong,
section[style*="background:white"] strong {
  color: #18181B !important;
  font-weight: 800 !important;
}