/* Variables CSS */
 :root {
     --blue-50: #f0f9ff;
     --blue-100: #e0f2fe;
     --blue-600: #0284c7;
     --blue-700: #0369a1;
     --blue-900: #0c4a6e;
     --green-400: #34d399;
     --green-500: #10b981;
     --green-600: #059669;
     --green-700: #047857;
     --green-900: #064e3b;
     --gray-50: #f9fafb;
     --gray-100: #f3f4f6;
     --gray-200: #e5e7eb;
     --gray-300: #d1d5db;
     --gray-400: #9ca3af;
     --gray-500: #6b7280;
     --gray-600: #4b5563;
     --gray-700: #374151;
     --gray-800: #1f2937;
     --gray-900: #111827;
     --purple-200: #e9d5ff;
     --purple-600: #9333ea;
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
     --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
     --rounded-sm: 0.125rem;
     --rounded: 0.25rem;
     --rounded-md: 0.375rem;
     --rounded-lg: 0.5rem;
     --rounded-xl: 0.75rem;
     --rounded-2xl: 1rem;
     --rounded-3xl: 1.5rem;
     --red-500: #ef4444;
 }

 /* Reset y estilos base */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     background: linear-gradient(to bottom right, var(--blue-50), var(--gray-50));
     color: var(--gray-700);
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     overflow-x: hidden;
 }

 .container {
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 1.5rem;
 }

 section {
     position: relative;
     overflow: hidden;
 }

 h1{
     padding-top:50px;
}
 h1, h2, h3, h4, h5, h6 {
     font-weight: 700;
     line-height: 1.2;
     color: var(--gray-800);
 }

 p {
     margin-bottom: 1rem;
 }

 img {
     max-width: 100%;
     height: auto;
 }

 .text-center {
     text-align: center;
 }

 .text-left {
     text-align: left;
 }

 .text-white {
     color: white;
 }

 .bg-white {
     background-color: white;
 }

 .bg-blue-900 {
     background-color: var(--blue-900);
 }

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

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

 .relative {
     position: relative;
 }

 .absolute {
     position: absolute;
 }

 .inset-0 {
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
 }

 .z-10 {
     z-index: 10;
 }

 .z-50 {
     z-index: 50;
 }

 .flex {
     display: flex;
 }

 .flex-col {
     flex-direction: column;
 }

 .items-center {
     align-items: center;
 }

 .justify-center {
     justify-content: center;
 }

 .justify-between {
     justify-content: space-between;
 }

 .gap-4 {
     gap: 1rem;
 }

 .gap-6 {
     gap: 1.5rem;
 }

 .gap-8 {
     gap: 2rem;
 }

 .grid {
     display: grid;
 }

 .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
 }

 .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
 }

 .grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
 }

 .gap-6 {
     gap: 1.5rem;
 }

 .max-w-2xl {
     max-width: 42rem;
 }

 .max-w-3xl {
     max-width: 48rem;
 }

 .max-w-7xl {
     max-width: 80rem;
 }

 .mx-auto {
     margin-left: auto;
     margin-right: auto;
 }

 .py-24 {
     padding-top: 6rem;
     padding-bottom: 6rem;
 }

 .py-32 {
     padding-top: 8rem;
     padding-bottom: 8rem;
 }

 .px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
 }

 .px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
 }

 .py-3 {
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
 }

 .py-4 {
     padding-top: 1rem;
     padding-bottom: 1rem;
 }

 .py-8 {
     padding-top: 2rem;
     padding-bottom: 2rem;
 }

 .px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
 }

 .px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
 }

 .mb-4 {
     margin-bottom: 1rem;
 }

 .mb-6 {
     margin-bottom: 1.5rem;
 }

 .mb-8 {
     margin-bottom: 2rem;
 }

 .mb-12 {
     margin-bottom: 3rem;
 }

 .mb-16 {
     margin-bottom: 4rem;
 }

 .mt-4 {
     margin-top: 1rem;
 }

 .mt-6 {
     margin-top: 1.5rem;
 }

 .mt-8 {
     margin-top: 2rem;
 }

 .rounded-2xl {
     border-radius: var(--rounded-2xl);
 }

 .rounded-full {
     border-radius: 9999px;
 }

 .shadow-sm {
     box-shadow: var(--shadow-sm);
 }

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

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

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

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

 .border {
     border-width: 1px;
 }

 .border-2 {
     border-width: 2px;
 }

 .border-gray-100 {
     border-color: var(--gray-100);
 }

 .border-gray-200 {
     border-color: var(--gray-200);
 }

 .border-opacity-20 {
     border-opacity: 0.2;
 }

 .transition-all {
     transition-property: all;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
 }

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

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

 .hover\:scale-105:hover {
     transform: scale(1.05);
 }

 .opacity-80 {
     opacity: 0.8;
 }

 .opacity-90 {
     opacity: 0.9;
 }

 .backdrop-blur-sm {
     backdrop-filter: blur(4px);
 }

 .h-full {
     height: 100%;
 }

 .w-full {
     width: 100%;
 }

 .max-w-md {
     max-width: 28rem;
 }

 .h-20 {
     height: 5rem;
 }

 .w-20 {
     width: 5rem;
 }

 .h-12 {
     height: 3rem;
 }

 .h-16 {
     height: 4rem;
 }

 .w-16 {
     width: 4rem;
 }

 .text-lg {
     font-size: 1.125rem;
 }

 .text-xl {
     font-size: 1.25rem;
 }

 .text-2xl {
     font-size: 1.5rem;
 }

 .text-3xl {
     font-size: 1.875rem;
 }

 .text-4xl {
     font-size: 2.25rem;
 }

 .text-5xl {
     font-size: 3rem;
 }

 .text-6xl {
     font-size: 3.75rem;
 }

 .font-medium {
     font-weight: 500;
 }

 .font-semibold {
     font-weight: 600;
 }

 .font-bold {
     font-weight: 700;
 }

 .leading-relaxed {
     line-height: 1.625;
 }

 .space-y-3 > * + * {
     margin-top: 0.75rem;
 }

 .space-y-4 > * + * {
     margin-top: 1rem;
 }

 .space-y-6 > * + * {
     margin-top: 1.5rem;
 }

 .space-y-8 > * + * {
     margin-top: 2rem;
 }

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

 @keyframes fadeInDown {
     from {
         opacity: 0;
         transform: translateY(-20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }

 @keyframes scaleIn {
     from {
         opacity: 0;
         transform: scale(0.95);
     }
     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 @keyframes waveAnim {
     0% { transform: translateY(0px); }
     50% { transform: translateY(-12px); }
     100% { transform: translateY(0px); }
 }

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

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

 .animate-fadeInDown {
     animation: fadeInDown 0.8s ease-out forwards;
 }

 .animate-fadeIn {
     animation: fadeIn 0.8s ease-out forwards;
 }

 .animate-scaleIn {
     animation: scaleIn 0.5s ease-out forwards;
 }

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



 /* Sección Hero */
 .hero-section {
     position: relative;
     padding-top: 8rem;
     padding-bottom: 16rem;

     background-image: -moz-linear-gradient(top, rgba(201, 12, 138, 0.95), rgba(150, 206, 164, 0.95)), url(".././assets/heroglp.jpeg");;
     background-image: -webkit-linear-gradient(top, rgba(0, 85, 255, 0.5), rgba(180, 180, 180, 0.15)), url(".././assets/heroglp.jpeg");;
     background-image: -ms-linear-gradient(top, rgba(23, 24, 352, 0.95), rgba(23, 204, 32, 0.95)), url(".././assets/heroglp.jpeg");;
     background-image: linear-gradient(top, rgba(107, 29, 29, 0.3), rgb(45, 92, 0.47)), url(".././assets/heroglp.jpeg");;

     background-size: cover;
     overflow: hidden;
 }

 .hero-overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
 }

 .hero-content {
     position: relative;
     z-index: 10;
     text-align: center;
     max-width: 48rem;
     margin: 0 auto;
 }

 .hero-title {
     font-size: 3.75rem;
     font-weight: 700;
     margin-bottom: 1.5rem;
     color: white;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 }

 .hero-gradient-text {
     display: block;
     margin-top: 1rem;
     background: linear-gradient(to right, var(--blue-100), var(--green-400));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }

 .hero-subtitle {
     font-size: 1.25rem;
     color: #e5e7eb;
     margin-bottom: 3rem;
     max-width: 42rem;
     margin-left: auto;
     margin-right: auto;
     line-height: 1.75;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }

 .hero-button {
     background-color: var(--blue-100);
     color: var(--gray-900);
     padding: 1rem 2rem;
     border-radius: 9999px;
     font-weight: 700;
     font-size: 1.125rem;
     border: none;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: var(--shadow-lg);
 }

 .hero-button:hover {
     background-color: var(--blue-100);
     transform: scale(1.05);
     box-shadow: var(--shadow-xl);
 }

 .certifications {
     position: absolute;
     bottom: 2rem;
     left: 0;
     right: 0;
     z-index: 10;
     display: flex;
     justify-content: center;
     gap: 2rem;
     opacity: 0.9;
 }

 .certifications img {
     height: 3rem;
     filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
 }

 /* Sección de Beneficios */
 .benefits-section {
     background-color: var(--gray-50);
     padding: 8rem 0;
 }

 .benefits-intro {
     text-align: center;
     max-width: 48rem;
     margin: 0 auto 4rem;
     font-size: 1.125rem;
     color: var(--gray-600);
     line-height: 1.75;
 }

 .benefits-intro strong {
     color: var(--gray-900);
     font-weight: 600;
 }

 .benefits-intro strong.text-green-900 {
     color: var(--green-900);
 }

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

 .benefit-card {
     height: 400px;
     perspective: 1000px;
 }

 .card-inner {
     position: relative;
     width: 100%;
     height: 100%;
     text-align: center;
     transition: transform 0.6s;
     transform-style: preserve-3d;
 }

 .benefit-card:hover .card-inner {
     transform: rotateY(180deg);
 }

 .card-front, .card-back {
     position: absolute;
     width: 100%;
     height: 100%;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     border-radius: var(--rounded-2xl);
     padding: 2rem;
     background-color: rgba(255, 255, 255, 0.8);
     backdrop-filter: blur(4px);
     border: 1px solid var(--gray-100);
     box-shadow: var(--shadow-sm);
     transition: all 0.3s ease;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 .card-front:hover {
     box-shadow: var(--shadow-md);
 }

 .card-back {
     background-color: rgba(255, 255, 255, 0.9);
     transform: rotateY(180deg);
 }

 .card-icon {
     width: 5rem;
     height: 5rem;
     border-radius: var(--rounded-2xl);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1.5rem;
 }

 .card-icon i {
     font-size: 2.5rem;
 }

 .card-title {
     font-size: 1.5rem;
     font-weight: 600;
     margin-bottom: 1rem;
     color: var(--gray-800);
 }

 .card-description {
     color: var(--gray-600);
     text-align: center;
 }

 .card-details {
     list-style: none;
     padding: 0;
     text-align: left;
 }

 .card-details li {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     margin-bottom: 0.75rem;
 }

 .text-blue-600 {
     color: var(--blue-600);
 }

 .border-blue-200 {
     border-color: var(--blue-200);
 }

 .bg-blue-100 {
     background-color: rgba(56, 189, 248, 0.1);
 }

 .border-blue-200 {
     border-color: rgba(191, 219, 254, 0.2);
 }

 .text-green-600 {
     color: var(--green-600);
 }

 .bg-green-100 {
     background-color: rgba(110, 231, 183, 0.1);
 }

 .border-green-200 {
     border-color: rgba(187, 247, 208, 0.2);
 }

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

 .bg-purple-100 {
     background-color: rgba(216, 180, 254, 0.1);
 }

 .border-purple-200 {
     border-color: rgba(221, 214, 254, 0.2);
 }

 /* Sección de Video */
 .video-section {
     background-color: white;
     padding: 6rem 0 8rem;
     position: relative;
 }

 .wave-top, .wave-bottom {
     position: absolute;
     left: 0;
     right: 0;
     height: 12rem;
     z-index: 1;
 }

 .wave-top {
     top: 0;
     transform: rotate(180deg);
 }

 .wave-bottom {
     bottom: 0;
 }

 .wave-top svg, .wave-bottom svg {
     width: 100%;
     height: 100%;
 }

 .wave-top path, .wave-bottom path {
     animation: waveAnim 15s linear infinite;
 }

 .video-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 3rem;
     max-width: 80rem;
     margin: 0 auto;
     position: relative;
     z-index: 10;
 }

 @media (min-width: 768px) {
     .video-content {
         flex-direction: row;
     }
 }

 .video-wrapper {
     flex: 1;
     aspect-ratio: 16/9;
     border-radius: var(--rounded-2xl);
     overflow: hidden;
     box-shadow: var(--shadow-xl);
 }

 .video-text {
     flex: 1;
     text-align: center;
 }

 @media (min-width: 768px) {
     .video-text {
         text-align: left;
     }
 }

 .video-text h2 {
     font-size: 2.25rem;
     margin-bottom: 1.5rem;
     position: relative;
     display: inline-block;
 }

 .video-text h2 span {
     color: var(--green-600);
 }

 .video-text h2::after {
     content: '';
     position: absolute;
     bottom: -0.5rem;
     left: 0;
     width: 33%;
     height: 0.25rem;
     background-color: var(--green-400);
 }

 .video-text p {
     font-size: 1.5rem;
     color: var(--gray-600);
     margin-bottom: 1.5rem;
     line-height: 1.5;
 }

 .feature {
     display: flex;
     align-items: center;
     gap: 1rem;
 }

 .feature .icon {
     width: 3rem;
     height: 3rem;
     background-color: var(--green-100);
     border-radius: var(--rounded-lg);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .feature .icon i {
     color: var(--green-600);
     font-size: 1.5rem;
 }

 .feature span {
     font-size: 0.875rem;
     color: var(--gray-500);
 }

 /* Sección de Servicios */
 .services-section {
     background: linear-gradient(135deg, rgba(239, 246, 255, 0.5), rgba(240, 253, 244, 0.5));
     padding: 8rem 0;
 }

 .services-heading {
     text-align: center;
     max-width: 48rem;
     margin: 0 auto 4rem;
 }

 .services-heading h2 {
     font-size: 2.25rem;
     font-weight: 500;
     background: linear-gradient(to right, var(--blue-600), var(--green-500));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     margin-bottom: 1.5rem;
 }

 .services-heading p {
     font-size: 1.25rem;
     color: var(--gray-600);
 }

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

 .service-card {
     height: 400px;
     perspective: 1000px;
 }

 /* Sección de Formulario */
 .form-section {
     padding: 8rem 0;
     background-color: white;
 }

 .form-section h2 {
     font-size: 2.25rem;
     font-weight: 700;
     margin-bottom: 1.5rem;
 }

 .form-section p {
     font-size: 1.25rem;
     color: var(--gray-600);
     margin-bottom: 2rem;
 }

 .contact-form {
     background-color: white;
     padding: 2rem;
     border-radius: var(--rounded-2xl);
     box-shadow: var(--shadow-2xl);
     border-top: 4px solid var(--green-600);
     max-width: 42rem;
     margin: 0 auto;
 }

 @media (min-width: 768px) {
     .contact-form {
         padding: 2.5rem;
     }
 }

 .form-group {
     margin-bottom: 1.5rem;
 }

 label {
     display: block;
     text-align: left;
     font-size: 0.875rem;
     font-weight: 500;
     color: var(--gray-700);
     margin-bottom: 0.5rem;
 }

 input, select {
     width: 100%;
     border: 2px solid var(--gray-200);
     border-radius: var(--rounded-xl);
     padding: 0.75rem 1rem;
     font-size: 1rem;
     transition: all 0.2s ease;
 }

 input:focus, select:focus {
     outline: none;
     border-color: var(--green-500);
     box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
 }

 .form-button {
     background: linear-gradient(to right, var(--green-600), var(--blue-600));
     color: white;
     width: 100%;
     padding: 1rem;
     border: none;
     border-radius: var(--rounded-xl);
     font-weight: 700;
     font-size: 1.125rem;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: var(--shadow-lg);
 }

 .form-button:hover {
     background: linear-gradient(to right, var(--green-700), var(--blue-700));
     box-shadow: var(--shadow-xl);
     transform: scale(1.02);
 }

 .checkbox-group {
     display: flex;
     align-items: flex-start;
     gap: 0.75rem;
     margin-top: 1rem;
     margin-bottom: 1.5rem;
 }

 .checkbox-group input {
     width: auto;
     margin-top: 0.25rem;
 }

 .checkbox-group label {
     font-size: 0.875rem;
     font-weight: 400;
     margin-bottom: 0;
 }

 .checkbox-group a {
     color: var(--green-600);
     font-weight: 600;
     text-decoration: none;
 }

 .checkbox-group a:hover {
     text-decoration: underline;
 }
 /* Contenedor del navbar */
 #kimotor-navbar-container {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 1000;
 }

 /* Barra superior - Aumentada de tamaño */
 .kimotor-top-bar {
     background: #222;
     color: white;
     padding: 20px 0; /* Aumentado el padding */
     font-size: 15px; /* Texto un poco más grande */
     transition: transform 0.4s ease, opacity 0.4s ease;
 }

 .kimotor-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .contact-info {
     display: flex;
     gap: 30px; /* Más espacio entre elementos */
 }

 .contact-info span {
     display: flex;
     align-items: center;
     gap: 10px; /* Más espacio para iconos */
     color: #fff;
     font-size: 15px; /* Texto un poco más grande */
 }

 .contact-info i {
     color: #f60a0c;
     font-size: 16px; /* Iconos más grandes */
 }

 .top-bar-right {
     display: flex;
     align-items: center;
     gap: 20px;
 }

 .appointment-btn, .whatsapp-btn {
     padding: 8px 16px; /* Botones más grandes */
     border-radius: 4px;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s;
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 14px;
 }

 .appointment-btn {
     background: transparent;
     color: white;
     border: 2px solid #f60a0c;
 }

 .appointment-btn:hover {
     background: #f60a0c;
     color: white;
 }

 .whatsapp-btn {
     background: #25D366;
     color: white;
     border: 2px solid #25D366;
 }

 .whatsapp-btn:hover {
     background: #128C7E;
     border-color: #128C7E;
 }

 .social-icons {
     display: flex;
     gap: 15px; /* Más espacio entre iconos */
 }

 .social-icons a {
     color: #f60a0c;
     transition: color 0.3s;
     font-size: 16px; /* Iconos más grandes */
 }

 .social-icons a:hover {
     color: white;
 }

 /* Barra principal - con superposición */
 .kimotor-main-nav {
     background: white;
     padding: 18px 0; /* Un poco más de padding */
     position: relative;
     top: -20px; /* Más superposición sobre la barra de información */
     left: 0;
     width: calc(100% - 40px);
     margin: 0 20px;
     z-index: 1001; /* Mayor que la barra superior */
     transition: all 0.4s ease;
     box-shadow: 0 5px 20px rgba(0,0,0,0.1);
     border-radius: 8px;
 }

 .logo img {
     height: auto;
     max-height: 55px; /* Logo un poco más grande */
     transition: all 0.3s;
 }

 .nav-menu-container {
     display: flex;
     align-items: center;
     gap: 30px; /* Más espacio entre elementos */
 }

 .main-menu {
     display: flex;
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .main-menu > li {
     position: relative;
     padding: 16px 14px; /* Más espacio en elementos */
 }

 .main-menu > li > a {
     color: #333;
     text-decoration: none;
     font-weight: 600;
     font-size: 16px; /* Texto un poco más grande */
     transition: all 0.3s;
     display: flex;
     align-items: center;
     gap: 6px;
     text-transform: uppercase;
     position: relative;
     padding-bottom: 10px; /* Más espacio para la línea */
 }

 /* Efecto de línea roja con triángulo */
 .main-menu > li > a::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 0;
     height: 3px; /* Línea más gruesa */
     background: #f60a0c;
     transition: width 0.3s ease;
 }

 .main-menu > li > a::before {
     content: '';
     position: absolute;
     bottom: 3px; /* Triángulo pegado a la línea */
     left: 50%;
     transform: translateX(-50%);
     width: 0;
     height: 0;
     border-left: 6px solid transparent; /* Triángulo más grande */
     border-right: 6px solid transparent;
     border-bottom: 6px solid #f60a0c; /* Triángulo apuntando hacia arriba */
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .main-menu > li:hover > a::after {
     width: 100%;
 }

 .main-menu > li:hover > a::before {
     opacity: 1;
 }

 /* Submenús - Fondo oscuro con letras blancas */
 .submenu {
     position: absolute;
     top: calc(100% + 5px);
     left: 0;
     background: #2c2c2c;
     min-width: 240px; /* Un poco más ancho */
     list-style: none;
     padding: 12px 0; /* Más padding */
     opacity: 0;
     visibility: hidden;
     transform: translateY(10px);
     transition: all 0.3s;
     z-index: 100;
     border-top: 3px solid #f60a0c;
     border-radius: 0 0 6px 6px;
     box-shadow: 0 5px 15px rgba(0,0,0,0.3);
 }

 .has-submenu:hover .submenu {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .submenu li a {
     display: block;
     padding: 14px 28px; /* Más espacio en elementos */
     color: #fff;
     text-decoration: none;
     transition: all 0.3s;
     font-size: 15px; /* Texto un poco más grande */
     text-transform: uppercase;
     position: relative;
 }

 .submenu li a:hover {
     background: #3a3a3a;
     color: #fff;
     padding-left: 32px;
 }

 .submenu li a:hover::before {
     content: '»';
     position: absolute;
     left: 18px; /* Más espacio */
     font-size: 16px; /* Más grande */
     color: #f60a0c;
 }

 .search-icon {
     color: #333;
     cursor: pointer;
     font-size: 18px; /* Icono más grande */
     transition: color 0.3s;
     margin-left: 12px;
 }

 .search-icon:hover {
     color: #f60a0c;
 }

 .mobile-menu-toggle {
     display: none;
     font-size: 24px; /* Icono más grande */
     cursor: pointer;
     color: #333;
 }

 /* Efecto al hacer scroll */
 body.scrolled #kimotor-navbar-container .kimotor-top-bar {
     transform: translateY(-100%);
     opacity: 0;
 }

 body.scrolled #kimotor-navbar-container .kimotor-main-nav {
     position: fixed;
     top: -100%; /* Comienza oculto arriba */
     padding: 10px 0;
     z-index: 1001;
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(5px);
     box-shadow: 0 5px 20px rgba(0,0,0,0.1);
     width: 100%;
     margin: 0;
     border-radius: 0;
     animation: slideDown 0.5s forwards;
 }

 @keyframes slideDown {
     0% {
         top: -100%;
     }
     100% {
         top: 0;
     }
 }

 body.scrolled #kimotor-navbar-container .kimotor-main-nav .logo img {
     max-height: 50px;
 }

 /* Responsive */
 @media (max-width: 992px) {
     .kimotor-top-bar .kimotor-container {
         flex-direction: column;
         gap: 12px;
         padding: 12px 15px;
     }

     .contact-info {
         flex-wrap: wrap;
         justify-content: center;
         gap: 15px;
     }

     .contact-info span {
         font-size: 14px;
     }

     .top-bar-right {
         flex-wrap: wrap;
         justify-content: center;
         gap: 15px;
     }

     .kimotor-main-nav {
         width: calc(100% - 30px);
         margin: 0 15px;
         top: -15px;
         padding: 15px 0;
     }

     .nav-menu-container {
         position: relative;
     }

     .main-menu {
         position: absolute;
         top: 100%;
         right: 0;
         background: white;
         width: 280px;
         flex-direction: column;
         box-shadow: 0 5px 15px rgba(0,0,0,0.1);
         display: none;
         border-radius: 6px;
     }

     .main-menu.show {
         display: flex;
     }

     .main-menu > li {
         padding: 14px 20px;
         border-bottom: 1px solid #eee;
     }

     .submenu {
         position: static;
         box-shadow: none;
         display: none;
         opacity: 1;
         visibility: visible;
         transform: none;
         padding: 0;
         border: none;
         border-top: 1px solid #eee;
         background: #f8f8f8;
         border-radius: 0;
     }

     .submenu li a {
         color: #333;
         font-size: 14px;
         padding: 12px 25px;
     }

     .submenu li a:hover {
         background: #eee;
     }

     .has-submenu:hover .submenu {
         display: none;
     }

     .has-submenu.active .submenu {
         display: block;
     }

     .mobile-menu-toggle {
         display: block;
     }

     .search-icon {
         margin-left: auto;
     }

     body {
         padding-top: 170px;
     }
 }

 .contact-info-section {
     text-align: center;
     margin-top: 2rem;
     font-size: 0.875rem;
     color: var(--gray-600);
 }

 .contact-info-section .phone {
     color: var(--green-600);
     font-weight: 700;
     font-size: 1.125rem;
     display: block;
     margin-top: 0.5rem;
 }

 .contact-info .hours {
     font-size: 0.75rem;
     color: var(--gray-400);
     display: block;
     margin-top: 0.25rem;
 }

 /* Footer */
 footer {
     position: relative;
     background-color: var(--gray-800);
     color: white;
     padding: 3rem 0;
 }

 footer::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjMDAwMDAwIi8+PHBhdGggZD0iTTAgNDBoNDBtLTQwIDBoNDBNMCAwaDQwTTAgMjBoNDBtLTQwIDBoNDAiIHN0cm9rZT0iIzI1MjYyOSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9zdmc+");
     opacity: 0.1;
 }

 .footer-content {
     position: relative;
     z-index: 10;
     text-align: center;
 }

 .footer-logo {
     width: 10rem;
     margin: 0 auto 2rem;
 }

 .footer-logo img {
     width: 100%;
     height: auto;
 }

 .footer-text {
     color: var(--gray-400);
     margin-bottom: 1.5rem;
 }

 .footer-links {
     display: flex;
     justify-content: center;
     gap: 1.5rem;
 }

 .footer-links a {
     color: var(--gray-400);
     text-decoration: none;
     transition: color 0.2s ease;
 }

 .footer-links a:hover {
     color: var(--blue-400);
 }

 /* Chatbot */
 .chatbot-container {
     position: fixed;
     bottom: 1rem;
     right: 1rem;
     z-index: 1000;
     width: 350px;
     height: 500px;


 }



 .stack-ai-container {
     position: fixed;
     bottom: 5rem;
     right: 1.5rem;
     width: 550px;
     z-index: 1000;
     border-radius: 1rem;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0,0,0,0.2);
     display: none;
 }

 .stack-ai-container.active {
     display: block;
 }

 #stack-ai-frame {
 width: 100%;
 height: 100%;
 border: none;
 }

 .chatbot-button {
     position: relative;
     width: 60px;
     height: 60px;
     background: linear-gradient(to right, var(--green-600), var(--blue-600));
     color: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     box-shadow: var(--shadow-lg);
     transition: all 0.3s ease;
     border: none;
     z-index: 1001;
 }

 .chatbot-button:hover {
     transform: scale(1.1);
     box-shadow: var(--shadow-xl);
 }

 .chatbot-button i {
     font-size: 1.5rem;
 }

 .notification-badge {
     position: absolute;
     top: -5px;
     right: -5px;
     background-color: var(--red-500);
     color: white;
     border-radius: 50%;
     width: 22px;
     height: 22px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.75rem;
     font-weight: bold;
     animation: pulse 1.5s infinite;
 }

 /* Efecto de volteo mejorado */
 .flip-card {
     height: 400px;
     perspective: 1000px;
 }

 .flip-card-inner {
     position: relative;
     width: 100%;
     height: 100%;
     transition: transform 0.6s;
     transform-style: preserve-3d;
 }

 .flip-card:hover .flip-card-inner {
     transform: rotateY(180deg);
 }

 .flip-card-front, .flip-card-back {
     position: absolute;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
     border-radius: var(--rounded-2xl);
     padding: 2rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     box-shadow: 0 10px 30px rgba(0,0,0,0.1);
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .flip-card-front {
     background-color: rgba(255, 255, 255, 0.95);
     border: 1px solid rgba(229, 231, 235, 0.5);
 }

 .flip-card-back {
     background: linear-gradient(135deg, var(--blue-50), var(--gray-50));
     transform: rotateY(180deg);
     border: 1px solid rgba(229, 231, 235, 0.5);
 }

 .flip-card:hover .flip-card-front {
     box-shadow: 0 15px 35px rgba(0,0,0,0.15);
 }

 .flip-card:hover .flip-card-back {
     box-shadow: 0 15px 35px rgba(0,0,0,0.15);
 }

 /* Responsive */
 @media (max-width: 768px) {
     .hero-title {
         font-size: 2.5rem;
     }

     .benefits-grid, .services-grid {
         grid-template-columns: 1fr;
     }

     .flip-card, .benefit-card, .service-card {
         height: auto;
         min-height: 350px;
     }

     .video-content {
         flex-direction: column;
     }

     .contact-form .grid-cols-2 {
         grid-template-columns: 1fr;
     }

     .flip-card-inner {
         height: auto;
         min-height: 350px;
     }

     .stack-ai-container {
         width: 90%;
         height: 70vh;
         right: 5%;
         bottom: 5rem;
     }

     .chatbot-button {
         bottom: 1rem;
         right: 1rem;
     }
 }



  

        .combined-section {
            padding: 60px 0;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
        }

        .section-heading {
            text-align: center;
            margin-bottom: 50px;
        }

        .section-heading h2 {
            color: #182848;
            font-size: 2.5rem;
            margin-bottom: 15px;
            font-weight: 700;
        }

        .section-heading p {
            color: #4a5568;
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto;
        }

        .content-panel {
            display: flex;
            flex-direction: column;
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
            background: white;
            min-height: 500px;
        }

        .content-section {
            display: flex;
            flex-direction: column;
            opacity: 0;
            height: 0;
            overflow: hidden;
            transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            transform: translateY(20px);
            position: absolute;
            width: 100%;
        }

        .content-section.active {
            opacity: 1;
            height: auto;
            position: relative;
            transform: translateY(0);
            display: flex;
        }

        .text-content {
            padding: 40px;
            background: white;
            position: relative;
            z-index: 2;
        }

        .text-content h3 {
            color: #182848;
            margin-bottom: 20px;
            font-size: 1.8rem;
            border-left: 5px solid #3498db;
            padding-left: 15px;
        }

        .text-content p {
            color: #4a5568;
            line-height: 1.7;
            margin-bottom: 20px;
            font-size: 1.05rem;
        }

        .text-content ul {
            margin: 20px 0;
            padding-left: 30px;
        }

        .text-content li {
            margin-bottom: 10px;
            color: #4a5568;
        }

        .text-content li strong {
            color: #182848;
        }

        .image-content {
            position: relative;
            min-height: 350px;
        }

        /* Contenedor de flip de imagen */
        .image-flip-container {
            width: 100%;
            height: 100%;
            perspective: 1500px;
            position: relative;
        }

        .image-flipper {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.8s;
            transform-style: preserve-3d;
            cursor: pointer;
        }

        .image-front,
        .image-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            background-size: cover;
            background-position: center;
            border-radius: 8px;
        }

        .image-back {
            transform: rotateY(180deg);
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #182848;
            color: white;
            padding: 20px;
            text-align: center;
            flex-direction: column;
        }

        /* Contenedor interno para corregir la orientación del texto */
        .back-content {
            transform: rotateY(180deg);
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            box-sizing: border-box;
        }

        .componentes {
            padding-bottom: 35rem;
        }

        .back-content h4 {
            font-size: 1.5rem;
            margin-bottom: 15px;
        }

        .back-content p {
            max-width: 80%;
            margin: 0 auto;
        }

        .flipped {
            transform: rotateY(180deg);
        }

        /* Botón de rotación */
        .flip-button {
            position: absolute;
            bottom: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.9);
            border: none;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .flip-button:hover {
            transform: rotate(90deg);
            background: white;
        }

        /* Ocultar botones de navegación cuando la imagen está girada */
        .image-flip-container.flipped .nav-overlay {
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .image-flip-container .nav-overlay {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.3s ease 0.4s, visibility 0.3s ease 0.4s;
        }

        /* Imágenes cargadas desde CSS */
        .image-front.conversion-bg {
            background-image:
               radial-gradient(circle at center, transparent 80%, #1caf2322 70%, #04ff1023 90%),
             url('.././assets/quees.webp');
        }

        .image-back.conversion-info {
            background-image: url('.././assets/queesB.webp');
            background: linear-gradient(135deg, #2ece7199 0%, #16a085fb 100%),
                url('.././assets/queesB.webp');
            background-size: cover;
            background-position: center;
        }

        .image-front.modificaciones-bg {
            background-image:
                url('.././assets/stagB.png');
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
        }

        .image-back.modificaciones-info {
            background-image:
                radial-gradient(circle at center, transparent 40%, #2ece714a 70%, #16a0857b 100%),
                url('.././assets/stag.webp');
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
        }

        .image-front.cambio-bg {
            background-image:
                radial-gradient(circle at center, transparent 40%, #2ece714a 70%, #16a0857b 100%),
                url('.././assets/board.avif');
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
        }

        .image-back.cambio-info {
            background-image:
                radial-gradient(circle at center, transparent 40%, #2ece714a 70%, #16a0857b 100%),
                url('.././assets/boardB.webp');
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
        }

        .image-front.motor-bg {
            background-image:
                radial-gradient(circle at top, transparent 40%, #0d2cda4a 70%, #1b791f7b 90%),
                url('.././assets/flota.jpg');
            background-size: contain; 
            background-position: center; 
            background-repeat: no-repeat; 
            width: 100%; 
            height: 100%;
        }

        .image-back.motor-info {
            background-image:
                url('.././assets/engine.webp');
            background-size: contain; 
            background-position: center; 
            background-repeat: no-repeat; 
            width: 100%; 
            height: 100%;
        }

        .nav-overlay {
            position: absolute;
            bottom: 20px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 15px;
            z-index: 3;
            padding: 0 20px;
            transition: all 0.3s ease;
        }

        .nav-item {
            cursor: pointer;
            padding: 12px 25px;
            background: rgba(255, 255, 255, 0.4);
            color: #182848;
            border-radius: 5px;
            transition: all 0.3s ease;
            font-weight: 600;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .nav-item:hover {
            background: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .nav-item.active {
            background: #182848;
            color: white;
        }

        /* Estilos para el carrusel de tarjetas - MEJORADO */
        .cards-carousel {
            position: relative;
            margin: 40px 0;
            overflow: hidden;
            width: 100%;
        }

        .carousel-container {
            display: flex;
            transition: transform 0.5s ease;
            width: 100%;
        }

        .carousel-item {
            flex: 0 0 100%;
            padding: 0 15px;
            box-sizing: border-box;
            transition: opacity 0.3s ease;
        }

        .info-card {
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease;
            height: 100%;
            min-height: 220px;
        }

        .info-card:hover {
            transform: translateY(-5px);
        }

        .info-card h4 {
            color: #182848;
            margin-bottom: 15px;
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .info-card h4 i {
            color: #3498db;
        }

        .carousel-controls {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            gap: 10px;
        }

        .carousel-control {
            background: #182848;
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .carousel-control:hover {
            background: #3498db;
            transform: scale(1.1);
        }

        .carousel-dots {
            display: flex;
            justify-content: center;
            margin-top: 15px;
            gap: 8px;
        }

        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ccc;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .dot.active {
            background: #182848;
            transform: scale(1.2);
        }

        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin: 30px 0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }

        .comparison-table th,
        .comparison-table td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #e2e8f0;
        }

        .comparison-table th {
            background-color: #182848;
            color: white;
            font-weight: 600;
        }

        .comparison-table tr:nth-child(even) {
            background-color: #f8fafc;
        }

        .comparison-table tr:last-child td {
            border-bottom: none;
        }

        .highlight {
            background-color: #ffeaa7 !important;
            font-weight: 600;
        }

        .benefit {
            flex: 1;
            min-width: 250px;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }

        .benefit h4 {
            color: #182848;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .benefit h4 i {
            color: #2ecc71;
        }

        /* Estilos para el sistema "Saber más" */
        .expandable-content {
            max-height: 200px;
            overflow: hidden;
            position: relative;
            transition: max-height 0.5s ease;
        }

        .expandable-content.expanded {
            max-height: 2000px;
        }

        .expandable-content::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 100%);
            opacity: 1;
            transition: opacity 0.3s ease;
        }

        .expandable-content.expanded::after {
            opacity: 0;
        }

        .read-more-btn {
            display: block;
            margin: 15px auto;
            padding: 10px 20px;
            background: #182848;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            text-align: center;
        }

        .read-more-btn:hover {
            background: #3498db;
            transform: translateY(-2px);
        }

        /* Animaciones */
        .animate-fadeIn {
            animation: fadeIn 1s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

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

        /* ========== MEDIA QUERIES PARA DISPOSITIVOS MÓVILES ========== */
        @media (max-width: 991px) {
            .combined-section {
                padding: 40px 0;
                min-height: auto;
            }
            
            .section-heading {
                margin-bottom: 40px;
            }
            
            .section-heading h2 {
                font-size: 2rem;
            }
            
            .section-heading p {
                font-size: 1.1rem;
            }
            
            .content-panel {
                overflow: visible;
                min-height: auto;
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            }
            
            .text-content {
                padding: 30px;
                order: 2;
            }
            
            .text-content h3 {
                font-size: 1.6rem;
            }
            
            .text-content p {
                font-size: 1rem;
            }
            
            .text-content ul {
                padding-left: 25px;
            }
            
            .image-content {
                min-height: 300px;
                order: 1;
            }
            
            .image-flip-container {
                height: 300px;
            }
            
            .back-content h4 {
                font-size: 1.3rem;
            }
            
            .back-content p {
                max-width: 90%;
                font-size: 0.9rem;
            }
            
            .flip-button {
                bottom: 15px;
                right: 15px;
                width: 35px;
                height: 35px;
            }
            
            .nav-overlay {
                position: relative;
                display: flex;
                justify-content: center;
                gap: 10px;
                padding: 20px 15px 15px;
                flex-wrap: wrap;
                order: 3;
                background: white;
                border-top: 1px solid #e2e8f0;
                bottom: 0;
                left: 0;
                right: 0;
            }
            
            .nav-item {
                padding: 10px 15px;
                font-size: 0.9rem;
                min-width: 120px;
                flex: 1;
                justify-content: center;
            }
            
            .componentes {
                padding-bottom: 2rem;
            }
            
            .info-card {
                padding: 20px;
                min-height: 200px;
            }
            
            .info-card h4 {
                font-size: 1.2rem;
            }
            
            .comparison-table th,
            .comparison-table td {
                padding: 12px;
                font-size: 0.9rem;
            }
            
            .expandable-content {
                max-height: 150px;
            }
        }

        /* ========== MEDIA QUERIES PARA ESCRITORIO ========== */
        @media (min-width: 992px) {
            .content-section.active {
                flex-direction: row;
            }
            
            .image-content {
                flex: 1;
                min-height: 500px;
            }
            
            .text-content {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
            
            .nav-overlay {
                top: 20px;
                left: 20px;
                right: auto;
                bottom: auto;
                flex-direction: column;
                justify-content: flex-start;
            }
            
            /* Carrusel en escritorio: mostrar 3 tarjetas a la vez */
            .carousel-item {
                flex: 0 0 calc(33.333% - 30px);
            }
            
            .carousel-container {
                flex-wrap: wrap;
                justify-content: center;
                gap: 15px;
                transform: none !important;
            }
            
            .carousel-controls,
            .carousel-dots {
                display: none;
            }
        }

        /* Ajustes adicionales para pantallas muy pequeñas */
        @media (max-width: 480px) {
            .section-heading h2 {
                font-size: 1.8rem;
            }
            
            .text-content {
                padding: 20px;
            }
            
            .text-content h3 {
                font-size: 1.4rem;
            }
            
            .nav-item {
                min-width: 100px;
                font-size: 0.85rem;
                padding: 8px 12px;
            }
            
            .image-flip-container {
                height: 250px;
            }
        }
 





    
        /* Estilos para el chatbot (se añadirán dinámicamente) */
        .chatbot-styles {
            display: none;
        }

        /* Estilos para la burbuja de chat (añadidos directamente) */
        .chat-bubble {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            z-index: 9999;
            transition: transform 0.3s ease;
        }

        .chat-bubble:hover {
            transform: scale(1.1);
        }

        .chat-bubble svg {
            width: 30px;
            height: 30px;
        }

        .notification-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: #ef4444;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            font-weight: bold;
        }

        .hidden {
            display: none !important;
        }