/* Variables CSS Ultra Modernas */
		:root {
			--primary-color: #0891b2;
			--primary-dark: #0c4a6e;
			--primary-light: #0ea5e9;
			--accent-color: #25d366;
			--text-primary: #111827;
			--text-secondary: #4b5563;
			--text-muted: #6b7280;
			--bg-primary: #ffffff;
			--bg-secondary: #f8fafc;
			--bg-accent: #f1f5f9;
			--border-light: #e2e8f0;
			--border-medium: #cbd5e1;
			--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
			--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
			--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
			--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
			--radius-sm: 0.375rem;
			--radius-md: 0.5rem;
			--radius-lg: 0.75rem;
			--radius-xl: 1rem;
			--transition-fast: 0.15s ease;
			--transition-medium: 0.3s ease;
			--transition-slow: 0.5s ease;
		}

		/* Reset y Base Styles Ultra Modernos */
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
			font-weight: 400;
			line-height: 1.6;
			color: var(--text-primary);
			background-color: var(--bg-primary);
			font-feature-settings: "cv02", "cv03", "cv04", "cv11";
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			scroll-behavior: smooth;
		}

		/* Tipografía Ultra Moderna */
		.display-1 {
			font-size: clamp(3rem, 8vw, 6rem);
			font-weight: 800;
			line-height: 1.1;
			letter-spacing: -0.02em;
			color: var(--text-primary);
		}

		.display-2 {
			font-size: clamp(2.5rem, 6vw, 4.5rem);
			font-weight: 700;
			line-height: 1.15;
			letter-spacing: -0.015em;
			color: var(--text-primary);
		}

		.display-3 {
			font-size: clamp(2rem, 5vw, 3.5rem);
			font-weight: 600;
			line-height: 1.2;
			letter-spacing: -0.01em;
			color: var(--text-primary);
		}

		h1, h2, h3, h4, h5, h6 {
			font-weight: 600;
			color: var(--text-primary);
			margin-bottom: 0.5em;
		}

		p {
			color: var(--text-secondary);
			margin-bottom: 1rem;
			font-size: 1.1rem;
		}

		.lead {
			font-size: 1.25rem;
			font-weight: 400;
			color: var(--text-secondary);
			line-height: 1.7;
		}

		/* Contenedores y Layout */
		.container {
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 1.5rem;
		}

		.container-fluid {
			padding: 0 1.5rem;
		}

		/* Grid System Ultra Moderno */
		.row {
			display: flex;
			flex-wrap: wrap;
			margin: 0 -0.75rem;
		}

		.row > [class*="col-"] {
			display: flex;
		}

		.col {
			flex: 1;
			padding: 0 0.75rem;
		}

		.col-6 { width: 50%; padding: 0 0.75rem; }
		.col-4 { width: 33.333333%; padding: 0 0.75rem; }
		.col-3 { width: 25%; padding: 0 0.75rem; }
		.col-lg-6 { width: 50%; padding: 0 0.75rem; }
		.col-lg-4 { width: 33.333333%; padding: 0 0.75rem; }
		.col-lg-3 { width: 25%; padding: 0 0.75rem; }

		@media (max-width: 992px) {
			.col-lg-6, .col-lg-4, .col-lg-3 { width: 100%; margin-bottom: 2rem; }
		}

		/* Header Ultra Moderno */
		.header {
			background: rgba(255, 255, 255, 0.95);
			backdrop-filter: blur(20px);
			border-bottom: 1px solid var(--border-light);
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 1000;
			transition: var(--transition-medium);
		}

		.header-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 1rem 0;
		}

		.logo {
			display: flex;
			align-items: center;
			gap: 0.75rem;
			text-decoration: none;
			font-size: 1.5rem;
			font-weight: 800;
			letter-spacing: -0.01em;
			transition: var(--transition-medium);
		}

		.logo:hover {
			transform: scale(1.05);
		}

		.logo-icon {
			width: 40px;
			height: 40px;
			background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 1.2rem;
			box-shadow: var(--shadow-md);
			position: relative;
			overflow: hidden;
		}

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

		.logo:hover .logo-icon::before {
			left: 100%;
		}

		.logo-text {
			display: flex;
			flex-direction: column;
			line-height: 1;
		}

		.logo-main {
			background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			font-size: 1.4rem;
			font-weight: 800;
		}

		.logo-sub {
			font-size: 0.7rem;
			color: var(--text-muted);
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 1px;
			margin-top: -2px;
		}

		.nav {
			display: flex;
			list-style: none;
			gap: 2rem;
		}

		.nav-link {
			color: var(--text-primary);
			text-decoration: none;
			font-weight: 500;
			font-size: 0.95rem;
			transition: var(--transition-fast);
			position: relative;
		}

		.nav-link:hover {
			color: var(--primary-color);
		}

		.nav-link::after {
			content: '';
			position: absolute;
			bottom: -0.5rem;
			left: 0;
			width: 0;
			height: 2px;
			background: var(--primary-color);
			transition: var(--transition-medium);
		}

		.nav-link:hover::after {
			width: 100%;
		}

		/* Botones Ultra Modernos */
		.btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 0.75rem 1.5rem;
			border: none;
			border-radius: var(--radius-lg);
			font-weight: 600;
			font-size: 0.95rem;
			text-decoration: none;
			cursor: pointer;
			transition: var(--transition-medium);
			position: relative;
			overflow: hidden;
		}

		.btn-primary {
			background: var(--primary-color);
			color: white;
			box-shadow: var(--shadow-md);
		}

		.btn-primary:hover {
			background: var(--primary-dark);
			transform: translateY(-2px);
			box-shadow: var(--shadow-lg);
		}

		.btn-whatsapp {
			background: var(--accent-color);
			color: white;
			box-shadow: var(--shadow-md);
		}

		.btn-whatsapp:hover {
			background: #1da851;
			transform: translateY(-2px);
			box-shadow: var(--shadow-lg);
		}

		.btn-outline {
			background: transparent;
			color: var(--text-primary);
			border: 2px solid var(--border-medium);
		}

		.btn-outline:hover {
			background: var(--bg-accent);
			border-color: var(--primary-color);
			color: var(--primary-color);
		}

		/* Secciones */
		.section {
			padding: 6rem 0;
		}

		.section-hero {
			padding: 10rem 0 4rem;
			background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
			position: relative;
			overflow: visible;
		}

		.section-hero::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230891b2' fill-opacity='0.02'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
			opacity: 0.3;
		}

		/* Carrusel Hero - Desktop */
		.hero-carousel {
			position: relative;
			min-height: 350px;
			margin-bottom: 1rem;
			overflow: hidden;
			padding: 2rem 0;
		}

		.hero-slide {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			min-height: 100%;
			opacity: 0;
			visibility: hidden;
			transform: translateX(100%);
			transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out, visibility 0s linear 0.7s;
			text-align: center;
			z-index: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 2rem 1rem;
			pointer-events: none;
		}

		.hero-slide.active {
			opacity: 1;
			visibility: visible;
			transform: translateX(0);
			z-index: 2;
			transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out, visibility 0s linear 0s;
			pointer-events: auto;
		}

		.hero-slide.exit-left {
			opacity: 0;
			visibility: visible;
			transform: translateX(-100%);
			z-index: 1;
			transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out, visibility 0s linear 0.7s;
			pointer-events: none;
		}

		/* Carrusel de Textos - Solo Zoom (para páginas específicas) */
		.text-carousel-zoom-only .text-slide {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			min-height: 100%;
			opacity: 0;
			visibility: hidden;
			transform: none; /* Sin transformación horizontal */
			transition: opacity 0.7s ease-in-out, visibility 0s linear 0.7s;
			text-align: center;
			z-index: 1;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			padding: 4rem 3rem 5rem;
			box-sizing: border-box;
			pointer-events: none;
		}
		
		/* Espacio adicional para los párrafos en los slides */
		.text-carousel-zoom-only .text-slide .display-3 {
			margin-bottom: 4rem;
		}

		.text-carousel-zoom-only .text-slide.active {
			opacity: 1;
			visibility: visible;
			transform: none; /* Sin transformación horizontal */
			z-index: 2;
			transition: opacity 0.7s ease-in-out, visibility 0s linear 0s;
			pointer-events: auto;
		}

		.text-carousel-zoom-only .text-slide.exit-left {
			opacity: 0;
			visibility: hidden;
			transform: none; /* Sin transformación horizontal */
			z-index: 1;
			transition: opacity 0.7s ease-in-out, visibility 0s linear 0.7s;
			pointer-events: none;
		}

		/* Indicadores del carrusel de textos */
		.text-carousel-indicator {
			display: flex;
			justify-content: center;
			gap: 0.5rem;
			margin-top: 2rem;
		}

		.text-carousel-indicator .indicator-dot {
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background: rgba(8, 145, 178, 0.3);
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.text-carousel-indicator .indicator-dot.active {
			background: var(--primary-color);
			transform: scale(1.2);
		}

		/* Header Ultra Moderno */
		.header {
			background: rgba(255, 255, 255, 0.95);
			backdrop-filter: blur(20px);
			border-bottom: 1px solid var(--border-light);
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 1000;
			transition: var(--transition-medium);
		}

		.header-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 1rem 0;
		}

		.logo {
			display: flex;
			align-items: center;
			gap: 0.75rem;
			text-decoration: none;
			font-size: 1.5rem;
			font-weight: 800;
			letter-spacing: -0.01em;
			transition: var(--transition-medium);
		}

		.logo:hover {
			transform: scale(1.05);
		}

		.logo-icon {
			width: 40px;
			height: 40px;
			background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 1.2rem;
			box-shadow: var(--shadow-md);
			position: relative;
			overflow: hidden;
		}

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

		.logo:hover .logo-icon::before {
			left: 100%;
		}

		.logo-text {
			display: flex;
			flex-direction: column;
			line-height: 1;
		}

		.logo-main {
			background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			font-size: 1.4rem;
			font-weight: 800;
		}

		.logo-sub {
			font-size: 0.7rem;
			color: var(--text-muted);
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 1px;
			margin-top: -2px;
		}

		.nav {
			display: flex;
			list-style: none;
			gap: 2rem;
		}

		.nav-link {
			color: var(--text-primary);
			text-decoration: none;
			font-weight: 500;
			font-size: 0.95rem;
			transition: var(--transition-fast);
			position: relative;
		}

		.nav-link:hover {
			color: var(--primary-color);
		}

		.nav-link::after {
			content: '';
			position: absolute;
			bottom: -0.5rem;
			left: 0;
			width: 0;
			height: 2px;
			background: var(--primary-color);
			transition: var(--transition-medium);
		}

		.nav-link:hover::after {
			width: 100%;
		}

		/* Botones Ultra Modernos */
		.btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 0.75rem 1.5rem;
			border: none;
			border-radius: var(--radius-lg);
			font-weight: 600;
			font-size: 0.95rem;
			text-decoration: none;
			cursor: pointer;
			transition: var(--transition-medium);
			position: relative;
			overflow: hidden;
		}

		.btn-primary {
			background: var(--primary-color);
			color: white;
			box-shadow: var(--shadow-md);
		}

		.btn-primary:hover {
			background: var(--primary-dark);
			transform: translateY(-2px);
			box-shadow: var(--shadow-lg);
		}

		.btn-whatsapp {
			background: var(--accent-color);
			color: white;
			box-shadow: var(--shadow-md);
		}

		.btn-whatsapp:hover {
			background: #1da851;
			transform: translateY(-2px);
			box-shadow: var(--shadow-lg);
		}

		.btn-outline {
			background: transparent;
			color: var(--text-primary);
			border: 2px solid var(--border-medium);
		}

		.btn-outline:hover {
			background: var(--bg-accent);
			border-color: var(--primary-color);
			color: var(--primary-color);
		}

		/* Secciones */
		.section {
			padding: 6rem 0;
		}

		.section-hero {
			padding: 10rem 0 4rem;
			background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
			position: relative;
			overflow: visible;
		}

		.section-hero::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230891b2' fill-opacity='0.02'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
			opacity: 0.3;
		}

		/* Carrusel Hero - Desktop */
		.hero-carousel {
			position: relative;
			min-height: 350px;
			margin-bottom: 1rem;
			overflow: hidden;
			padding: 2rem 0;
		}

		.hero-slide {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			min-height: 100%;
			opacity: 0;
			visibility: hidden;
			transform: translateX(100%);
			transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out, visibility 0s linear 0.7s;
			text-align: center;
			z-index: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 2rem 1rem;
			pointer-events: none;
		}

		.hero-slide.active {
			opacity: 1;
			visibility: visible;
			transform: translateX(0);
			z-index: 2;
			transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out, visibility 0s linear 0s;
			pointer-events: auto;
		}

		.hero-slide.exit-left {
			opacity: 0;
			visibility: visible;
			transform: translateX(-100%);
			z-index: 1;
			transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out, visibility 0s linear 0.7s;
			pointer-events: none;
		}

		/* Cards Ultra Modernas */
		.card {
			background: var(--bg-primary);
			border-radius: var(--radius-xl);
			box-shadow: var(--shadow-sm);
			border: 1px solid var(--border-light);
			padding: 2rem;
			transition: var(--transition-medium);
			position: relative;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			height: 100%;
		}

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

		.card::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 4px;
			background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
		}

		/* Asegurar que el contenido de las tarjetas se distribuya correctamente */
		.card > *:last-child {
			margin-top: auto;
		}

		/* Iconos Modernos */
		.icon {
			font-size: 3rem;
			color: var(--accent-color);
			margin-bottom: 1.5rem;
		}

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

		@keyframes zoomInFromCenter {
			from {
				opacity: 0;
				transform: scale(0.8);
			}
			to {
				opacity: 1;
				transform: scale(1);
			}
		}

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

		.animate-fade-in-up {
			animation: fadeInUp 0.8s ease-out forwards;
		}

		.animate-zoom-in-center {
			animation: zoomInFromCenter 1.2s ease-out;
		}

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

		/* Utilidades de Espaciado */
		.mb-1 { margin-bottom: 0.25rem; }
		.mb-2 { margin-bottom: 0.5rem; }
		.mb-3 { margin-bottom: 1rem; }
		.mb-4 { margin-bottom: 1.5rem; }
		.mb-5 { margin-bottom: 2rem; }
		.mb-6 { margin-bottom: 3rem; }

		.mt-1 { margin-top: 0.25rem; }
		.mt-2 { margin-top: 0.5rem; }
		.mt-3 { margin-top: 1rem; }
		.mt-4 { margin-top: 1.5rem; }
		.mt-5 { margin-top: 2rem; }
		.mt-6 { margin-top: 3rem; }

		.pt-5 { padding-top: 2rem; }
		.pt-6 { padding-top: 3rem; }
		.pb-5 { padding-bottom: 2rem; }
		.pb-6 { padding-bottom: 3rem; }

		/* Utilidades de Texto */
		.text-center { text-align: center; }
		.text-left { text-align: left; }
		.text-right { text-align: right; }

		.font-weight-300 { font-weight: 300; }
		.font-weight-400 { font-weight: 400; }
		.font-weight-500 { font-weight: 500; }
		.font-weight-600 { font-weight: 600; }
		.font-weight-700 { font-weight: 700; }
		.font-weight-800 { font-weight: 800; }

		/* Responsive Design Ultra Moderno */
		@media (max-width: 768px) {
			.nav {
				display: none;
			}
			
			.header-content {
				padding: 0.75rem 0;
				flex-direction: row;
				gap: 1rem;
				align-items: center;
				justify-content: flex-start;
			}

			.logo {
				order: 1;
				justify-content: flex-start;
				align-self: flex-start;
			}

			.header-content > div:last-child {
				display: none !important;
			}
			
			.section {
				padding: 4rem 0;
			}
			
			.section-hero {
				padding: 2rem 0 2rem;
				background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
			}

			.hero-slide h1 {
				font-size: 1.8rem !important;
				line-height: 1.2 !important;
				margin-bottom: 1rem !important;
			}

			.hero-slide p {
				font-size: 1.3rem !important;
				line-height: 1.3 !important;
				margin-bottom: 2rem !important;
			}

			.lead {
				font-size: 1rem !important;
				padding: 0 1rem;
			}
			
			.btn {
				margin-bottom: 1rem;
				padding: 0.875rem 1.5rem;
				font-size: 1rem;
			}
			
			.card {
				padding: 1.5rem;
			}

			.container {
				padding: 0 1rem;
			}

			/* Mejorar alineación de iconos en móvil */
			.col-6 {
				display: flex;
				justify-content: center;
			}

			.col-6 > div {
				width: 100%;
				max-width: 200px;
			}
		}

		/* Estados de hover mejorados */
		.hover-lift {
			transition: var(--transition-medium);
		}

		.hover-lift:hover {
			transform: translateY(-8px);
		}

		/* Efectos de glassmorphism */
		.glass {
			background: rgba(255, 255, 255, 0.1);
			backdrop-filter: blur(10px);
			border: 1px solid rgba(255, 255, 255, 0.2);
		}

		/* Gradientes modernos */
		.gradient-text {
			background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}

		/* Footer moderno */
		.footer {
			background: var(--bg-secondary);
			border-top: 1px solid var(--border-light);
			padding: 3rem 0 2rem;
		}

		.footer-content {
			text-align: center;
			color: var(--text-muted);
		}

		/* Estilos específicos para Contact Form 7 - Centrado perfecto */
		.wpcf7-form {
			display: flex !important;
			flex-direction: column !important;
			gap: 1.5rem !important;
			width: 100% !important;
			margin: 0 auto !important;
			text-align: center !important;
		}

		.wpcf7-form p {
			margin-bottom: 0 !important;
			text-align: center !important;
			width: 100% !important;
		}

		.wpcf7-form-control-wrap {
			width: 100% !important;
			display: block !important;
			margin: 0 auto !important;
		}

		.wpcf7-text, .wpcf7-email, .wpcf7-textarea {
			width: 100% !important;
			max-width: 400px !important;
			margin: 0 auto !important;
			padding: 12px 16px !important;
			border-radius: 8px !important;
			border: 2px solid var(--border-light) !important;
			font-size: 1rem !important;
			box-sizing: border-box !important;
			display: block !important;
			transition: border-color 0.3s ease !important;
		}

		.wpcf7-text:focus, .wpcf7-email:focus, .wpcf7-textarea:focus {
			border-color: var(--primary-color) !important;
			outline: none !important;
		}

		.wpcf7-submit {
			background: var(--primary-color) !important;
			color: white !important;
			border: none !important;
			cursor: pointer !important;
			font-size: 1.1rem !important;
			font-weight: 600 !important;
			padding: 12px 32px !important;
			border-radius: 8px !important;
			transition: all 0.3s ease !important;
			margin: 1rem auto 0 auto !important;
			display: block !important;
			max-width: 200px !important;
		}

		.wpcf7-submit:hover {
			background: var(--primary-dark) !important;
			transform: translateY(-2px) !important;
		}

		.wpcf7-response-output {
			margin-top: 1rem !important;
			padding: 1rem !important;
			border-radius: 8px !important;
			text-align: center !important;
		}

		.wpcf7-validation-errors {
			background: #fee !important;
			border: 1px solid #f66 !important;
			color: #c33 !important;
		}

		.wpcf7-mail-sent-ok {
			background: #efe !important;
			border: 1px solid #6c6 !important;
			color: #363 !important;
		}

		/* Centrado adicional para la sección de contacto */
		#contacto .row {
			display: flex !important;
			justify-content: center !important;
			align-items: center !important;
		}
		
		#contacto .card {
			display: flex !important;
			flex-direction: column !important;
			align-items: center !important;
			justify-content: center !important;
			margin-left: auto !important;
			margin-right: auto !important;
		}

		@media (max-width: 768px) {
			#contacto .card {
				max-width: 90% !important;
				margin: 0 auto !important;
			}
		}

		/* Indicadores del carrusel */
		.carousel-indicator {
			display: flex;
			justify-content: center;
			gap: 0.5rem;
			margin-top: 2rem;
		}

		.indicator-dot {
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background: rgba(8, 145, 178, 0.3);
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.indicator-dot.active {
			background: var(--primary-color);
			transform: scale(1.2);
		}

		/* Responsive para el carrusel */
		@media (max-width: 768px) {
			.hero-carousel {
				min-height: 300px;
				margin-bottom: 0.5rem;
				padding: 1rem 0.5rem;
				position: relative;
				overflow: hidden;
			}
			
			.hero-slide {
				padding: 1.5rem 1rem;
			}

			.hero-slide h1 {
				font-size: 2.4rem !important;
				line-height: 1.3 !important;
				margin-bottom: 1rem !important;
				color: var(--text-primary) !important;
			}

			.hero-slide .display-3 {
				font-size: 1.6rem !important;
				line-height: 1.5 !important;
				margin-bottom: 1rem !important;
				color: var(--text-muted) !important;
			}

			.carousel-indicator {
				margin-top: 1rem;
				position: relative;
				z-index: 5;
			}

			.indicator-dot {
				width: 10px;
				height: 10px;
				margin: 0 4px;
			}

			.indicator-dot.active {
				width: 30px;
			}

			.section-hero {
				padding: 4rem 0 2rem;
				background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
			}
		}

		/* Menú desplegable de aplicaciones */
		.nav-dropdown {
			position: relative;
		}

		.dropdown-menu {
			position: absolute;
			top: 100%;
			left: 0;
			background: white;
			border-radius: var(--radius-lg);
			box-shadow: var(--shadow-xl);
			border: 1px solid var(--border-light);
			padding: 2rem;
			width: 900px;
			z-index: 1000;
			opacity: 0;
			visibility: hidden;
			transform: translateY(-10px);
			transition: all 0.3s ease;
			margin-top: 0.5rem;
		}

		.nav-dropdown:hover .dropdown-menu {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}

		.dropdown-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 2rem;
		}

		.dropdown-category {
			padding: 0;
		}

		.dropdown-category h4 {
			color: var(--primary-color);
			font-size: 0.9rem;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			margin-bottom: 1rem;
			border-bottom: 2px solid var(--border-light);
			padding-bottom: 0.5rem;
		}

		.dropdown-item {
			display: flex;
			align-items: center;
			gap: 0.75rem;
			padding: 0.75rem 0;
			text-decoration: none;
			color: var(--text-primary);
			transition: all 0.2s ease;
			border-radius: var(--radius-sm);
		}

		.dropdown-item:hover {
			color: var(--primary-color);
			background: var(--bg-accent);
			padding-left: 0.5rem;
			transform: translateX(5px);
		}

		.dropdown-item i {
			font-size: 1.2rem;
			color: var(--primary-color);
			width: 20px;
			text-align: center;
		}

		.dropdown-item-content {
			flex: 1;
		}

		.dropdown-item-title {
			font-weight: 600;
			font-size: 0.9rem;
			margin-bottom: 0.25rem;
		}

		.dropdown-item-desc {
			font-size: 0.8rem;
			color: var(--text-muted);
			line-height: 1.3;
		}

		/* Responsive del menú desplegable */
		@media (max-width: 992px) {
			.dropdown-menu {
				width: 100vw;
				left: -50vw;
				right: 0;
				margin-left: 50%;
				padding: 1.5rem;
			}
			
			.dropdown-grid {
				grid-template-columns: repeat(2, 1fr);
				gap: 1.5rem;
			}
		}

		@media (max-width: 768px) {
			.dropdown-menu {
				display: none;
			}
		}

		/* Menú de industrias - Layout especial */
		.industries-dropdown .dropdown-menu {
			width: 800px;
		}

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

		.industry-category {
			padding: 0;
		}

		.industry-category h4 {
			color: var(--primary-color);
			font-size: 0.9rem;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			margin-bottom: 1rem;
			border-bottom: 2px solid var(--border-light);
			padding-bottom: 0.5rem;
		}

		.industry-item {
			display: block;
			padding: 0.5rem 0;
			text-decoration: none;
			color: var(--text-primary);
			transition: all 0.2s ease;
			border-radius: var(--radius-sm);
		}

		.industry-item:hover {
			color: var(--primary-color);
			background: var(--bg-accent);
			padding-left: 0.5rem;
			transform: translateX(5px);
		}

		.industry-item-title {
			font-weight: 500;
			font-size: 0.9rem;
		}

		/* Responsive del menú de industrias */
		@media (max-width: 992px) {
			.industries-dropdown .dropdown-menu {
				width: 100vw;
				left: -50vw;
				right: 0;
				margin-left: 50%;
				padding: 1.5rem;
			}
			
			.industries-grid {
				grid-template-columns: repeat(2, 1fr);
				gap: 1.5rem;
			}
		}

		/* ============================================
		   MENÚ HAMBURGUESA MÓVIL
		   ============================================ */

		/* Botón hamburguesa */
		.mobile-menu-toggle {
			display: none;
			flex-direction: column;
			justify-content: space-around;
			width: 32px;
			height: 32px;
			background: transparent;
			border: none;
			cursor: pointer;
			padding: 4px;
			z-index: 1001;
			transition: transform 0.3s ease;
		}

		.mobile-menu-toggle span {
			width: 100%;
			height: 3px;
			background: var(--text-primary);
			border-radius: 2px;
			transition: all 0.3s ease;
		}

		.mobile-menu-toggle:hover {
			transform: scale(1.1);
		}

		/* Animación del botón cuando está activo */
		.mobile-menu-toggle.active span:nth-child(1) {
			transform: translateY(10px) rotate(45deg);
		}

		.mobile-menu-toggle.active span:nth-child(2) {
			opacity: 0;
		}

		.mobile-menu-toggle.active span:nth-child(3) {
			transform: translateY(-10px) rotate(-45deg);
		}

		/* Overlay oscuro */
		.mobile-menu-overlay {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 1002;
			opacity: 0;
			transition: opacity 0.3s ease;
		}

		.mobile-menu-overlay.active {
			display: block;
			opacity: 1;
		}

		/* Menú lateral móvil */
		.mobile-menu {
			position: fixed;
			top: 0;
			right: -100%;
			width: 85%;
			max-width: 400px;
			height: 100vh;
			background: white;
			z-index: 1003;
			overflow-y: auto;
			transition: right 0.3s ease;
			box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
		}

		.mobile-menu.active {
			right: 0;
		}

		/* Header del menú móvil */
		.mobile-menu-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 1.5rem;
			border-bottom: 1px solid var(--border-light);
			background: var(--bg-primary);
		}

		.logo-mobile {
			display: flex;
			align-items: center;
			gap: 0.75rem;
		}

		.mobile-menu-close {
			background: transparent;
			border: none;
			font-size: 1.5rem;
			color: var(--text-primary);
			cursor: pointer;
			padding: 0.5rem;
			transition: transform 0.3s ease;
		}

		.mobile-menu-close:hover {
			transform: rotate(90deg);
			color: var(--primary-color);
		}

		/* Contenido del menú móvil */
		.mobile-menu-content {
			padding: 1.5rem;
		}

		/* Secciones expandibles */
		.mobile-menu-section {
			margin-bottom: 1rem;
			border-bottom: 1px solid var(--border-light);
		}

		.mobile-menu-section-toggle {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 1rem 0;
			background: transparent;
			border: none;
			font-size: 1rem;
			font-weight: 600;
			color: var(--text-primary);
			cursor: pointer;
			text-align: left;
			transition: color 0.3s ease;
		}

		.mobile-menu-section-toggle:hover {
			color: var(--primary-color);
		}

		.mobile-menu-section-toggle i {
			transition: transform 0.3s ease;
		}

		.mobile-menu-section-toggle.active i {
			transform: rotate(180deg);
		}

		.mobile-menu-section-content {
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.5s ease;
		}

		.mobile-menu-section-content.active {
			max-height: 2500px;
			overflow-y: auto;
		}

		/* Categorías dentro de las secciones */
		.mobile-menu-category {
			margin-bottom: 1.5rem;
			padding-bottom: 1.5rem;
			border-bottom: 1px solid var(--border-light);
		}

		.mobile-menu-category:last-child {
			border-bottom: none;
			margin-bottom: 0;
			padding-bottom: 0;
		}

		.mobile-menu-category h5 {
			color: var(--text-primary);
			font-size: 0.95rem;
			font-weight: 600;
			text-transform: none;
			letter-spacing: 0;
			margin-bottom: 0.75rem;
			display: flex;
			align-items: center;
			gap: 0.5rem;
		}

		/* Badge de categoría (Apps) */
		.category-badge {
			display: inline-block;
			background: #17a2b8;
			color: white;
			font-size: 0.7rem;
			font-weight: 700;
			padding: 0.2rem 0.5rem;
			border-radius: 4px;
			text-transform: uppercase;
			letter-spacing: 0.5px;
		}

		.category-badge-green {
			background: #28a745;
		}

		.mobile-menu-category a {
			display: block;
			padding: 0.5rem 0;
			color: var(--text-primary);
			text-decoration: none;
			font-size: 0.95rem;
			transition: all 0.2s ease;
		}

		.mobile-menu-category a:hover {
			color: var(--primary-color);
			padding-left: 0.5rem;
		}

		/* Enlaces dentro de secciones expandibles (sin categoría) */
		.mobile-menu-section-content > a {
			display: block;
			padding: 0.75rem 0;
			color: var(--text-primary);
			text-decoration: none;
			font-size: 0.95rem;
			transition: all 0.2s ease;
			border-bottom: 1px solid var(--border-light);
		}

		.mobile-menu-section-content > a:hover {
			color: var(--primary-color);
			padding-left: 0.5rem;
		}

		.mobile-menu-section-content > a:last-child {
			border-bottom: none;
		}

		/* Enlaces directos del menú */
		.mobile-menu-link {
			display: block;
			padding: 1rem 0;
			color: var(--text-primary);
			text-decoration: none;
			font-size: 1rem;
			font-weight: 600;
			border-bottom: 1px solid var(--border-light);
			transition: color 0.3s ease;
		}

		.mobile-menu-link:hover {
			color: var(--primary-color);
		}

		/* Botones de acción en el menú */
		.mobile-menu-actions {
			margin-top: 2rem;
			padding-top: 1.5rem;
			border-top: 1px solid var(--border-light);
		}

		/* Responsive - mostrar menú hamburguesa solo en móvil */
		@media (max-width: 768px) {
			.mobile-menu-toggle {
				display: flex;
				order: 2; /* Mover al final (derecha) */
				margin-left: auto; /* Empujar a la derecha */
			}

			.logo {
				order: 1; /* Logo a la izquierda */
			}

			/* Ocultar navegación desktop en móvil */
			.header-nav {
				display: none;
			}

			/* Ocultar botones desktop (Contactar y Empezar Gratis) */
			.header-content > div[style*="display: flex"] {
				display: none !important;
			}
		}

		/* ============================================
		   CARRUSEL DE IMÁGENES
		   ============================================ */

		.image-carousel-section {
			padding: 6rem 0;
			background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
			overflow: hidden;
		}

		.image-carousel-container {
			position: relative;
			max-width: 1200px;
			margin: 0 auto;
			border-radius: 20px;
			overflow: hidden;
			box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
		}

		.image-carousel-wrapper {
			position: relative;
			width: 100%;
			height: 600px;
		}

		.image-carousel-slide {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.8s ease, visibility 0.8s ease;
		}

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

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

		.image-carousel-content img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}

		.image-carousel-caption {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
			padding: 3rem 2rem 2rem;
			color: white;
			transform: translateY(20px);
			opacity: 0;
			transition: all 0.5s ease 0.3s;
		}

		.image-carousel-slide.active .image-carousel-caption {
			transform: translateY(0);
			opacity: 1;
		}

		.image-carousel-caption h3 {
			font-size: 2rem;
			font-weight: 700;
			margin-bottom: 0.5rem;
			color: white;
		}

		.image-carousel-caption p {
			font-size: 1.1rem;
			margin: 0;
			color: rgba(255, 255, 255, 0.9);
		}

		/* Controles del carrusel */
		.image-carousel-control {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			background: rgba(255, 255, 255, 0.9);
			border: none;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			cursor: pointer;
			z-index: 10;
			transition: all 0.3s ease;
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
		}

		.image-carousel-control:hover {
			background: white;
			transform: translateY(-50%) scale(1.1);
			box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
		}

		.image-carousel-control.prev {
			left: 20px;
		}

		.image-carousel-control.next {
			right: 20px;
		}

		.image-carousel-control i {
			font-size: 1.2rem;
			color: var(--primary-color);
		}

		/* Indicadores */
		.image-carousel-indicators {
			position: absolute;
			bottom: 30px;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			gap: 12px;
			z-index: 10;
		}

		.image-carousel-indicators .indicator {
			width: 12px;
			height: 12px;
			border-radius: 50%;
			border: 2px solid white;
			background: transparent;
			cursor: pointer;
			transition: all 0.3s ease;
			padding: 0;
		}

		.image-carousel-indicators .indicator:hover {
			transform: scale(1.2);
			background: rgba(255, 255, 255, 0.5);
		}

		.image-carousel-indicators .indicator.active {
			background: white;
			width: 40px;
			border-radius: 6px;
		}

		/* Responsive */
		@media (max-width: 768px) {
			.image-carousel-section {
				padding: 3rem 0;
			}

			.image-carousel-wrapper {
				height: 400px;
			}

			.image-carousel-caption h3 {
				font-size: 1.5rem;
			}

			.image-carousel-caption p {
				font-size: 0.95rem;
			}

			.image-carousel-control {
				width: 40px;
				height: 40px;
			}

			.image-carousel-control.prev {
				left: 10px;
			}

			.image-carousel-control.next {
				right: 10px;
			}

			.image-carousel-indicators {
				bottom: 20px;
			}

			.image-carousel-indicators .indicator {
				width: 10px;
				height: 10px;
			}

			.image-carousel-indicators .indicator.active {
				width: 30px;
			}
		}

		/* ============================================
		   SECCIONES CON IMAGEN Y TEXTO
		   ============================================ */

		.image-text-section {
			padding: 6rem 0;
		}

		.image-container {
			position: relative;
			overflow: hidden;
			border-radius: 20px;
			box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
			height: 100%;
			display: flex;
			align-items: stretch;
		}

		.rounded-image {
			width: 100%;
			height: 100%;
			min-height: 500px;
			display: block;
			border-radius: 20px;
			object-fit: cover;
			object-position: center;
			transition: transform 0.5s ease;
		}

		.image-container:hover .rounded-image {
			transform: scale(1.05);
		}

		/* Asegurar que las filas tengan la misma altura */
		.image-text-section .row {
			display: flex;
			align-items: stretch;
		}

		.image-text-section .row > [class*='col-'] {
			display: flex;
			flex-direction: column;
		}

		.shadow-lg {
			box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
		}

		.content-wrapper {
			padding: 2rem 0;
		}

		.content-wrapper .display-3 {
			font-size: 2.5rem;
			font-weight: 800;
			line-height: 1.2;
			margin-bottom: 1.5rem;
		}

		.content-wrapper .lead {
			font-size: 1.15rem;
			line-height: 1.6;
			color: var(--text-secondary);
		}

		.feature-list {
			list-style: none;
			padding: 0;
			margin: 2rem 0;
		}

		.feature-list li {
			padding: 0.75rem 0;
			font-size: 1rem;
			color: var(--text-primary);
			display: flex;
			align-items: center;
			gap: 1rem;
		}

		.feature-list li i {
			color: var(--primary-color);
			font-size: 1.2rem;
			min-width: 24px;
		}

		/* Animaciones suaves */
		@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);
			}
		}

		.animate-fade-in-left {
			animation: fadeInLeft 0.8s ease-out;
		}

		.animate-fade-in-right {
			animation: fadeInRight 0.8s ease-out;
		}

		/* ============================================
		   CARRUSEL DE TARJETAS
		   ============================================ */

.card-carousel-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 4rem auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 2rem;
}

.card-carousel {
    position: relative;
    height: 450px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-card {
    position: absolute;
    width: 80%;
    max-width: 400px;
    height: auto;
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-light);
    padding: 2rem;
    transition: transform 0.5s ease, opacity 0.5s ease, z-index 0s linear 0.25s;
    opacity: 0;
    transform: scale(0.8);
    z-index: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.carousel-card.active {
    display: flex;
    transform: scale(1.1);
    opacity: 1;
    z-index: 3;
    box-shadow: var(--shadow-xl);
}

.carousel-card.prev {
    display: flex;
    transform: translateX(-50%) scale(0.8);
    opacity: 0.6;
    z-index: 2;
}

.carousel-card.next {
    display: flex;
    transform: translateX(50%) scale(0.8);
    opacity: 0.6;
    z-index: 2;
}

.carousel-card h4 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.carousel-card p {
    font-size: 1rem;
    color: var(--text-secondary);
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

.carousel-button:hover {
    background: var(--bg-accent);
    transform: translateY(-50%) scale(1.1);
}

.carousel-button.prev {
    left: 0;
}

.carousel-button.next {
    right: 0;
}

.carousel-button i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .card-carousel-container {
        padding: 0 1rem;
    }

    .card-carousel {
        height: 400px;
    }

    .carousel-card {
        width: 90%;
    }

    .carousel-card.prev {
        transform: translateX(-35%) scale(0.7);
    }

    .carousel-card.next {
        transform: translateX(35%) scale(0.7);
    }
    
    .carousel-card.active {
        transform: scale(1);
    }

    .carousel-button {
        width: 40px;
        height: 40px;
    }

    .carousel-button.prev {
        left: -10px;
    }

    .carousel-button.next {
        right: -10px;
    }
}

/* ============================================
   ESTILOS PARA LA SECCIÓN SIMPLIFICADA DE VENTAS MÁS RÁPIDAS Y PRECISAS
   ============================================ */

/* Contenedor de métricas */
.metrics-container {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.metric {
    text-align: center;
    flex: 1;
    min-width: 120px;
}

.metric-value {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.metric-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Lista de beneficios */
.benefits-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
}

.benefit-item i {
    color: var(--primary-color);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.benefit-item span {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* Comparación simple */
.comparison-simple {
    background: white;
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
    margin-bottom: 2rem;
}

.comparison-header {
    text-align: center;
    margin-bottom: 2rem;
}

.comparison-header h5 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.comparison-header h5 i {
    color: var(--primary-color);
    margin-right: 0.5rem;
}

.comparison-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.comparison-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: var(--radius-lg);
    background: var(--bg-accent);
    min-width: 200px;
    text-align: center;
    transition: var(--transition-medium);
}

.comparison-item.highlight {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

.comparison-label {
    font-weight: 600;
    font-size: 0.9rem;
}

.comparison-time {
    font-size: 1.5rem;
    font-weight: 800;
}

.comparison-item.highlight .comparison-time {
    color: white;
}

.comparison-divider {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin: 0.5rem 0;
}

/* Beneficio principal */
.key-benefit {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    padding: 2rem;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    box-shadow: var(--shadow-lg);
}

.benefit-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.benefit-text h6 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.benefit-text p {
    font-size: 0.95rem;
    opacity: 0.9;
    margin: 0;
}

/* Responsive para la versión simplificada */
@media (max-width: 768px) {
    .metrics-container {
        flex-direction: column;
        gap: 1.5rem;
    }

    .metric {
        min-width: auto;
    }

    .metric-value {
        font-size: 2.5rem;
    }

    .metric-label {
        font-size: 0.8rem;
    }

    .comparison-simple {
        padding: 1.5rem;
    }

    .comparison-item {
        min-width: 180px;
        padding: 0.75rem;
    }

    .comparison-time {
        font-size: 1.2rem;
    }

    .key-benefit {
        padding: 1.5rem;
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .benefit-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}