/* Importaciones de fuentes mejoradas */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@400;500;600;700;800;900&display=swap');

/* Base resets para asegurar visibilidad */
* {
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
  color: #1f2937 !important;
  background-color: #ffffff !important;
}

/* Asegurar que todo el texto sea visible */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
a,
li,
label {
  color: inherit;
}

/* Tipografías utilitarias */
.font-display {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.font-body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

:root {
  --ng-navy: #0B1426;
  --ng-navy-light: #1A2332;
  --ng-teal: #00D4AA;
  --ng-teal-dark: #00B896;
  --ng-gray: #F1F5F9;
  --ng-blue: #1E40AF;
  --ng-purple: #7C3AED;
  --ng-gold: #D97706;
  --ng-emerald: #10B981;
  --ng-red: #DC2626;
  --ng-orange: #EA580C;
  --ng-indigo: #4F46E5;
  --ng-cyan: #0891B2;
  --ng-rose: #E11D48;
  --ng-amber: #F59E0B;
  --ng-white: #FFFFFF;
  --ng-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --ng-gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --ng-gradient-3: linear-gradient(135deg, #00D4AA 0%, #1E40AF 50%, #7C3AED 100%);
  --ng-gradient-hero: linear-gradient(135deg, #0B1426 0%, #1A2332 25%, #00D4AA 100%);
  --ng-gradient-financial: linear-gradient(135deg, #1E40AF 0%, #4F46E5 50%, #7C3AED 100%);
  --ng-gradient-success: linear-gradient(135deg, #10B981 0%, #00D4AA 100%);
  --ng-gradient-warning: linear-gradient(135deg, #F59E0B 0%, #EA580C 100%);
  --ng-gradient-mexico: linear-gradient(135deg, #10B981 0%, #FFFFFF 50%, #DC2626 100%);
  --ng-gradient-roi: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
  --ng-gradient-growth: linear-gradient(135deg, #0891B2 0%, #1E40AF 100%);
  --ng-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --ng-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --ng-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
  --ng-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Colores utilitarios */
.text-ng-navy {
  color: var(--ng-navy);
}

.text-ng-navy-light {
  color: var(--ng-navy-light);
}

.text-ng-teal {
  color: var(--ng-teal);
}

.text-ng-purple {
  color: var(--ng-purple);
}

.text-ng-gold {
  color: var(--ng-gold);
}

.bg-ng-navy {
  background-color: var(--ng-navy);
}

.bg-ng-navy-light {
  background-color: var(--ng-navy-light);
}

.bg-ng-teal {
  background-color: var(--ng-teal);
}

.bg-ng-teal-dark {
  background-color: var(--ng-teal-dark);
}

.bg-ng-gray {
  background-color: var(--ng-gray);
}

.bg-ng-purple {
  background-color: var(--ng-purple);
}

.bg-ng-gold {
  background-color: var(--ng-gold);
}

.border-ng-navy {
  border-color: var(--ng-navy);
}

.border-ng-teal {
  border-color: var(--ng-teal);
}

/* Gradientes */
.bg-gradient-hero {
  background: var(--ng-gradient-hero);
}

.bg-gradient-1 {
  background: var(--ng-gradient-1);
}

.bg-gradient-2 {
  background: var(--ng-gradient-2);
}

.bg-gradient-3 {
  background: var(--ng-gradient-3);
}

.bg-gradient-financial {
  background: var(--ng-gradient-financial);
}

.bg-gradient-success {
  background: var(--ng-gradient-success);
}

.bg-gradient-warning {
  background: var(--ng-gradient-warning);
}

.bg-gradient-mexico {
  background: var(--ng-gradient-mexico);
}

.bg-gradient-roi {
  background: var(--ng-gradient-roi);
}

.bg-gradient-growth {
  background: var(--ng-gradient-growth);
}

/* Sombras */
.shadow-ng-sm {
  box-shadow: var(--ng-shadow-sm);
}

.shadow-ng-md {
  box-shadow: var(--ng-shadow-md);
}

.shadow-ng-lg {
  box-shadow: var(--ng-shadow-lg);
}

.shadow-ng-xl {
  box-shadow: var(--ng-shadow-xl);
}

/* Container mejorado */
.container-xl {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Botones mejorados */
.btn {
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn:hover::before {
  left: 100%;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 212, 170, 0.3);
}

.btn-primary {
  background: linear-gradient(135deg, var(--ng-teal) 0%, var(--ng-teal-dark) 100%);
  color: white !important;
  font-weight: 600;
  padding: 0.875rem 2rem;
  border-radius: 0.75rem;
  border: none;
  box-shadow: var(--ng-shadow-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-primary svg {
  flex-shrink: 0;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  font-weight: 500;
  padding: 0.875rem 2rem;
  border-radius: 0.75rem;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Cards mejoradas */
.card {
  background: white;
  border-radius: 1.25rem;
  padding: 2rem;
  box-shadow: var(--ng-shadow-md);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--ng-gradient-3);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.card:hover::before {
  transform: scaleX(1);
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--ng-shadow-xl);
}

.card-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ng-teal) 0%, var(--ng-blue) 100%);
  color: white;
  margin-bottom: 1.5rem;
  box-shadow: var(--ng-shadow-md);
}

/* Efectos de texto */
.text-gradient {
  color: var(--ng-teal) !important;
  background: linear-gradient(135deg, var(--ng-teal) 0%, var(--ng-blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Fallback for text-gradient when gradient doesn't work */
@supports not (background-clip: text) {
  .text-gradient {
    color: var(--ng-teal) !important;
    background: none !important;
    -webkit-text-fill-color: var(--ng-teal) !important;
  }
}

/* Mobile Navigation */
#mobileNav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  z-index: 50;
}

/* Fallback for backdrop-filter */
@supports (backdrop-filter: blur(10px)) {
  #mobileNav {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

#mobileNav a {
  display: block;
  padding: 0.75rem 0;
  color: #374151 !important;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
  border-bottom: 1px solid transparent;
}

#mobileNav a:hover {
  color: var(--ng-teal) !important;
  padding-left: 0.5rem;
}

#mobileNav .btn-primary {
  margin-top: 1rem;
  width: 100%;
  text-align: center;
  padding: 1rem 2rem;
}

/* Header glass effect */
.header-glass {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(226, 232, 240, 0.2);
}

@supports (backdrop-filter: blur(10px)) {
  .header-glass {
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* Mobile menu button */
#menuBtn {
  position: relative;
  z-index: 60;
  background: white;
  color: #374151;
}

#menuBtn:hover {
  background: #f8fafc;
  border-color: var(--ng-teal);
  color: var(--ng-teal);
}

/* Responsive improvements */
@media (max-width: 1023px) {
  .container-xl {
    padding-inline: 1rem;
  }

  #mobileNav {
    animation: slideDown 0.3s ease-out;
  }

  #mobileNav.hidden {
    display: none !important;
  }

  /* Ensure mobile nav is visible when shown */
  #mobileNav:not(.hidden) {
    display: block !important;
  }
}

@media (max-width: 640px) {
  .container-xl {
    padding-inline: 0.75rem;
  }

  #mobileNav .container-xl {
    padding-inline: 1.5rem;
  }

  #mobileNav a {
    font-size: 1.1rem;
    padding: 1rem 0;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Loading spinner */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Form styles */
.form-label {
  display: block;
  font-weight: 600;
  color: var(--ng-navy);
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.form-input {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 0.75rem;
  font-size: 1rem;
  transition: all 0.2s ease;
  background: white;
}

.form-input:focus {
  outline: none;
  border-color: var(--ng-teal);
  box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.1);
}

.form-input::placeholder {
  color: #94a3b8;
}

/* Animaciones */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.6s ease-out;
}

.animate-fadeInLeft {
  animation: fadeInLeft 0.6s ease-out;
}

.animate-fadeInRight {
  animation: fadeInRight 0.6s ease-out;
}

.animate-pulse {
  animation: pulse 2s infinite;
}

/* Efectos de scroll reveal */
.reveal {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* For JS-enabled environments, hide initially */
.js .reveal {
  opacity: 0;
  transform: translateY(50px);
}

.js .reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Glassmorphism */
.glass {
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Particles background mejorado */
.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.particle {
  position: absolute;
  border-radius: 50%;
  animation: float 8s infinite linear;
  box-shadow: 0 0 6px rgba(0, 212, 170, 0.5);
}

.particle:nth-child(odd) {
  width: 3px;
  height: 3px;
  background: linear-gradient(45deg, rgba(0, 212, 170, 0.8), rgba(255, 215, 0, 0.6));
  animation-duration: 10s;
}

.particle:nth-child(even) {
  width: 2px;
  height: 2px;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.7), rgba(0, 212, 170, 0.5));
  animation-duration: 6s;
}

@keyframes float {
  0% {
    transform: translateY(100vh) translateX(0px) rotate(0deg);
    opacity: 0;
    filter: blur(1px);
  }

  5% {
    opacity: 1;
    filter: blur(0px);
  }

  50% {
    transform: translateY(50vh) translateX(50px) rotate(180deg);
    opacity: 1;
  }

  95% {
    opacity: 1;
    filter: blur(0px);
  }

  100% {
    transform: translateY(-10vh) translateX(100px) rotate(360deg);
    opacity: 0;
    filter: blur(1px);
  }
}

/* Focus mejorado */
:focus-visible {
  outline: 2px solid var(--ng-teal);
  outline-offset: 2px;
  border-radius: 0.375rem;
}

.stat-number-heading {
  font-size: 3rem !important;
  font-weight: 900 !important;
  color: var(--ng-white) !important;
  line-height: 1 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--ng-white) !important;
}

/* Estadísticas animadas */
.stat-number {
  font-size: 3rem !important;
  font-weight: 900 !important;
  color: var(--ng-navy) !important;
  line-height: 1 !important;
  /* Remove gradient background to ensure text is visible */
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--ng-navy) !important;
}

/* Remove conflicting fallback */

/* Testimonios mejorados */
.testimonial {
  position: relative;
  background: white;
  border-radius: 1.25rem;
  padding: 2.5rem;
  box-shadow: var(--ng-shadow-lg);
  border: 1px solid rgba(0, 212, 170, 0.1);
}

.testimonial::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 2rem;
  font-size: 4rem;
  color: var(--ng-teal);
  font-family: serif;
  line-height: 1;
}

/* Responsive mejoras */
@media (max-width: 768px) {
  .container-xl {
    padding-inline: 1rem;
  }

  .card {
    padding: 1.5rem;
  }

  .btn-primary,
  .btn-secondary {
    padding: 0.75rem 1.5rem;
  }
}

/* Scroll suave */
html {
  scroll-behavior: smooth;
}

/* Animation delay classes */
.delay-0 {
  animation-delay: 0s !important;
}

.delay-100 {
  animation-delay: 0.1s !important;
}

.delay-200 {
  animation-delay: 0.2s !important;
}

.delay-300 {
  animation-delay: 0.3s !important;
}

.delay-400 {
  animation-delay: 0.4s !important;
}

.delay-500 {
  animation-delay: 0.5s !important;
}

.delay-600 {
  animation-delay: 0.6s !important;
}

.delay-200 {
  animation-delay: 0.2s !important;
}

.delay-400 {
  animation-delay: 0.4s !important;
}

.delay-100 {
  animation-delay: 0.1s !important;
}

.delay-300 {
  animation-delay: 0.3s !important;
}

.delay-500 {
  animation-delay: 0.5s !important;
}

/* Gradientes optimizados para iconos */
.bg-gradient-purple-gold {
  background: linear-gradient(135deg, var(--ng-purple) 0%, var(--ng-gold) 100%);
}

.bg-gradient-gold-teal {
  background: linear-gradient(135deg, var(--ng-gold) 0%, var(--ng-teal) 100%);
}

.bg-gradient-purple-blue {
  background: linear-gradient(135deg, var(--ng-purple) 0%, var(--ng-blue) 100%);
}

.bg-gradient-blue-purple {
  background: linear-gradient(135deg, var(--ng-blue) 0%, var(--ng-purple) 100%);
}

.bg-gradient-1 {
  background: var(--ng-gradient-1);
}

.bg-gradient-2 {
  background: var(--ng-gradient-2);
}

.delay-1000 {
  animation-delay: 1s !important;
}

.delay-1500 {
  animation-delay: 1.5s !important;
}

.delay-2000 {
  animation-delay: 2s !important;
}

.delay-2500 {
  animation-delay: 2.5s !important;
}

.delay-3000 {
  animation-delay: 3s !important;
}

.delay-4000 {
  animation-delay: 4s !important;
}

.delay-5000 {
  animation-delay: 5s !important;
}

/* Particle positioning classes mejorado */
.particle-1 {
  left: 10%;
  animation-delay: -0.5s;
  animation-duration: 12s;
}

.particle-2 {
  left: 20%;
  animation-delay: -1s;
  animation-duration: 8s;
}

.particle-3 {
  left: 35%;
  animation-delay: -2s;
  animation-duration: 14s;
}

.particle-4 {
  left: 50%;
  animation-delay: -0.8s;
  animation-duration: 10s;
}

.particle-5 {
  left: 65%;
  animation-delay: -1.5s;
  animation-duration: 9s;
}

.particle-6 {
  left: 80%;
  animation-delay: -0.3s;
  animation-duration: 11s;
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Fixes for visibility issues */
.text-slate-600 {
  color: #475569 !important;
}

.text-slate-700 {
  color: #334155 !important;
}

.text-slate-800 {
  color: #1e293b !important;
}

.text-slate-500 {
  color: #64748b !important;
}

.text-slate-400 {
  color: #94a3b8 !important;
}

.text-slate-300 {
  color: #cbd5e1 !important;
}

.text-white {
  color: #ffffff !important;
}

.text-ng-navy {
  color: var(--ng-navy) !important;
}

.text-ng-teal {
  color: var(--ng-teal) !important;
}

.text-ng-purple {
  color: var(--ng-purple) !important;
}

/* Ensure backgrounds are visible */
.bg-white {
  background-color: #ffffff !important;
}

.bg-slate-50 {
  background-color: #f8fafc !important;
}

.bg-ng-navy {
  background-color: var(--ng-navy) !important;
}

/* Ensure headings are visible */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ng-navy) !important;
}

.font-display {
  color: inherit !important;
}

/* Stats section fixes - Master definition */
.stat-number {
  font-size: 2.5rem !important;
  font-weight: 900 !important;
  color: var(--ng-navy) !important;
  line-height: 1 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--ng-navy) !important;
}

/* Cards visibility */
.card {
  background-color: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.card h3 {
  color: var(--ng-navy) !important;
}

.card p {
  color: #475569 !important;
}

.card .text-slate-600 {
  color: #475569 !important;
}

.card .text-slate-500 {
  color: #64748b !important;
}

.card .text-ng-navy {
  color: var(--ng-navy) !important;
}

/* Specific fix for stat cards */
.card .stat-number {
  color: var(--ng-navy) !important;
  background: none !important;
  -webkit-text-fill-color: var(--ng-navy) !important;
}

/* Testimonials */
.testimonial {
  background-color: #ffffff !important;
  color: #1f2937 !important;
}

.testimonial blockquote {
  color: #374151 !important;
}

/* Reveal animation fix */
.reveal {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Button text visibility - consolidado */
.btn {
  color: inherit !important;
}

.btn-primary {
  color: #ffffff !important;
}

.btn-secondary {
  color: #ffffff !important;
}

/* Ensure all sections have proper text color */
section {
  color: #1f2937;
}

section h1,
section h2,
section h3,
section h4,
section h5,
section h6 {
  color: var(--ng-navy) !important;
}

section p,
section span:not(.text-white):not(.text-ng-teal):not(.text-gradient) {
  color: #475569 !important;
}

/* Specific section fixes */
#hero {
  color: #ffffff !important;
}

#hero h1,
#hero h2,
#hero p {
  color: #ffffff !important;
}

#nosotros {
  background-color: #ffffff !important;
  color: #1f2937 !important;
}

#servicios {
  background-color: #f8fafc !important;
  color: #1f2937 !important;
}

#metodologia {
  background-color: #ffffff !important;
  color: #1f2937 !important;
}

#testimonios {
  background-color: #ffffff !important;
  color: #1f2937 !important;
}

#contacto {
  background-color: #f8fafc !important;
  color: #1f2937 !important;
}

/* Make sure all inputs are visible */
input,
textarea,
label {
  color: #1f2937 !important;
}

/* Fix any hidden content issues */
* {
  visibility: visible !important;
}

/* Additional text visibility fixes */
.container-xl * {
  color: inherit;
}

/* Ensure no elements have display: none accidentally */
.card,
.testimonial,
.step-card,
.service-card,
.stat-card {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Grid items visibility */
.grid>* {
  display: block !important;
  opacity: 1 !important;
}

/* Flex items visibility */
.flex>* {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure background colors are applied */
.bg-white {
  background-color: #ffffff !important;
}

.bg-slate-50 {
  background-color: #f8fafc !important;
}

/* Final fallback for any invisible text */
body * {
  color: inherit !important;
}

body {
  color: #1f2937 !important;
}

/* CTA section text improvements */
.bg-gradient-hero h3,
.bg-gradient-hero p {
  color: #ffffff !important;
}

.bg-gradient-hero .text-white\/90 {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Grid gap fixes */
.grid.grid-cols-2 {
  gap: 1.5rem;
}

/* Flexbox alignment fixes */
.inline-flex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Button flex fixes */
button.inline-flex,
a.inline-flex {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}

/* =================================================================
   NUEVOS ESTILOS FINANCIEROS Y TÉCNICOS PARA MÉXICO
   ================================================================= */

/* Videos Background */
.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(11, 20, 38, 0.92) 0%, rgba(30, 64, 175, 0.85) 50%, rgba(0, 212, 170, 0.75) 100%);
  z-index: 1;
}

/* Métricas Financieras Optimizadas */
.financial-metric {
  padding: 2rem 1.5rem;
  border-radius: 1.25rem;
  background: linear-gradient(135deg,
      rgba(0, 212, 170, 0.2) 0%,
      rgba(0, 99, 65, 0.3) 50%,
      rgba(33, 63, 99, 0.25) 100%);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(255, 255, 255, 0.4);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.financial-metric::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s ease;
}

.financial-metric:hover::before {
  left: 100%;
}

.financial-metric:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0, 212, 170, 0.25);
  border-color: rgba(0, 212, 170, 0.6);
}

.metric-value {
  font-size: clamp(2rem, 3vw, 2.0rem);
  font-weight: 900;
  margin-bottom: 0.75rem;
  background: linear-gradient(135deg,
      #00D4AA 0%,
      #FFFFFF 50%,
      #FFD700 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-shadow: none;
  position: relative;
  z-index: 2;
}

.metric-label {
  font-size: 0.75rem;
  color: #FFF;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  white-space: wrap;
  overflow: visible;
  position: relative;
  z-index: 2;
}

/* Definiciones Técnicas (Tooltips) */
.definition-tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 2px dotted var(--ng-teal);
  cursor: help;
  color: var(--ng-teal);
  font-weight: 600;
}

.definition-tooltip:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tooltip-content {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: var(--ng-navy);
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  max-width: 300px;
  white-space: normal;
}

.tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--ng-navy) transparent transparent transparent;
}

/* ROI y Performance Cards */
.roi-card {
  background: linear-gradient(135deg, var(--ng-gradient-roi));
  padding: 2rem;
  border-radius: 1rem;
  color: white;
  position: relative;
  overflow: hidden;
}

.roi-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(30px, -30px);
}

/* Banderas y elementos mexicanos */
.mexico-flag-accent {
  background: var(--ng-gradient-mexico);
  height: 4px;
  border-radius: 2px;
  margin: 1rem 0;
}

.peso-symbol {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  color: var(--ng-emerald);
}

/* Cards de Testimonios Mejoradas */
.testimonial-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 212, 170, 0.1);
  border-radius: 1.5rem;
  padding: 2rem;
  transition: all 0.3s ease;
  position: relative;
}

.testimonial-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(0, 212, 170, 0.15);
  border-color: rgba(0, 212, 170, 0.3);
}

.testimonial-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid var(--ng-teal);
  object-fit: cover;
}

/* Secciones con más color y menos blanco */
.section-colored {
  background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 50%, #CBD5E1 100%);
  position: relative;
}

.section-colored::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ng-gradient-3);
}

/* Animaciones mejoradas para elementos financieros */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.count-up {
  animation: countUp 0.8s ease forwards;
}

/* Iconos financieros */
.financial-icon {
  width: 3rem;
  height: 3rem;
  background: var(--ng-gradient-3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  box-shadow: 0 10px 25px rgba(0, 212, 170, 0.2);
}

.financial-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  color: white;
}

/* Responsive para videos */
.video-responsive {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  border-radius: 1rem;
  overflow: hidden;
}

.video-responsive video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* CRITICAL FIX: Force stat numbers to be visible */
div.stat-number,
.stat-number.text-ng-navy,
.card .stat-number {
  color: #0B1426 !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #0B1426 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* CRITICAL FIX: Hero section stat numbers should be white */
#hero .stat-number-heading,
.stat-number-heading {
  color: #ffffff !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Financial Tooltips */
.definition-tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--ng-teal);
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  margin-left: 8px;
  cursor: help;
  transition: all 0.3s ease;
  vertical-align: middle;
}

.definition-tooltip:hover {
  background: var(--ng-teal-dark);
  transform: scale(1.1);
}

.financial-tooltip {
  position: absolute;
  background: var(--ng-navy);
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  max-width: 320px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  opacity: 0;
  display: none;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.financial-tooltip::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 20px;
  width: 12px;
  height: 12px;
  background: var(--ng-navy);
  transform: rotate(45deg);
  border-radius: 2px;
}

/* Testimonial Card Advanced Styling */
.testimonial-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid transparent;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.testimonial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--ng-teal)/10 0%, var(--ng-blue)/10 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

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

.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  border-color: var(--ng-teal)/20;
}

.testimonial-card>* {
  position: relative;
  z-index: 1;
}

.testimonial-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--ng-teal)/20;
  transition: border-color 0.3s ease;
}

.testimonial-card:hover .testimonial-avatar {
  border-color: var(--ng-teal);
}

/* Mexican Flag Gradient - eliminada duplicación */

/* Video Portfolio Styling */
.video-portfolio-card {
  transition: all 0.5s ease;
  transform-origin: center;
}

.video-portfolio-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.video-portfolio-card video {
  filter: brightness(0.9) contrast(1.1);
}

.video-portfolio-card:hover video {
  filter: brightness(1) contrast(1.2);
}

/* Additional responsive video styles */
@media (max-width: 768px) {
  .video-portfolio-card video {
    height: 200px;
  }

  .financial-metric {
    padding: 1.5rem 1rem;
    min-height: 120px;
  }

  .metric-value {
    font-size: clamp(2rem, 6vw, 2.8rem) !important;
    margin-bottom: 0.5rem;
  }

  .metric-label {
    font-size: 0.85rem;
    letter-spacing: 0.06em;
  }
}

@media (max-width: 480px) {
  .financial-metric {
    padding: 1.25rem 0.75rem;
  }

  .metric-value {
    font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
  }

  .metric-label {
    font-size: 0.8rem;
    white-space: normal;
    line-height: 1.3;
  }
}