:root {
     /* Paleta principal - Familia turquesa/cyan */
     --primary-50: #f0fdfd;
     --primary-100: #dcf8f8;
     --primary-200: #b4f0f0;
     --primary-300: #7ee4e4;
     --primary-400: #30cfd0;
     --primary-500: #26b6b7;
     --primary-600: #1d9495;
     --primary-700: #1a7879;
     --primary-800: #1a6061;
     --primary-900: #0c4a6e;

     /* Colores neutros */
     --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;

     /* Colores de estado */
     --success-500: #10b981;
     --error-500: #ef4444;
     --warning-500: #f59e0b;
     --accent-500: #f97316;

     /* Sombras profesionales */
     --shadow-sm: 0 1px 2px 0 rgba(48, 207, 208, 0.05);
     --shadow-md: 0 4px 6px -1px rgba(48, 207, 208, 0.1), 0 2px 4px -2px rgba(48, 207, 208, 0.1);
     --shadow-lg: 0 10px 15px -3px rgba(48, 207, 208, 0.1), 0 4px 6px -4px rgba(48, 207, 208, 0.1);
     --shadow-xl: 0 20px 25px -5px rgba(48, 207, 208, 0.1), 0 8px 10px -6px rgba(48, 207, 208, 0.1);

     /* Bordes redondeados */
     --border-radius-sm: 8px;
     --border-radius-md: 12px;
     --border-radius-lg: 16px;

     /* Transiciones */
     --transition-fast: 0.2s ease;
     --transition-normal: 0.3s ease;
     --transition-slow: 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 }

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

 body {
     font-family: 'Inter', -apple-system, sans-serif;
     color: var(--gray-800);
     background-color: #030712;
     line-height: 1.6;
     overflow-x: hidden;
 }

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

 /* Header & Navigation */
 header {
     background-color: white;
     box-shadow: var(--shadow-md);
     position: sticky;
     top: 0;
     z-index: 1000;
     padding: 1rem 0;
 }

 .nav-container {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .logo {
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 1.5rem;
     font-weight: 800;
     color: var(--primary-900);
 }

 .logo-img {
     height: 40px;
     width: auto;
 }

 .logo-icon {
     color: var(--primary-400);
     font-size: 1.8rem;
 }

 .logo span {
     font-weight: 400;
     color: var(--gray-600);
 }

 .nav-links {
     display: flex;
     gap: 2rem;
 }

 .nav-link {
     text-decoration: none;
     color: var(--gray-700);
     font-weight: 600;
     font-size: 0.95rem;
     transition: color var(--transition-fast);
 }

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

 .demo-btn2 {
     background: rgba(38, 66, 191, 0.289);
     color: rgba(9, 56, 148, 0.826);
     border: none;
     padding: 0.8rem 1.8rem;
     border-radius: var(--border-radius-md);
     font-weight: 700;
     cursor: pointer;
     transition: all var(--transition-normal);
     box-shadow: var(--shadow-md);
 }

 .demo-btn {
     background: rgba(38, 66, 191, 0.289);
     color: rgb(238, 255, 45);
     border: none;
     padding: 0.8rem 1.8rem;
     border-radius: var(--border-radius-md);
     font-weight: 700;
     cursor: pointer;
     transition: all var(--transition-normal);
     box-shadow: var(--shadow-md);
 }

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

 /* Hero Section */
 .hero {
     padding: 10rem 0 8rem;
     text-align: center;
     background-color: #030712;
     /* Fondo más oscuro para que resalten las luces */
     position: relative;
     color: white;
     overflow: hidden;
 }

 #hero-particles {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
 }

 .hero-bg-animated {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
     z-index: 1;
     pointer-events: none;
 }

 .glow-orb {
     position: absolute;
     border-radius: 50%;
     filter: blur(80px);
     opacity: 0.4;
     mix-blend-mode: screen;
     animation: floatOrb 20s infinite alternate ease-in-out;
 }

 .orb-1 {
     width: 400px;
     height: 400px;
     background: radial-gradient(circle, var(--primary-500) 0%, transparent 70%);
     top: -100px;
     left: -100px;
     animation-duration: 25s;
 }

 .orb-2 {
     width: 500px;
     height: 500px;
     background: radial-gradient(circle, var(--primary-900) 0%, transparent 70%);
     bottom: -150px;
     right: -100px;
     animation-duration: 30s;
     animation-delay: -5s;
 }

 .orb-3 {
     width: 300px;
     height: 300px;
     background: radial-gradient(circle, var(--primary-400) 0%, transparent 70%);
     top: 40%;
     left: 60%;
     animation-duration: 22s;
     animation-delay: -10s;
 }

 .hero-grid-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image:
         linear-gradient(rgba(48, 207, 208, 0.05) 1px, transparent 1px),
         linear-gradient(90deg, rgba(48, 207, 208, 0.05) 1px, transparent 1px);
     background-size: 50px 50px;
     background-position: center center;
     mask-image: radial-gradient(circle at center, black, transparent 80%);
     animation: gridMove 60s linear infinite;
 }

 @keyframes floatOrb {
     0% {
         transform: translate(0, 0) scale(1);
     }

     33% {
         transform: translate(30px, 50px) scale(1.1);
     }

     66% {
         transform: translate(-20px, 20px) scale(0.9);
     }

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

 @keyframes gridMove {
     from {
         background-position: 0 0;
     }

     to {
         background-position: 500px 500px;
     }
 }

 .hero-badge {
     animation: fadeInDown var(--transition-slow) forwards;
     opacity: 0;
 }

 .hero h1 {
     font-size: 4rem;
     font-weight: 900;
     line-height: 1.1;
     margin-bottom: 1.5rem;
     letter-spacing: -2px;
     color: white;
     animation: fadeInUp var(--transition-slow) 0.2s forwards;
     opacity: 0;
 }

 .hero-highlight {
     color: var(--primary-300);
     text-shadow: 0 0 30px rgba(48, 207, 208, 0.4);
     display: inline-block;
 }

 .hero p.hero-subtitle {
     font-size: 1.3rem;
     color: var(--gray-300);
     max-width: 800px;
     margin: 0 auto 1.5rem;
     /* Reducido para que el video suba */
     line-height: 1.7;
     animation: fadeInUp var(--transition-slow) 0.4s forwards;
     opacity: 0;
 }

 .hero-stats {
     display: flex;
     justify-content: center;
     gap: 3rem;
     margin: 1rem 0 0rem;
     /* Reducido */
 }

 .stat-item {
     text-align: center;
     padding: 1.8rem 1.5rem;
     background: rgba(255, 255, 255, 0.03);
     backdrop-filter: blur(10px);
     border-radius: var(--border-radius-lg);
     border: 1px solid rgba(255, 255, 255, 0.1);
     min-width: 180px;
     transition: all var(--transition-normal);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     animation: fadeInUp var(--transition-slow) 0.6s forwards;
     opacity: 0;
 }

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

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

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

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

 /* Video Showcase Section */
 .video-showcase.video-full-width {
     padding: 0;
     margin: 8rem 0;
     width: 100vw;
     position: relative;
     left: 50%;
     right: 50%;
     margin-left: -50vw;
     margin-right: -50vw;
     background: #000;
     z-index: 20;
     overflow: hidden;
     box-shadow: 0 0 100px rgba(0, 0, 0, 0.5);
 }

 .video-flyer-container {
     border-radius: 0;
     overflow: hidden;
     position: relative;
     animation: fadeIn 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
     background: #000;
     width: 100%;
     height: 90vh;
     display: flex;
     align-items: center;
 }

 .video-wrapper {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #000;
 }

 #video-particles {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 2;
     pointer-events: none;
     opacity: 0.6;
 }

 .demo-video {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     filter: brightness(0.5) contrast(1.1) saturate(1.2);
     transition: transform 2s cubic-bezier(0.2, 1, 0.3, 1);
 }

 .video-flyer-container:hover .demo-video {
     transform: scale(1.05);
 }

 /* UI Decorations */
 .ui-corner {
     position: absolute;
     width: 40px;
     height: 40px;
     border: 2px solid rgba(48, 207, 208, 0.3);
     z-index: 10;
     pointer-events: none;
 }

 .corner-tl {
     top: 40px;
     left: 40px;
     border-right: none;
     border-bottom: none;
 }

 .corner-tr {
     top: 40px;
     right: 40px;
     border-left: none;
     border-bottom: none;
 }

 .corner-bl {
     bottom: 40px;
     left: 40px;
     border-right: none;
     border-top: none;
 }

 .corner-br {
     bottom: 40px;
     right: 40px;
     border-left: none;
     border-top: none;
 }

 .ui-lines-decor {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background:
         linear-gradient(90deg, rgba(48, 207, 208, 0.03) 1px, transparent 1px) 0 0 / 10% 100%,
         linear-gradient(rgba(48, 207, 208, 0.03) 1px, transparent 1px) 0 0 / 100% 10%;
     z-index: 1;
     pointer-events: none;
 }

 .video-overlay-dull {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at center, rgba(3, 7, 18, 0.3) 0%, rgba(3, 7, 18, 0.8) 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 2rem;
     transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: 5;
     backdrop-filter: blur(4px);
 }

 .video-overlay-dull::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(48, 207, 208, 0.15), transparent 40%);
     z-index: -1;
     pointer-events: none;
 }

 .video-flyer-container:hover .video-overlay-dull {
     background: radial-gradient(circle at center, rgba(3, 7, 18, 0.1) 0%, rgba(3, 7, 18, 0.7) 100%);
     backdrop-filter: blur(1px);
 }

 .flyer-content {
     max-width: 1100px;
     color: white;
     transform: translateY(20px);
     transition: transform 1s cubic-bezier(0.2, 1, 0.3, 1);
     position: relative;
     z-index: 10;
 }

 .video-flyer-container:hover .flyer-content {
     transform: translateY(0);
 }

 .flyer-badge {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     padding: 0.6rem 1.5rem;
     background: rgba(48, 207, 208, 0.1);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(48, 207, 208, 0.3);
     border-radius: 100px;
     font-size: 0.85rem;
     font-weight: 700;
     color: var(--primary-300);
     margin-bottom: 2.5rem;
     letter-spacing: 2px;
     text-transform: uppercase;
     box-shadow: 0 0 30px rgba(48, 207, 208, 0.1);
 }

 .badge-dot {
     width: 8px;
     height: 8px;
     background: var(--primary-400);
     border-radius: 50%;
     box-shadow: 0 0 10px var(--primary-400);
     animation: badgePulse 2s infinite;
 }

 @keyframes badgePulse {
     0% {
         transform: scale(1);
         opacity: 1;
         box-shadow: 0 0 0 0 rgba(48, 207, 208, 0.7);
     }

     70% {
         transform: scale(1.2);
         opacity: 0.5;
         box-shadow: 0 0 0 10px rgba(48, 207, 208, 0);
     }

     100% {
         transform: scale(1);
         opacity: 1;
         box-shadow: 0 0 0 0 rgba(48, 207, 208, 0);
     }
 }

 .flyer-title {
     font-size: 5rem;
     font-weight: 800;
     line-height: 1.1;
     margin-bottom: 1.5rem;
     letter-spacing: -2px;
     color: white;
     text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
 }

 .flyer-title span.highlight {
     background: linear-gradient(135deg, #fff, var(--primary-300));
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     display: block;
     margin-top: 0.5rem;
 }

 .flyer-subtitle {
     font-size: 1.25rem;
     color: rgba(255, 255, 255, 0.7);
     margin: 0 auto 3rem;
     max-width: 800px;
     line-height: 1.8;
 }

 .flyer-actions {
     display: flex;
     justify-content: center;
     gap: 2rem;
 }

 .flyer-btn-glass {
     position: relative;
     background: linear-gradient(135deg, rgba(48, 207, 208, 0.2), rgba(48, 207, 208, 0.05));
     backdrop-filter: blur(15px);
     border: 1px solid rgba(48, 207, 208, 0.4);
     color: white;
     padding: 1.25rem 3rem;
     border-radius: var(--border-radius-md);
     font-size: 1rem;
     font-weight: 700;
     letter-spacing: 1.5px;
     cursor: pointer;
     overflow: hidden;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
 }

 .btn-shine {
     position: absolute;
     top: 0;
     left: -100%;
     width: 50%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transform: skewX(-25deg);
     transition: 0.5s;
 }

 .flyer-btn-glass:hover .btn-shine {
     left: 150%;
     transition: 0.8s;
 }

 .flyer-btn-glass:hover {
     background: rgba(48, 207, 208, 0.3);
     border-color: var(--primary-300);
     transform: translateY(-5px);
     box-shadow: 0 20px 40px rgba(48, 207, 208, 0.3);
 }

 /* Floating Cards Mejora */
 .flyer-floating-card {
     position: absolute;
     background: rgba(10, 20, 30, 0.4);
     backdrop-filter: blur(15px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     padding: 1rem 1.5rem;
     border-radius: 12px;
     color: white;
     z-index: 6;
     display: flex;
     align-items: center;
     gap: 15px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
     min-width: 220px;
     pointer-events: none;
 }

 .card-glow {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at 0% 0%, rgba(48, 207, 208, 0.2), transparent 70%);
     border-radius: inherit;
     pointer-events: none;
 }

 .card-text {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
 }

 .card-label {
     font-size: 0.65rem;
     font-weight: 800;
     color: var(--primary-300);
     letter-spacing: 1px;
     margin-bottom: 2px;
 }

 .card-value {
     font-size: 0.9rem;
     font-weight: 600;
 }

 .flyer-floating-card i {
     font-size: 1.4rem;
 }

 .card-1 {
     top: 15%;
     left: 5%;
 }

 .card-2 {
     top: 20%;
     right: 5%;
 }

 .card-3 {
     bottom: 15%;
     left: 8%;
 }

 @keyframes scan {
     0% {
         transform: translateY(-100%);
         opacity: 0;
     }

     50% {
         opacity: 1;
     }

     100% {
         transform: translateY(100vh);
         opacity: 0;
     }
 }

 .flyer-scanner {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--primary-400), transparent);
     box-shadow: 0 0 15px var(--primary-400);
     z-index: 10;
     animation: scanLine 8s infinite linear;
     pointer-events: none;
 }

 @keyframes scanLine {
     0% {
         top: 0;
     }

     100% {
         top: 100%;
     }
 }

 .video-glow-ambient {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 90%;
     height: 90%;
     background: radial-gradient(circle, rgba(48, 207, 208, 0.15) 0%, transparent 70%);
     filter: blur(120px);
     transform: translate(-50%, -50%);
     z-index: 1;
     pointer-events: none;
 }

 .hero-image-container {
     margin-top: 5rem;
     position: relative;
     z-index: 10;
     perspective: 1000px;
 }

 .hero-mockup {
     width: 100%;
     max-width: 1100px;
     border-radius: var(--border-radius-lg);
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
     transform: rotateX(1deg);
     transition: transform 0.5s ease;
     display: inline-block;
 }

 .hero-mockup:hover {
     transform: rotateX(0deg) scale(1.01);
     box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.2);
 }

 /* Perspectives Section - Ultra Premium Flip Version */
 .perspectives {
     padding: 12rem 0;
     background-color: #ffffff;
     background-image:
         radial-gradient(at 0% 0%, rgba(48, 207, 208, 0.05) 0, transparent 40%),
         radial-gradient(at 100% 100%, rgba(48, 207, 208, 0.05) 0, transparent 40%),
         url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2330cfd0' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
     position: relative;
     overflow: hidden;
 }

 .section-title {
     text-align: center;
     margin: 0 auto 7rem;
     max-width: 800px;
 }

 .section-title h2 {
     font-size: 3.8rem;
     font-weight: 900;
     line-height: 1.1;
     color: #111827;
     letter-spacing: -2px;
     margin-bottom: 1.5rem;
 }

 .section-title h2 span {
     background: linear-gradient(135deg, var(--primary-400), var(--primary-600));
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     display: block;
 }

 .section-title p {
     color: #4b5563;
     font-size: 1.3rem;
     font-weight: 500;
     line-height: 1.8;
 }

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

 .bento-category-column {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
     height: 100%;
 }

 .category-items {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     flex: 1;
 }

 .bento-item-card {
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.05);
     border-radius: 16px;
     padding: 1.5rem;
     display: flex;
     flex-direction: column;
     gap: 1rem;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
     flex: 1;
     /* Make it stretch to fill container */
     min-height: 160px;
     /* Ensure a minimum height for uniformity */
     justify-content: space-between;
 }

 .perspectives-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2rem;
     perspective: 2000px;
     max-width: 1200px;
     margin: 0 auto;
 }

 .perspective-card {
     height: 500px;
     /* Adjusted height for balance */
     background: transparent;
     width: 100%;
 }

 .card-inner {
     position: relative;
     width: 100%;
     height: 100%;
     transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
     transform-style: preserve-3d;
 }

 .perspective-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: 40px;
     background: #ffffff;
     box-shadow:
         0 10px 40px -10px rgba(0, 0, 0, 0.05),
         0 20px 70px -15px rgba(0, 0, 0, 0.1);
     border: 1px solid rgba(0, 0, 0, 0.04);
     overflow: hidden;
 }

 /* Front Face Improvements */
 .card-front {
     display: flex;
     flex-direction: column;
 }

 .card-image-wrapper {
     position: relative;
     height: 280px;
     margin: 15px;
     border-radius: 30px;
     overflow: hidden;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
 }

 .card-bg-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 1.2s ease;
 }

 .perspective-card:hover .card-bg-image {
     transform: scale(1.15);
 }

 .card-image-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.95) 100%);
 }

 .perspective-icon {
     position: absolute;
     top: 30px;
     right: 30px;
     width: 60px;
     height: 60px;
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     border-radius: 18px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--primary-500);
     font-size: 1.6rem;
     box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
     z-index: 10;
     border: 1px solid rgba(255, 255, 255, 0.3);
 }

 .card-content-body {
     padding: 2.5rem 3rem 3.5rem;
     flex-grow: 1;
     display: flex;
     flex-direction: column;
 }

 .card-content-body h3 {
     font-size: 2.2rem;
     font-weight: 800;
     color: #111827;
     margin-bottom: 1.5rem;
     letter-spacing: -1px;
 }

 .card-content-body p {
     color: #6b7280;
     font-size: 1.15rem;
     line-height: 1.7;
     margin-bottom: auto;
 }

 .flip-hint {
     font-size: 0.9rem;
     font-weight: 700;
     color: var(--primary-500);
     display: flex;
     align-items: center;
     gap: 12px;
     margin-top: 2rem;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .flip-hint i {
     font-size: 1.1rem;
     animation: rotateHint 3s infinite linear;
 }

 @keyframes rotateHint {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 /* Back Face Improvements */
 .card-back {
     transform: rotateY(180deg);
     background: #ffffff;
     display: flex;
     flex-direction: column;
     padding: 4rem 3.5rem;
 }

 .card-back-content {
     height: 100%;
     display: flex;
     flex-direction: column;
 }

 .card-back h3 {
     font-size: 2rem;
     font-weight: 800;
     color: #111827;
     margin-bottom: 0.5rem;
 }

 .back-divider {
     width: 50px;
     height: 5px;
     background: var(--primary-400);
     border-radius: 10px;
     margin-bottom: 3rem;
 }

 .perspective-features {
     list-style: none;
     margin-bottom: auto;
 }

 .perspective-features li {
     padding: 1.2rem 0;
     display: flex;
     align-items: center;
     gap: 18px;
     color: #374151;
     font-size: 1.2rem;
     font-weight: 600;
     border-bottom: 1px solid rgba(0, 0, 0, 0.03);
     transition: all 0.3s ease;
 }

 .perspective-features li:last-child {
     border-bottom: none;
 }

 .perspective-card:hover .perspective-features li {
     transform: translateX(5px);
 }

 .feature-dot {
     width: 12px;
     height: 12px;
     background: var(--primary-100);
     border: 3px solid var(--primary-400);
     border-radius: 50%;
     flex-shrink: 0;
 }

 .card-btn-back {
     width: 100%;
     height: 65px;
     background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
     color: white;
     border: none;
     border-radius: 20px;
     font-weight: 800;
     font-size: 1.1rem;
     letter-spacing: 1px;
     cursor: pointer;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     box-shadow: 0 15px 35px rgba(48, 207, 208, 0.3);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 15px;
     margin-top: 2rem;
 }

 .card-btn-back:hover {
     transform: translateY(-5px) scale(1.02);
     box-shadow: 0 20px 45px rgba(48, 207, 208, 0.4);
     background: linear-gradient(135deg, var(--primary-400), var(--primary-500));
 }

 .card-btn-back i {
     font-size: 1.2rem;
     transition: transform 0.3s ease;
 }

 .card-btn-back:hover i {
     transform: translateX(5px);
 }

 /* Accents per role */
 .executive-card .perspective-icon {
     border-bottom: 3px solid #10b981;
 }

 .manager-card .perspective-icon {
     border-bottom: 3px solid #3b82f6;
 }

 .operator-card .perspective-icon {
     border-bottom: 3px solid #8b5cf6;
 }

 .executive-card .back-divider {
     background: #10b981;
 }

 .manager-card .back-divider {
     background: #3b82f6;
 }

 .operator-card .back-divider {
     background: #8b5cf6;
 }

 .perspective-features i {
     color: var(--primary-500);
     font-size: 1.1rem;
 }

 /* Features Section - Metamorphic UI/UX Redesign */
 .features {
     padding: 12rem 0 2rem;
     /* Reducido espacio inferior */
     background-color: #fcfdfe;
     position: relative;
     overflow: hidden;
 }

 /* Background Decoration */
 .features::before {
     content: '';
     position: absolute;
     width: 600px;
     height: 600px;
     background: radial-gradient(circle, rgba(48, 207, 208, 0.05) 0%, transparent 70%);
     top: -10%;
     right: -10%;
     z-index: 0;
 }

 .features-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 3rem;
     position: relative;
     z-index: 1;
 }

 .feature-card {
     height: 550px;
     border-radius: 40px;
     background: #ffffff;
     position: relative;
     overflow: hidden;
     cursor: pointer;
     border: 1px solid rgba(0, 0, 0, 0.03);
     box-shadow:
         0 4px 10px rgba(0, 0, 0, 0.02),
         0 20px 50px -10px rgba(0, 0, 0, 0.05);
     transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
 }

 /* Full Background Image */
 .feature-image-wrapper {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
 }

 .feature-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
     filter: brightness(0.95);
 }

 .feature-card:hover .feature-img {
     transform: scale(1.1);
 }

 /* Sophisticated Icon Placement */
 .feature-icon-box {
     position: absolute;
     top: 30px;
     right: 30px;
     width: 50px;
     height: 50px;
     background: rgba(255, 255, 255, 0.8);
     backdrop-filter: blur(12px);
     border-radius: 15px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--primary-500);
     font-size: 1.3rem;
     z-index: 10;
     border: 1px solid rgba(255, 255, 255, 0.5);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
     transition: all 0.5s ease;
 }

 .feature-card:hover .feature-icon-box {
     background: var(--primary-500);
     color: white;
     transform: rotate(10deg) scale(1.1);
 }

 /* Metamorphic Content Panel */
 .feature-content {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 32%;
     /* Lowered from 45% */
     background: rgba(255, 255, 255, 0.85);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     padding: 4rem 3rem 3rem;
     /* Increased top padding to lower title */
     z-index: 5;
     transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     border-top: 1px solid rgba(255, 255, 255, 0.5);
 }

 .feature-card:hover .feature-content {
     height: 90%;
     /* Expands nearly to the top */
     background: rgba(255, 255, 255, 0.95);
     border-top-right-radius: 40px;
     /* Aesthetic curve on expansion */
 }

 .feature-content h3 {
     font-size: 1.8rem;
     font-weight: 800;
     color: var(--gray-900);
     margin-bottom: 0.5rem;
     letter-spacing: -1px;
     line-height: 1.2;
     transition: all 0.5s ease;
 }

 .feature-card:hover h3 {
     color: var(--primary-600);
     transform: translateY(-5px);
 }

 /* Role Label/Category */
 .feature-card::before {
     content: 'NETFORTRESS CORE';
     position: absolute;
     top: 35px;
     left: 35px;
     font-size: 0.7rem;
     font-weight: 900;
     letter-spacing: 2px;
     color: rgba(255, 255, 255, 0.8);
     z-index: 10;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }

 .feature-reveal {
     opacity: 0;
     transform: translateY(20px);
     transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
     margin-top: 1.5rem;
 }

 .feature-card:hover .feature-reveal {
     opacity: 1;
     transform: translateY(0);
 }

 .feature-reveal p {
     color: var(--gray-600);
     font-size: 1.1rem;
     line-height: 1.7;
     margin-bottom: 2.5rem;
 }

 .learn-more {
     font-size: 0.85rem;
     font-weight: 800;
     color: var(--primary-500);
     display: flex;
     align-items: center;
     gap: 8px;
     letter-spacing: 1px;
     text-transform: uppercase;
 }

 .learn-more i {
     transition: transform 0.3s ease;
 }

 .feature-card:hover .learn-more i {
     transform: translateX(5px);
 }

 /* Technical Scan Line Animation */
 .feature-card:hover::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--primary-300), transparent);
     z-index: 15;
     animation: scanMove 2s linear infinite;
 }

 @keyframes scanMove {
     0% {
         top: 0;
         opacity: 0;
     }

     10% {
         opacity: 1;
     }

     90% {
         opacity: 1;
     }

     100% {
         top: 100%;
         opacity: 0;
     }
 }

 /* Sub-pixel Glow */
 .feature-card:hover {
     box-shadow:
         0 0 0 1px rgba(48, 207, 208, 0.1),
         0 40px 80px -20px rgba(0, 0, 0, 0.1);
 }

 /* Features CTA - Minimal & Interactive */
 .features-cta {
     margin-top: 5rem;
     /* Reduced from 10rem */
     padding: 2rem 1rem;
     /* Reduced from 4rem 2rem */
     text-align: center;
     position: relative;
     z-index: 10;
 }

 .cta-phrase {
     font-size: 1.6rem;
     /* Reduced from 2.2rem */
     font-weight: 800;
     color: var(--gray-900);
     margin-bottom: 1.5rem;
     /* Reduced from 2.5rem */
     letter-spacing: -1px;
     max-width: 600px;
     margin-left: auto;
     margin-right: auto;
 }

 .cta-actions {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .whatsapp-btn-minimal {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     background: #25D366;
     color: white;
     padding: 1rem 2rem;
     border-radius: 100px;
     font-weight: 700;
     font-size: 0.95rem;
     text-decoration: none;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
     border: 2px solid transparent;
 }

 .whatsapp-btn-minimal:hover {
     transform: translateY(-5px);
     background: #1eb956;
     box-shadow: 0 15px 35px rgba(37, 211, 102, 0.4);
     letter-spacing: 0.5px;
 }

 .whatsapp-btn-minimal i {
     font-size: 1.3rem;
 }

 /* Sub-pixel Glow for the section */
 .features-cta::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 300px;
     height: 150px;
     background: radial-gradient(circle, rgba(48, 207, 208, 0.08) 0%, transparent 70%);
     pointer-events: none;
     z-index: -1;
 }

 /* Logs Section - Simplified Formal Premium */
 .logs-premium-section {
     padding: 2rem 0 8rem;
     /* Reducido espacio superior */
     background-color: #ffffff;
     background-image:
         radial-gradient(at 0% 0%, rgba(48, 207, 208, 0.03) 0, transparent 30%),
         url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2330cfd0' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
     position: relative;
     overflow: hidden;
 }

 .logs-bg-effects {
     display: none;
     /* Eliminar formas abstractas para un look más formal */
 }

 .logs-aura-decor {
     position: absolute;
     bottom: -20%;
     right: -10%;
     width: 800px;
     height: 800px;
     background: radial-gradient(circle, rgba(48, 207, 208, 0.04) 0%, transparent 70%);
     z-index: 1;
 }

 .logs-premium-container {
     display: grid;
     grid-template-columns: 0.9fr 1.1fr;
     gap: 5rem;
     /* Espacio reducido */
     align-items: center;
     position: relative;
     z-index: 2;
 }

 .section-tag-premium {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 0.6rem 1.4rem;
     background: #f1f5f9;
     color: var(--primary-700);
     border-radius: 50px;
     font-size: 0.75rem;
     font-weight: 800;
     letter-spacing: 1.5px;
     margin-bottom: 2rem;
     border: 1px solid rgba(0, 0, 0, 0.05);
 }

 .premium-title {
     font-size: 3rem;
     /* Reducido */
     font-weight: 800;
     line-height: 1.2;
     margin-bottom: 1.5rem;
     letter-spacing: -1.5px;
     color: var(--gray-900);
 }

 .text-gradient-premium {
     background: linear-gradient(135deg, var(--primary-400), #2563eb, #7c3aed);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     background-size: 200% auto;
     animation: gradientShift 5s infinite linear;
     display: inline-block;
 }

 @keyframes gradientShift {
     0% {
         background-position: 0% 50%;
     }

     100% {
         background-position: 200% 50%;
     }
 }

 .premium-intro {
     font-size: 1.15rem;
     /* Más compacto */
     line-height: 1.7;
     color: var(--gray-600);
     margin-bottom: 3rem;
     max-width: 550px;
 }

 .premium-feature-cards {
     display: flex;
     flex-direction: column;
     gap: 1.2rem;
     /* Menos espacio entre tarjetas */
 }

 .premium-glass-card {
     display: flex;
     gap: 1.5rem;
     padding: 1.6rem;
     background: #ffffff;
     border-radius: 24px;
     /* Más formal/limpio */
     border: 1px solid rgba(0, 0, 0, 0.06);
     transition: all 0.4s ease;
     position: relative;
     cursor: pointer;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
 }

 .premium-glass-card:hover {
     transform: translateY(-5px);
     border-color: var(--primary-400);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06);
 }

 .card-icon-modern {
     width: 60px;
     /* Reducido */
     height: 60px;
     background: #f8fafc;
     border-radius: 18px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.4rem;
     color: var(--primary-400);
     transition: all 0.3s ease;
     flex-shrink: 0;
 }

 .premium-glass-card:hover .card-icon-modern {
     background: var(--primary-400);
     color: white;
 }

 .card-info h4 {
     font-size: 1.3rem;
     /* Más compacto */
     font-weight: 700;
     color: var(--gray-900);
     margin-bottom: 0.4rem;
 }

 .card-info p {
     font-size: 1rem;
     color: var(--gray-500);
     line-height: 1.5;
     margin: 0;
 }

 .card-action-hint {
     position: absolute;
     right: 35px;
     top: 50%;
     transform: translateY(-50%) translateX(10px);
     opacity: 0;
     color: var(--primary-400);
     font-size: 1.2rem;
     transition: all 0.4s ease;
 }

 .premium-glass-card:hover .card-action-hint {
     opacity: 0.6;
     transform: translateY(-50%) translateX(0);
 }

 /* Dashboard Visual Premium */
 .logs-premium-visual {
     position: relative;
     perspective: 2000px;
 }

 .dashboard-isometric-container {
     position: relative;
     transform: rotateY(-18deg) rotateX(8deg);
     transition: all 1s cubic-bezier(0.2, 1, 0.3, 1);
 }

 .logs-premium-visual:hover .dashboard-isometric-container {
     transform: rotateY(-5deg) rotateX(2deg) translateY(-20px);
 }

 .dashboard-main-window {
     background: #ffffff;
     border-radius: 32px;
     border: 1px solid rgba(0, 0, 0, 0.08);
     box-shadow: 0 70px 140px -30px rgba(0, 0, 0, 0.2);
     overflow: hidden;
 }

 .window-bar {
     background: #f8fafc;
     padding: 1.2rem 2.5rem;
     display: flex;
     align-items: center;
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }

 .window-controls {
     display: flex;
     gap: 8px;
 }

 .window-controls span {
     width: 12px;
     height: 12px;
     border-radius: 50%;
 }

 .dot-red {
     background: #ff5f57;
 }

 .dot-yellow {
     background: #ffbd2e;
 }

 .dot-green {
     background: #28c940;
 }

 .window-nav-address {
     margin-left: 3rem;
     padding: 0.4rem 1.5rem;
     background: #fff;
     border-radius: 100px;
     border: 1px solid #e2e8f0;
     font-size: 0.8rem;
     color: var(--gray-400);
     width: 60%;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .window-content-inner {
     position: relative;
 }

 .dashboard-img-premium {
     width: 100%;
     display: block;
     filter: saturate(1.1) brightness(1.02);
 }

 .scan-line-animation {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 4px;
     background: linear-gradient(to bottom, transparent, rgba(48, 207, 208, 0.4), transparent);
     box-shadow: 0 0 20px rgba(48, 207, 208, 0.3);
     animation: scanMove 4s infinite linear;
 }

 @keyframes scanMove {
     0% {
         top: 0;
     }

     100% {
         top: 100%;
     }
 }

 /* Floating Data Cards */
 .floating-data-card {
     position: absolute;
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     padding: 1.2rem;
     border-radius: 20px;
     display: flex;
     align-items: center;
     gap: 15px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
     border: 1px solid rgba(0, 0, 0, 0.05);
     z-index: 10;
     animation: floatElement 4s infinite ease-in-out;
 }

 .data-threat {
     top: 15%;
     right: -10%;
 }

 .data-status {
     bottom: 10%;
     left: -12%;
     animation-delay: -2s;
 }

 @keyframes floatElement {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-15px);
     }
 }

 .data-icon {
     width: 45px;
     height: 45px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.25rem;
 }

 .data-threat .data-icon {
     background: #fee2e2;
     color: #ef4444;
 }

 .data-status .data-icon {
     background: #dcfce7;
     color: #22c55e;
 }

 .data-label {
     display: block;
     font-size: 0.65rem;
     font-weight: 800;
     color: var(--gray-400);
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .data-value {
     display: block;
     font-size: 0.9rem;
     font-weight: 700;
     color: var(--gray-900);
 }

 /* Scroll Reveal Animations */
 .reveal-on-scroll {
     opacity: 0;
     transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
 }

 .reveal-on-scroll.revealed {
     opacity: 1;
 }

 .reveal-on-scroll[data-animation="fade-in-left"].revealed {
     animation: revealFadeInLeft 1s forwards;
 }

 .reveal-on-scroll[data-animation="fade-in-up"].revealed {
     animation: revealFadeInUp 1s forwards;
 }

 .reveal-on-scroll[data-animation="floating-reveal"].revealed {
     animation: revealFloating 1.2s forwards;
 }

 @keyframes revealFadeInLeft {
     from {
         opacity: 0;
         transform: translateX(-50px);
     }

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

 @keyframes revealFadeInUp {
     from {
         opacity: 0;
         transform: translateY(50px);
     }

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

 @keyframes revealFloating {
     from {
         opacity: 0;
         transform: scale(0.9) translateY(40px);
     }

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

 @media (max-width: 1100px) {
     .logs-premium-container {
         grid-template-columns: 1fr;
         gap: 6rem;
         text-align: center;
     }

     .premium-intro {
         margin-left: auto;
         margin-right: auto;
     }

     .premium-feature-cards {
         text-align: left;
         max-width: 600px;
         margin: 0 auto;
     }

     .data-threat,
     .data-status {
         display: none;
     }
 }

 /* Integrations Section - Command Hub Redesign */
 .integrations-dashboard-section {
     padding: 10rem 0;
     background-color: #030712;
     position: relative;
     overflow: hidden;
     color: white;
 }

 .integrations-aura-bg {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 1200px;
     height: 1200px;
     background: radial-gradient(circle, rgba(48, 207, 208, 0.05) 0%, transparent 70%);
     pointer-events: none;
 }

 .integrations-dashboard-header {
     margin-bottom: 4rem;
     text-align: center;
 }

 .integrations-dashboard-header p {
     margin: 1rem auto;
 }

 .dash-tag {
     display: inline-block;
     padding: 0.5rem 1.2rem;
     background: rgba(48, 207, 208, 0.1);
     color: var(--primary-400);
     border-radius: 50px;
     font-size: 0.75rem;
     font-weight: 800;
     letter-spacing: 2px;
     margin-bottom: 1.5rem;
     border: 1px solid rgba(48, 207, 208, 0.2);
 }

 .highlight-cyan {
     color: var(--primary-400);
     text-shadow: 0 0 30px rgba(48, 207, 208, 0.3);
 }

 /* Bento Ecosystem Grid - New Layout */
 .bento-ecosystem-wrapper {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 20px;
 }

 .bento-ecosystem-grid {
     display: grid;
     grid-template-columns: 1fr 1.2fr 1fr;
     gap: 2rem;
     align-items: stretch;
 }

 .bento-category-column {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
 }

 .category-header {
     display: flex;
     align-items: center;
     gap: 1.2rem;
     margin-bottom: 0.5rem;
     padding: 0 1rem;
 }

 .cat-icon-box {
     width: 50px;
     height: 50px;
     background: rgba(48, 207, 208, 0.1);
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.3rem;
     color: var(--primary-400);
     border: 1px solid rgba(48, 207, 208, 0.2);
 }

 .cat-info h3 {
     font-size: 1.4rem;
     font-weight: 800;
     color: white;
     margin: 0;
 }

 .cat-info span {
     font-size: 0.8rem;
     color: var(--gray-500);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .category-items {
     display: flex;
     flex-direction: column;
     gap: 1.2rem;
     height: 100%;
 }

 /* Bento Item Card */
 .bento-item-card {
     background: rgba(255, 255, 255, 0.12);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.06);
     border-radius: 24px;
     padding: 1.5rem;
     display: flex;
     flex-direction: column;
     /* Changed to column for centering */
     align-items: center;
     /* Center align items */
     gap: 1.5rem;
     position: relative;
     transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1);
     cursor: pointer;
     overflow: hidden;
     text-align: center;
     /* Center text */
 }

 .bento-item-card.featured {
     flex: 1.5;
     flex-direction: column;
     align-items: center;
     /* Center align */
     gap: 1.2rem;
     background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(48, 207, 208, 0.03) 100%);
     border-color: rgba(48, 207, 208, 0.2);
 }

 .bento-item-card:hover {
     background: rgba(255, 255, 255, 0.06);
     border-color: rgba(48, 207, 208, 0.4);
     transform: translateY(-5px) scale(1.02);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
 }

 .item-logo {
     width: 80px;
     /* Increased size to accommodate padding */
     height: 80px;
     object-fit: contain;
     filter: none;
     transition: all 0.4s ease;
     background-color: #ffffff;
     /* White bg for logo clarity */
     border-radius: 50%;
     /* Circular */
     border: 4px solid #333333;
     /* Dark gray border */
     padding: 15px;
     /* Padding inside circle */
 }

 .featured .item-logo {
     width: 120px;
     height: 120px;
     object-fit: contain;
     border-radius: 50%;
     border: 4px solid #333333;
     padding: 20px;
     background-color: #ffffff;
 }

 .bento-item-card:hover .item-logo {
     transform: scale(1.05);
     /* Slightly smaller scale effect to stay within bounds */
     border-color: var(--primary-400);
     /* Highlight border on hover */
 }

 .item-details {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     /* Center items in details */
     width: 100%;
 }

 .item-details h4 {
     font-size: 1.4rem;
     /* Increased font size */
     font-weight: 800;
     color: white;
     margin-bottom: 8px;
 }

 .item-details p {
     font-size: 0.95rem;
     color: var(--gray-400);
     /* Slightly lighter for contrast */
     margin: 0;
     line-height: 1.5;
 }

 .item-meta {
     width: 100%;
     display: flex;
     justify-content: center;
     /* Center meta items */
     align-items: center;
     margin-top: auto;
 }

 .meta-uptime {
     font-size: 0.75rem;
     font-weight: 800;
     color: var(--primary-400);
     background: rgba(48, 207, 208, 0.1);
     padding: 4px 10px;
     border-radius: 100px;
 }

 .meta-status {
     width: 8px;
     height: 8px;
     background: #10b981;
     border-radius: 50%;
     box-shadow: 0 0 10px #10b981;
     position: relative;
 }

 .meta-status::after {
     content: attr(data-label);
     position: absolute;
     right: 15px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 0.6rem;
     white-space: nowrap;
     color: var(--gray-500);
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .bento-item-card:hover .meta-status::after {
     opacity: 1;
 }

 .item-extra-metric {
     margin-top: auto;
     font-size: 0.8rem;
     font-weight: 700;
     color: var(--primary-300);
     display: flex;
     align-items: center;
     gap: 8px;
 }

 /* Status Colors */
 .bento-item-card[data-status="PROTEGIDO"] .meta-status {
     background: #10b981;
     box-shadow: 0 0 10px #10b981;
 }

 .bento-item-card[data-status="ACTIVO"] .meta-status {
     background: #3b82f6;
     box-shadow: 0 0 10px #3b82f6;
 }

 .bento-item-card[data-status="OPTIMIZADO"] .meta-status {
     background: #06b6d4;
     box-shadow: 0 0 10px #06b6d4;
 }

 .bento-item-card[data-status="ESTABLE"] .meta-status {
     background: #8b5cf6;
     box-shadow: 0 0 10px #8b5cf6;
 }

 @media (max-width: 1200px) {
     .bento-ecosystem-grid {
         grid-template-columns: 1fr 1fr;
     }

     .bento-item-card {
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
     }

     .storage-column {
         grid-column: span 2;
     }

     .storage-column .category-items {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
     }
 }

 @media (max-width: 768px) {
     .bento-ecosystem-grid {
         grid-template-columns: 1fr;
     }

     .storage-column {
         grid-column: auto;
     }

     .storage-column .category-items {
         display: flex;
         flex-direction: column;
     }
 }

 /* Bento Style Integrations Grid */
 .dash-stage {
     position: relative;
     min-height: 500px;
 }

 .integrations-grid {
     display: grid;
     grid-template-columns: 1.2fr 1fr;
     grid-template-rows: auto auto;
     gap: 2.5rem;
     max-width: 1200px;
     margin: 0 auto;
 }

 .integration-bento-card {
     background: rgba(255, 255, 255, 0.02);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.05);
     border-radius: 32px;
     padding: 2.5rem;
     position: relative;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
     opacity: 0;
     animation: bentoFadeIn 0.8s forwards ease-out;
 }

 .integration-bento-card.featured {
     grid-row: span 2;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(48, 207, 208, 0.02) 100%);
     border-color: rgba(48, 207, 208, 0.1);
 }

 @keyframes bentoFadeIn {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

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

 .integration-bento-card:hover {
     background: rgba(255, 255, 255, 0.04);
     border-color: rgba(48, 207, 208, 0.3);
     transform: translateY(-10px) scale(1.02);
     box-shadow:
         0 40px 80px -20px rgba(0, 0, 0, 0.6),
         0 0 20px rgba(48, 207, 208, 0.1);
 }

 .bento-glow {
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle at center, rgba(48, 207, 208, 0.05) 0%, transparent 70%);
     pointer-events: none;
     opacity: 0;
     transition: opacity 0.6s ease;
 }

 .integration-bento-card:hover .bento-glow {
     opacity: 1;
 }

 .bento-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 2.5rem;
 }

 .bento-logo-box {
     width: 120px;
     height: 60px;
     background: rgba(255, 255, 255, 0.03);
     border-radius: 18px;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 12px;
     border: 1px solid rgba(255, 255, 255, 0.05);
     transition: all 0.4s ease;
 }

 .integration-bento-card.featured .bento-logo-box {
     width: 150px;
     height: 80px;
 }

 .bento-logo-box img {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     filter: brightness(0) invert(1);
 }

 .bento-status {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 16px;
     background: rgba(255, 255, 255, 0.04);
     border-radius: 100px;
     font-size: 0.75rem;
     font-weight: 700;
     color: var(--gray-300);
     letter-spacing: 0.5px;
     border: 1px solid rgba(255, 255, 255, 0.05);
 }

 .status-dot {
     width: 8px;
     height: 8px;
     background: var(--success-500);
     border-radius: 50%;
     box-shadow: 0 0 10px var(--success-500);
     animation: statusPulse 2s infinite;
 }

 @keyframes statusPulse {
     0% {
         opacity: 1;
         transform: scale(1);
     }

     50% {
         opacity: 0.5;
         transform: scale(1.2);
     }

     100% {
         opacity: 1;
         transform: scale(1);
     }
 }

 .bento-body {
     flex: 1;
 }

 .integration-bento-card h3 {
     font-size: 1.8rem;
     font-weight: 800;
     color: white;
     margin-bottom: 1rem;
     background: linear-gradient(to right, white, var(--gray-400));
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .integration-bento-card.featured h3 {
     font-size: 2.2rem;
 }

 .integration-bento-card p {
     font-size: 1.05rem;
     line-height: 1.6;
     color: var(--gray-400);
     max-width: 90%;
 }

 .bento-footer {
     margin-top: 3rem;
     display: flex;
     align-items: center;
     gap: 3rem;
     padding-top: 2rem;
     border-top: 1px solid rgba(255, 255, 255, 0.05);
 }

 .bento-metric {
     display: flex;
     flex-direction: column;
 }

 .metric-label {
     font-size: 0.65rem;
     font-weight: 800;
     color: var(--gray-500);
     text-transform: uppercase;
     letter-spacing: 1.5px;
     margin-bottom: 4px;
 }

 .metric-value {
     font-size: 1.1rem;
     font-weight: 700;
     color: var(--primary-300);
 }

 .bento-action {
     margin-left: auto;
     width: 45px;
     height: 45px;
     background: rgba(48, 207, 208, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--primary-400);
     transition: all 0.3s ease;
 }

 .integration-bento-card:hover .bento-action {
     background: var(--primary-400);
     color: white;
     transform: scale(1.1);
 }

 @media (max-width: 1100px) {
     .integrations-grid {
         grid-template-columns: 1fr;
         gap: 2rem;
     }

     .integration-bento-card.featured {
         grid-row: auto;
     }

     .command-hub {
         border-radius: 30px;
     }
 }

 @media (max-width: 768px) {
     .hub-pill {
         padding: 1rem;
     }

     .pill-icon {
         width: 40px;
         height: 40px;
         font-size: 1.1rem;
     }

     .pill-text span {
         font-size: 0.9rem;
     }

     .hub-pill small {
         display: none;
     }
 }

 @media (max-width: 600px) {
     .hub-track {
         flex-direction: column;
     }

     .hub-indicator-bar {
         display: none;
     }

     .bento-header {
         flex-direction: column;
         align-items: flex-start;
         gap: 1rem;
     }

     .bento-footer {
         flex-wrap: wrap;
         gap: 1.5rem;
     }
 }

 /* Vendors Section */
 .vendors {
     padding: 6rem 0;
     background-image: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.95)), url('images/bg_light_pattern.png');
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center;
 }

 .vendors-container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 4rem;
     align-items: center;
 }

 .vendors-content h2 {
     font-size: 2.5rem;
     margin-bottom: 1.5rem;
 }

 .vendors-content p {
     color: var(--gray-600);
     margin-bottom: 2rem;
     font-size: 1.1rem;
 }

 .vendors-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 0.8rem;
     margin-bottom: 2rem;
 }

 .vendor-tag {
     padding: 0.5rem 1.2rem;
     background-color: var(--gray-100);
     border: 1px solid var(--gray-300);
     border-radius: 50px;
     font-size: 0.9rem;
     font-weight: 600;
     color: var(--gray-700);
 }

 .vendors-visual {
     background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
     border-radius: var(--border-radius-lg);
     padding: 3rem 2rem;
     color: white;
     box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5);
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.1);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 2.5rem;
 }

 .vendors-visual::before {
     content: '';
     position: absolute;
     inset: 0;
     background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233b82f6' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
     opacity: 0.5;
     z-index: 0;
 }

 .connectivity-anim-container {
     position: relative;
     width: 200px;
     height: 200px;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1;
 }

 .central-hub {
     width: 80px;
     height: 80px;
     background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2rem;
     color: white;
     box-shadow: 0 0 30px rgba(48, 207, 208, 0.4);
     position: relative;
     z-index: 10;
     animation: pulseHub 3s infinite ease-in-out;
 }

 .hub-ripple {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 100%;
     height: 100%;
     border-radius: 50%;
     border: 2px solid var(--primary-400);
     opacity: 0;
     animation: rippleEffect 2s infinite linear;
 }

 .satellite-node {
     position: absolute;
     width: 45px;
     height: 45px;
     background: rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(5px);
     border-radius: 12px;
     border: 1px solid rgba(255, 255, 255, 0.15);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--primary-300);
     font-size: 1.1rem;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     animation: floatSatellite 4s infinite ease-in-out;
 }

 .sat-1 {
     top: 0;
     left: 50%;
     transform: translateX(-50%) translateY(-20px);
     animation-delay: 0s;
 }

 .sat-2 {
     top: 50%;
     right: 0;
     transform: translate(20px, -50%);
     animation-delay: 1s;
 }

 .sat-3 {
     bottom: 0;
     left: 50%;
     transform: translateX(-50%) translateY(20px);
     animation-delay: 2s;
 }

 .sat-4 {
     top: 50%;
     left: 0;
     transform: translate(-20px, -50%);
     animation-delay: 3s;
 }

 .connectivity-benefits {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
     justify-content: center;
     z-index: 1;
 }

 .benefit-pill {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 0.6rem 1.2rem;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 100px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     font-size: 0.95rem;
     font-weight: 600;
     color: var(--gray-300);
     transition: all 0.3s ease;
 }

 .benefit-pill i {
     color: var(--primary-400);
     font-size: 0.8rem;
 }

 .benefit-pill:hover {
     background: rgba(48, 207, 208, 0.1);
     border-color: var(--primary-400);
     color: white;
     transform: translateY(-2px);
 }

 @keyframes pulseHub {

     0%,
     100% {
         transform: scale(1);
         box-shadow: 0 0 30px rgba(48, 207, 208, 0.4);
     }

     50% {
         transform: scale(1.05);
         box-shadow: 0 0 50px rgba(48, 207, 208, 0.6);
     }
 }

 @keyframes rippleEffect {
     0% {
         width: 100%;
         height: 100%;
         opacity: 0.8;
     }

     100% {
         width: 250%;
         height: 250%;
         opacity: 0;
     }
 }

 @keyframes floatSatellite {

     0%,
     100% {
         transform: translate(var(--tx, 0), var(--ty, 0));
     }

     50% {
         transform: translate(var(--tx, 0), calc(var(--ty, 0) - 10px));
     }
 }

 /* CTA Section - Premium Dark Blue */
 .cta-section {
     padding: 8rem 0;
     background-color: var(--primary-900);
     background-image: linear-gradient(rgba(12, 74, 110, 0.9), rgba(12, 74, 110, 0.9)), url('images/bg_footer_texture.png');
     background-size: cover;
     color: white;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .cta-title-main {
     font-size: 3.5rem;
     font-weight: 800;
     margin-bottom: 0.5rem;
     letter-spacing: -1px;
     line-height: 1.1;
 }

 .highlight-text {
     background: linear-gradient(120deg, var(--primary-300) 0%, white 100%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .cta-subtitle-sub {
     font-size: 1.5rem;
     color: var(--primary-300);
     font-weight: 700;
     letter-spacing: 4px;
     margin-bottom: 2.5rem;
     text-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
 }

 .cta-lead {
     font-size: 1.8rem;
     color: white;
     margin-bottom: 1rem;
     font-weight: 300;
 }

 .highlight-italic {
     font-style: italic;
     font-weight: 700;
     color: white;
     background: rgba(255, 255, 255, 0.1);
     padding: 0 10px;
 }

 .cta-desc {
     font-size: 1.15rem;
     max-width: 650px;
     margin: 0 auto 3.5rem;
     color: #cbd5e1;
     /* slate-300 */
     line-height: 1.7;
 }

 .cta-buttons {
     display: flex;
     justify-content: center;
     gap: 1.5rem;
     flex-wrap: wrap;
 }

 .cta-primary {
     background: white;
     color: var(--primary-700);
     padding: 1.2rem 2.5rem;
     border-radius: 50px;
     font-weight: 800;
     display: flex;
     align-items: center;
     gap: 10px;
     transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     border: none;
     cursor: pointer;
 }

 .cta-primary:hover {
     transform: translateY(-5px);
     box-shadow: 0 20px 40px rgba(255, 255, 255, 0.3);
     background: white;
     color: var(--primary-600);
 }

 .cta-secondary {
     background: rgba(255, 255, 255, 0.1);
     color: white;
     padding: 1.2rem 2.5rem;
     border-radius: 50px;
     font-weight: 700;
     display: flex;
     align-items: center;
     gap: 10px;
     border: 1px solid rgba(255, 255, 255, 0.2);
     backdrop-filter: blur(10px);
     transition: all 0.3s ease;
     cursor: pointer;
 }

 .cta-secondary:hover {
     background: rgba(255, 255, 255, 0.2);
     border-color: white;
     transform: translateY(-3px);
 }

 /* Footer Modernizado */
 footer {
     padding: 6rem 0 3rem;
     background-color: #030712;
     /* Más oscuro para contraste premium */
     background-image: radial-gradient(circle at 50% -20%, rgba(48, 207, 208, 0.05), transparent 70%);
     color: white;
     position: relative;
     border-top: 1px solid rgba(255, 255, 255, 0.05);
 }

 .footer-grid {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr;
     gap: 4rem;
     margin-bottom: 4rem;
 }

 .footer-brand p {
     color: var(--gray-400);
     margin-top: 1.5rem;
     max-width: 300px;
     font-size: 0.95rem;
     line-height: 1.7;
 }

 .footer-column h4 {
     color: white;
     font-size: 0.9rem;
     font-weight: 700;
     margin-bottom: 2rem;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     color: var(--gray-300);
 }

 .footer-column ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .footer-column ul li {
     margin-bottom: 1rem;
 }

 .footer-link {
     color: var(--gray-400);
     text-decoration: none;
     font-size: 0.95rem;
     transition: all var(--transition-fast);
     display: inline-block;
 }

 .footer-link:hover {
     color: var(--primary-300);
     transform: translateX(5px);
 }

 .social-links {
     display: flex;
     gap: 1.2rem;
     margin-top: 2rem;
 }

 .social-link {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.05);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--gray-400);
     text-decoration: none;
     transition: all 0.3s ease;
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .social-link:hover {
     background: var(--primary-400);
     color: white;
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(48, 207, 208, 0.3);
 }

 .footer-bottom {
     padding-top: 2.5rem;
     border-top: 1px solid rgba(255, 255, 255, 0.05);
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 1.5rem;
 }

 .footer-copyright {
     margin-top: 0;
     padding-top: 0;
     border-top: none;
     text-align: left;
     color: var(--gray-500);
     font-size: 0.9rem;
 }

 .footer-legal {
     display: flex;
     gap: 2rem;
 }

 .footer-legal-link {
     color: var(--gray-500);
     text-decoration: none;
     font-size: 0.85rem;
     transition: color 0.2s;
 }

 .footer-legal-link:hover {
     color: var(--primary-300);
 }

 @media (max-width: 1024px) {
     .footer-grid {
         grid-template-columns: 1fr 1fr 1fr;
         gap: 3rem;
     }
 }

 @media (max-width: 768px) {
     .footer-grid {
         grid-template-columns: 1fr 1fr;
     }

     .footer-bottom {
         flex-direction: column;
         text-align: center;
     }

     .footer-brand {
         grid-column: span 2;
         text-align: center;
     }

     .footer-brand p {
         margin: 1.5rem auto;
     }

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

 @media (max-width: 480px) {
     .footer-grid {
         grid-template-columns: 1fr;
         text-align: center;
     }

     .footer-brand {
         grid-column: span 1;
     }
 }

 /* Responsive Design */
 @media (max-width: 1024px) {

     .perspectives-grid,
     .features-grid,
     .integrations-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .logs-container,
     .vendors-container {
         grid-template-columns: 1fr;
         gap: 3rem;
     }

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

 @media (max-width: 768px) {
     .nav-container {
         flex-direction: column;
         gap: 1.5rem;
     }

     .nav-links {
         flex-wrap: wrap;
         justify-content: center;
     }

     .perspectives-grid,
     .features-grid,
     .integrations-grid {
         grid-template-columns: 1fr;
     }

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

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

     .cta-section h2 {
         font-size: 2.2rem;
     }

     .cta-buttons {
         flex-direction: column;
         align-items: center;
     }

     .footer-container {
         flex-direction: column;
         gap: 2rem;
         text-align: center;
     }
 }





 /* Estilos para las opciones mejoradas */

 /* Opción 1 - Stats */
 .hero-stats {
     display: flex;
     justify-content: center;
     gap: 3rem;
     margin: 2rem 0 3rem;
 }

 .stat-item {
     text-align: center;
     padding: 1.8rem 1.5rem;
     background: rgba(255, 255, 255, 0.03);
     backdrop-filter: blur(10px);
     border-radius: var(--border-radius-lg);
     border: 1px solid rgba(255, 255, 255, 0.1);
     min-width: 180px;
     transition: all var(--transition-normal);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 }

 .stat-item:hover {
     transform: translateY(-8px);
     background: rgba(255, 255, 255, 0.08);
     border-color: var(--primary-400);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(48, 207, 208, 0.2);
 }

 .stat-number {
     font-size: 2.8rem;
     font-weight: 900;
     background: linear-gradient(135deg, #fff 0%, var(--primary-300) 100%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     line-height: 1;
     margin-bottom: 0.5rem;
 }

 .stat-label {
     font-size: 0.85rem;
     color: var(--gray-300);
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 /* Opción 2 - Features */
 .hero-features {
     display: flex;
     justify-content: center;
     gap: 2rem;
     margin: 2rem 0;
 }

 .feature-highlight {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     background: rgba(48, 207, 208, 0.1);
     padding: 0.8rem 1.5rem;
     border-radius: 50px;
     color: var(--primary-600);
     font-weight: 600;
 }

 .feature-highlight i {
     color: var(--primary-400);
 }

 /* Opción 3 - Recomendada */
 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     background: rgba(48, 207, 208, 0.1);
     padding: 0.5rem 1.2rem;
     border-radius: 50px;
     margin-bottom: 2rem;
     font-weight: 600;
     font-size: 0.9rem;
     color: var(--primary-600);
 }

 .pulse-dot {
     width: 8px;
     height: 8px;
     background: var(--primary-400);
     border-radius: 50%;
     animation: pulse 2s infinite;
 }

 .hero-gradient {
     background: linear-gradient(135deg, var(--primary-400), var(--primary-600));
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     font-weight: 900;
 }

 .hero-lead {
     font-size: 1.3rem;
     color: var(--gray-700);
     max-width: 800px;
     margin: 2rem auto 3rem;
     line-height: 1.7;
 }

 .hero-value-prop {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2rem;
     margin: 3rem 0;
 }

 .value-card {
     text-align: center;
     padding: 2rem;
     background: white;
     border-radius: var(--border-radius-lg);
     box-shadow: var(--shadow-md);
     transition: transform var(--transition-normal);
 }

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

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

 .value-card h4 {
     margin-bottom: 0.5rem;
     color: var(--primary-700);
 }

 .value-card p {
     color: var(--gray-600);
     font-size: 0.9rem;
 }

 .hero-action {
     text-align: center;
     margin-top: 3rem;
 }

 .primary-action {
     background: linear-gradient(135deg, var(--primary-400), var(--primary-600));
     color: white;
     border: none;
     padding: 1.2rem 2.5rem;
     border-radius: var(--border-radius-md);
     font-weight: 700;
     font-size: 1.1rem;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     gap: 0.8rem;
     transition: all var(--transition-normal);
     box-shadow: 0 10px 25px rgba(48, 207, 208, 0.3);
 }

 .primary-action:hover {
     transform: translateY(-2px);
     box-shadow: 0 15px 30px rgba(48, 207, 208, 0.4);
 }

 .action-note {
     margin-top: 1rem;
     color: var(--gray-500);
     font-size: 0.9rem;
 }

 /* Animación de pulso */
 @keyframes pulse {
     0% {
         opacity: 1;
         transform: scale(1);
     }

     50% {
         opacity: 0.7;
         transform: scale(1.1);
     }

     100% {
         opacity: 1;
         transform: scale(1);
     }
 }

 /* Responsive */
 @media (max-width: 768px) {

     .hero-stats,
     .hero-features,
     .hero-value-prop {
         flex-direction: column;
         grid-template-columns: 1fr;
         gap: 1rem;
     }

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

     .hero-lead {
         font-size: 1.1rem;
     }
 }

 /* Success Stories Section - V3 (Overlapping Design) */
 .success-stories {
     padding: 10rem 0;
     background-color: #f8fafc;
     overflow: hidden;
     /* For large watermarks */
 }

 .success-grid {
     display: flex;
     flex-direction: column;
     gap: 8rem;
     /* Large gap for respiratory design */
     max-width: 1100px;
     margin: 0 auto;
 }

 .success-card {
     display: flex;
     align-items: center;
     position: relative;
     /* Removed default card background/border to allow free-floating elements */
     background: transparent;
     border: none;
     box-shadow: none;
     height: auto;
     overflow: visible;
     /* Allow overlap */
 }

 /* Alternating Layout */
 .success-card:nth-child(even) {
     flex-direction: row-reverse;
 }

 /* Image Block */
 .success-img-container {
     width: 65%;
     /* Dominant image */
     height: 450px;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
     position: relative;
     z-index: 1;
 }

 .success-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
 }

 .success-card:hover .success-img {
     transform: scale(1.1);
 }

 .success-img-container::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(to right, rgba(12, 74, 110, 0.4), transparent);
 }

 /* Text Card Block - The Overlap Magic */
 .success-content {
     width: 45%;
     /* Slightly less than half */
     background: white;
     padding: 3.5rem;
     border-radius: 16px;
     box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
     z-index: 5;
     /* Sit on top of image */
     margin-left: -10%;
     /* The overlap for LTR */
     position: relative;
     transition: transform 0.4s ease;
 }

 .success-card:nth-child(even) .success-content {
     margin-left: 0;
     margin-right: -10%;
     /* The overlap for RTL */
 }

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

 /* Typography & Details */
 .success-content h3 {
     font-size: 2.5rem;
     font-weight: 800;
     line-height: 1;
     margin-bottom: 1.5rem;
     background: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-700) 100%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .success-summary {
     color: var(--gray-600);
     font-size: 1.1rem;
     line-height: 1.7;
     margin-bottom: 2.5rem;
 }

 /* Big Number Watermark */
 .success-card::before {
     font-size: 15rem;
     font-weight: 900;
     color: var(--gray-200);
     position: absolute;
     top: -4rem;
     line-height: 1;
     opacity: 0.4;
     z-index: 0;
     font-family: inherit;
 }

 .success-card:nth-child(1)::before {
     content: '01';
     right: 0;
 }

 .success-card:nth-child(2)::before {
     content: '02';
     left: 0;
 }

 .success-card:nth-child(3)::before {
     content: '03';
     right: 0;
 }

 /* Read More Button - Gradient Pill */
 .read-more-btn {
     display: inline-flex;
     align-items: center;
     gap: 0.8rem;
     background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
     color: white;
     padding: 1rem 2rem;
     border-radius: 50px;
     text-decoration: none;
     font-weight: 600;
     font-size: 0.95rem;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px -5px rgba(38, 182, 183, 0.4);
     border: none;
     /* Override previous */
 }

 .read-more-btn:hover {
     transform: translateY(-2px) scale(1.02);
     box-shadow: 0 15px 30px -5px rgba(38, 182, 183, 0.5);
     background: linear-gradient(135deg, var(--primary-400), var(--primary-600));
     color: white;
 }

 .read-more-btn i {
     transition: transform 0.3s ease;
 }

 .read-more-btn:hover i {
     transform: translateX(4px);
 }

 /* Remove old overlay elements if they conflict */
 .success-overlay,
 .success-content::after {
     display: none;
 }

 /* Responsive */
 @media (max-width: 900px) {

     .success-card,
     .success-card:nth-child(even) {
         flex-direction: column;
         align-items: flex-start;
     }

     .success-img-container {
         width: 100%;
         height: 300px;
         margin-bottom: -40px;
         /* Slight overlap vertically */
         z-index: 1;
     }

     .success-content,
     .success-card:nth-child(even) .success-content {
         width: 90%;
         margin: 0 auto;
         margin-left: auto;
         /* Reset margins */
         margin-right: auto;
         z-index: 5;
     }

     .success-card::before {
         font-size: 8rem;
         top: 0;
     }
 }

 /* CASE STUDY DETAIL PAGE STYLES - V6 DARK MODERN (CYBER-CORPORATE) */

 .case-study-page body {
     background-color: #0b1120;
     /* Deepest Navy/Black */
     color: #e2e8f0;
     font-family: 'Inter', sans-serif;
 }

 /* Immersive Dark Hero */
 .case-hero {
     height: 50vh;
     min-height: 450px;
     position: relative;
     display: flex;
     align-items: center;
     overflow: hidden;
 }

 /* Background Image with heavy dark overlay */
 .case-hero::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: url('../images/case_aerospace.png');
     background-size: cover;
     background-position: center;
     opacity: 0.4;
     filter: saturate(0) contrast(1.2);
     /* Black & white bg for mood */
     z-index: 0;
 }

 /* Gradient Mask to fade into body */
 .case-hero::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(to right, #0b1120 10%, rgba(11, 17, 32, 0.8) 50%, rgba(11, 17, 32, 0.2)),
         linear-gradient(to top, #0b1120 0%, transparent 80%);
     z-index: 1;
 }

 .case-hero .container {
     position: relative;
     z-index: 10;
     max-width: 1200px;
 }

 .hero-text-block {
     max-width: 800px;
     padding-left: 2rem;
     border-left: 4px solid var(--primary-500);
     /* Neon accent line */
 }

 .case-badge {
     display: inline-block;
     padding: 0.4rem 1rem;
     background: rgba(34, 211, 238, 0.1);
     color: #22d3ee;
     /* Cyan-400 */
     border: 1px solid rgba(34, 211, 238, 0.2);
     border-radius: 4px;
     font-weight: 600;
     font-size: 0.8rem;
     margin-bottom: 1.5rem;
     letter-spacing: 2px;
     text-transform: uppercase;
     box-shadow: 0 0 15px rgba(34, 211, 238, 0.1);
     /* Glow */
 }

 .case-hero h1 {
     font-size: 3.5rem;
     font-weight: 800;
     line-height: 1.1;
     color: white;
     margin-bottom: 1rem;
     letter-spacing: -1px;
 }

 .case-hero p {
     font-size: 1.3rem;
     color: #94a3b8;
     /* Slate-400 */
     max-width: 650px;
 }

 /* CONTENT LAYOUT */
 .case-content {
     position: relative;
     z-index: 20;
     padding: 2rem 0 6rem;
 }

 .case-grid {
     display: grid;
     grid-template-columns: 2fr 1fr;
     gap: 3rem;
     align-items: start;
 }

 /* Main content spacing adjustments for dark mode readability */
 .case-main {
     background: transparent;
     /* No card bg here, just text */
     padding: 0 1rem;
     box-shadow: none;
     border: none;
 }

 .case-main h2 {
     font-size: 1.8rem;
     color: white;
     margin: 3rem 0 1.5rem;
     font-weight: 700;
     letter-spacing: -0.5px;
     display: flex;
     align-items: center;
     gap: 1rem;
 }

 .case-main h2::after {
     content: '';
     flex: 1;
     height: 1px;
     background: rgba(255, 255, 255, 0.1);
 }

 .case-main h2:first-child {
     margin-top: 0;
 }

 .case-main p {
     color: #cbd5e1;
     /* Slate-300 */
     font-size: 1.1rem;
     line-height: 1.8;
     margin-bottom: 2rem;
 }

 /* Tech List - Dark Cards */
 .case-main ul {
     background: #1e293b;
     /* Dark Slate card */
     padding: 2.5rem;
     border-radius: 16px;
     border: 1px solid rgba(255, 255, 255, 0.05);
     margin: 2.5rem 0;
     display: grid;
     gap: 1.5rem;
 }

 .case-main li {
     list-style: none;
     display: flex;
     gap: 1rem;
     color: #e2e8f0;
     font-size: 1.05rem;
 }

 .case-main li strong {
     color: #22d3ee;
     /* Neon Cyan */
     min-width: 140px;
     display: inline-block;
 }

 /* SIDEBAR - DARK WIDGETS */
 .case-sidebar {
     display: flex;
     flex-direction: column;
     gap: 2rem;
 }

 .sidebar-tile {
     background: #1e293b;
     /* Dark Slate */
     border: 1px solid rgba(255, 255, 255, 0.05);
     border-radius: 16px;
     padding: 2rem;
     position: relative;
     overflow: hidden;
 }

 /* Neon Top Border for sidebar widgets */
 .sidebar-tile::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--primary-500), transparent);
 }

 .case-sidebar h3 {
     color: #94a3b8;
     font-size: 0.85rem;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     margin-bottom: 1.5rem;
 }

 /* Results - Glowing Numbers */
 .results-tile-group {
     background: linear-gradient(145deg, #1e293b, #0f172a);
     padding: 0;
 }

 .result-card-compact {
     padding: 1.5rem 2rem;
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     display: flex;
     flex-direction: column;
     align-items: center;
     background: transparent;
 }

 .result-card-compact:last-child {
     border-bottom: none;
 }

 .result-number {
     font-size: 3.5rem;
     font-weight: 800;
     color: white;
     text-shadow: 0 0 20px rgba(34, 211, 238, 0.4);
     /* Neon Glow */
     line-height: 1;
     margin-bottom: 0.5rem;
 }

 .result-label {
     color: #94a3b8;
     font-size: 0.8rem;
     font-weight: 600;
     letter-spacing: 1px;
 }

 /* Project Details List */
 .project-details li {
     display: flex;
     justify-content: space-between;
     padding: 1rem 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     color: white;
 }

 .project-details li i {
     color: var(--primary-500);
 }

 .project-details li strong {
     color: white;
 }

 .project-details li span {
     color: #94a3b8;
 }

 .demo-btn.full-width {
     margin-top: 1.5rem;
     width: 100%;
     background: var(--primary-500);
     color: #0b1120;
     font-weight: 700;
     border-radius: 8px;
     padding: 1rem;
     border: none;
     transition: all 0.3s ease;
 }

 .demo-btn.full-width:hover {
     background: #22d3ee;
     /* Brighter Cyan */
     box-shadow: 0 0 20px rgba(34, 211, 238, 0.4);
 }

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

     .hero-text-block {
         border-left: none;
         padding-left: 0;
         text-align: center;
         margin: 0 auto;
     }

     .case-hero {
         align-items: center;
         justify-content: center;
     }

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

     .case-main ul {
         display: flex;
         flex-direction: column;
     }

     .case-main li {
         flex-direction: column;
         gap: 0.2rem;
     }
 }

 /* ========================================= */
 /* MODAL SYSTEM STYLES                       */
 /* ========================================= */

 .modal {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 20000;
     display: none;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .modal.active {
     display: flex !important;
     opacity: 1 !important;
     visibility: visible !important;
 }

 .modal-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(10, 22, 40, 0.85);
     backdrop-filter: blur(8px);
 }

 .modal-container {
     position: relative;
     background: white;
     border-radius: 24px;
     width: 90%;
     max-width: 600px;
     max-height: 90vh;
     overflow-y: auto;
     box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3), 0 0 60px rgba(48, 207, 208, 0.1);
     transform: translateY(30px) scale(0.95);
     transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .modal.active .modal-container {
     transform: translateY(0) scale(1);
 }

 .modal-close {
     position: absolute;
     top: 1.25rem;
     right: 1.25rem;
     width: 40px;
     height: 40px;
     border: none;
     background: var(--gray-100);
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--gray-600);
     transition: all 0.2s ease;
     z-index: 10;
 }

 .modal-close:hover {
     background: var(--primary-500);
     color: white;
     transform: rotate(90deg);
 }

 .modal-header {
     text-align: center;
     padding: 2.5rem 2rem 1.5rem;
     background: linear-gradient(135deg, var(--primary-50) 0%, white 100%);
     border-bottom: 1px solid var(--gray-100);
 }

 .modal-icon {
     width: 70px;
     height: 70px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1.25rem;
 }

 .modal-icon i {
     font-size: 1.8rem;
     color: white;
 }

 .modal-header h2 {
     font-size: 1.75rem;
     color: var(--gray-900);
     margin-bottom: 0.5rem;
     font-weight: 700;
 }

 .modal-header p {
     color: var(--gray-600);
     font-size: 1rem;
 }

 .modal-body {
     padding: 2rem;
 }

 .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
 }

 @media (max-width: 600px) {
     .form-row {
         grid-template-columns: 1fr;
     }
 }

 .form-group {
     margin-bottom: 1.25rem;
     position: relative;
 }

 .form-group label {
     display: block;
     font-size: 0.9rem;
     font-weight: 600;
     color: var(--gray-700);
     margin-bottom: 0.5rem;
 }

 .form-group input,
 .form-group select,
 .form-group textarea {
     width: 100%;
     padding: 0.875rem 1rem;
     border: 2px solid var(--gray-200);
     border-radius: 12px;
     font-size: 1rem;
     font-family: inherit;
     color: var(--gray-800);
     background: white;
     transition: all 0.2s ease;
     box-sizing: border-box;
 }

 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
     outline: none;
     border-color: var(--primary-500);
     box-shadow: 0 0 0 4px rgba(48, 207, 208, 0.1);
 }

 .form-group input::placeholder,
 .form-group textarea::placeholder {
     color: var(--gray-400);
 }

 .form-group textarea {
     resize: vertical;
     min-height: 80px;
 }

 .submit-btn {
     width: 100%;
     padding: 1rem 2rem;
     font-size: 1.1rem;
     font-weight: 600;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.75rem;
     margin-top: 0.5rem;
     border: none;
     cursor: pointer;
     background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
     box-shadow: 0 8px 25px rgba(48, 207, 208, 0.3);
     color: white;
     /* Ensure text is white */
 }

 .submit-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 12px 35px rgba(48, 207, 208, 0.4);
 }

 /* Scrollbar styling for modal */
 .modal-container::-webkit-scrollbar {
     width: 6px;
 }

 .modal-container::-webkit-scrollbar-track {
     background: var(--gray-100);
 }

 .modal-container::-webkit-scrollbar-thumb {
     background: var(--primary-400);
     border-radius: 3px;
 }

 /* Form Validation Styles */
 .form-group.error input,
 .form-group.error select,
 .form-group.error textarea {
     border-color: #ef4444;
     background-color: #fef2f2;
 }

 .form-group.error input:focus,
 .form-group.error select:focus,
 .form-group.error textarea:focus {
     border-color: #ef4444;
     box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
 }

 .form-group.success input,
 .form-group.success select,
 .form-group.success textarea {
     border-color: #22c55e;
     background-color: #f0fdf4;
 }

 .form-group.success input:focus,
 .form-group.success select:focus,
 .form-group.success textarea:focus {
     border-color: #22c55e;
     box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
 }

 .error-message {
     display: block;
     color: #ef4444;
     font-size: 0.85rem;
     margin-top: 0.5rem;
     font-weight: 500;
     animation: slideIn 0.3s ease;
 }

 .form-group.error label {
     color: #ef4444;
 }

 .form-group.success label {
     color: #22c55e;
 }

 .form-group.error::after,
 .form-group.success::after {
     font-family: 'Font Awesome 6 Free';
     font-weight: 900;
     position: absolute;
     right: 1rem;
     top: 2.5rem;
     font-size: 1rem;
     pointer-events: none;
 }

 .form-group.error::after {
     content: '\f00d';
     color: #ef4444;
 }

 .form-group.success::after {
     content: '\f00c';
     color: #22c55e;
 }

 /* Adjust input padding for icon */
 .form-group.error input,
 .form-group.error select,
 .form-group.success input,
 .form-group.success select {
     padding-right: 2.5rem;
 }

 /* Animations */
 @keyframes slideIn {
     from {
         opacity: 0;
         transform: translateY(-5px);
     }

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

 @keyframes successPulse {
     0% {
         transform: scale(0.8);
         opacity: 0;
     }

     50% {
         transform: scale(1.1);
     }

     100% {
         transform: scale(1);
         opacity: 1;
     }
 }

 @keyframes shake {

     0%,
     100% {
         transform: translateX(0);
     }

     10%,
     30%,
     50%,
     70%,
     90% {
         transform: translateX(-5px);
     }

     20%,
     40%,
     60%,
     80% {
         transform: translateX(5px);
     }
 }

 .form-group.error input {
     animation: shake 0.5s ease;
 }

 /* ========================================= */
 /* FLOATING SOCIAL BUTTONS                   */
 /* ========================================= */

 .floating-social-actions {
     position: fixed;
     top: 25%;
     right: 2rem;
     display: flex;
     flex-direction: column;
     gap: 1rem;
     z-index: 990;
     /* Just below modal z-index */
 }

 .float-btn {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 1.4rem;
     text-decoration: none;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
     transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     position: relative;
     overflow: hidden;
 }

 .float-btn:hover {
     transform: scale(1.15) translateX(5px);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
 }

 .float-btn i {
     z-index: 2;
     position: relative;
 }

 /* Specific Colors */
 .whatsapp-float {
     background: #25D366;
 }

 .whatsapp-float:hover {
     background: #22bf5b;
 }

 .facebook-float {
     background: #1877F2;
 }

 .facebook-float:hover {
     background: #166fe5;
 }

 .instagram-float {
     background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
 }

 .instagram-float:hover {
     filter: brightness(1.1);
 }

 .email-float {
     background: var(--primary-500);
 }

 .email-float:hover {
     background: var(--primary-600);
 }

 /* Shine Effect */
 .float-btn::after {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
     transition: 0.5s;
     transform: skewX(-25deg);
 }

 .float-btn:hover::after {
     left: 100%;
 }

 /* Responsive adjustments */
 @media (max-width: 768px) {
     .floating-social-actions {
         bottom: 1.5rem;
         left: 1.5rem;
         gap: 0.8rem;
     }

     .float-btn {
         width: 45px;
         height: 45px;
         font-size: 1.2rem;
     }
 }