:root {
       --primary: #0056b3;
       --secondary: #e63946;
       --light: #f8f9fa;
       --dark: #212529;
       --gray: #6c757d;
       --transition: all 0.3s ease;
   }

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

   body {
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       line-height: 1.6;
       color: #333;
       background-color: #f5f7fa;
       z-index:500;
   }




   body {
       background: #f8f9fa;
       padding-top: 160px;
       transition: padding-top 0.4s ease;
   }

   /* 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 encima y apuntando hacia arriba */
   .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;
   }

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

   .contact-info .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;
   }
   .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 - Nueva animación */
   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;
   }

   /* Hero section para demostración */
   .hero {
       height: 100vh;
       background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1683&q=80');
       background-size: cover;
       background-position: center;
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       text-align: center;
       padding: 0 20px;
   }

   .hero-content {
       max-width: 800px;
   }

   .hero h1 {
       font-size: 3.5rem;
       margin-bottom: 20px;
       text-transform: uppercase;
       letter-spacing: 1px;
   }

   .hero p {
       font-size: 1.2rem;
       margin-bottom: 30px;
       line-height: 1.6;
   }

   .content-section {
       padding: 80px 20px;
       max-width: 1200px;
       margin: 0 auto;
   }

   .content-section h2 {
       text-align: center;
       margin-bottom: 50px;
       font-size: 2.5rem;
       color: #222;
       position: relative;
       padding-bottom: 15px;
   }

   .content-section h2::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 50%;
       transform: translateX(-50%);
       width: 100px;
       height: 3px;
       background: #f60a0c;
   }

   .services-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 30px;
   }

   .service-card {
       background: white;
       border-radius: 8px;
       overflow: hidden;
       box-shadow: 0 5px 15px rgba(0,0,0,0.1);
       transition: transform 0.3s ease;
   }

   .service-card:hover {
       transform: translateY(-10px);
   }

   .service-card img {
       width: 100%;
       height: 200px;
       object-fit: cover;
   }

   .service-content {
       padding: 20px;
   }

   .service-content h3 {
       color: #222;
       margin-bottom: 10px;
       font-size: 1.5rem;
   }

   .service-content p {
       color: #666;
       line-height: 1.6;
   }

   /* 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;
       }

       .hero h1 {
           font-size: 2.5rem;
       }

       body {
           padding-top: 170px;
       }
   }




   .container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 20px;
   }

   .section-title {
       text-align: center;
       font-size: 2.5rem;
       margin-bottom: 15px;
       color: var(--primary);
       font-weight: 700;
   }

   .section-subtitle {
       text-align: center;
       font-size: 1.25rem;
       color: var(--gray);
       margin-bottom: 40px;
       max-width: 800px;
       margin-left: auto;
       margin-right: auto;
   }

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

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

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

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

   /* Carrusel */
   .satelite-carousel-container {
       margin-bottom: 50px;
       border-radius: 12px;
       overflow: hidden;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
       background: white;
   }

   .innovative-carousel {
       position: relative;
       overflow: hidden;
       height: 500px;
   }

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

   .carousel-slide {
       min-width: 100%;
       position: relative;
   }

   .carousel-slide img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }

   .carousel-slide-content {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
       color: white;
       padding: 30px;
   }

   .carousel-slide-title {
       font-size: 1.8rem;
       margin-bottom: 10px;
       color: white;
   }

   .carousel-slide-desc {
       font-size: 1.1rem;
       opacity: 0.9;
   }

   .carousel-nav {
       position: absolute;
       top: 50%;
       width: 100%;
       display: flex;
       justify-content: space-between;
       transform: translateY(-50%);
       z-index: 10;
   }

   .carousel-btn {
       background: rgba(255, 255, 255, 0.7);
       color: var(--primary);
       width: 50px;
       height: 50px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       margin: 0 20px;
       transition: var(--transition);
       font-size: 1.2rem;
   }

   .carousel-btn:hover {
       background: white;
       transform: scale(1.1);
   }

   .carousel-controls {
       position: absolute;
       bottom: 20px;
       left: 0;
       right: 0;
       display: flex;
       justify-content: center;
       gap: 10px;
       z-index: 10;
   }

   .carousel-indicator {
       width: 12px;
       height: 12px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.5);
       cursor: pointer;
       transition: var(--transition);
   }

   .carousel-indicator.active {
       background: white;
       transform: scale(1.2);
   }

   /* Contenido principal */
   .satelite-content-wrapper {
       display: flex;
       flex-wrap: wrap;
       gap: 30px;
       margin-bottom: 50px;
   }

   .satelite-info-container {
       flex: 1;
       min-width: 300px;
       background: white;
       border-radius: 12px;
       padding: 30px;
       box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
   }

   .satelite-info-header {
       text-align: center;
       margin-bottom: 30px;
   }

   .satelite-info-title {
       font-size: 1.8rem;
       color: var(--primary);
       margin-bottom: 10px;
   }

   .satelite-info-subtitle {
       color: var(--gray);
       font-size: 1.1rem;
   }

   /* Tarjetas de características */
   .features-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 20px;
       margin-bottom: 30px;
   }

   .feature-card {
       background: #f8f9ff;
       border-radius: 10px;
       padding: 25px 20px;
       text-align: center;
       transition: var(--transition);
       border: 1px solid #eaefff;
   }

   .feature-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
       border-color: var(--primary);
   }

   .feature-icon {
       width: 60px;
       height: 60px;
       background: var(--primary);
       color: white;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 15px;
       font-size: 1.5rem;
   }

   .feature-title {
       font-size: 1.2rem;
       margin-bottom: 10px;
       color: var(--dark);
   }

   .feature-desc {
       color: var(--gray);
       font-size: 0.95rem;
   }

   /* Especificaciones */
   .specs-section {
       background: #f0f7ff;
       border-radius: 10px;
       padding: 25px;
       margin-bottom: 30px;
   }

   .specs-title {
       font-size: 1.4rem;
       color: var(--primary);
       margin-bottom: 15px;
       text-align: center;
   }

   .specs-list {
       list-style: none;
   }

   .specs-list li {
       padding: 10px 0;
       border-bottom: 1px solid #e1e8f0;
       display: flex;
       align-items: flex-start;
   }

   .specs-list li:last-child {
       border-bottom: none;
   }

   .specs-list i {
       color: var(--secondary);
       margin-right: 10px;
       margin-top: 5px;
   }

   /* Beneficios */
   .benefits-highlight {
       display: flex;
       flex-wrap: wrap;
       gap: 20px;
       margin-bottom: 30px;
   }

   .benefit-item {
       flex: 1;
       min-width: 250px;
       display: flex;
       align-items: center;
       background: #fff9f0;
       padding: 15px 20px;
       border-radius: 8px;
       border-left: 4px solid var(--secondary);
   }

   .benefit-item i {
       font-size: 1.8rem;
       color: var(--secondary);
       margin-right: 15px;
   }

   /* Nueva sección de información adicional */
   .advanced-info {
       background: white;
       border-radius: 12px;
       padding: 30px;
       margin-top: 30px;
       box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
   }

   .info-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 30px;
       margin-top: 20px;
   }

   .info-card {
       background: #f8f9ff;
       border-radius: 10px;
       padding: 25px;
       border: 1px solid #eaefff;
   }

   .info-card h3 {
       color: var(--primary);
       margin-bottom: 15px;
       font-size: 1.4rem;
       display: flex;
       align-items: center;
   }

   .info-card h3 i {
       margin-right: 10px;
       color: var(--secondary);
   }

   .info-card ul {
       list-style: none;
       padding-left: 10px;
   }

   .info-card li {
       margin-bottom: 10px;
       padding-left: 25px;
       position: relative;
   }

   .info-card li:before {
       content: "•";
       color: var(--secondary);
       font-size: 1.5rem;
       position: absolute;
       left: 0;
       top: -5px;
   }

   .approval-section {
       background: #f0f7ff;
       padding: 20px;
       border-radius: 10px;
       text-align: center;
       margin-top: 30px;
   }

   .approval-section p {
       margin-bottom: 10px;
       font-weight: 500;
   }

   .approval-badges {
       display: flex;
       justify-content: center;
       gap: 30px;
       margin-top: 15px;
       flex-wrap: wrap;
   }

   .badge {
       display: flex;
       flex-direction: column;
       align-items: center;
   }

   .badge-icon {
       width: 50px;
       height: 50px;
       background: var(--primary);
       color: white;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.5rem;
       margin-bottom: 10px;
   }

   /* CTA */
   .cta-container {
       text-align: center;
       margin-top: 30px;
   }

   .cta-button {
       display: inline-block;
       background: var(--primary);
       color: white;
       padding: 15px 40px;
       border-radius: 50px;
       text-decoration: none;
       font-weight: 600;
       font-size: 1.1rem;
       transition: var(--transition);
       box-shadow: 0 5px 15px rgba(0, 86, 179, 0.3);
   }

   .cta-button:hover {
       background: #004494;
       transform: translateY(-3px);
       box-shadow: 0 8px 20px rgba(0, 86, 179, 0.4);
   }

   /* Responsive */
   @media (max-width: 768px) {
       .innovative-carousel {
           height: 400px;
       }

       .section-title {
           font-size: 2rem;
       }

       .section-subtitle {
           font-size: 1.1rem;
       }
   }

   @media (max-width: 480px) {
       .innovative-carousel {
           height: 300px;
       }

       .carousel-slide-title {
           font-size: 1.4rem;
       }

       .carousel-slide-desc {
           font-size: 0.9rem;
       }

       .carousel-btn {
           width: 40px;
           height: 40px;
           font-size: 1rem;
       }
   }
 :root {
     --primary: #2563eb;
     --primary-dark: #1d4ed8;
     --secondary: #10b981;
     --accent: #7c3aed;
     --orange: #f97316;
     --dark: #1f2937;
     --light: #f9fafb;
     --gray: #6b7280;
     --gray-light: #e5e7eb;
 }

 .carousel-slide {
     position: relative;

 }

 .carousel-slide-bg {
     width: 100%;
     height: 100%;
     background-size: cover; /* Cubre todo el contenedor */
       background-position: top center;
 }

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

 body {
     font-family: 'Inter', sans-serif;
     color: var(--dark);
     line-height: 1.6;
     overflow-x: hidden;
     background-color: #f8fafc;
 }

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

 section {
     padding: 80px 0;
 }

 .section-title {
     font-size: 2.5rem;
     font-weight: 800;
     text-align: center;
     margin-bottom: 15px;
     color: var(--dark);
 }

 .section-subtitle {
     font-size: 1.2rem;
     text-align: center;
     margin-bottom: 50px;
     color: var(--gray);
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
 }

 /* Hero Section */
 .hero-section {
     position: relative;
     height: 100vh;
     min-height: 700px;
     background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
     url('https://www.kivi-mobilityfreedom.es/media/prodotti/satelite_multifuncion_pv1102/foto/PV%201102%20SATELITE%20MULTIFUNCION%20AL%20VOLANTE.jpg') no-repeat center center/cover;
     display: flex;
     align-items: center;
     color: white;
     overflow: hidden;
 }

 .hero-content {
     position: relative;
     z-index: 2;
     max-width: 900px;
     text-align: center;
     margin: 0 auto;
     padding: 20px;
 }

 .hero-title {
     font-size: 2.5rem;
     font-weight: 800;
     line-height: 1.2;
     margin-bottom: 1.5rem;
 }

 .hero-gradient-text {
     background: linear-gradient(90deg, #3b82f6, #10b981);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     display: block;
 }

 .hero-subtitle {
     font-size: 1.2rem;
     font-weight: 300;
     margin-bottom: 2rem;
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
 }

 .hero-button {
     display: inline-block;
     background: var(--primary);
     color: white;
     font-weight: 600;
     font-size: 1.1rem;
     padding: 14px 30px;
     border-radius: 50px;
     text-decoration: none;
     transition: all 0.3s ease;
     border: 2px solid transparent;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }

 .hero-button:hover {
     background: transparent;
     border-color: white;
     transform: translateY(-3px);
     box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
 }

 /* Hero Navigation Cards */
 .hero-nav-cards {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 15px;
     margin: 30px 0;
 }

 .nav-card {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     width: 140px;
     height: 120px;
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     border-radius: 15px;
     border: 1px solid rgba(255, 255, 255, 0.2);
     color: white;
     text-decoration: none;
     transition: all 0.3s ease;
     padding: 10px;
     text-align: center;
     cursor: pointer;
 }

 .nav-card:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }

 .nav-card-icon {
     font-size: 1.8rem;
     margin-bottom: 8px;
     color: white;
 }

 .nav-card span {
     font-weight: 500;
     font-size: 0.85rem;
 }

 .certifications {
     position: absolute;
     bottom: 20px;
     left: 0;
     right: 0;
     display: flex;
     justify-content: center;
     gap: 15px;
     opacity: 0.8;
 }

 .certifications img {
     height: 30px;
     filter: brightness(0) invert(1);
 }

 /* Benefits Section */
 .benefits-section {
     background-color: var(--light);
 }

 .benefits-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 25px;
     max-width: 1200px;
     margin: 0 auto;
 }

 .flip-card {
     perspective: 1000px;
     height: 350px;
 }

 .flip-card-inner {
     position: relative;
     width: 100%;
     height: 100%;
     transition: transform 0.8s;
     transform-style: preserve-3d;
     box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
     border-radius: 15px;
 }

 .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: 15px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 25px;
     text-align: center;
 }

 .flip-card-front {
     background-color: white;
 }

 .flip-card-back {
     background-color: var(--primary);
     color: white;
     transform: rotateY(180deg);
     justify-content: flex-start;
     padding-top: 30px;
 }

 .card-icon {
     width: 70px;
     height: 70px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 15px;
     font-size: 26px;
 }

 .bg-blue-100 { background-color: #dbeafe; }
 .bg-green-100 { background-color: #dcfce7; }
 .bg-purple-100 { background-color: #ede9fe; }
 .bg-orange-100 { background-color: #ffedd5; }

 .border-blue-200 { border: 2px solid #bfdbfe; }
 .border-green-200 { border: 2px solid #bbf7d0; }
 .border-purple-200 { border: 2px solid #ddd6fe; }
 .border-orange-200 { border: 2px solid #fed7aa; }

 .text-blue-600 { color: #2563eb; }
 .text-green-600 { color: #10b981; }
 .text-purple-600 { color: #7c3aed; }
 .text-orange-600 { color: #f97316; }

 .card-title {
     font-size: 1.6rem;
     font-weight: 700;
     margin-bottom: 12px;
 }

 .card-description {
     font-size: 1rem;
     color: var(--gray);
 }

 .card-details {
     list-style: none;
     text-align: left;
     font-size: 1rem;
     line-height: 1.7;
 }

 .card-details li {
     margin-bottom: 8px;
     display: flex;
     align-items: flex-start;
 }

 .card-details li span {
     margin-right: 8px;
     font-weight: bold;
 }

 /* Products Section */
 .products-section {
     background-color: #f3f4f6;
 }

 .products-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
     gap: 30px;
     max-width: 1200px;
     margin: 0 auto;
 }

 .product-card {
     background: white;
     border-radius: 18px;
     overflow: hidden;
     box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
     display: flex;
     flex-direction: column;
 }

 .product-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
 }

 .product-image {
     height: 280px;
     overflow: hidden;
     position: relative;
 }

 .product-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
 }

 .product-card:hover .product-image img {
     transform: scale(1.05);
 }

 .product-tag {
     position: absolute;
     top: 15px;
     right: 15px;
     background: var(--primary);
     color: white;
     padding: 6px 16px;
     border-radius: 30px;
     font-size: 0.85rem;
     font-weight: 600;
 }

 .product-content {
     padding: 25px;
     flex-grow: 1;
     display: flex;
     flex-direction: column;
 }

 .product-title {
     font-size: 1.6rem;
     font-weight: 700;
     margin-bottom: 12px;
     color: var(--dark);
 }

 .product-description {
     font-size: 1rem;
     color: var(--gray);
     margin-bottom: 20px;
     flex-grow: 1;
 }

 .product-features {
     margin-bottom: 20px;
 }

 .product-features li {
     display: flex;
     align-items: center;
     margin-bottom: 10px;
     font-size: 1rem;
 }

 .product-features li i {
     color: var(--secondary);
     margin-right: 8px;
     font-size: 1.1rem;
 }

 .product-button {
     display: inline-block;
     background: var(--primary);
     color: white;
     font-weight: 600;
     padding: 12px 25px;
     border-radius: 50px;
     text-decoration: none;
     text-align: center;
     transition: all 0.3s ease;
     border: 2px solid transparent;
     margin-top: 10px;
     font-size: 1rem;
 }

 .product-button:hover {
     background: transparent;
     color: var(--primary);
     border-color: var(--primary);
 }

 .orange-button {
     background: var(--orange);
 }

 .orange-button:hover {
     background: transparent;
     color: var(--orange);
     border-color: var(--orange);
 }

 /* Video Section */
 .video-section {
     position: relative;
     background: linear-gradient(135deg, #1e3a8a, #0f172a);
     color: white;
 }

 .video-content {
     display: grid;
     grid-template-columns: 1fr;
     gap: 40px;
     align-items: center;
 }

 .video-wrapper {
     position: relative;
     padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
     height: 0;
     border-radius: 15px;
     overflow: hidden;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
 }

 .video-wrapper iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: none;
 }

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

 .video-text h2 {
     font-size: 2.5rem;
     font-weight: 800;
     line-height: 1.2;
     margin-bottom: 20px;
 }

 .video-text h2 span {
     color: #38bdf8;
 }

 .video-text p {
     font-size: 1.2rem;
     margin-bottom: 25px;
     font-weight: 300;
 }

 .feature {
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 1.1rem;
     margin-bottom: 15px;
     justify-content: center;
 }

 .feature .icon {
     font-size: 1.3rem;
     color: #38bdf8;
 }

 /* Kit de Rebaje Section - Mejorada */
 .kit-rebaje-section {
     background-color: #f0f9ff;
     position: relative;
     overflow: hidden;
 }


 .kit-rebaje-section::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23e0f2fe" opacity="0.3"/></svg>');
     z-index: -1;
 }


 .kit-carousel-container {
     flex: 1;
     min-width: 0;
 }

 .kit-info-container {
     flex: 1;
 }

 /* Carrusel Innovador */
 .innovative-carousel {
     position: relative;
     border-radius: 18px;
     overflow: hidden;
     box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.2);
     height: 400px;
 }


 .carousel-slides {
     display: flex;
     height: 100%;
     transition: transform 0.6s ease-in-out;
 }

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

 .carousel-slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
 }

 .carousel-slide-content {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: linear-gradient(transparent, rgba(0,0,0,0.8));
     padding: 25px;
     color: white;
 }

 .carousel-slide-title {
     font-size: 1.5rem;
     margin-bottom: 8px;
 }

 .carousel-slide-desc {
     font-size: 0.95rem;
     max-width: 90%;
 }

 .carousel-controls {
     position: absolute;
     bottom: 12px;
     left: 0;
     right: 0;
     display: flex;
     justify-content: center;
     gap: 6px;
     z-index: 10;
 }


 /* Satélites Section */
 .satelites-section {
     background-color: #f8fafc;
     position: relative;
     overflow: hidden;
 }

 .satelite-content-wrapper {
     display: flex;
     flex-direction: column;
     gap: 40px;
 }

 @media (min-width: 992px) {
     .satelite-content-wrapper {
         flex-direction: row;
     }
 }

 .satelite-carousel-container {
     flex: 1;
     min-width: 0;
 }

 .satelite-info-container {
     flex: 1;
 }

 .satelite-info-header {
     margin-bottom: 25px;
 }

 .satelite-info-title {
     font-size: 2rem;
     color: var(--dark);
     margin-bottom: 12px;
 }

 .satelite-info-subtitle {
     font-size: 1.1rem;
     color: var(--gray);
 }

 .features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
     margin: 30px 0;
 }

 .feature-card {
     background: white;
     border-radius: 12px;
     padding: 20px;
     box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
     text-align: center;
 }

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

 .feature-icon {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background: #dbeafe;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 15px;
     font-size: 1.5rem;
     color: var(--primary);
 }

 .feature-title {
     font-size: 1.2rem;
     font-weight: 600;
     margin-bottom: 8px;
     color: var(--dark);
 }

 .feature-desc {
     color: var(--gray);
     font-size: 0.95rem;
 }

 .specs-section {
     background: white;
     border-radius: 15px;
     padding: 25px;
     margin: 30px 0;
     box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.1);
 }

 .specs-title {
     font-size: 1.4rem;
     color: var(--dark);
     margin-bottom: 15px;
     text-align: center;
 }

 .specs-list {
     list-style: none;
 }

 .specs-list li {
     margin-bottom: 12px;
     display: flex;
     align-items: flex-start;
     gap: 10px;
 }

 .specs-list li i {
     color: var(--primary);
     margin-top: 5px;
 }

 .benefits-highlight {
     display: flex;
     gap: 15px;
     flex-wrap: wrap;
     margin: 20px 0;
 }

 .benefit-item {
     display: flex;
     align-items: center;
     gap: 10px;
     background: rgba(16, 185, 129, 0.1);
     padding: 12px 20px;
     border-radius: 30px;
     font-size: 0.95rem;
     color: #065f46;
 }

 .benefit-item i {
     color: #047857;
     font-size: 1.2rem;
 }

 .carousel-indicator {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.5);
     cursor: pointer;
     transition: all 0.3s ease;
 }

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

 .carousel-nav {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 100%;
     display: flex;
     justify-content: space-between;
     padding: 0 10px;
     z-index: 10;
 }

 .carousel-btn {
     background: rgba(255, 255, 255, 0.7);
     color: var(--dark);
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s ease;
     font-size: 1.2rem;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 }

 .carousel-btn:hover {
     background: white;
     transform: scale(1.1);
 }

 /* Info Container */
 .kit-info-header {
     margin-bottom: 25px;
     text-align: center;
 }

 .kit-info-title {
     font-size: 2rem;
     color: var(--dark);
     margin-bottom: 12px;
 }

 .kit-info-subtitle {
     font-size: 1.1rem;
     color: var(--gray);
 }

 .benefits-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
     margin-bottom: 30px;
 }

 .benefit-card {
     background: white;
     border-radius: 12px;
     padding: 20px;
     box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
 }

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

 .benefit-icon {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: #dbeafe;
     margin: 0 auto 15px;
     font-size: 1.5rem;
     color: var(--primary);
 }

 .benefit-title {
     font-size: 1.2rem;
     font-weight: 600;
     margin-bottom: 8px;
     color: var(--dark);
     text-align: center;
 }

 .benefit-description {
     color: var(--gray);
     font-size: 0.95rem;
     text-align: center;
 }

 .access-process {
     background: white;
     border-radius: 15px;
     padding: 25px;
     box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.1);
 }

 .process-title {
     font-size: 1.6rem;
     color: var(--dark);
     margin-bottom: 20px;
     text-align: center;
 }

 .process-steps {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 15px;
 }

 .process-step {
     text-align: center;
     padding: 15px;
 }

 .step-number {
     width: 35px;
     height: 35px;
     border-radius: 50%;
     background: var(--primary);
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 12px;
     font-weight: bold;
     font-size: 1.1rem;
 }

 .step-icon {
     font-size: 2rem;
     color: var(--primary);
     margin-bottom: 12px;
 }

 .step-title {
     font-weight: 600;
     margin-bottom: 8px;
     font-size: 1.1rem;
 }

 .step-description {
     color: var(--gray);
     font-size: 0.9rem;
 }

 .cta-container {
     margin-top: 30px;
     text-align: center;
 }

 .cta-button {
     display: inline-block;
     background: var(--primary);
     color: white;
     font-weight: 600;
     font-size: 1.1rem;
     padding: 14px 35px;
     border-radius: 50px;
     text-decoration: none;
     transition: all 0.3s ease;
     border: 2px solid transparent;
     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
     margin-bottom: 15px;
 }

 .cta-button:hover {
     background: transparent;
     border-color: var(--primary);
     color: var(--primary);
     transform: translateY(-3px);
     box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
 }

 .guarantee-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: rgba(16, 185, 129, 0.1);
     color: #0f766e;
     padding: 10px 20px;
     border-radius: 50px;
     font-weight: 500;
     font-size: 0.95rem;
 }

 .guarantee-badge i {
     color: #0d9488;
 }

 /* Services Section */
 .services-section {
     background-color: white;
 }

 /* Form Section */
 .form-section {
     background: linear-gradient(135deg, #0f172a, #1e293b);
     color: white;
 }

 .form-section h2 {
     font-size: 2.5rem;
     text-align: center;
     margin-bottom: 15px;
 }

 .form-section p {
     font-size: 1.2rem;
     text-align: center;
     margin-bottom: 40px;
     color: #cbd5e1;
 }

 .contact-form {
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 18px;
     padding: 30px;
     max-width: 900px;
     margin: 0 auto;
 }

 .form-group {
     margin-bottom: 20px;
 }

 label {
     display: block;
     margin-bottom: 6px;
     font-weight: 500;
     color: #e2e8f0;
     font-size: 0.95rem;
 }

 input, select, textarea {
     width: 100%;
     padding: 12px 16px;
     border-radius: 10px;
     border: 1px solid #334155;
     background: rgba(15, 23, 42, 0.5);
     color: white;
     font-size: 1rem;
     transition: all 0.3s ease;
 }

 input:focus, select:focus, textarea:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
 }

 .grid {
     display: grid;
     gap: 15px;
 }

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

 .md\:grid-cols-2 {
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 }

 .checkbox-group {
     display: flex;
     align-items: center;
     margin-bottom: 25px;
     font-size: 0.95rem;
 }

 .checkbox-group input {
     width: auto;
     margin-right: 8px;
 }

 .checkbox-group a {
     color: var(--primary);
     text-decoration: none;
 }

 .checkbox-group a:hover {
     text-decoration: underline;
 }

 .form-button {
     display: block;
     width: 100%;
     padding: 16px;
     background: var(--primary);
     color: white;
     font-size: 1.1rem;
     font-weight: 600;
     border: none;
     border-radius: 12px;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .form-button:hover {
     background: var(--primary-dark);
     transform: translateY(-3px);
     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
 }

 .contact-info {

     text-align: center;
     margin-top: 30px;
     font-size: 1.1rem;
     color: #cbd5e1;
 }

 .contact-info .phone {

     padding: 8px 20px;

     margin: 12px 0;
     font-weight: 600;
     color: #10b981;
     text-decoration: none;
     transition: all 0.3s ease;
 }

 .contact-info .phone i {
     margin-right: 8px;
 }

 .contact-info .hours {
      font-size: 0.95rem;
     color: #94a3b8;
 }
 /* Contenedor principal */
 .contact-info p {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 /* Cada elemento hijo */
 .contact-info .block,
.contact-info a,
.contact-info div,
.contact-info .hours {
    display: inline !important;
    width: 100%;
}

 /* Footer */
 footer {
     background: #0f172a;
     color: white;
     padding: 40px 0 20px;
     text-align: center;
 }

 .footer-content {
     max-width: 800px;
     margin: 0 auto;
 }

 .footer-logo img {
     height: 50px;
     margin-bottom: 15px;
 }

 .chatbot-container {
     position: fixed;
     bottom: 1rem;
     right: 1rem;
     width: 40%;
     height: 500px
    z-index:10;
 }

 .chatbot-container:active {
     position: fixed;
     bottom: 1rem;
     right: 1rem;

     height: 500px;
 }



 @media (max-width: 768px) {
     .chatbot-container {
         position: fixed;
         bottom: 1rem;
         right: 1rem;
         z-index: 1000;
         width: 90%;
         height: 500px;
     }
 }

 @media (max-width: 767px) {
     .hero-section {
         height: auto;
         min-height: auto;
         padding: 60px 0 30px;
     }

     .hero-content {
         padding: 15px;
     }

     .hero-title {
         font-size: 1.8rem;
         margin-bottom: 1rem;
         line-height: 1.3;
     }

     .hero-subtitle {
         font-size: 1rem;
         margin-bottom: 1.5rem;
     }

     /* Nueva solución para tarjetas en móviles */
     .hero-nav-cards {
         flex-wrap: nowrap;
         overflow-x: auto;
         justify-content: flex-start;
         padding-bottom: 10px;
         margin: 20px -15px;
         -ms-overflow-style: none;  /* IE and Edge */
         scrollbar-width: none;  /* Firefox */
     }

     .hero-nav-cards::-webkit-scrollbar {
         display: none; /* Chrome, Safari, Opera*/
     }

     .nav-card {
         flex-shrink: 0;
         width: 110px;
         height: 100px;
         margin: 0 5px;
     }

     .nav-card-icon {
         font-size: 1.5rem;
     }

     .nav-card span {
         font-size: 0.75rem;
     }

     .hero-button {
         font-size: 1rem;
         padding: 12px 25px;
     }

     .certifications {
         position: relative;
         bottom: auto;
         margin-top: 25px;
         opacity: 0.7;
     }
 }

 /* Ajustes adicionales para pantallas muy pequeñas */
 @media (max-width: 480px) {
     .hero-title {
         font-size: 1.6rem;
     }

     .nav-card {
         width: 100px;
         height: 90px;
     }
 }


 .footer-text {
     font-size: 1rem;
     color: #cbd5e1;
     margin-bottom: 25px;
     max-width: 600px;
     margin-left: auto;
     margin-right: auto;
 }

 .footer-links {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 15px;
     margin-bottom: 25px;
 }

 .footer-links a {
     color: #94a3b8;
     text-decoration: none;
     transition: color 0.3s;
     font-size: 0.95rem;
 }

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

 .copyright {
     font-size: 0.85rem;
     color: #64748b;
     padding-top: 15px;
     border-top: 1px solid #1e293b;
 }

 /* Animations */
 .animate-fadeInUp {
     animation: fadeInUp 1s ease forwards;
 }

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

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

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

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

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



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

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

 /* Nuevos estilos para la sección de rebaje */
 .spec-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
     margin: 30px 0;
 }

 .spec-card {
     background: white;
     border-radius: 12px;
     padding: 20px;
     box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.1);
     text-align: center;
     transition: transform 0.3s ease;
 }

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

 .spec-title {
     font-weight: 600;
     margin-bottom: 10px;
     color: var(--primary);
     font-size: 1.1rem;
 }

 .spec-value {
     font-weight: 700;
     font-size: 1.4rem;
     color: var(--dark);
 }

 .spec-unit {
     font-size: 0.9rem;
     color: var(--gray);
 }

 .option-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 15px;
     margin: 25px 0;
 }

 .option-card {
     background: rgba(255, 255, 255, 0.7);
     border-radius: 12px;
     padding: 20px;
     text-align: center;
     border: 1px solid var(--gray-light);
 }

 .option-icon {
     font-size: 2rem;
     color: var(--primary);
     margin-bottom: 15px;
 }

 .option-title {
     font-weight: 600;
     margin-bottom: 8px;
     color: var(--dark);
 }

 .option-description {
     color: var(--gray);
     font-size: 0.9rem;
 }

 .feature-highlight {
     background: rgba(37, 99, 235, 0.1);
     border-radius: 12px;
     padding: 25px;
     margin: 30px 0;
     text-align: center;
 }

 .feature-title {
     font-size: 1.6rem;
     color: var(--primary);
     margin-bottom: 15px;
 }

 .feature-list {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 20px;
     text-align: left;
 }

 .feature-list li {
     margin-bottom: 12px;
     display: flex;
     align-items: flex-start;
 }

 .feature-list li i {
     color: var(--primary);
     margin-right: 10px;
     margin-top: 4px;
 }

 /* Responsive */
 @media (min-width: 768px) {
     .section-title {
         font-size: 2.8rem;
     }
     .section-subtitle {
         font-size: 1.3rem;
         margin-bottom: 70px;
     }
     .hero-title {
         font-size: 3.2rem;
     }
     .hero-subtitle {
         font-size: 1.4rem;
     }
     .hero-nav-cards {
         gap: 25px;
         margin: 40px 0;
     }
     .nav-card {
         width: 160px;
         height: 140px;
     }
     .nav-card-icon {
         font-size: 2rem;
     }
     .nav-card span {
         font-size: 0.95rem;
     }
     .hero-button {
         font-size: 1.2rem;
         padding: 15px 35px;
     }
     .video-content {
         grid-template-columns: 1fr 1fr;
         gap: 50px;
     }
     .video-text {
         text-align: left;
     }
     .video-text h2 {
         font-size: 3rem;
     }
     .video-text p {
         font-size: 1.4rem;
     }
     .feature {
         justify-content: flex-start;
     }
     .kit-content-wrapper {

     }
     .kit-info-header {
         text-align: left;
     }
     .benefit-card {
         text-align: left;
     }
     .benefit-icon {
         margin: 0 0 15px 0;
     }
     .benefit-title, .benefit-description {
         text-align: left;
     }
 }

 @media (min-width: 992px) {
     .section-title {
         font-size: 3rem;
     }
     .hero-title {
         font-size: 3.5rem;
     }
     .nav-card {
         width: 180px;
         height: 150px;
     }
     .innovative-carousel {
         height: 450px;
     }
 }

 .requirements-section {
     background: white;
     border-radius: 16px;
     padding: 30px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
     margin: 30px 0;
 }

 .requirements-header {
     text-align: center;
     margin-bottom: 30px;
     position: relative;
     padding-bottom: 20px;
 }

 .requirements-header::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 3px;
     background: linear-gradient(to right, var(--primary), var(--secondary));
     border-radius: 3px;
 }

 .requirements-icon {
     width: 70px;
     height: 70px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--primary), var(--accent));
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     color: white;
     font-size: 1.8rem;
 }

 .requirements-header h3 {
     font-size: 1.8rem;
     color: var(--dark);
     margin-bottom: 8px;
 }

 .requirements-subtitle {
     color: var(--gray);
     font-size: 1.1rem;
     max-width: 500px;
     margin: 0 auto;
 }

 .requirements-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 25px;
     margin: 30px 0;
 }

 .requirement-card {
     background: #f8fafc;
     border-radius: 12px;
     padding: 25px 20px;
     display: flex;
     align-items: center;
     gap: 15px;
     transition: all 0.3s ease;
     border: 1px solid #e2e8f0;
 }

 .requirement-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
     border-color: var(--primary);
 }

 .requirement-icon {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background: #dbeafe;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     color: var(--primary);
     flex-shrink: 0;
 }

 .requirement-content {
     flex-grow: 1;
 }

 .requirement-title {
     font-size: 1.1rem;
     font-weight: 600;
     color: var(--gray);
     margin-bottom: 5px;
 }

 .requirement-value {
     font-size: 1.3rem;
     font-weight: 700;
     color: var(--dark);
 }

 .requirements-note {
     background: rgba(16, 185, 129, 0.1);
     border-radius: 12px;
     padding: 20px;
     display: flex;
     align-items: center;
     gap: 15px;
     margin-top: 25px;
     border-left: 4px solid var(--secondary);
 }

 .note-icon {
     font-size: 1.8rem;
     color: var(--secondary);
 }

 .requirements-note p {
     margin: 0;
     font-size: 1.05rem;
     color: #0f766e;
 }

 .requirements-note strong {
     color: #065f46;
 }

 /* Responsive */
 @media (max-width: 768px) {
     .requirements-grid {
         grid-template-columns: 1fr;
     }

     .requirement-card {
         padding: 20px;
     }
 }

 .compat-transform-section {
     display: grid;
     grid-template-columns: 1fr;
     gap: 30px;
     margin: 30px 0;
     background: white;
     border-radius: 15px;
     padding: 20px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 }

 @media (min-width: 768px) {
     .compat-transform-section {
         grid-template-columns: 1fr 1fr;
         align-items: center;
     }
 }

 .key-benefits {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
     margin: 30px 0;
 }

 .benefit-card {
     background: white;
     border-radius: 12px;
     padding: 20px;
     box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
     text-align: center;
     border: 1px solid #e5e7eb;
 }

 .benefit-card:hover {
     transform: translateY(-5px);
     border-color: var(--primary);
 }

 .benefit-icon {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #dbeafe;
     margin: 0 auto 15px;
     font-size: 1.5rem;
     color: var(--primary);
 }

 .benefit-title {
     font-size: 1.2rem;
     font-weight: 600;
     margin-bottom: 8px;
     color: var(--dark);
 }

 .benefit-description {
     color: var(--gray);
     font-size: 0.95rem;
 }

 .unified-features {
     background: rgba(37, 99, 235, 0.05);
     border-radius: 15px;
     padding: 30px;
     margin: 40px 0;
     border: 1px solid rgba(37, 99, 235, 0.1);
 }

 .feature-title {
     font-size: 1.8rem;
     color: var(--primary);
     margin-bottom: 30px;
     text-align: center;
     position: relative;
     padding-bottom: 15px;
 }

 .feature-title::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 100px;
     height: 4px;
     background: var(--secondary);
     border-radius: 2px;
 }

 .feature-cards-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 25px;
 }

 .feature-card {
     background: white;
     border-radius: 12px;
     padding: 20px;
     text-align: center;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
     transition: all 0.3s ease;
     position: relative;
     border: 1px solid #e5e7eb;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .feature-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
     border-color: var(--primary);
 }

 .feature-card-icon {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--primary), var(--accent));
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 20px;
     color: white;
     font-size: 2rem;
 }

 .feature-card-title {
     font-size: 1.3rem;
     font-weight: 700;
     color: var(--dark);
     margin-bottom: 15px;
     line-height: 1.3;
 }

 .feature-card-desc {
     color: var(--gray);
     font-size: 1rem;
     line-height: 1.6;
     margin-bottom: 15px;
     flex-grow: 1;
 }

 .feature-tag {
     display: inline-block;
     background: var(--orange);
     color: white;
     padding: 5px 15px;
     border-radius: 20px;
     font-size: 0.85rem;
     font-weight: 600;
     margin-top: 10px;
 }

 /* Responsive */
 @media (max-width: 768px) {
     .feature-cards-grid {
         grid-template-columns: 1fr;
     }

     .feature-card {
         padding: 20px;
     }

     .compat-transform-section {
         grid-template-columns: 1fr;
     }
 }