/* ==========================================================================
   MCP ELECTRIC - HIGH-TECH CYBER-NAVAL STYLESHEET
   Light Modern Tech • Glassmorphism • Dynamic Glows • Micro-Animations
   ========================================================================== */

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

:root {
  --bg-primary: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F1F5F9;
  --border-subtle: #E2E8F0;
  --border-highlight: #CBD5E1;
  --text-main: #0B192C;
  --text-muted: #475569;
  --accent-blue: #0284C7;
  --accent-cyan: #00A3FF;
  --accent-navy: #0B192C;
  --accent-green: #059669;
  --accent-amber: #D97706;
  --accent-red: #DC2626;

  /* High-Tech Glow Tokens */
  --glow-cyan: 0 0 25px rgba(0, 163, 255, 0.35);
  --glow-cyan-lg: 0 0 45px rgba(0, 163, 255, 0.5);
  --glow-blue: 0 0 30px rgba(2, 132, 199, 0.28);
  --glow-emerald: 0 0 25px rgba(5, 150, 105, 0.35);
  --glow-amber: 0 0 25px rgba(217, 119, 6, 0.35);
  --ig-gradient: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-main);
  overflow-x: hidden;
  position: relative;
}

/* Site-wide blurred vessel background (Layer 1: photo) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: url('images/tienda-header-bridge.jpg');
  background-size: cover;
  background-position: center 42%;
  filter: blur(9px) brightness(0.55) saturate(1.05);
  transform: scale(1.08);
  pointer-events: none;
}

/* Site-wide technical grid + light wash over the blurred photo (Layer 2: overlay) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(248, 250, 252, 0.5) 0%, rgba(248, 250, 252, 0.62) 100%),
    radial-gradient(circle at 15% 15%, rgba(2, 132, 199, 0.1) 0%, transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(0, 163, 255, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 50% 40%, rgba(5, 150, 105, 0.04) 0%, transparent 55%),
    linear-gradient(rgba(226, 232, 240, 0.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 232, 240, 0.45) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 40px 40px, 40px 40px;
  pointer-events: none;
}

h1, h2, h3, h4, h5, .font-heading {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.02em;
}

.font-mono-tech {
  font-family: 'Fira Code', monospace;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0284C7;
}

/* ==========================================================================
   GLASSMORPHISM & SPOTLIGHT CARDS
   ========================================================================== */

.card-clean {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.card-clean:hover {
  border-color: #38BDF8;
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -6px rgba(2, 132, 199, 0.16), 0 0 0 1px rgba(56, 189, 248, 0.3);
}

/* Dynamic Cursor Spotlight Card Effect */
.card-spotlight {
  position: relative;
  overflow: hidden;
}

.card-spotlight::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(2, 132, 199, 0.08),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

.card-spotlight:hover::before {
  opacity: 1;
}

/* Glass Header Panel */
.panel-header-glass {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

/* ==========================================================================
   FLOATING GLASS NAVBAR & PILL TABS
   ========================================================================== */

.navbar-float-wrap {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 14px 16px 0;
}

.navbar-glass {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-top-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 8px 32px -8px rgba(15, 23, 42, 0.12),
    0 1px 0 0 rgba(255, 255, 255, 0.6) inset;
  border-radius: 9999px;
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

.navbar-glass:hover {
  box-shadow:
    0 12px 40px -8px rgba(15, 23, 42, 0.16),
    0 1px 0 0 rgba(255, 255, 255, 0.7) inset;
}

/* Navbar with no background at all — floats directly over the hero video */
.navbar-clear {
  background: transparent;
  border: none;
  box-shadow: none;
}

.navbar-clear .nav-tabs-track {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

.navbar-clear .nav-tab {
  color: rgba(255, 255, 255, 0.82);
}

.navbar-clear .nav-tab:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.navbar-clear .nav-tab.active {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  box-shadow: none;
}

/* Once scrolled past the hero video, bring back a readable glass background */
.navbar-clear.is-scrolled {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-top-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 8px 32px -8px rgba(15, 23, 42, 0.12),
    0 1px 0 0 rgba(255, 255, 255, 0.6) inset;
}

.navbar-clear.is-scrolled .navbar-logo-text { color: var(--text-main); text-shadow: none; }
.navbar-clear.is-scrolled .navbar-logo-sub { color: var(--text-muted); }
.navbar-clear.is-scrolled .nav-tabs-track { background: rgba(148, 163, 184, 0.1); border-color: rgba(255, 255, 255, 0.6); }
.navbar-clear.is-scrolled .nav-tab { color: var(--text-muted); }
.navbar-clear.is-scrolled .nav-tab:hover { color: var(--accent-blue); background: rgba(255, 255, 255, 0.5); }
.navbar-clear.is-scrolled .nav-tab.active { background: #FFFFFF; color: var(--text-main); box-shadow: 0 2px 10px -2px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(226, 232, 240, 0.9); }
.navbar-clear.is-scrolled .mobile-menu-toggle-btn { background: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.7); color: #334155; }

/* Pill Track holding the tabs */
.nav-tabs-track {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 4px;
  border-radius: 9999px;
}

/* Individual Glass Tab */
.nav-tab {
  position: relative;
  padding: 0.55rem 1.1rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.nav-tab:hover {
  color: var(--accent-blue);
  background: rgba(255, 255, 255, 0.5);
}

.nav-tab.active {
  background: #FFFFFF;
  color: var(--text-main);
  box-shadow:
    0 2px 10px -2px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(226, 232, 240, 0.9);
}

.nav-tab.active .nav-tab-dot {
  background: var(--accent-blue);
}

/* Portal Empresas dashboard tabs (Mis Sistemas / Ampliar Suscripción) */
.portal-tab-btn {
  color: #64748b;
  border-bottom: 2px solid transparent;
}
.portal-tab-btn.active-portal-tab {
  color: #38bdf8;
  border-bottom-color: #38bdf8;
}

/* ==========================================================================
   ANIMATED GRADIENT BORDERS & HIGHLIGHTS
   ========================================================================= */

.gradient-border-animated {
  position: relative;
  border-radius: 1.25rem;
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  z-index: 1;
}

.gradient-border-animated::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(1.25rem + 2px);
  background: linear-gradient(
    90deg,
    #0284C7,
    #00E5FF,
    #059669,
    #0284C7
  );
  background-size: 300% 300%;
  animation: gradient-flow 6s linear infinite;
  z-index: -1;
  opacity: 0.85;
}

@keyframes gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Shimmer Button Effect */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}

.btn-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 35%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 65%
  );
  transform: rotate(25deg) translateY(-100%);
  animation: shimmer-slide 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes shimmer-slide {
  0%, 70% {
    transform: rotate(25deg) translateY(-120%);
  }
  100% {
    transform: rotate(25deg) translateY(120%);
  }
}

/* ==========================================================================
   NAVAL RADAR HUD & TELEMETRY SIMULATOR
   ========================================================================== */

.radar-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 380px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle, #0B192C 0%, #070D18 100%);
  box-shadow: 
    0 0 35px rgba(0, 163, 255, 0.25),
    inset 0 0 45px rgba(0, 229, 255, 0.15),
    0 0 0 2px rgba(0, 163, 255, 0.4);
  overflow: hidden;
}

.radar-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(0, 229, 255, 0.22);
  pointer-events: none;
}

.radar-ring:nth-child(1) { width: 30%; height: 30%; }
.radar-ring:nth-child(2) { width: 55%; height: 55%; }
.radar-ring:nth-child(3) { width: 80%; height: 80%; }
.radar-ring:nth-child(4) { width: 96%; height: 96%; border-color: rgba(0, 229, 255, 0.4); }

.radar-crosshair-h {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.3) 20%, rgba(0, 229, 255, 0.3) 80%, transparent);
}

.radar-crosshair-v {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(0, 229, 255, 0.3) 20%, rgba(0, 229, 255, 0.3) 80%, transparent);
}

.radar-sweep-beam {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 229, 255, 0.45) 0deg, rgba(0, 229, 255, 0.12) 35deg, transparent 70deg);
  animation: radar-rotate 4s linear infinite;
  pointer-events: none;
}

@keyframes radar-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Radar Ping Targets */
.radar-blip {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #00E5FF;
  box-shadow: 0 0 10px #00E5FF, 0 0 20px #00E5FF;
  animation: blip-pulse 2s ease-in-out infinite;
}

@keyframes blip-pulse {
  0% { transform: scale(0.8); opacity: 0.3; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 15px #00E5FF, 0 0 30px #00E5FF; }
  100% { transform: scale(0.8); opacity: 0.3; }
}

/* Floating Animation */
.animate-float-soft {
  animation: float-soft 4.5s ease-in-out infinite;
}

.animate-float-soft-delayed {
  animation: float-soft 4.5s ease-in-out infinite 2.25s;
}

@keyframes float-soft {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-7px); }
}

/* ==========================================================================
   AI INFERENCE HUD & TACTICAL BOUNDING BOXES
   ========================================================================== */

.bounding-box {
  position: absolute;
  border: 2px solid #00E5FF;
  background-color: rgba(0, 229, 255, 0.14);
  border-radius: 6px;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.5), inset 0 0 12px rgba(0, 229, 255, 0.2);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.bounding-box-alert {
  border-color: #EF4444 !important;
  background-color: rgba(239, 68, 68, 0.22) !important;
  box-shadow: 0 0 22px rgba(239, 68, 68, 0.7), inset 0 0 14px rgba(239, 68, 68, 0.3) !important;
}

/* Corner Reticle Brackets */
.corner-bracket {
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: #00E5FF;
  pointer-events: none;
}
.corner-tl { top: -2px; left: -2px; border-top: 2px solid #00E5FF; border-left: 2px solid #00E5FF; }
.corner-tr { top: -2px; right: -2px; border-top: 2px solid #00E5FF; border-right: 2px solid #00E5FF; }
.corner-bl { bottom: -2px; left: -2px; border-bottom: 2px solid #00E5FF; border-left: 2px solid #00E5FF; }
.corner-br { bottom: -2px; right: -2px; border-bottom: 2px solid #00E5FF; border-right: 2px solid #00E5FF; }

.bounding-tag {
  position: absolute;
  top: -24px;
  left: -2px;
  background: linear-gradient(90deg, #00E5FF, #0284C7);
  color: #070B14;
  font-size: 10px;
  font-family: 'Fira Code', monospace;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px 4px 0 0;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 229, 255, 0.4);
}

.bounding-tag-alert {
  background: linear-gradient(90deg, #EF4444, #DC2626) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5) !important;
}

/* Virtual Counting Line */
.virtual-gate-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.2), #00E5FF 50%, rgba(0, 229, 255, 0.2));
  box-shadow: 0 0 16px #00E5FF, 0 0 30px rgba(0, 229, 255, 0.6);
  left: 60%;
  pointer-events: none;
}

.virtual-gate-label {
  position: absolute;
  top: 14px;
  left: calc(60% + 10px);
  background: rgba(11, 25, 44, 0.92);
  color: #00E5FF;
  font-size: 10px;
  font-family: 'Fira Code', monospace;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(0, 229, 255, 0.5);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Scanning Laser Animation */
@keyframes scan-horizontal {
  0% { transform: translateY(0%); opacity: 0.9; }
  50% { opacity: 0.35; }
  100% { transform: translateY(330px); opacity: 0.9; }
}

.scan-laser {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00E5FF 30%, #FFFFFF 50%, #00E5FF 70%, transparent);
  box-shadow: 0 0 14px #00E5FF, 0 0 24px rgba(0, 229, 255, 0.8);
  animation: scan-horizontal 3.2s ease-in-out infinite;
  pointer-events: none;
}

/* ==========================================================================
   INSTAGRAM REEL & VIDEO CARDS
   ========================================================================== */

.reel-card {
  position: relative;
  border-radius: 1.15rem;
  overflow: hidden;
  background-color: #0F172A;
  aspect-ratio: 9 / 14;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.1);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.reel-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px rgba(2, 132, 199, 0.25), 0 0 0 1px rgba(56, 189, 248, 0.4);
}

.reel-card:hover .reel-overlay {
  opacity: 1;
}

.reel-card img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reel-card:hover img {
  transform: scale(1.08);
}

.reel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 25, 44, 0.96) 0%, rgba(11, 25, 44, 0.45) 55%, rgba(11, 25, 44, 0.2) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem;
  transition: opacity 0.3s ease;
}

.ig-badge-gradient {
  background: var(--ig-gradient);
}

/* Glow Pulses for Badges */
.glow-pulse-cyan {
  box-shadow: 0 0 12px rgba(0, 163, 255, 0.5);
  animation: glow-breathe-cyan 2.5s ease-in-out infinite alternate;
}

@keyframes glow-breathe-cyan {
  from { box-shadow: 0 0 6px rgba(0, 163, 255, 0.3); }
  to { box-shadow: 0 0 18px rgba(0, 163, 255, 0.7); }
}

.glow-pulse-emerald {
  animation: glow-breathe-emerald 2.5s ease-in-out infinite alternate;
}

/* ==========================================================================
   FULL CONTROL SHIP — NIGHT BRIDGE MODE (DARK REALISTIC CONSOLE)
   ========================================================================== */

.bridge-console {
  background:
    radial-gradient(circle at 20% 0%, rgba(0, 163, 255, 0.08), transparent 55%),
    radial-gradient(circle at 90% 100%, rgba(5, 150, 105, 0.06), transparent 50%),
    #04070d;
}

.bridge-console::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 163, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 163, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

/* Ship Schematic Hotspots */
.ship-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 13px;
  height: 13px;
  border-radius: 9999px;
  background: #00E5FF;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 8px #00E5FF, 0 0 18px rgba(0, 229, 255, 0.6);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  z-index: 2;
  animation: blip-pulse 2.4s ease-in-out infinite;
}

/* Enlarged invisible touch target so hotspots stay tappable on phones without changing how they look */
.ship-hotspot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
}

.ship-hotspot:hover {
  transform: translate(-50%, -50%) scale(1.4);
}

.ship-hotspot.focus {
  background: #38BDF8;
  box-shadow: 0 0 12px #38BDF8, 0 0 26px rgba(56, 189, 248, 0.85);
  animation: none;
  transform: translate(-50%, -50%) scale(1.3);
}

.ship-hotspot.alert {
  background: #EF4444;
  border-color: #FCA5A5;
  box-shadow: 0 0 14px #EF4444, 0 0 30px rgba(239, 68, 68, 0.85);
  animation: blip-pulse 0.9s ease-in-out infinite;
}

/* Fuel Tank Vertical Gauge */
.tank-gauge-tube {
  position: relative;
  width: 52px;
  height: 130px;
  border-radius: 8px 8px 5px 5px;
  background: rgba(2, 6, 23, 0.75);
  border: 2px solid rgba(0, 163, 255, 0.35);
  overflow: hidden;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.7);
}

.tank-gauge-liquid {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.95), rgba(2, 132, 199, 0.95));
  transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease;
}

.tank-gauge-liquid::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   MOVING MARQUEE CAROUSEL (Featured Products, Client Logos, etc.)
   ========================================================================== */

.marquee-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: marquee-scroll 32s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-track-reverse {
  animation-direction: reverse;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.tank-gauge-tick {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(148, 163, 184, 0.25);
}

@keyframes glow-breathe-emerald {
  from { box-shadow: 0 0 6px rgba(5, 150, 105, 0.3); }
  to { box-shadow: 0 0 18px rgba(5, 150, 105, 0.7); }
}

/* Reserva el alto del banner de alarma del showroom Baia para que el contenido de abajo no salte */
.baia-alert-slot { min-height: 370px; }
@media (min-width: 768px) { .baia-alert-slot { min-height: 212px; } }

/* Showroom Control de Bombas: flujo en tuberías y giro del rotor de la bomba */
@keyframes bm-dash { to { stroke-dashoffset: -22; } }
@keyframes bm-spin { to { transform: rotate(360deg); } }
.bm-flow { stroke-dasharray: 6 5; animation: bm-dash .8s linear infinite; }
.bm-spin { transform-box: fill-box; transform-origin: center; }
.bm-spin > * { transform-box: fill-box; transform-origin: center; animation: bm-spin 1.2s linear infinite; }
@media (prefers-reduced-motion: reduce) { .bm-flow, .bm-spin > * { animation: none; } }

/* Selector de sistemas del showroom: dos estados definidos (inactivo / activo), legibles sobre el fondo oscuro */
.showroom-tab-btn {
  color: #f1f5f9;
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-shadow: 0 1px 2px rgba(2, 6, 23, 0.55);
  transition: background-color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.showroom-tab-btn:hover { background: rgba(15, 23, 42, 0.45); border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.showroom-tab-btn.is-active {
  color: #fff;
  background: #0369a1;
  border-color: #7dd3fc;
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.35), 0 10px 26px -10px rgba(2, 132, 199, 0.85);
}
.showroom-tab-btn.is-active:hover { background: #0284c7; }
.showroom-tab-btn:focus-visible { outline: 2px solid #7dd3fc; outline-offset: 3px; }