/**
 * Home Page Styles - VERSIÓN COMPACTA
 */

/* ===========================
   VARIABLES Y BASE
   =========================== */
:root {
  --purple-dark: #3c2369;
  --purple-medium: #5a3d8a;
  --purple-light: #7b5ba3;
  --accent-blue: #4A90E2;
  --accent-green: #7ED321;
  --accent-orange: #F5A623;
  --accent-red: #D0021B;
  --text-dark: #1a1a1a;
  --text-muted: #666666;
  --text-light: #ffffff;
  --bg-light: #f8f9fa;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
  --carousel-duration: 6s;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
  color: var(--text-dark);
}

/* ===========================
   CONTAINER
   =========================== */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2.5rem;
  width: 100%;
}

/* ===========================
   HERO CAROUSEL SECTION
   =========================== */
.hero-carousel {
  position: relative;
  width: 100%;
  height: 85vh;
  min-height: 600px;
  overflow: hidden;
}

.carousel-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
  z-index: 1;
}

.carousel-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.slide-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: kenBurns 20s ease-in-out infinite alternate;
}

@keyframes kenBurns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

/* Imágenes de fondo para cada slide */
.slide-bg-main {
  background-image: linear-gradient(135deg, rgba(60, 35, 105, 0.8), rgba(90, 61, 138, 0.7)), 
                    url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=1920&q=80');
}

.slide-bg-factoring {
  background-image: linear-gradient(135deg, rgba(60, 35, 105, 0.75), rgba(74, 144, 226, 0.7)), 
                    url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=1920&q=80');
}

.slide-bg-confirming {
  background-image: linear-gradient(135deg, rgba(60, 35, 105, 0.75), rgba(126, 211, 33, 0.6)), 
                    url('https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=1920&q=80');
}

.slide-bg-technology {
  background-image: linear-gradient(135deg, rgba(60, 35, 105, 0.8), rgba(91, 75, 232, 0.7)), 
                    url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1920&q=80');
}

.slide-bg-prontopago {
  background-image: linear-gradient(135deg, rgba(60, 35, 105, 0.75), rgba(245, 166, 35, 0.6)), 
                    url('https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?w=1920&q=80');
}

.slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 100%);
  z-index: 1;
}

.slide-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 4rem;
  color: var(--text-light);
}

.slide-tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  padding: 0.6rem 1.5rem;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.slide-title {
  font-size: 4rem;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  max-width: 900px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  animation: fadeInUp 0.8s ease-out 0.4s both;
  color: #ffffff;
}

.slide-description {
  font-size: 1.4rem;
  line-height: 1.6;
  margin-bottom: 2.5rem;
  max-width: 700px;
  opacity: 0.95;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

.slide-cta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  animation: fadeInUp 0.8s ease-out 0.8s both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn-primary, .btn-secondary {
  padding: 1.1rem 2.5rem;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 700;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--text-light);
  color: var(--purple-dark);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.btn-secondary {
  background: transparent;
  color: var(--text-light);
  border: 2px solid var(--text-light);
  backdrop-filter: blur(10px);
}

.btn-secondary:hover {
  background: var(--text-light);
  color: var(--purple-dark);
}

/* Carousel Navigation Arrows */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-arrow:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
  left: 2rem;
}

.carousel-next {
  right: 2rem;
}

/* Carousel Dots Navigation */
.carousel-dots {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  padding: 1rem 1.5rem;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.carousel-dot:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: scale(1.2);
}

.carousel-dot.active {
  background: white;
  width: 40px;
  border-radius: 10px;
  border-color: rgba(255, 255, 255, 0.5);
}

/* Progress Bar */
.carousel-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  z-index: 10;
}

.carousel-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--purple-light), var(--accent-blue));
  width: 0%;
  animation: progressBar var(--carousel-duration) linear infinite;
}

@keyframes progressBar {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

/* ===========================
   SECTION HEADERS
   =========================== */
.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2rem;
}

.section-title {
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--purple-dark);
  margin-bottom: 1rem;
  letter-spacing: -1px;
  line-height: 1.2;
}

.section-subtitle {
  font-size: 1.2rem;
  color: var(--text-muted);
  margin-top: 0.75rem;
  font-weight: 400;
  line-height: 1.6;
}

/* ===========================
   ABOUT IFACTORING SECTION
   =========================== */
.about-intro-section {
  padding: 5rem 0;
  background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
}

.about-intro-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin-top: 3.5rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2.5rem;
}

.about-card {
  background: white;
  border-radius: 1.5rem;
  padding: 2.5rem;
  box-shadow: 0 8px 35px rgba(60, 35, 105, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid rgba(60, 35, 105, 0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.about-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 55px rgba(60, 35, 105, 0.18);
  border-color: var(--purple-light);
}

.about-card-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.country-flag {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.colombia-flag {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600"><rect fill="%23FCD116" width="900" height="300"/><rect fill="%2302319C" y="300" width="900" height="150"/><rect fill="%23C8102E" y="450" width="900" height="150"/></svg>');
}

.usa-flag {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7410 3900"><rect width="7410" height="3900" fill="%23b22234"/><path d="M0,450H7410m0,600H0m0,600H7410m0,600H0m0,600H7410m0,600H0" stroke="%23fff" stroke-width="300"/><rect width="2964" height="2100" fill="%233c3b6e"/></svg>');
}

.about-card-header h3 {
  font-size: 1.5rem;
  color: var(--purple-dark);
  flex: 1;
  min-width: 200px;
  font-weight: 700;
  line-height: 1.3;
}

.location-badge {
  background: linear-gradient(135deg, var(--purple-light), var(--purple-medium));
  color: white;
  padding: 0.5rem 1.25rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(60, 35, 105, 0.25);
}

.about-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.about-card-content p {
  line-height: 1.8;
  color: var(--text-muted);
  margin-bottom: 2rem;
  font-size: 1.05rem;
  flex: 1;
}

.about-card-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 2px solid rgba(60, 35, 105, 0.1);
  margin-top: auto;
}

.stat-item {
  text-align: center;
  padding: 1.25rem;
  background: var(--bg-light);
  border-radius: 0.875rem;
  transition: all 0.3s ease;
}

.stat-item:hover {
  background: rgba(60, 35, 105, 0.05);
  transform: scale(1.05);
}

.stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--purple-dark);
  margin-bottom: 0.5rem;
  line-height: 1;
}

.stat-label {
  display: block;
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* ===========================
   STATS SECTION
   =========================== */
.stats-section {
  padding: 5rem 0;
  background: linear-gradient(135deg, var(--purple-dark), var(--purple-medium));
  position: relative;
  overflow: hidden;
}

.stats-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

.stats-main-title {
  text-align: center;
  font-size: 2.75rem;
  color: var(--text-light);
  margin-bottom: 4rem;
  font-weight: 800;
  letter-spacing: -1px;
}

.stats-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
  margin-bottom: 3.5rem;
}

.stats-item {
  text-align: center;
  color: var(--text-light);
  padding: 2.5rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  backdrop-filter: blur(15px);
  border: 2px solid rgba(255, 255, 255, 0.15);
  transition: all 0.4s ease;
}

.stats-item:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, 0.3);
}

.stats-number {
  font-size: 4rem;
  font-weight: 900;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.6rem;
  margin: 1.5rem 0;
  line-height: 1;
}

.stats-currency {
  font-size: 2.5rem;
}

.stats-unit {
  font-size: 1.5rem;
  opacity: 0.95;
  font-weight: 700;
}

.stats-title {
  font-size: 1.15rem;
  font-weight: 400;
  opacity: 0.95;
  color: var(--text-light);
  line-height: 1.6;
}

.experience-badge {
  background: rgba(255, 255, 255, 0.18);
  color: var(--text-light);
  padding: 0.875rem 2.5rem;
  border-radius: 50px;
  font-size: 1.25rem;
  font-weight: 700;
  display: inline-block;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}

/* ===========================
   WHY CHOOSE US SECTION
   =========================== */
.why-choose-us-section {
  padding: 5rem 0;
  background: white;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 3.5rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2.5rem;
}

.benefit-card {
  background: white;
  border-radius: 1.5rem;
  padding: 2.25rem;
  box-shadow: 0 8px 30px rgba(60, 35, 105, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid rgba(60, 35, 105, 0.05);
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.benefit-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(60, 35, 105, 0.16);
  border-color: var(--purple-light);
}

.featured-card {
  grid-column: span 3;
  background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
  border: 2px solid var(--purple-light);
  padding: 3rem;
}

.featured-badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: linear-gradient(135deg, var(--purple-light), var(--purple-medium));
  color: white;
  padding: 0.6rem 1.25rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(60, 35, 105, 0.3);
}

.benefit-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 1.5rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s ease;
}

.benefit-card:hover .benefit-icon {
  transform: scale(1.1);
}

/* Iconos profesionales SVG con colores */
.tech-platform-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="grad1" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" style="stop-color:%234A90E2;stop-opacity:1"/><stop offset="100%25" style="stop-color:%235B4BE8;stop-opacity:1"/></linearGradient></defs><rect x="8" y="12" width="48" height="32" rx="2" fill="url(%23grad1)"/><rect x="8" y="44" width="48" height="4" rx="2" fill="url(%23grad1)" opacity="0.7"/><circle cx="32" cy="50" r="2" fill="white"/></svg>');
}

.immediate-finance-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="grad2" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" style="stop-color:%237ED321;stop-opacity:1"/><stop offset="100%25" style="stop-color:%2356C213;stop-opacity:1"/></linearGradient></defs><path d="M32 8l-4 8h8l-4 8 8-2-6 14h4l-6 12-2-12h-4l6-14-8 2 4-8h-8l4-8z" fill="url(%23grad2)"/><circle cx="32" cy="32" r="28" fill="none" stroke="url(%23grad2)" stroke-width="2" opacity="0.3"/></svg>');
}

.operational-support-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="grad3" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" style="stop-color:%23F5A623;stop-opacity:1"/><stop offset="100%25" style="stop-color:%23E8900C;stop-opacity:1"/></linearGradient></defs><path d="M32 12l-8 8h6v16h-6l8 8 8-8h-6V20h6z" fill="url(%23grad3)"/><rect x="16" y="48" width="32" height="4" rx="2" fill="url(%23grad3)"/><path d="M20 16l-4 4 4 4m24-8l4 4-4 4" stroke="url(%23grad3)" stroke-width="2" fill="none"/></svg>');
}

.tech-support-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="grad4" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" style="stop-color:%239B59B6;stop-opacity:1"/><stop offset="100%25" style="stop-color:%238E44AD;stop-opacity:1"/></linearGradient></defs><circle cx="32" cy="24" r="12" fill="url(%23grad4)"/><path d="M32 36c-8 0-16 4-16 8v4h32v-4c0-4-8-8-16-8z" fill="url(%23grad4)" opacity="0.8"/><path d="M22 26l4 4 8-8" stroke="white" stroke-width="2" fill="none"/></svg>');
}

.expert-team-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="grad5" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" style="stop-color:%23E74C3C;stop-opacity:1"/><stop offset="100%25" style="stop-color:%23C0392B;stop-opacity:1"/></linearGradient></defs><circle cx="24" cy="20" r="8" fill="url(%23grad5)"/><circle cx="40" cy="20" r="8" fill="url(%23grad5)" opacity="0.8"/><path d="M14 32c-2 0-4 2-4 4v8h20v-8c0-2-2-4-4-4h-12z" fill="url(%23grad5)"/><path d="M38 32c-2 0-4 2-4 4v8h20v-8c0-2-2-4-4-4h-12z" fill="url(%23grad5)" opacity="0.8"/></svg>');
}

.efficiency-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="grad6" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" style="stop-color:%2316A085;stop-opacity:1"/><stop offset="100%25" style="stop-color:%2327AE60;stop-opacity:1"/></linearGradient></defs><circle cx="32" cy="32" r="24" fill="none" stroke="url(%23grad6)" stroke-width="3"/><path d="M32 16v16l12 8" stroke="url(%23grad6)" stroke-width="3" stroke-linecap="round" fill="none"/><circle cx="32" cy="32" r="3" fill="url(%23grad6)"/></svg>');
}

.financial-operations-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="grad7" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" style="stop-color:%233498DB;stop-opacity:1"/><stop offset="100%25" style="stop-color:%232980B9;stop-opacity:1"/></linearGradient></defs><rect x="12" y="16" width="40" height="32" rx="2" fill="url(%23grad7)"/><rect x="16" y="22" width="32" height="4" rx="1" fill="white" opacity="0.9"/><rect x="16" y="30" width="32" height="4" rx="1" fill="white" opacity="0.7"/><rect x="16" y="38" width="20" height="4" rx="1" fill="white" opacity="0.5"/></svg>');
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-content h3 {
  font-size: 1.4rem;
  color: var(--purple-dark);
  margin-bottom: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.card-content p {
  color: var(--text-muted);
  line-height: 1.7;
  flex: 1;
  font-size: 1rem;
}

.featured-content {
  margin-top: 1.5rem;
}

.main-description {
  font-size: 1.15rem;
  line-height: 1.8;
  margin-bottom: 3rem;
  color: var(--text-muted);
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.process-step {
  display: flex;
  gap: 1.25rem;
  padding: 2rem;
  background: white;
  border-radius: 1.25rem;
  box-shadow: 0 5px 20px rgba(60, 35, 105, 0.1);
  position: relative;
  transition: all 0.3s ease;
  border: 2px solid rgba(60, 35, 105, 0.05);
}

.process-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 35px rgba(60, 35, 105, 0.16);
  border-color: var(--purple-light);
}

.step-number {
  position: absolute;
  top: -12px;
  left: -12px;
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--purple-light), var(--purple-medium));
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  box-shadow: 0 3px 12px rgba(60, 35, 105, 0.3);
}

.step-icon {
  width: 50px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* Step icons con gradientes profesionales */
.step-upload {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="upload" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" style="stop-color:%234A90E2"/><stop offset="100%25" style="stop-color:%235B4BE8"/></linearGradient></defs><path d="M32 12l-12 12h8v16h8V24h8z" fill="url(%23upload)"/><rect x="12" y="44" width="40" height="4" rx="2" fill="url(%23upload)" opacity="0.5"/></svg>');
}

.step-verify {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="verify" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" style="stop-color:%237ED321"/><stop offset="100%25" style="stop-color:%2356C213"/></linearGradient></defs><circle cx="32" cy="32" r="24" fill="url(%23verify)"/><path d="M20 32l8 8 16-16" stroke="white" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.step-funding {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="funding" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" style="stop-color:%23F5A623"/><stop offset="100%25" style="stop-color:%23E8900C"/></linearGradient></defs><circle cx="32" cy="32" r="24" fill="url(%23funding)"/><text x="32" y="42" font-size="28" fill="white" text-anchor="middle" font-weight="bold">$</text></svg>');
}

.step-monitor {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="monitor" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" style="stop-color:%239B59B6"/><stop offset="100%25" style="stop-color:%238E44AD"/></linearGradient></defs><rect x="12" y="16" width="40" height="28" rx="2" fill="url(%23monitor)"/><rect x="12" y="44" width="40" height="4" rx="2" fill="url(%23monitor)" opacity="0.5"/><path d="M20 28l4 4 8-8" stroke="white" stroke-width="2" fill="none"/></svg>');
}

.step-content h4 {
  margin-bottom: 0.6rem;
  font-size: 1.15rem;
  color: var(--purple-dark);
  font-weight: 700;
}

.step-content p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.btn-platform {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  background: linear-gradient(135deg, var(--purple-light), var(--purple-medium));
  color: white;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 5px 20px rgba(60, 35, 105, 0.25);
}

.btn-platform:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 35px rgba(60, 35, 105, 0.35);
}

.interactive-card {
  cursor: pointer;
}

.card-hover-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(60, 35, 105, 0.95), rgba(60, 35, 105, 0.9));
  padding: 1.5rem;
  transform: translateY(100%);
  transition: transform 0.4s ease;
}

.interactive-card:hover .card-hover-info {
  transform: translateY(0);
}

.info-highlight {
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.info-highlight::before {
  content: '';
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
}

/* Iconos profesionales para info-highlight */
.card-hover-info:nth-of-type(1) .info-highlight::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2l-4 8h8l-4 8 8-2-6 8 2-8h-4l6-8-8 2 4-8z"/></svg>');
}

/* ===========================
   SECTORS SECTION
   =========================== */
.sectors-section {
  padding: 5rem 0;
  background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
}

.sectors-grid-enhanced {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3.5rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2.5rem;
}

.sector-card-enhanced {
  background: white;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(60, 35, 105, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid rgba(60, 35, 105, 0.05);
  display: flex;
  flex-direction: column;
  position: relative;
}

.sector-card-enhanced:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(60, 35, 105, 0.18);
  border-color: var(--purple-light);
}

.sector-image-wrapper {
  height: 200px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.sector-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
  position: relative;
}

.sector-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.3) 100%);
}

.sector-card-enhanced:hover .sector-image {
  transform: scale(1.08);
}

.sector-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.7s ease;
  z-index: 1;
}

.sector-card-enhanced:hover .sector-shine {
  left: 150%;
}

.sector-content {
  padding: 1.5rem;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
}

.sector-icon {
  position: absolute;
  top: -25px;
  right: 1.5rem;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--purple-light), var(--purple-medium));
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(60, 35, 105, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.sector-icon::before {
  content: '';
  width: 26px;
  height: 26px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0) invert(1);
}

/* Iconos de sectores mejorados */
.sector-oil-icon::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C9.79 2 8 3.79 8 6c0 1.5.82 2.8 2 3.5V11c-2.21 0-4 1.79-4 4v7h12v-7c0-2.21-1.79-4-4-4V9.5c1.18-.7 2-2 2-3.5 0-2.21-1.79-4-4-4z"/></svg>');
}

.sector-paper-icon::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/></svg>');
}

.sector-textile-icon::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M16.24 11.51l1.57-1.57-3.75-3.75-1.57 1.57-4.14-4.13c-.78-.78-2.05-.78-2.83 0l-1.9 1.9c-.78.78-.78 2.05 0 2.83l4.13 4.13L3 17.25V21h3.75l4.76-4.76 4.13 4.13c.95.95 2.23.6 2.83 0l1.9-1.9c.78-.78.78-2.05 0-2.83l-4.13-4.13z"/></svg>');
}

.sector-telecom-icon::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
}

.sector-retail-icon::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>');
}

.sector-tech-icon::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"/></svg>');
}

.sector-transport-icon::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/></svg>');
}

.sector-environment-icon::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75C7 8 17 8 17 8z"/></svg>');
}

.sector-content h3 {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  margin-top: 0.5rem;
  color: var(--purple-dark);
  font-weight: 700;
  line-height: 1.3;
}

.sector-content p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
  flex: 1;
}

/* Imágenes de fondo desde URLs externas */
.sector-hidrocarburos {
  background-image: url('https://images.unsplash.com/photo-1516937941344-00b4e0337589?w=800&q=80');
}


.sector-papelero {
  background-image: url('https://images.unsplash.com/photo-1587293852726-70cdb56c2866?w=800&q=80');
}

.sector-textil {
  background-image: url('https://images.unsplash.com/photo-1675176785803-bffbbb0cd2f4?w=800&q=80');
}

.sector-telecomunicaciones {
  background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=800&q=80');
}

.sector-retail {
  background-image: url('https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=800&q=80');
}

.sector-tecnologia {
  background-image: url('https://images.unsplash.com/photo-1518770660439-4636190af475?w=800&q=80');
}

.sector-transporte {
  background-image: url('https://images.unsplash.com/photo-1494412574643-ff11b0a5c1c3?w=800&q=80');
}

.sector-ambiente {
  background-image: url('https://images.unsplash.com/photo-1473341304170-971dccb5ac1e?w=800&q=80');
}

/* ===========================
   PORTFOLIO SECTION
   =========================== */
.portfolio-section {
  padding: 5rem 0;
  background: white;
}

.portfolio-description {
  max-width: 900px;
  margin: 2rem auto 0;
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--text-muted);
  text-align: center;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 3.5rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2.5rem;
}

.product-card {
  background: white;
  border-radius: 1.5rem;
  padding: 2.25rem;
  box-shadow: 0 8px 30px rgba(60, 35, 105, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid rgba(60, 35, 105, 0.05);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(60, 35, 105, 0.18);
  border-color: var(--purple-light);
}

.product-card.featured {
  border: 2px solid var(--purple-light);
  background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
}

.featured-product-badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: linear-gradient(135deg, var(--purple-light), var(--purple-medium));
  color: white;
  padding: 0.6rem 1.25rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(60, 35, 105, 0.3);
}

.product-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 1.5rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s ease;
}

.product-card:hover .product-icon {
  transform: scale(1.1) rotate(5deg);
}

/* Product icons profesionales con gradientes */
.factoring-product-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="fact" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" style="stop-color:%234A90E2"/><stop offset="100%25" style="stop-color:%235B4BE8"/></linearGradient></defs><rect x="12" y="16" width="40" height="32" rx="2" fill="url(%23fact)"/><rect x="16" y="22" width="32" height="3" rx="1" fill="white"/><rect x="16" y="30" width="32" height="3" rx="1" fill="white" opacity="0.7"/><rect x="16" y="38" width="20" height="3" rx="1" fill="white" opacity="0.5"/></svg>');
}

.confirming-product-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="conf" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" style="stop-color:%237ED321"/><stop offset="100%25" style="stop-color:%2356C213"/></linearGradient></defs><circle cx="32" cy="32" r="24" fill="url(%23conf)"/><path d="M20 32l8 8 16-16" stroke="white" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.prontopago-product-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="pronto" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" style="stop-color:%23F5A623"/><stop offset="100%25" style="stop-color:%23E8900C"/></linearGradient></defs><path d="M32 8l-4 8h8l-4 8 8-2-6 14h4l-6 12-2-12h-4l6-14-8 2 4-8h-8l4-8z" fill="url(%23pronto)"/></svg>');
}

.triangulacion-product-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="tri" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" style="stop-color:%239B59B6"/><stop offset="100%25" style="stop-color:%238E44AD"/></linearGradient></defs><path d="M32 8l24 40H8z" fill="url(%23tri)"/><circle cx="20" cy="40" r="4" fill="white"/><circle cx="32" cy="16" r="4" fill="white"/><circle cx="44" cy="40" r="4" fill="white"/></svg>');
}

.anticipos-product-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="ant" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" style="stop-color:%2316A085"/><stop offset="100%25" style="stop-color:%2327AE60"/></linearGradient></defs><circle cx="32" cy="32" r="24" fill="none" stroke="url(%23ant)" stroke-width="3"/><path d="M32 16v16l12 8" stroke="url(%23ant)" stroke-width="3" fill="none" stroke-linecap="round"/></svg>');
}

.product-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-content h3 {
  font-size: 1.6rem;
  margin-bottom: 1.25rem;
  color: var(--purple-dark);
  font-weight: 700;
  line-height: 1.2;
}

.product-content p {
  line-height: 1.7;
  margin-bottom: 1.75rem;
  color: var(--text-muted);
  flex: 1;
  font-size: 1rem;
}

.product-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-bottom: 2rem;
}

.benefit-tag {
  background: rgba(60, 35, 105, 0.08);
  color: var(--purple-dark);
  padding: 0.6rem 1.25rem;
  border-radius: 20px;
  font-size: 0.95rem;
  font-weight: 700;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.benefit-tag:hover {
  background: rgba(60, 35, 105, 0.15);
  transform: scale(1.05);
}

.btn-product {
  width: 100%;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--purple-light), var(--purple-medium));
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 5px 20px rgba(60, 35, 105, 0.2);
}

.btn-product:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 35px rgba(60, 35, 105, 0.35);
}

/* ===========================
   RESPONSIVE DESIGN
   =========================== */
@media (max-width: 1400px) {

  /* ===========================
   RESPONSIVE CAROUSEL
   =========================== */
@media (max-width: 1024px) {
  .slide-title {
    font-size: 3rem;
  }
  
  .slide-description {
    font-size: 1.2rem;
  }
  
  .slide-content {
    padding: 0 3rem;
  }
  
  .carousel-arrow {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 768px) {
  .hero-carousel {
    height: 70vh;
    min-height: 500px;
  }
  
  .slide-title {
    font-size: 2.2rem;
  }
  
  .slide-description {
    font-size: 1.1rem;
    max-width: 100%;
  }
  
  .slide-content {
    padding: 0 2rem;
  }
  
  .slide-cta {
    flex-direction: column;
    width: 100%;
  }
  
  .btn-primary, .btn-secondary {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  
  .carousel-arrow {
    width: 45px;
    height: 45px;
  }
  
  .carousel-prev {
    left: 1rem;
  }
  
  .carousel-next {
    right: 1rem;
  }
  
  .carousel-dots {
    bottom: 2rem;
    gap: 0.6rem;
    padding: 0.8rem 1.2rem;
  }
  
  .carousel-dot {
    width: 10px;
    height: 10px;
  }
  
  .carousel-dot.active {
    width: 30px;
  }
}

@media (max-width: 480px) {
  .slide-title {
    font-size: 1.8rem;
  }
  
  .slide-description {
    font-size: 1rem;
  }
  
  .slide-tag {
    font-size: 0.85rem;
    padding: 0.5rem 1.2rem;
  }
  
  .btn-primary, .btn-secondary {
    padding: 0.9rem 2rem;
    font-size: 1rem;
  }
}
  .container, .stats-container {
    padding: 0 2rem;
  }
  
  .sectors-grid-enhanced {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1200px) {
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .featured-card {
    grid-column: span 2;
  }
  
  .process-steps {
    grid-template-columns: 1fr;
  }
  
  .sectors-grid-enhanced {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .hero h1 {
    font-size: 2.5rem;
  }
  
  .section-title {
    font-size: 2.25rem;
  }
  
  .sectors-grid-enhanced {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .container, .stats-container,
  .about-intro-grid, .benefits-grid,
  .sectors-grid-enhanced, .products-grid {
    padding: 0 1.5rem;
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  
  .hero {
    padding: 5rem 1.5rem 3.5rem;
  }
  
  .hero h1 {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 1.15rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .stats-items {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  
  .featured-card {
    grid-column: span 1;
  }
  
  .about-intro-section,
  .why-choose-us-section,
  .sectors-section,
  .portfolio-section,
  .stats-section {
    padding: 3.5rem 0;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.65rem;
  }
  
  .section-title {
    font-size: 1.75rem;
  }
  
  .about-card,
  .benefit-card,
  .product-card,
  .sector-card-enhanced {
    padding: 1.75rem;
  }
  
  .sector-content {
    padding: 1.25rem;
  }
  
  .sector-image-wrapper {
    height: 180px;
  }
}