@charset "utf-8";
        :root {
            /* Background and neutrals */
			--color-bg: #121212;             
			--color-negro-profundo: #0A0A0A; 
			--color-negro-principal: #1A1A1A;
			--color-gris-oscuro: #2A2A2A;    
			--bg-section-1: #1A1A1A; 
			--bg-section-2: #181825; 
			--bg-section-3: #202A35;
			--bg-section-blue: #03045e;
			--bg-section-blue-2: #023e8a;
			--color-bg-blue-dark: #0F172A;
			--color-text-main: #ffffff;
			--color-text-secondary: #c7d2fe;

			/* Buttons and accents */ 
			--color-btn-primary: #3B82F6;
			--color-btn-hover: #2563EB;
			
			/* Degradados principales */
            --gradient-primary: linear-gradient(135deg, #60A5FA 0%, #3B82F6 50%, #1D4ED8 100%);
            --gradient-secondary: linear-gradient(90deg, #3B82F6 0%, #2563EB 50%, #1E3A8A 100%);
            --gradient-button: linear-gradient(135deg, #3B82F6 0%, #2563EB 50%, #1E40AF 100%);
			--gradient-blue-dark: linear-gradient(90deg, #1E3A8A 0%, #1E40AF 50%, #1E3A8A 100%);
			--gradient-blue-gray: linear-gradient(90deg, #1E3A8A 0%, #334155 50%, #64748B 100%);
			--gradient-blue-black: linear-gradient(90deg, #1E3A8A 0%, #0F172A 50%, #000000 100%);

			/* 🎯 Colores semánticos */
            --color-primary: var(--color-morado-principal);
            --color-accent: var(--color-rosa-magenta);
            --color-background-primary: var(--color-negro-profundo);
            --color-background-secondary: var(--color-negro-principal);
            --color-background-card: var(--color-gris-oscuro);
            --color-text-primary: var(--color-blanco-puro);
            --color-text-secondary: var(--color-blanco-suave);
            --color-text-muted: #9CA3AF;
            --color-text-accent: var(--color-morado-claro);
            
            /* 🔍 Variaciones con transparencia */
            --color-negro-alpha-95: rgba(10, 10, 10, 0.95);
            --color-negro-alpha-80: rgba(26, 26, 26, 0.8);
            --color-negro-alpha-60: rgba(26, 26, 26, 0.6);
            --color-morado-alpha-20: rgba(139, 92, 246, 0.2);
            --color-morado-alpha-10: rgba(139, 92, 246, 0.1);
            --color-blanco-alpha-90: rgba(255, 255, 255, 0.9);
            --color-blanco-alpha-70: rgba(255, 255, 255, 0.7);
            --color-blanco-alpha-20: rgba(255, 255, 255, 0.2);
            
            /* ?? Sistema de espaciado MOBILE FIRST */
            --space-xs: 0.25rem;  
            --space-sm: 0.5rem;    
            --space-md: 1rem;      
            --space-lg: 1.5rem;    
            --space-xl: 2rem;     
            --space-2xl: 3rem;     
            --space-3xl: 4rem;     
            --space-4xl: 5rem;     
			--space-5xl: 7rem;     
			--space-6xl: 8.5rem;
            
            /* ?? Sistema tipográfico MOBILE FIRST */
            --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
            
            /* ?? Pesos tipográficos */
            --font-weight-light: 300;
            --font-weight-normal: 400;
            --font-weight-medium: 500;
            --font-weight-semibold: 600;
            --font-weight-bold: 700;
            --font-weight-extrabold: 800;
            --font-weight-black: 900;
            
            /* ?? Tamaños de tipografía MOBILE FIRST */
			--text-xs: 0.675rem;    
			--text-sm: 0.8rem;     
			--text-base: 0.9rem;   
			--text-lg: 1rem;        
			--text-xl: 1.125rem;  
			--text-2xl: 1.35rem;   
			--text-3xl: 1.6rem;    
			--text-4xl: 1.95rem;    
			--text-5xl: 2.2rem;    
			--text-6xl: 2.6rem;    
            
            /* ?? Sistema de sombras */
            --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
            --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
            --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
            --shadow-button: 0 4px 14px rgba(139, 92, 246, 0.4);
            --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.3);
            --shadow-glow: 0 0 20px rgba(139, 92, 246, 0.5);
            
            /* ?? Sistema de bordes */
            --border-radius-sm: 0.25rem;   /* 4px */
            --border-radius-md: 0.5rem;    /* 8px */
            --border-radius-lg: 0.75rem;   /* 12px */
            --border-radius-xl: 1rem;      /* 16px */
            --border-radius-2xl: 1.5rem;   /* 24px */
            --border-radius-full: 9999px;
            
            /* ? Sistema de transiciones */
            --transition-fast: 0.15s ease-out;
            --transition-medium: 0.3s ease-out;
            --transition-slow: 0.5s ease-out;
            --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            
            /* ?? Efectos especiales */
            --blur-sm: blur(4px);
            --blur-md: blur(8px);
            --blur-lg: blur(16px);
            --backdrop-blur: blur(10px);
						
        }

        /* ?? RESET Y BASE STYLES - MOBILE FIRST */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            font-size: 16px;
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-primary);
            background: var(--color-negro-profundo);
            color: var(--color-text-main);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
        }

		.bg-section-2 {
			background: var(--bg-section-2);
		}

		.bg-section-3 {
			background: var(--bg-section-3);
		}	
		
		.bg-section-blue {
			background: var(--bg-section-blue);
		}	

		.bg-section-blue-2 {
			background: var(--bg-section-blue-2);
		}

		.gradient-primary {
			background: var(--gradient-primary);
		}

		.gradient-secondary {
			background: var(--gradient-secondary);
		}

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

		.gradient-blue-dark {
			background: var(--gradient-blue-dark);
		}

		.gradient-blue-gray {
			background: var(--gradient-blue-gray);
		}

		.gradient-blue-black {
			background: var(--gradient-blue-black);
		}

        /* ?? HEADER MOBILE FIRST */
        .header {
            position: relative;
            background: var(--color-negro-principal);
            border-bottom: 1px solid var(--color-blanco-alpha-20);
            padding: var(--space-md) var(--space-lg);
            transition: var(--transition-medium);
        }

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

        /* 🏷️ HEADER LOGO CON IMAGEN - RESPONSIVE */

/* Contenedor del logo */
.header__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: var(--transition-fast);
    padding: var(--space-xs); /* Padding para área de clic más grande */
    border-radius: var(--border-radius-sm);
}

.header__logo:hover {
    transform: scale(1.05);
    background: var(--color-blanco-alpha-20); /* Fondo sutil al hacer hover */
}

.header__logo:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Imagen del logo */
.header__logo-image {
    width: 75px; /* 75px de ancho para todos los formatos */
    height: auto; /* Altura automática para mantener proporción */
    display: block;
    transition: var(--transition-fast);
    
    /* Optimizaciones para mejor renderizado */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Estados de carga */
.header__logo-image:not([src]),
.header__logo-image[src=""] {
    background: var(--gradient-primary);
    border-radius: var(--border-radius-sm);
    position: relative;
}

.header__logo-image:not([src])::after,
.header__logo-image[src=""]::after {
    content: "CA";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: var(--font-weight-bold);
    font-size: var(--text-sm);
}

/* 📱 MÓVIL (320px - 767px) */
@media (max-width: 767px) {
    .header__logo-image {
        width: 65px; /* Ligeramente más pequeño en móvil */
    }
    
    .header__logo {
        padding: var(--space-xs);
    }
}

/* 📱 MÓVIL PEQUEÑO (menos de 480px) */
@media (max-width: 479px) {
    .header__logo-image {
        width: 60px; /* Aún más pequeño en móviles muy pequeños */
    }
}

/* 📱 TABLET (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .header__logo-image {
        width: 70px; /* Tamaño intermedio para tablet */
    }
}

/* 💻 DESKTOP (1024px+) */
@media (min-width: 1024px) {
    .header__logo-image {
        width: 75px; /* Tamaño completo en desktop */
    }
    
    .header__logo {
        padding: var(--space-sm); /* Más padding en desktop */
    }
    
    /* Efecto hover más pronunciado en desktop */
    .header__logo:hover .header__logo-image {
        filter: brightness(1.1);
    }
}

/* 🖥️ DESKTOP GRANDE (1200px+) */
@media (min-width: 1200px) {
    .header__logo-image {
        width: 80px; /* Ligeramente más grande en pantallas muy grandes */
    }
}

/* 🔧 OPTIMIZACIONES ADICIONALES */

/* Para logos con fondo transparente */
.header__logo-image[src*=".png"] {
    background: transparent;
}

/* Para logos SVG */
.header__logo-image[src*=".svg"] {
    width: 75px;
    height: auto;
    fill: currentColor; /* Hereda el color del texto si es SVG */
}

/* Fallback si la imagen no carga */
.header__logo-image:not([src]),
.header__logo-image[src=""],
.header__logo-image[alt]:after {
    min-width: 75px;
    min-height: 40px;
    background: var(--gradient-primary);
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: var(--font-weight-bold);
    font-size: var(--text-sm);
}

/* Accesibilidad mejorada */
@media (prefers-reduced-motion: reduce) {
    .header__logo,
    .header__logo-image {
        transition: none;
    }
    
    .header__logo:hover {
        transform: none;
    }
}

        /* ?? Navigation Mobile First */
        .header__nav {
            display: none; /* Oculto en móvil por defecto */
        }

        .header__nav-list {
            display: flex;
            list-style: none;
            gap: var(--space-xl);
            align-items: center;
        }

        .header__nav-link {
            text-decoration: none;
            color: var(--color-text-secondary);
            font-weight: var(--font-weight-medium);
            font-size: var(--text-sm);
            transition: var(--transition-fast);
            padding: var(--space-sm) 0;
            position: relative;
        }

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

        .header__nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--gradient-primary);
            transition: var(--transition-fast);
        }

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

        /* ?? CTA Buttons */
        .header__cta-container {
            display: flex;
            align-items: center;
            gap: var(--space-md);
        }


        .btn {
            padding: var(--space-sm) var(--space-lg);
            border-radius: var(--border-radius-full);
            font-weight: var(--font-weight-semibold);
            font-size: var(--text-sm);
            text-decoration: none;
            transition: var(--transition-medium);
            cursor: pointer;
            border: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px; /* Touch-friendly */
            white-space: nowrap;
        }

        .btn--secondary {
            color: var(--color-text-secondary);
            background: transparent;
            border: 1px solid var(--color-blanco-alpha-20);
        }

        .btn--secondary:hover {
            color: var(--color-text-primary);
            background: var(--color-blanco-alpha-20);
            transform: translateY(-1px);
        }

        .btn--primary {
            background: var(--color-btn-primary);
            color: var(--color-text-secondary);
        }

        .btn--primary:hover {
            transform: translateY(-2px);
			background: var(--color-btn-hove);
        }

        /* ?? Mobile Menu Button */
        .header__mobile-menu {
            display: flex;
            flex-direction: column;
            background: none;
            border: none;
            cursor: pointer;
            padding: var(--space-xs);
            gap: 4px;
        }

        .header__mobile-menu span {
            width: 24px;
            height: 2px;
            background: var(--color-text-primary);
            border-radius: 2px;
            transition: var(--transition-fast);
        }

        .header__mobile-menu.active span:nth-child(1) {
            transform: rotate(45deg) translate(6px, 6px);
        }

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

        .header__mobile-menu.active span:nth-child(3) {
            transform: rotate(-45deg) translate(6px, -6px);
        }

        /* ?? HERO SECTION MOBILE FIRST */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--space-2xl) var(--space-lg) var(--space-2xl);
            position: relative;
            overflow: hidden;
        }

        .hero__background {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 0;
        }

        .hero__container {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .hero__content {
            max-width: 600px;
            margin: 0 auto var(--space-3xl);
        }

        .hero__title {
            font-size: var(--text-4xl);
            font-weight: var(--font-weight-black);
            line-height: 1.1;
            margin-bottom: var(--space-lg);
            color: var(--color-text-primary);
        }

        .hero__title-highlight {
		  display: inline-block;
		  background: var(--gradient-primary);
		  -webkit-background-clip: text;
		  -webkit-text-fill-color: transparent;
		  letter-spacing: 0.05em;
		}


        .hero__subtitle {
            font-size: var(--text-xl);
            color: var(--color-text-muted);
            margin-bottom: var(--space-2xl);
            font-weight: var(--font-weight-normal);
            line-height: 1.5;
        }

        .hero__cta-container {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
            align-items: center;
            margin-bottom: var(--space-3xl);
        }

        .hero__cta-primary {
		  background: var(--gradient-button);
		  color: white;
		  padding: var(--space-lg) var(--space-xl);
		  font-size: var(--text-xl);
		  font-weight: var(--font-weight-semibold);
		  border-radius: 12px;
		  text-decoration: none;
		  transition: all 0.3s ease;
		  min-height: 56px;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  width: fit-content;
		  gap: 0.5rem;
		}


        .hero__cta-primary:hover {
            transform: translateY(-3px);
			background: var(--color-btn-hover);
        }

        .hero__cta-note {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            font-size: var(--text-sm);
            color: var(--color-text-muted);
        }

        .hero__cta-note::before {
            content: '??';
            font-size: var(--text-xs);
        }

/* 🔧 CORRECCIÓN ESPECÍFICA PARA ELIMINAR FONDO AZUL EN DESKTOP */

/* Contenedor de la imagen del hero - SIN FONDO */
.hero__media {
    position: relative;
    margin: 0 auto;
    border-radius: 0; /* Eliminar border-radius para evitar efectos visuales */
    overflow: visible; /* Cambiar de hidden a visible */
    box-shadow: none; /* Eliminar sombra del contenedor */
    background: transparent; /* Fondo transparente */
}

/* Imagen principal del hero */
.hero__image {
    width: 95%; /* 95% del ancho en móvil */
    height: auto; /* Altura automática para mantener proporción */
    display: block;
    margin: 0 auto;
    border-radius: var(--border-radius-lg); /* Border-radius SOLO en la imagen */
    transition: var(--transition-medium);
    box-shadow: var(--shadow-xl); /* Sombra SOLO en la imagen */
}

/* Lazy loading styles para la imagen */
.hero__image.lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.hero__image.lazy-image.loaded {
    opacity: 1;
}

.hero__image.lazy-image.loading {
    background: var(--color-background-card); /* Fondo neutro mientras carga */
    min-height: 200px; /* Altura mínima mientras carga en móvil */
}

/* Eliminar placeholder si no es necesario */
.hero__image-placeholder {
    display: none; /* Ocultar completamente el placeholder */
}

/* 📱 MÓVIL (por defecto) */
@media (max-width: 767px) {
    .hero__media {
        width: 100%;
        max-width: none;
        margin-top: var(--space-2xl);
        background: transparent; /* Asegurar fondo transparente */
    }
    
    .hero__image {
        width: 95%; /* 95% del ancho en móvil */
    }
    
    .hero__image.lazy-image.loading {
        min-height: 220px;
        background: var(--color-background-card);
    }
}

/* 📱 TABLET */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero__media {
        max-width: 500px;
        margin: var(--space-xl) auto 0;
        background: transparent; /* Fondo transparente */
    }
    
    .hero__image {
        width: 90%; /* Ligeramente menos en tablet */
    }
    
    .hero__image.lazy-image.loading {
        min-height: 280px;
        background: var(--color-background-card);
    }
}

/* 💻 DESKTOP - CORRECCIÓN PRINCIPAL */
@media (min-width: 1024px) {
    .hero__media {
        max-width: 350px; /* Máximo 350px en desktop */
        margin: 0;
        align-self: center;
        background: transparent; /* FONDO TRANSPARENTE - CLAVE */
        padding: 0; /* Sin padding */
        border: none; /* Sin borde */
    }
    
    .hero__image {
        width: 100%; /* 100% del contenedor (que ya está limitado a 350px) */
        max-width: 350px; /* Refuerzo del límite */
        margin: 0; /* Sin margen en desktop */
    }
    
    .hero__image.lazy-image.loading {
        min-height: 250px;
        background: var(--color-background-card);
    }
}

/* 🔧 OPTIMIZACIONES ADICIONALES */

/* Mejora la calidad de la imagen en pantallas de alta resolución */
.hero__image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Efecto hover sutil en desktop SOLO en la imagen */
@media (min-width: 1024px) {
    .hero__image:hover {
        transform: scale(1.02);
        box-shadow: var(--shadow-glow);
    }
}

        .hero__video-container {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            background: var(--gradient-neural);
            display: flex;
            align-items: center;
            justify-content: center;
        }

		@media (min-width: 1024px) {
			:root {
                --text-5xl: 3.2rem; 
        		--text-6xl: 4rem;   
            }
			
		  .hero__container {
			display: grid;
			grid-template-columns: 60% 40%; /* 65% para texto, 35% para media */
			gap: 20px;
			align-items: center;
			text-align: left;
		  }

		  .hero__content {
			max-width: 92%;
			margin: 0;
		  }

		  .hero__media {
			max-width: 100%;
			margin: 0;
		  }
					  

            .header {
                padding: var(--space-xl) var(--space-2xl);
            }

            .hero {
                padding: var(--space-4xl) var(--space-2xl);
            }

            .hero__media {
                max-width: 800px;
            }
		}


        /* ??? Lazy Loading Image Styles */
        .lazy-image {
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            width: 100%;
            height: 100%;
        }

        .lazy-image.loaded {
            opacity: 1;
        }

        .lazy-image.loading {
            background: var(--gradient-neural);
        }

        .image-placeholder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--gradient-neural);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.3s ease-in-out;
        }

        .image-placeholder.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .hero__play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            background: var(--color-blanco-alpha-90);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition-medium);
            backdrop-filter: var(--backdrop-blur);
            border: 2px solid var(--color-blanco-alpha-20);
        }

        .hero__play-button:hover {
            transform: translate(-50%, -50%) scale(1.1);
            background: var(--color-text-main);
        }

        .hero__play-icon {
            width: 0;
            height: 0;
            border-left: 20px solid var(--color-primary);
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
            margin-left: 4px;
        }

        .hero__play-button--overlay {
            z-index: 10;
        }

        /* ?? RESPONSIVE DESIGN - TABLET */
        @media (min-width: 768px) {

            .header {
                padding: var(--space-lg) var(--space-xl);
            }

            .header__nav {
                display: block;
            }

            .header__mobile-menu {
                display: none;
            }

            .hero__title {
                font-size: var(--text-5xl);
            }

            .hero__cta-container {
                flex-direction: row;
                justify-content: center;
            }

            .hero__cta-primary {
                width: auto;
            }

            .features__title {
                font-size: var(--text-5xl);
            }

            /* How it works responsive */
            .process-steps__list {
                grid-template-columns: repeat(3, 1fr);
                gap: var(--space-2xl);
            }

            .process-step {
                position: relative;
            }

            /* ?? Connection lines between steps */
            .process-step:not(:last-child)::after {
                content: '';
                position: absolute;
                top: 20px;
                right: -24px;
                width: 48px;
                height: 2px;
                background: var(--gradient-primary);
                z-index: 1;
            }

            .how-it-works__title {
                font-size: var(--text-5xl);
            }

            .how-it-works__cta {
                flex-direction: row;
            }

            .how-it-works__cta-primary {
                width: auto;
            }

            /* Step by step responsive */
            .steps-timeline__line {
                display: block; /* Show timeline line on tablet+ */
            }

            .steps-timeline__list {
                gap: var(--space-4xl);
            }

            .timeline-step {
                flex-direction: row;
                text-align: left;
                gap: var(--space-2xl);
            }

            .timeline-step__content {
                flex: 1;
            }

            .timeline-step__mockup {
                flex-shrink: 0;
                max-width: 400px;
                height: 280px;
            }
			
/* 💻 DESKTOP - Steps Timeline en 2 COLUMNAS */
@media (min-width: 1024px) {
    .steps-timeline__list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-3xl) var(--space-2xl) !important;
        max-width: 1000px;
        margin: 0 auto;
    }
    
    .timeline-step {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        position: relative;
        margin-bottom: 0 !important;
    }
    
    /* Ocultar la línea central en grid */
    .steps-timeline__line {
        display: none !important;
    }
    
    /* Asegurar que las imágenes mantengan proporción */
    .timeline-step__mockup {
        width: 100%;
        max-width: 400px;
        height: 250px;
        margin-top: var(--space-lg);
    }
}

/* 🖥️ DESKTOP GRANDE */
@media (min-width: 1200px) {
    .steps-timeline__list {
        gap: var(--space-4xl) var(--space-3xl) !important;
        max-width: 1200px;
    }
}			

            .step-by-step__title {
                font-size: var(--text-5xl);
            }

            /* Pricing responsive - FIXED */
            .pricing__grid {
                grid-template-columns: repeat(3, 1fr);
                gap: var(--space-xl);
            }

            .pricing-card--featured {
                transform: scale(1.05);
            }


            .pricing__title {
                font-size: var(--text-5xl);
            }

            /* FAQ responsive */
            .faq__title {
                font-size: var(--text-5xl);
            }

            .faq-item__question {
                padding: var(--space-xl) var(--space-2xl);
                font-size: var(--text-lg);
            }

            .faq-item.active .faq-item__answer {
                padding: 0 var(--space-2xl) var(--space-xl);
            }

            /* CTA Tools responsive */
            .tools-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: var(--space-xl);
            }

            .cta-tools__title {
                font-size: var(--text-5xl);
            }

            /* Comparison responsive */
			.comparison-grid {
				grid-template-columns: 1fr 1fr !important;
				gap: var(--space-2xl);
				align-items: start;
			}

            .comparison__title {
                font-size: var(--text-5xl);
            }

            /* Footer responsive */
            .footer__content {
                grid-template-columns: repeat(2, 1fr);
                gap: var(--space-xl);
                text-align: left;
            }

            .footer__newsletter {
                text-align: center;
            }
        }

/* 💻 DESKTOP - Comparison Grid en 2 COLUMNAS */
@media (min-width: 1024px) {
    .comparison-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3xl);
        align-items: center;
    }
    
    /* Asegurar que las columnas tengan altura uniforme */
    .comparison-column {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    /* Para la columna con imagen, centrar la imagen */
    .comparison-column img {
        width: 100%;
        max-width: 500px;
        height: auto;
        margin: 0 auto;
        border-radius: var(--border-radius-xl);
        box-shadow: var(--shadow-lg);
    }
}

/* 🖥️ DESKTOP GRANDE - Más espacio */
@media (min-width: 1200px) {
    .comparison-grid {
        gap: var(--space-4xl);
        max-width: 1200px;
        margin: 0 auto;
    }
}

        /* ?? FEATURES SECTION MOBILE FIRST */
        .features {
            padding: var(--space-6xl) var(--space-lg);
            position: relative;
        }

        .features__container {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }

        .features__header {
            margin-bottom: var(--space-3xl);
        }

        .features__badge, .step-by-step__badge, .comparison__badge {
            display: inline-block;
            background: var(--gradient-button);
            color: var(--color-primary);
            padding: var(--space-sm) var(--space-lg);
            border-radius: var(--border-radius-full);
            font-size: var(--text-sm);
            font-weight: var(--font-weight-semibold);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: var(--space-lg);
            border: 1px solid var(--color-morado-alpha-20);
			width: fit-content;
        }

        .features__title {
            font-size: var(--text-4xl);
            font-weight: var(--font-weight-bold);
            background: var(--gradient-secondary);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
            margin-bottom: var(--space-lg);
            line-height: 1.2;
			text-align: center;
        }

        .features__subtitle {
            font-size: var(--text-lg);
            color: var(--color-text-muted);
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.5;
        }

        /* ??? Features Grid */
        .features__grid {
			display: grid;
			grid-template-columns: 1fr;
			gap: var(--space-lg);
			margin-top: var(--space-3xl);
		}

		/* 📱 TABLET - 2 columnas */
@media (min-width: 768px) and (max-width: 1023px) {
    .features__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xl);
		align-items: stretch;
    }
	.feature-card {
        height: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
    }
    
    .feature-card__description {
        flex-grow: 1;
    }
}

/* 💻 DESKTOP - 3 COLUMNAS */
@media (min-width: 1024px) {
    .features__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-xl);
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
		align-items: stretch;
    }
	.feature-card {
        /* SOLUCIÓN PRINCIPAL: Altura completa + flexbox */
        height: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 0; /* Quitar margin bottom en grid */
    }
    
    /* Imagen mantiene tamaño fijo */
    .feature-card img {
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 8px !important;
        margin-bottom: 1rem !important;
        flex-shrink: 0; /* No se encoge */
    }
    
    /* Título mantiene su tamaño */
    .feature-card__title {
        flex-shrink: 0; /* No se encoge */
    }
    
    /* Descripción crece para llenar el espacio restante */
    .feature-card__description {
        flex-grow: 1; /* Crece para igualar alturas */
        display: flex;
        align-items: flex-start; /* Texto alineado arriba */
    }
	
	.features__badge {
		margin: 0 0 var(--space-lg) 0; /* Sin centrado automático */
	  }
}

/* 🖥️ DESKTOP GRANDE - Mantener 3 columnas con más espacio */
@media (min-width: 1200px) {
    .features__grid {
        gap: var(--space-2xl);
		align-items: stretch;
    }
}

/* 🎨 MEJORAS ADICIONALES PARA LAS CARDS */

.feature-card {
    border-radius: var(--border-radius-xl);
    padding: var(--space-lg);
    border: 1px solid var(--color-blanco-alpha-20);
    transition: var(--transition-medium);
    position: relative;
    overflow: hidden;
    height: fit-content;
	margin-bottom: var(--space-3xl);
	height: auto;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
    border-color: var(--color-primary);
}

/* Asegurar que las imágenes se vean bien en el grid */
.feature-card img {
    width: 100% !important;
    object-fit: cover !important; /* Mantener proporciones */
    border-radius: 8px !important;
    margin-bottom: 1rem !important;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
    border-color: var(--color-primary);
}

/* Optimización para el contenido interno en flexbox */
@media (min-width: 768px) {
    .feature-card__title {
        margin-bottom: var(--space-md);
        /* Altura mínima para mantener consistencia */
        min-height: calc(var(--text-xl) * 1.3 * 2); /* Espacio para 2 líneas */
    }
    
    .feature-card__description {
        font-size: var(--text-base);
        color: var(--color-text-secondary);
        line-height: 1.6;
        /* Asegurar distribución uniforme del texto */
        text-align: left;
    }
}


        .feature-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-card);
            border-color: var(--color-primary);
        }

        .feature-card__icon {
            width: 60px;
            height: 60px;
            background: var(--gradient-primary);
            border-radius: var(--border-radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto var(--space-lg);
            color: white;
            font-size: var(--text-xl);
            position: relative;
            overflow: hidden;
        }

        .feature-card__icon::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--color-blanco-alpha-20);
            opacity: 0;
            transition: var(--transition-fast);
        }

        .feature-card:hover .feature-card__icon::before {
            opacity: 1;
        }

        .feature-card__title {
            font-size: var(--text-xl);
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-primary);
            margin-bottom: var(--space-md);
            line-height: 1.3;
        }

        .feature-card__description {
            font-size: var(--text-base);
            color: var(--color-text-main);
            line-height: 1.6;
        }


/* 🎯 LAYOUT FEATURES HEADER + VISUAL */

/* 📱 MÓVIL - Layout por defecto (una columna) */
.features__header-visual-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    margin-bottom: var(--space-3xl);
}

.features__header {
    order: 1; /* Texto primero en móvil */
}

.features__hero-visual {
    order: 2; /* Imagen después en móvil */
    text-align: center;
	width: 100%;
}

.features__hero-visual img {
    width: 100%;
    max-width: 350px;
    height: auto;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    transition: var(--transition-medium);
}


/* 🎯 FEATURES GRID 2 - LAYOUT ESPECÍFICO PARA 2 COLUMNAS EN PC */

/* 📱 MÓVIL - Grid 2 igual que el original (1 columna) */
.features__grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-3xl);
}

/* 🖼️ IMÁGENES PARA FEATURE CARDS - GRID 2 */

/* Imagen dentro de las feature cards del grid 2 */
.features__grid-2 .feature-card__image {
    width: 100%;
    max-width: 400px; /* Máximo 400px como solicitaste */
    height: auto; /* Altura automática */
    border-radius: var(--border-radius-lg);
    margin: var(--space-lg) auto; /* Centrada horizontalmente */
    display: block;
    box-shadow: var(--shadow-md);
    transition: var(--transition-medium);
    
    /* Optimización para mejor renderizado */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Efecto hover en la imagen */
.features__grid-2 .feature-card:hover .feature-card__image {
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
}

/* 📱 RESPONSIVE PARA IMÁGENES */

/* Móvil - Imagen más pequeña */
@media (max-width: 767px) {
    .features__grid-2 .feature-card__image {
        max-width: 280px; /* Más pequeña en móvil */
        margin: var(--space-md) auto;
    }
}

/* Tablet - Tamaño intermedio */
@media (min-width: 768px) and (max-width: 1023px) {<strong>
    .features__grid-2 .feature-card__image {</strong>
        max-width: 300px; /* Tamaño intermedio */
        margin: var(--space-lg) auto;
    }
}

/* Desktop - Tamaño completo */
@media (min-width: 1024px) {
    .features__grid-2 .feature-card__image {
        max-width: 300px; /* Tamaño completo como pediste */
        margin: var(--space-xl) auto;
    }
    
    /* En desktop, asegurar que las cards tengan suficiente espacio */
    .features__grid-2 .feature-card {
        padding: var(--space-2xl); /* Más padding para acomodar imagen */
    }
}

/* 🔧 ESTRUCTURA MEJORADA PARA FEATURE CARDS CON IMAGEN */

/* Reorganizar el orden visual */
.features__grid-2 .feature-card {
    display: flex;
    flex-direction: column;
    text-align: center; /* Centrar contenido */
}

/* Título va arriba */
.features__grid-2 .feature-card__title {
    order: 1;
    margin-bottom: var(--space-md);
}

/* Imagen va después del título */
.features__grid-2 .feature-card__image {
    order: 2;
    margin-bottom: var(--space-lg);
}

/* Descripción va al final */
.features__grid-2 .feature-card__description {
    order: 3;
    margin-bottom: 0;
}

/* 🎨 LAZY LOADING PARA IMÁGENES */
.features__grid-2 .feature-card__image.lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.features__grid-2 .feature-card__image.lazy-image.loaded {
    opacity: 1;
}

.features__grid-2 .feature-card__image.lazy-image.loading {
    background: var(--color-background-card);
    min-height: 200px; /* Altura mínima mientras carga */
}

/* 🔧 ACCESIBILIDAD */
@media (prefers-reduced-motion: reduce) {
    .features__grid-2 .feature-card__image {
        transition: none;
    }
    
    .features__grid-2 .feature-card:hover .feature-card__image {
        transform: none;
    }
}

/* 📱 TABLET - Grid 2 mantiene 1 columna para diferenciarse */
@media (min-width: 768px) and (max-width: 1023px) {
    .features__grid-2 {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        max-width: 600px; /* Centrado y más estrecho */
        margin-left: auto;
        margin-right: auto;
    }
}

/* 💻 DESKTOP - Grid 2 en 2 COLUMNAS (diferente al original que es 3) */
@media (min-width: 1024px) {
    .features__grid-2 {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en lugar de 3 */
        gap: var(--space-2xl);
        max-width: 900px; /* Más estrecho que el grid original */
        margin-left: auto;
        margin-right: auto;
        align-items: stretch;
    }
    
    /* Cards del grid 2 con altura uniforme */
    .features__grid-2 .feature-card {
        height: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 0; /* Sin margin en grid */
    }
    
    /* Título mantiene tamaño fijo */
    .features__grid-2 .feature-card__title {
        flex-shrink: 0;
        min-height: calc(var(--text-xl) * 1.3 * 2); /* Espacio para 2 líneas */
    }
    
    /* Descripción crece para igualar alturas */
    .features__grid-2 .feature-card__description {
        flex-grow: 1;
        display: flex;
        align-items: flex-start;
    }
}

/* 🖥️ DESKTOP GRANDE - Grid 2 mantiene 2 columnas con más espacio */
@media (min-width: 1200px) {
    .features__grid-2 {
        gap: var(--space-3xl);
        max-width: 1000px; /* Ligeramente más ancho en pantallas grandes */
    }
}

/* 🎨 VARIACIONES ESPECÍFICAS PARA GRID 2 */

/* Hover effect específico para grid 2 */
.features__grid-2 .feature-card:hover {
    transform: translateY(-6px); /* Más movimiento que el grid original */
    box-shadow: var(--shadow-glow); /* Sombra más intensa */
    border-color: var(--color-primary);
}

/* Opcional: Estilo diferenciado para grid 2 */
.features__grid-2 .feature-card {
    border: 1px solid var(--color-blanco-alpha-20);
    border-radius: var(--border-radius-xl);
    padding: var(--space-xl); /* Más padding que el original */
    transition: var(--transition-medium);
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-lg); /* Para móvil */
}

/* Títulos del grid 2 con estilo diferenciado */
.features__grid-2 .feature-card__title {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold); /* Más bold que el original */
    color: var(--color-text-primary);
    margin-bottom: var(--space-lg); /* Más espacio */
    line-height: 1.3;
}

/* Descripciones del grid 2 */
.features__grid-2 .feature-card__description {
    font-size: var(--text-lg); /* Ligeramente más grande */
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* 🔧 UTILIDAD: Clase para centrar el grid 2 */
.features__grid-2--centered {
    justify-items: center;
}

/* 🔧 UTILIDAD: Variante con gap más pequeño */
.features__grid-2--compact {
    gap: var(--space-lg);
}

@media (min-width: 1024px) {
    .features__grid-2--compact {
        gap: var(--space-xl);
    }
}

/* 💻 DESKTOP - Layout en dos columnas (1024px+) */
@media (min-width: 1024px) {
    .features__header-visual-container {
        display: grid;
        grid-template-columns: 60% 40%;
        gap: var(--space-3xl);
        align-items: center;
        margin-bottom: var(--space-4xl);
    }
    
    .features__header {
        order: unset;
        text-align: left;
        margin: 0; 
    }
    
    .features__hero-visual {
        order: unset;
        text-align: center;
        margin: 0; 
		width: 400px;
		height: auto;
    }
    
    .features__hero-visual img {
        max-width: 100%;
        width: 90%; 
    }
    
    /* Efecto hover sutil en desktop */
    .features__hero-visual img:hover {
        transform: scale(1.02);
        box-shadow: var(--shadow-glow);
    }
}

/* 🎨 MEJORAS ADICIONALES */

/* Lazy loading para la imagen */
.features__hero-visual img.lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.features__hero-visual img.lazy-image.loaded {
    opacity: 1;
}

/* Optimización para pantallas de alta resolución */
.features__hero-visual img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Accesibilidad - reducir movimiento */
@media (prefers-reduced-motion: reduce) {
    .features__hero-visual img {
        transition: none;
    }
    
    .features__hero-visual img:hover {
        transform: none;
    }
}

        /* ?? HOW IT WORKS SECTION MOBILE FIRST */
        .how-it-works {
            padding: var(--space-6xl) var(--space-lg);
            position: relative;
        }

        .how-it-works__container {
            max-width: 1000px;
            margin: 0 auto;
            text-align: center;
        }

        .how-it-works__header {
            margin-bottom: var(--space-3xl);
        }

        .how-it-works__badge {
            display: inline-block;
            background: var(--gradient-button);
            color: var(--color-primary);
            padding: var(--space-sm) var(--space-lg);
            border-radius: var(--border-radius-full);
            font-size: var(--text-sm);
            font-weight: var(--font-weight-semibold);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: var(--space-lg);
            border: 1px solid var(--color-morado-alpha-20);
        }

        .how-it-works__title {
            font-size: var(--text-4xl);
            font-weight: var(--font-weight-bold);
            color: var(--color-text-primary);
            margin-bottom: var(--space-2xl);
            line-height: 1.2;
        }

        /* ??? Process Steps */
        .process-steps {
            background: var(--color-background-card);
            border-radius: var(--border-radius-2xl);
            padding: var(--space-2xl);
            border: 1px solid var(--color-blanco-alpha-20);
            position: relative;
            overflow: hidden;
            margin-bottom: var(--space-2xl);
        }

        .process-steps__list {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--space-xl);
            position: relative;
        }

        .process-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
        }

        .process-step__number {
            width: 40px;
            height: 40px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: var(--font-weight-bold);
            font-size: var(--text-lg);
            margin-bottom: var(--space-md);
            position: relative;
            z-index: 2;
        }

        .process-step__title {
            font-size: var(--text-lg);
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-primary);
            margin-bottom: var(--space-sm);
        }

        .process-step__description {
            font-size: var(--text-sm);
            color: var(--color-text-muted);
            line-height: 1.5;
            max-width: 200px;
        }

        /* ?? Connection Line (Hidden on mobile) */
        .process-step__connector {
            display: none;
        }

        /* ?? CTA Section */
        .how-it-works__cta {
            display: flex;
            flex-direction: column;
            gap: var(--space-lg);
            align-items: center;
            justify-content: center;
        }

        .how-it-works__cta-primary {
            background: var(--color-east-bay);
            color: var(--color-text-main);
            padding: var(--space-lg) var(--space-2xl);
            font-size: var(--text-lg);
            font-weight: var(--font-weight-semibold);
            border-radius: var(--border-radius-full);
            text-decoration: none;
            box-shadow: var(--shadow-button);
            transition: var(--transition-medium);
            min-height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: 280px;
        }

        .how-it-works__cta-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
        }

        .how-it-works__cta-secondary {
            color: var(--color-text-secondary);
            text-decoration: none;
            font-size: var(--text-base);
            font-weight: var(--font-weight-medium);
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            transition: var(--transition-fast);
            padding: var(--space-md);
        }

        .how-it-works__cta-secondary:hover {
            color: var(--color-text-primary);
        }

        /* ?? STEP BY STEP SECTION MOBILE FIRST */
        .step-by-step {
            padding-left: var(--space-lg);
			padding-right: var(--space-lg);
            position: relative;
            overflow: hidden;
        }

        .step-by-step__container {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }

        .step-by-step__header {
            margin-bottom: var(--space-3xl);
        }

        .step-by-step__title {
            font-size: var(--text-4xl);
            font-weight: var(--font-weight-bold);
            color: var(--color-text-primary);
            margin-bottom: var(--space-2xl);
            line-height: 1.2;
        }

        /* ??? Steps Timeline */
        .steps-timeline {
            position: relative;
            padding: var(--space-2xl) 0;
        }

        .steps-timeline__line {
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 2px;
            background: var(--gradient-primary);
            transform: translateX(-50%);
            opacity: 0.3;
            display: none; /* Hidden on mobile */
        }

        .steps-timeline__list {
            display: flex;
            flex-direction: column;
            gap: var(--space-3xl);
        }

        .timeline-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
        }

        .timeline-step__number {
            width: 60px;
            height: 60px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: var(--font-weight-bold);
            font-size: var(--text-xl);
            margin-bottom: var(--space-lg);
            position: relative;
            z-index: 2;
            box-shadow: 0 0 20px rgba(236, 72, 153, 0.4);
        }

        .timeline-step__content {
            max-width: 500px;
            width: 100%;
        }

        .timeline-step__title {
            font-size: var(--text-xl);
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-primary);
            margin-bottom: var(--space-md);
            line-height: 1.3;
        }

        .timeline-step__description {
            font-size: var(--text-base);
            color: var(--color-text-muted);
            line-height: 1.6;
            margin-bottom: var(--space-xs);
        }

        /* ??? Step Mockup Images */
        .timeline-step__mockuptimeline-step__mockup {
            width: 100%;
            max-width: 300px;
            height: 200px;
            background: var(--color-background-card);
            border-radius: var(--border-radius-lg);
            border: 1px solid var(--color-blanco-alpha-20);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }

        .timeline-step__mockup::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--gradient-neural);
            opacity: 0.1;
        }

        .mockup-placeholder {
            color: var(--color-text-muted);
            font-size: var(--text-sm);
            font-weight: var(--font-weight-medium);
        }

        /* ?? PRICING SECTION MOBILE FIRST */
        .pricing {
            padding: var(--space-3xl) var(--space-lg);
            background: var(--color-background-secondary);
            position: relative;
        }

        .pricing__container {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }

        .pricing__header {
            margin-bottom: var(--space-3xl);
        }

        .pricing__badge {
            display: inline-block;
            background: var(--color-morado-alpha-20);
            color: var(--color-primary);
            padding: var(--space-sm) var(--space-lg);
            border-radius: var(--border-radius-full);
            font-size: var(--text-sm);
            font-weight: var(--font-weight-semibold);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: var(--space-lg);
            border: 1px solid var(--color-morado-alpha-20);
        }

        .pricing__title {
            font-size: var(--text-4xl);
            font-weight: var(--font-weight-bold);
            color: var(--color-text-primary);
            margin-bottom: var(--space-lg);
            line-height: 1.2;
        }

        .pricing__subtitle {
            font-size: var(--text-lg);
            color: var(--color-text-muted);
            max-width: 600px;
            margin: 0 auto var(--space-3xl);
            line-height: 1.5;
        }

        /* ?? Pricing Grid */
        .pricing__grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--space-lg);
            margin-bottom: var(--space-2xl);
        }

        .pricing-card {
            background: var(--color-background-card);
            border-radius: var(--border-radius-xl);
            padding: var(--space-2xl);
            border: 1px solid var(--color-blanco-alpha-20);
            transition: var(--transition-medium);
            position: relative;
            overflow: hidden;
            text-align: left;
        }

        .pricing-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-card);
            border-color: var(--color-primary);
        }

        .pricing-card--featured {
            border: 2px solid var(--color-primary);
            transform: scale(1.02);
            box-shadow: var(--shadow-glow);
        }

        .pricing-card--featured::before {
            content: '';
            position: absolute;
            top: 0;

            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-primary);
        }

        /* ??? Plan Header */
        .pricing-card__header {
            margin-bottom: var(--space-xl);
        }

        .pricing-card__plan {
            font-size: var(--text-lg);
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-primary);
            margin-bottom: var(--space-sm);
        }

        .pricing-card__price {
            display: flex;
            align-items: baseline;
            gap: var(--space-xs);
            margin-bottom: var(--space-sm);
        }

        .pricing-card__currency {
            font-size: var(--text-xl);
            color: var(--color-text-muted);
            font-weight: var(--font-weight-medium);
        }

        .pricing-card__amount {
            font-size: var(--text-5xl);
            font-weight: var(--font-weight-black);
            color: var(--color-text-primary);
            line-height: 1;
        }

        .pricing-card__amount--free {
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .pricing-card__period {
            font-size: var(--text-sm);
            color: var(--color-text-muted);
            font-weight: var(--font-weight-medium);
        }

        /* ? Features List */
        .pricing-card__features {
            list-style: none;
            margin-bottom: var(--space-xl);
        }

        .pricing-card__feature {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            padding: var(--space-sm) 0;
            font-size: var(--text-sm);
            color: var(--color-text-secondary);
            line-height: 1.5;
        }

        .pricing-card__feature::before {
            content: '?';
            color: var(--color-primary);
            font-weight: var(--font-weight-bold);
            font-size: var(--text-base);
            width: 20px;
            flex-shrink: 0;
        }

        /* ?? CTA Button */
        .pricing-card__cta {
            width: 100%;
            padding: var(--space-lg);
            border-radius: var(--border-radius-lg);
            font-size: var(--text-base);
            font-weight: var(--font-weight-semibold);
            text-decoration: none;
            transition: var(--transition-medium);
            cursor: pointer;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 56px;
        }

        .pricing-card__cta--primary {
            background: var(--color-east-bay);
            color: var(--color-text-main);
            box-shadow: var(--shadow-button);
        }

        .pricing-card__cta--primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
        }

        .pricing-card__cta--secondary {
            background: transparent;
            color: var(--color-text-secondary);
            border: 1px solid var(--color-blanco-alpha-20);
        }

        .pricing-card__cta--secondary:hover {
            background: var(--color-blanco-alpha-20);
            color: var(--color-text-primary);
            transform: translateY(-1px);
        }

        /* ?? Comparison Link */
        .pricing__comparison {
            margin-top: var(--space-2xl);
        }

        .pricing__comparison-link {
            color: var(--color-text-muted);
            text-decoration: none;
            font-size: var(--text-base);
            font-weight: var(--font-weight-medium);
            transition: var(--transition-fast);
            border-bottom: 1px solid transparent;
        }

        /* ?? FAQ SECTION MOBILE FIRST */
        .faq {
            padding: var(--space-3xl) var(--space-lg);
            background: var(--color-bg);
            position: relative;
        }

        .faq__container {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        .faq__header {
            margin-bottom: var(--space-3xl);
        }

        .faq__badge {
            display: inline-block;
            background: var(--color-morado-alpha-20);
            color: var(--color-primary);
            padding: var(--space-sm) var(--space-lg);
            border-radius: var(--border-radius-full);
            font-size: var(--text-sm);
            font-weight: var(--font-weight-semibold);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: var(--space-lg);
            border: 1px solid var(--color-morado-alpha-20);
        }

        .faq__title {
            font-size: var(--text-4xl);
            font-weight: var(--font-weight-bold);
            color: var(--color-text-primary);
            margin-bottom: var(--space-2xl);
            line-height: 1.2;
        }

        /* ??? FAQ Accordion */
        .faq__accordion {
            text-align: left;
        }

        .faq-item {
            background: var(--color-background-card);
            border-radius: var(--border-radius-lg);
            margin-bottom: var(--space-md);
            border: 1px solid var(--color-blanco-alpha-20);
            overflow: hidden;
            transition: var(--transition-medium);

        }

        .faq-item:hover {
            border-color: var(--color-primary);
        }

        .faq-item.active {
            border-color: var(--color-primary);
            box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
        }

        .faq-item__question {
            width: 100%;
            background: none;
            border: none;
            padding: var(--space-lg) var(--space-xl);
            text-align: left;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: var(--text-base);
            font-weight: var(--font-weight-medium);
            color: var(--color-text-primary);
            line-height: 1.5;
            transition: var(--transition-fast);
            min-height: 60px;
        }

        .faq-item__question:hover {
            background: var(--color-blanco-alpha-20);
        }

        .faq-item__question:focus {
            outline: 2px solid var(--color-primary);
            outline-offset: -2px;
        }

        .faq-item__icon {
            width: 24px;
            height: 24px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: var(--text-sm);
            font-weight: var(--font-weight-bold);
            transition: var(--transition-medium);
            flex-shrink: 0;
            margin-left: var(--space-md);
        }

        .faq-item__icon::before {
            content: '+';
        }

        .faq-item.active .faq-item__icon {
            transform: rotate(45deg);
            background: var(--color-rosa-magenta);
        }

        .faq-item.active .faq-item__icon::before {
            content: '-';
        }

        .faq-item__answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-out, padding 0.4s ease-out;
        }

        .faq-item.active .faq-item__answer {
            max-height: 200px;
            padding: 0 var(--space-xl) var(--space-lg);
        }

        /* ?? CTA TOOLS SECTION MOBILE FIRST */
        .cta-tools {
            padding: var(--space-3xl) var(--space-lg);
            background: var(--color-background-secondary);
            position: relative;
        }

        .cta-tools__container {
            max-width: 1000px;
            margin: 0 auto;
            text-align: center;
        }

        .cta-tools__header {
            margin-bottom: var(--space-3xl);
        }

        .cta-tools__badge {
            display: inline-block;
            background: var(--color-morado-alpha-20);
            color: var(--color-primary);
            padding: var(--space-sm) var(--space-lg);
            border-radius: var(--border-radius-full);
            font-size: var(--text-sm);
            font-weight: var(--font-weight-semibold);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: var(--space-lg);
            border: 1px solid var(--color-morado-alpha-20);
        }

        .cta-tools__title {
            font-size: var(--text-4xl);
            font-weight: var(--font-weight-bold);
            color: var(--color-text-primary);
            margin-bottom: var(--space-lg);
            line-height: 1.2;
        }

        .cta-tools__subtitle {
            font-size: var(--text-lg);
            color: var(--color-text-muted);
            max-width: 500px;
            margin: 0 auto var(--space-2xl);
            line-height: 1.5;
        }

        .cta-tools__primary-cta {
            background: var(--color-east-bay);
            color: var(--color-text-main);
            padding: var(--space-lg) var(--space-2xl);
            font-size: var(--text-lg);
            font-weight: var(--font-weight-semibold);
            border-radius: var(--border-radius-full);
            text-decoration: none;
            box-shadow: var(--shadow-button);
            transition: var(--transition-medium);
            min-height: 56px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: var(--space-3xl);
        }

        .cta-tools__primary-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
        }

        /* ??? Tools Grid */
        .tools-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--space-lg);
        }

        .tool-card {
            background: var(--color-background-card);
            border-radius: var(--border-radius-xl);
            padding: var(--space-xl);
            border: 1px solid var(--color-blanco-alpha-20);
            transition: var(--transition-medium);
            position: relative;
            overflow: hidden;
            text-align: center;
        }

        .tool-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-card);
            border-color: var(--color-primary);
        }

        .tool-card__icon {
            width: 60px;
            height: 60px;
            background: var(--color-bg);
            border-radius: var(--border-radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto var(--space-lg);
            font-size: var(--text-2xl);
            position: relative;
            overflow: hidden;
        }

        .tool-card__badge {
            position: absolute;
            top: -8px;
            right: -8px;
            background: var(--gradient-primary);
            color: white;
            font-size: var(--text-xs);
            font-weight: var(--font-weight-bold);
            padding: var(--space-xs) var(--space-sm);
            border-radius: var(--border-radius-full);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .tool-card__title {
            font-size: var(--text-lg);
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-primary);
            margin-bottom: var(--space-md);
            line-height: 1.3;
        }

        .tool-card__cta {
            color: var(--color-text-muted);
            text-decoration: none;
            font-size: var(--text-sm);
            font-weight: var(--font-weight-medium);
            transition: var(--transition-fast);
            padding: var(--space-sm) var(--space-lg);
            border-radius: var(--border-radius-lg);
            border: 1px solid var(--color-blanco-alpha-20);
            display: inline-block;
        }

        .tool-card__cta:hover {
            color: var(--color-primary);
            border-color: var(--color-primary);
            background: var(--color-morado-alpha-10);
        }

        /* ?? Specific tool icons */
        .tool-card__icon--text::before {
            content: '??';
        }

        .tool-card__icon--photo::before {
            content: '??';
        }

        .tool-card__icon--video::before {
            content: '??';
        }

        .tool-card__icon--email::before {
            content: '??';
        }

        .tool-card__icon--code::before {
            content: '</>';
            font-family: var(--font-mono);
            font-size: var(--text-lg);
            color: var(--color-primary);
        }

        /* ?? COMPARISON SECTION MOBILE FIRST */
        .comparison {
            padding: var(--space-3xl) var(--space-lg);
            position: relative;
        }

        .comparison__container {
            max-width: 1000px;
            margin: 0 auto;
            text-align: center;
        }

        .comparison__header {
            margin-bottom: var(--space-3xl);
        }

        .comparison__title {
            font-size: var(--text-4xl);
            font-weight: var(--font-weight-bold);
            color: var(--color-text-primary);
            margin-bottom: var(--space-2xl);
            line-height: 1.2;
        }

        .comparison__title-highlight {
            font-style: italic;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* ?? Comparison Grid */
        .comparison-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--space-xl);
            text-align: left;
        }

        .comparison-column {
            border-radius: var(--border-radius-xl);
            padding: var(--space-xl);
            border: 1px solid var(--color-blanco-alpha-20);
            position: relative;
        }

        .comparison-column--negative {
            border-color: rgba(239, 68, 68, 0.3);
            background: rgba(239, 68, 68, 0.05);
        }

        .comparison-column--positive {
            border-color: var(--color-gris-oscuro);
            box-shadow: 0 0 30px rgba(139, 92, 246, 0.2);
        }

        .comparison-column__header {
            display: flex;
            align-items: center;
            gap: var(--space-md);
            margin-bottom: var(--space-xl);
            padding-bottom: var(--space-lg);
            border-bottom: 1px solid var(--color-gris-oscuro);
        }

        .comparison-column__icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--text-lg);
        }

        .comparison-column__icon--negative {
            background: rgba(239, 68, 68, 0.2);
            color: #ef4444;
        }

        .comparison-column__icon--positive {
            background: var(--gradient-primary);
            color: white;
        }

        .comparison-column__title {
            font-size: var(--text-xl);
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-primary);
        }

        .comparison-column__title--negative {
            color: var(--color-text-muted);
        }

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

        .comparison-item {
            display: flex;
            align-items: flex-start;
            gap: var(--space-md);
            padding: var(--space-md) 0;
            font-size: var(--text-base);
            line-height: 1.5;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .comparison-item:last-child {
            border-bottom: none;
        }

        .comparison-item__icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--text-sm);
            font-weight: var(--font-weight-bold);
            flex-shrink: 0;
            margin-top: 2px;
        }

        .comparison-item__icon--negative {
            background: rgba(239, 68, 68, 0.2);
            color: #ef4444;
        }

        .comparison-item__icon--negative::before {
            content: '?';
        }

        .comparison-item__icon--positive {
            background: var(--color-primary);
            color: white;
        }

        .comparison-item__icon--positive::before {
            content: '?';
        }


        .comparison-item__text {
            color: var(--color-text-secondary);
            flex: 1;
        }

        .comparison-item__text--negative {
            color: var(--color-text-muted);
        }

        .comparison-item__text--positive {
            color: var(--color-text-primary);
        }

        /* ?? FOOTER SECTION MOBILE FIRST */
        .footer {
            padding: var(--space-3xl) var(--space-lg) var(--space-xl);
            background: var(--color-background-secondary);
            border-top: 1px solid var(--color-blanco-alpha-20);
            position: relative;
        }

        .footer__container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .footer__top {
            text-align: center;
            margin-bottom: var(--space-3xl);
            padding-bottom: var(--space-2xl);
            border-bottom: 1px solid var(--color-blanco-alpha-20);
        }

        .footer__logo {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-sm);
            text-decoration: none;
            color: var(--color-text-primary);
            font-weight: var(--font-weight-bold);
            font-size: var(--text-xl);
            margin-bottom: var(--space-lg);
        }

        .footer__logo-icon {
            width: 40px;
            height: 40px;
            background: var(--gradient-primary);
            border-radius: var(--border-radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: var(--font-weight-bold);
            font-size: var(--text-base);
        }

        .footer__tagline {
            font-size: var(--text-base);
            color: var(--color-text-muted);
            max-width: 400px;
            margin: 0 auto;
            line-height: 1.5;
        }

        /* ?? Newsletter Section */
        .footer__newsletter {
            margin-bottom: var(--space-3xl);
        }

        .newsletter__title {
            font-size: var(--text-lg);
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-primary);
            margin-bottom: var(--space-sm);
        }

        .newsletter__description {
            font-size: var(--text-sm);
            color: var(--color-text-muted);
            margin-bottom: var(--space-lg);
            line-height: 1.5;
        }

        .newsletter__form {
            display: flex;
            gap: var(--space-sm);
            max-width: 400px;
            margin: 0 auto;
        }

        .newsletter__input {
            flex: 1;
            padding: var(--space-md) var(--space-lg);
            background: var(--color-background-card);
            border: 1px solid var(--color-blanco-alpha-20);
            border-radius: var(--border-radius-lg);
            color: var(--color-text-primary);
            font-size: var(--text-sm);
            transition: var(--transition-fast);
        }

        .newsletter__input::placeholder {
            color: var(--color-text-muted);
        }

        .newsletter__input:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
        }

        .newsletter__submit {
            background: var(--gradient-primary);
            border: none;
            padding: var(--space-md) var(--space-lg);
            border-radius: var(--border-radius-lg);
            color: white;
            font-weight: var(--font-weight-semibold);
            cursor: pointer;
            transition: var(--transition-medium);
            min-width: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .newsletter__submit:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
        }

        .newsletter__submit::before {
            content: '?';
            font-size: var(--text-lg);
        }

        /* ??? Footer Links */
        .footer__content {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--space-2xl);
            text-align: center;
        }

        .footer__column {
            display: flex;
            flex-direction: column;
        }

        .footer__column-title {
            font-size: var(--text-base);
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-primary);
            margin-bottom: var(--space-lg);
        }

        .footer__links {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
            list-style: none;
        }

        .footer__link {
            color: var(--color-text-muted);
            text-decoration: none;
            font-size: var(--text-sm);
            transition: var(--transition-fast);
            padding: var(--space-xs) 0;
        }

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

        /* ?? Mobile specific styles */
        @media (max-width: 767px) {
            .newsletter__form {
                flex-direction: column;
            }
            
            .newsletter__submit {
                width: 100%;
            }
        }
        .feature-card__icon--pulse::after {
            content: '??';
            font-size: var(--text-xl);
        }

        .feature-card__icon--transform::after {
            content: '??';
            font-size: var(--text-xl);
        }

        .feature-card__icon--writing::after {
            content: '??';
            font-size: var(--text-xl);
        }

        .feature-card__icon--simple::after {
            content: '?';
            font-size: var(--text-xl);
        }

        .feature-card__icon--quality::after {
            content: '??';
            font-size: var(--text-xl);
        }

        .feature-card__icon--assistant::after {
            content: '??';
            font-size: var(--text-xl);
        }
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* ?? FOCUS STATES */
        .btn:focus,
        .header__nav-link:focus,
        .header__logo:focus {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
        }

        /* ?? TOUCH IMPROVEMENTS */
        @media (hover: none) and (pointer: coarse) {
            .btn {
                min-height: 48px;
            }
            
            .hero__play-button {
                width: 100px;
                height: 100px;
            }
        }


/* 📏 ESPACIADO GENERAL PARA TODAS LAS SECCIONES */
section {
    padding-top: var(--space-4xl);   
    padding-bottom: var(--space-4xl); 
}

/* 📱 RESPONSIVE - MÓVIL */
@media (max-width: 767px) {
    section {
        padding-top: var(--space-4xl);   
        padding-bottom: var(--space-4xl);
    }
}

/* 📱 TABLET */
@media (min-width: 768px) and (max-width: 1023px) {
    section {
        padding-top: var(--space-5xl);  
        padding-bottom: var(--space-5xl); 
    }
}

/* 💻 DESKTOP */
@media (min-width: 1024px) {
    section {
        padding-top: 6rem;     
        padding-bottom: 6rem;  
    }
}

 /* 🎯 SECCIÓN 7 FORMAS INTELIGENTES DE GANAR */
        .bonos-section {
            padding: var(--space-4xl) var(--space-lg);
            position: relative;
        }

        .bonos-section__container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--space-3xl);
            align-items: center;
        }

        /* 📱 IMAGEN DE LA IZQUIERDA */
        .bonos-section__image {
            width: 100%;
            max-width: 400px;
            height: auto;
            border-radius: var(--border-radius-xl);
            box-shadow: var(--shadow-xl);
            margin: 0 auto;
            transition: var(--transition-medium);
        }

        .bonos-section__image:hover {
            transform: scale(1.02);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
        }

        /* 🎯 CONTENIDO DE LOS BONOS */
        .bonos-section__content {
            text-align: center;
        }

        .bonos-section__title {
            font-size: var(--text-4xl);
            font-weight: var(--font-weight-black);
            background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: var(--space-3xl);
            line-height: 1.2;
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }

        /* 📋 LISTA DE BONOS */
        .bonos-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: var(--space-lg);
            max-width: 90%;
            margin: 0 auto;
        }

        .bono-item {
            display: flex;
            align-items: center;
            gap: var(--space-lg);
            padding: var(--space-lg) var(--space-xl);
            border-radius: var(--border-radius-2xl);
            box-shadow: 0 8px 25px rgba(29, 78, 216, 0.3);
            transition: var(--transition-medium);
            position: relative;
            overflow: hidden;
			background: var(--gradient-blue-dark);
        }

        .bono-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0;
            transition: var(--transition-medium);
        }

        .bono-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 35px rgba(29, 78, 216, 0.4);
        }

        .bono-item:hover::before {
            opacity: 1;
        }

        /* 🔢 NÚMERO DEL BONO */
        .bono-item__number {
            width: 50px;
            height: 50px;
            background: var(--gradient-blue-gray);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 900;
            font-size: var(--text-5xl);
            flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
            position: relative;
            z-index: 2;
        }

        /* 📝 TEXTO DEL BONO */
        .bono-item__text {
            color: white;
            font-size: var(--text-3xl);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            flex: 1;
        }

        /* 💻 RESPONSIVE PARA PC - 2 COLUMNAS */
        @media (min-width: 1024px) {
            .bonos-section__container {
                grid-template-columns: 45% 55%;
                gap: var(--space-4xl);
                align-items: center;
            }

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

            .bonos-list {
                margin: 0;
                max-width: none;
            }

            .bonos-section__title {
                font-size: var(--text-5xl);
                margin-bottom: var(--space-2xl);
            }

            .bono-item {
                padding: var(--space-xl) var(--space-2xl);
				max-width: 90%;
            }

            .bono-item__number {
                width: 60px;
                height: 60px;
                font-size: var(--text-2xl);
            }

            .bono-item__text {
                font-size: var(--text-xl);
            }
        }

        /* 🖥️ DESKTOP GRANDE */
        @media (min-width: 1200px) {
            .bonos-section__container {
                gap: var(--space-4xl);
            }

            .bonos-section__title {
                font-size: 3.5rem;
            }
        }

        /* 🎨 ANIMACIONES ADICIONALES */
        @keyframes pulseGlow {
            0%, 100% {
                box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
            }
            50% {
                box-shadow: 0 4px 20px rgba(16, 185, 129, 0.6);
            }
        }

        .bono-item__number {
            animation: pulseGlow 3s ease-in-out infinite;
        }

        /* 🔧 LAZY LOADING PARA IMAGEN */
        .lazy-image {
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }

        .lazy-image.loaded {
            opacity: 1;
        }

        /* 📱 RESPONSIVE MÓVIL */
        @media (max-width: 767px) {
            .bonos-section {
                padding: var(--space-3xl) var(--space-md);
            }

            .bonos-section__title {
                font-size: var(--text-3xl);
            }

            .bono-item {
                padding: var(--space-md) var(--space-lg);
                gap: var(--space-md);
            }

            .bono-item__number {
                width: 45px;
                height: 45px;
                font-size: var(--text-lg);
            }

            .bono-item__text {
                font-size: var(--text-base);
            }
        }