/* ==========================================================================
   CALCU ENTERPRISE SUITE 2026 - ESTILOS PRINCIPALES (LANDING PAGE & SHOWCASE)
   Design System: Glassmorphism, Neon Glows, Microinteracciones, Galería Interactiva
   y Optimización Responsiva para Móvil (Xiaomi Redmi Note 9 Pro / LineageOS 22.2)
   ========================================================================== */

/* Variables Corporativas y Paleta de Diseño */
:root {
  --color-bg-base: #020617;
  --color-bg-surface: #0f172a;
  --color-bg-glass: rgba(15, 23, 42, 0.78);
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-focus: rgba(59, 130, 246, 0.5);
  --color-brand-blue: #3b82f6;
  --color-brand-indigo: #6366f1;
  --color-brand-cyan: #06b6d4;
  --color-accent-emerald: #10b981;
  --color-accent-amber: #f59e0b;
  --color-accent-purple: #a855f7;
  --color-accent-rose: #f43f5e;
  --color-text-main: #f8fafc;
  --color-text-muted: #94a3b8;
  --transition-smooth: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Base & Typography */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg-base);
  color: var(--color-text-main);
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Glassmorphism Containers & Cards */
.glass-panel {
  background: var(--color-bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-border-subtle);
}

.glass-card {
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  transition: var(--transition-smooth);
}

.glass-card-hover {
  transition: var(--transition-smooth);
}

.glass-card-hover:hover {
  border-color: rgba(59, 130, 246, 0.38);
  box-shadow: 0 16px 40px -12px rgba(37, 99, 235, 0.28);
  transform: translateY(-4px);
}

.glass-card-emerald {
  background: rgba(6, 78, 59, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  box-shadow: 0 12px 35px -10px rgba(16, 185, 129, 0.2);
}

.glass-card-emerald:hover {
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 18px 45px -10px rgba(16, 185, 129, 0.3);
  transform: translateY(-4px);
}

/* Background Gradients & Radial Glow Lights */
.glow-bg {
  background: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.22) 0%, rgba(99, 102, 241, 0.09) 35%, transparent 72%);
}

.radial-glow-hero {
  background: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.2) 0%, rgba(99, 102, 241, 0.08) 35%, transparent 70%);
}

.radial-glow-accent {
  box-shadow: 0 0 35px rgba(16, 185, 129, 0.35);
}

/* Micro-animations & Interactive Elements */
@keyframes floatGentle {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

.animate-float {
  animation: floatGentle 4s ease-in-out infinite;
}

@keyframes pulseGlowRing {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.65); }
  70% { transform: scale(1); box-shadow: 0 0 0 16px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.pulse-glow, .pulse-ring-emerald {
  animation: pulseGlowRing 2.4s infinite;
}

@keyframes shimmerEffect {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer-text {
  background: linear-gradient(90deg, #38bdf8 0%, #ffffff 50%, #818cf8 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerEffect 4s linear infinite;
}

/* Tabs & Action Buttons */
.tab-btn {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.tab-active {
  background-color: var(--color-brand-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(59, 130, 246, 0.45);
  border-color: rgba(147, 197, 253, 0.4) !important;
}

.tab-inactive {
  background-color: rgba(30, 41, 59, 0.7);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.tab-inactive:hover {
  background-color: rgba(51, 65, 85, 0.9);
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.15);
}

/* Input Fields styling */
.input-premium {
  background-color: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(51, 65, 85, 0.85);
  color: #ffffff;
  transition: var(--transition-smooth);
}

.input-premium:focus {
  outline: none;
  border-color: var(--color-brand-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
  background-color: rgba(15, 23, 42, 0.98);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: #020617;
}

::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3b82f6;
}

/* Tooltip & Labels */
.badge-pill {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
}

/* Modal Lightbox */
#imageModal {
  transition: opacity 0.25s ease-in-out;
}

#imageModal.flex {
  display: flex !important;
}

#modalImg {
  max-height: 82vh;
  object-fit: contain;
}

/* ==========================================================================
   OPTIMIZACIÓN RESPONSIVA Y MÓVIL (XIAOMI REDMI NOTE 9 PRO / 20:9 ASPECT RATIO)
   Pantalla: 1080 x 2400 px (~393 x 873 viewport CSS), LineageOS 22.2 (Android 15)
   ========================================================================== */

@media (max-width: 640px) {
  /* Botones accesibles con el pulgar (área mínima táctil 44x44px) */
  button, a.btn, input, select, textarea {
    min-height: 44px;
  }

  /* Galería deslizable horizontalmente para no saturar verticalmente */
  #galleryTabs {
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #galleryTabs::-webkit-scrollbar {
    display: none;
  }

  /* Tarjetas con espaciado ergonómico */
  .glass-card {
    padding: 1.25rem !important;
    border-radius: 1.25rem !important;
  }

  /* Drawer móvil y hamburguesa */
  .mobile-drawer-open {
    overflow: hidden;
  }

  /* Floating WhatsApp button posicionamiento ergonómico para una sola mano */
  .fixed.bottom-6.right-6 {
    bottom: 1.25rem !important;
    right: 1.25rem !important;
  }
}

/* Dispositivos con relación 20:9 o muy altas (Redmi Note 9 Pro) */
@media screen and (max-width: 480px) and (min-aspect-ratio: 18/9) {
  .hero-container {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
  }
  
  /* Ajuste de títulos para evitar cortes antiestéticos */
  h1 {
    font-size: 2.15rem !important;
    line-height: 1.15 !important;
  }
}