html, body {
    overflow-x: hidden; /* Evita el desplazamiento horizontal */
    width: 100%;       /* Asegura que ocupen todo el ancho disponible */
}
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
        :root {
            --amazon-orange: #FF9900;
            --amazon-blue: #146EB4;
            --amazon-dark: #131921;
            --amazon-light: #F3F3F3;
            --amazon-text: #0F1111;
            --amazon-green: #00A65B;
            --amazon-purple: #5C2D91;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: white;
            color: var(--amazon-text);
            overflow-x: hidden;
        }

        .amazon-gradient-text {
            background: linear-gradient(90deg, var(--amazon-orange), #f3a847);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .amazon-gradient-bg {
            background: linear-gradient(135deg, var(--amazon-orange), #f3a847);
        }

        .amazon-section {
            background-color: white;
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid #e3e6e6;
        }

        .amazon-pattern {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(20,110,180,0.03) 0%, transparent 20%),
                radial-gradient(circle at 90% 80%, rgba(255,153,0,0.03) 0%, transparent 20%);
        }

        .amazon-badge {
            background: rgba(20,110,180,0.1);
            border: 1px solid rgba(20,110,180,0.2);
            color: var(--amazon-blue);
            position: relative;
            overflow: hidden;
        }

        .amazon-badge::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                to bottom right,
                rgba(255,255,255,0) 45%,
                rgba(255,255,255,0.8) 50%,
                rgba(255,255,255,0) 55%
            );
            transform: rotate(30deg);
            animation: shine 3s infinite;
        }

        @keyframes shine {
            0% { transform: translateX(-100%) rotate(30deg); }
            100% { transform: translateX(100%) rotate(30deg); }
        }

        .amazon-card {
            background: white;
            border: 1px solid #e3e6e6;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            position: relative;
            overflow: hidden;
        }

        .amazon-card:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
            border-color: var(--amazon-orange);
        }

        .amazon-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 0;
            background: linear-gradient(to bottom, var(--amazon-orange), var(--amazon-blue));
            transition: all 0.4s ease;
        }

        .amazon-card:hover::before {
            height: 100%;
        }

        .amazon-video-container {
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            border: 1px solid #e3e6e6;
            transition: all 0.3s ease;
            transform-style: preserve-3d;
            perspective: 1000px;
        }

        .amazon-video-container:hover {
            transform: scale(1.02) rotateY(5deg) rotateX(2deg);
            box-shadow: 0 15px 30px rgba(0,0,0,0.2);
        }

        .amazon-cta {
            background: linear-gradient(to right, var(--amazon-orange), #f3a847);
            color: white;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(255,153,0,0.3);
            transition: all 0.3s ease;
        }

        .amazon-cta:hover {
            background: linear-gradient(to right, #e68a00, #f3a847);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255,153,0,0.4);
        }

        .amazon-cta::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                to right,
                rgba(255,255,255,0) 0%,
                rgba(255,255,255,0.3) 50%,
                rgba(255,255,255,0) 100%
            );
            transform: translateX(-100%);
            transition: transform 0.6s ease;
        }

        .amazon-cta:hover::after {
            transform: translateX(100%);
        }

        .amazon-stats-item {
            background-color: var(--amazon-light);
            border-left: 4px solid var(--amazon-orange);
            transition: all 0.3s ease;
        }

        .amazon-stats-item:hover {
            transform: scale(1.05);
            background-color: white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .amazon-testimonial {
            background-color: white;
            border-left: 4px solid var(--amazon-orange);
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }

        .amazon-testimonial:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        .floating-element {
            animation: floating 6s ease-in-out infinite;
        }

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

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

        @keyframes pulse {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,153,0,0.4); }
            70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255,153,0,0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,153,0,0); }
        }

        .amazon-icon-bg {
            background: linear-gradient(135deg, var(--amazon-blue), #1a7ab8);
            color: white;
            transition: all 0.3s ease;
        }

        .amazon-card:hover .amazon-icon-bg {
            background: linear-gradient(135deg, var(--amazon-orange), #f3a847);
            transform: rotate(10deg) scale(1.1);
        }

        .amazon-process-item {
            position: relative;
            padding-left: 2.5rem;
            transition: all 0.3s ease;
        }

        .amazon-process-item:hover {
            transform: translateX(10px);
        }

        .amazon-process-item:before {
            content: counter(step);
            counter-increment: step;
            position: absolute;
            left: 0;
            top: 0;
            background: linear-gradient(to bottom right, var(--amazon-orange), var(--amazon-purple));
            color: white;
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .amazon-process-item:hover:before {
            transform: scale(1.1) rotate(15deg);
        }

        .glow-on-hover {
            transition: box-shadow 0.3s ease;
        }

        .glow-on-hover:hover {
            box-shadow: 0 0 15px rgba(255,153,0,0.6);
        }

        .color-rotate {
            animation: colorRotate 8s linear infinite;
        }

        @keyframes colorRotate {
            0% { color: var(--amazon-orange); }
            25% { color: var(--amazon-blue); }
            50% { color: var(--amazon-green); }
            75% { color: var(--amazon-purple); }
            100% { color: var(--amazon-orange); }
        }

        .parallax-bg {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .hover-3d {
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            transform-style: preserve-3d;
        }

        .hover-3d:hover {
            transform: translateY(-10px) rotateX(5deg) rotateY(5deg);
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }
        :root {
            /* --- Light Theme Palette (Default) --- */
            --theme-bg-primary: #FFFFFF;       /* white */
            --theme-bg-secondary: #F9FAFB;    /* gray-50 */
            --theme-bg-tertiary: #F3F4F6;     /* gray-100 */
            --theme-text-primary: #111827;     /* gray-900 */
            --theme-text-secondary: #4B5563;    /* gray-600 */
            --theme-text-tertiary: #6B7280;     /* gray-500 */
            --theme-border-light: #E5E7EB;     /* gray-200 */
            --theme-border-medium: #D1D5DB;    /* gray-300 */
            --theme-shadow-color: rgba(0, 0, 0, 0.1);
            --theme-accent-primary: #ff99004b;   /* Amazon Orange */
            --theme-accent-secondary: #146EB4;  /* Amazon Blue */
            --theme-accent-primary-gradient-start: #FF9900;
            --theme-accent-primary-gradient-end: #f3a847;
            --theme-accent-secondary-gradient-start: #146EB4;
            --theme-accent-secondary-gradient-end: #1a7fbe;
            --theme-chart-grid: '#E5E7EB';     /* gray-200 */
            --theme-chart-ticks: '#4B5563';    /* gray-600 */
            --theme-tooltip-bg: rgba(255, 255, 255, 0.95);
            --theme-tooltip-text: #111827;
            --theme-tooltip-title: #374151;
            --theme-tooltip-border: #D1D5DB;
        }
        html.dark {
             /* --- Dark Theme Palette --- */
            --theme-bg-primary: #0F172A;       /* slate-950 */
            --theme-bg-secondary: #1E293B;    /* slate-900 */
            --theme-bg-tertiary: #334155;     /* slate-800 */
            --theme-text-primary: #F1F5F9;     /* slate-100 */
            --theme-text-secondary: #CBD5E1;    /* slate-300 */
            --theme-text-tertiary: #94A3B8;     /* slate-400 */
            --theme-border-light: #334155;     /* slate-800 */
            --theme-border-medium: #475569;    /* slate-700 */
            --theme-shadow-color: rgba(255, 255, 255, 0.05); /* Sombra clara sutil */
            --theme-accent-primary: #fcd34d98;   /* gold (amber-300) */
            --theme-accent-secondary: #38BDF8;  /* light-blue (sky-400) */
            --theme-accent-primary-gradient-start: #F59E0B; /* gold-dark (amber-500) */
            --theme-accent-primary-gradient-end: #FCD34D;   /* gold (amber-300) */
            --theme-accent-secondary-gradient-start: #0EA5E9; /* light-blue-dark (sky-500) */
            --theme-accent-secondary-gradient-end: #38BDF8;   /* light-blue (sky-400) */
            --theme-chart-grid: #CBD5E1;     /* slate-700 */
            --theme-chart-ticks: #CBD5E1;    /* slate-400 */
            --theme-tooltip-bg: rgba(30, 41, 59, 0.95); /* slate-900 */
            --theme-tooltip-text: #F1F5F9;
            --theme-tooltip-title: #CBD5E1;
            --theme-tooltip-border: #475569;
        }
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--theme-bg-primary);
            color: var(--theme-text-primary);
            overflow-x: hidden;
            transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave */
        }
        /* --- Clases reutilizables basadas en variables --- */
        .bg-primary { background-color: var(--theme-bg-primary); }
        .bg-secondary { background-color: var(--theme-bg-secondary); }
        .bg-tertiary { background-color: var(--theme-bg-tertiary); }
        .text-primary { color: var(--theme-text-primary); }
        .text-secondary { color: var(--theme-text-secondary); }
        .text-tertiary { color: var(--theme-text-tertiary); }
        .border-light { border-color: var(--theme-border-light); }
        .border-medium { border-color: var(--theme-border-medium); }
        .gradient-text {
            background: linear-gradient(90deg, var(--theme-accent-primary-gradient-start), var(--theme-accent-primary-gradient-end));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .gradient-bg {
            background: linear-gradient(135deg, var(--theme-accent-primary-gradient-start), var(--theme-accent-primary-gradient-end));
            color: #111827; /* Texto oscuro sobre fondo dorado/naranja */
        }
        html.dark .gradient-bg {
             color: #1E293B; /* Texto oscuro slate-900 sobre fondo dorado */
        }
        .gradient-bg-blue {
            background: linear-gradient(135deg, var(--theme-accent-secondary-gradient-start), var(--theme-accent-secondary-gradient-end));
             color: #FFFFFF; /* Texto blanco sobre fondo azul */
        }
        .card-hover {
            transition: all 0.3s ease;
             border: 1px solid var(--theme-border-light);
             background-color: var(--theme-bg-secondary);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px var(--theme-shadow-color);
             border-color: var(--theme-border-medium);
             background-color: var(--theme-bg-tertiary); /* Fondo ligeramente diferente al hacer hover */
        }
        .floating { animation: floating 6s ease-in-out infinite; }
        @keyframes floating {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }
        .pulse { animation: pulse 2s infinite; }
        @keyframes pulse {
             0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme-accent-primary) 70%, transparent); }
             70% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--theme-accent-primary) 0%, transparent); }
             100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme-accent-primary) 0%, transparent); }
        }
        .cookies-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--theme-bg-primary);
            color: var(--theme-text-secondary);
            padding: 20px;
            z-index: 1000;
            transform: translateY(100%);
            transition: transform 0.5s ease, background-color 0.3s ease, color 0.3s ease;
            border-top: 1px solid var(--theme-border-light);
            box-shadow: 0 -5px 15px var(--theme-shadow-color);
        }
        .cookies-banner.show { transform: translateY(0); }
        .login-modal, .register-modal, .newsletter-modal, .exit-popup {
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
             background-color: rgba(31, 41, 55, 0.85); /* Fondo oscuro semitransparente para overlay */
        }
        .login-modal.show, .register-modal.show, .newsletter-modal.show, .exit-popup.show {
            opacity: 1;
            visibility: visible;
        }
        .modal-content { /* Contenido del modal */
            background-color: var(--theme-bg-primary);
            color: var(--theme-text-primary);
            border: 1px solid var(--theme-border-light);
        }
        .modal-input { /* Estilo para inputs en modales */
             background-color: var(--theme-bg-secondary);
             border-color: var(--theme-border-medium);
             color: var(--theme-text-primary);
        }
        .modal-input:focus {
             --tw-ring-color: var(--theme-accent-secondary); /* Color anillo focus azul claro */
             border-color: var(--theme-accent-secondary);
        }
        .modal-label {
             color: var(--theme-text-secondary);
        }
        .modal-link {
             color: var(--theme-accent-secondary); /* Azul claro para enlaces */
        }
         .modal-link:hover {
             color: color-mix(in srgb, var(--theme-accent-secondary) 80%, var(--theme-text-primary));
         }
        .nav-link::after {
            content: '';
            display: block;
            width: 0;
            height: 2px;
            background: var(--theme-accent-primary); /* Dorado para subrayado */
            transition: width 0.3s;
        }
        .nav-link:hover::after { width: 100%; }
        .nav-link {
            color: var(--theme-text-secondary);
            transition: color 0.3s ease;
        }
        .nav-link:hover {
            color: var(--theme-accent-primary); /* Dorado al hacer hover */
        }
        .stats-item { transition: all 0.3s ease; }
        .stats-item:hover {
            background: var(--theme-bg-tertiary);
            transform: scale(1.03);
        }
        .process-step::before {
            content: '';
            position: absolute;
            top: 0;
            left: 24px;
            height: 100%;
            width: 2px;
            background: var(--theme-accent-secondary); /* Azul claro para línea proceso */
            z-index: 0;
        }
        .process-step:last-child::before { display: none; }
        /* Blob animations */
        @keyframes blob {
            0% { transform: translate(0px, 0px) scale(1); }
            33% { transform: translate(30px, -50px) scale(1.1); }
            66% { transform: translate(-20px, 20px) scale(0.9); }
            100% { transform: translate(0px, 0px) scale(1); }
        }
        .animate-blob { animation: blob 7s infinite; }
        .animation-delay-2000 { animation-delay: 2s; }
        .blob-orange { background-color: var(--theme-accent-primary); }
        .blob-blue { background-color: var(--theme-accent-secondary); }
        /* CTA button styles */
        .cta-button {
            position: relative;
            overflow: hidden;
            transition: all 0.3s;
            border: none; /* Asegurar que no haya borde por defecto */
        }
        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px color-mix(in srgb, var(--theme-accent-primary) 30%, transparent);
        }
        .cta-button::after { /* Efecto brillo */
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: all 0.5s;
        }
        html.dark .cta-button::after {
             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); /* Brillo más sutil */
        }
        .cta-button:hover::after { left: 100%; }
        /* Guarantee badge */
        .guarantee-badge {
            animation: pulse 2s infinite;
            transform-style: preserve-3d;
            perspective: 1000px;
        }
        /* Testimonial cards */
        .testimonial-card { position: relative; }
        .testimonial-card::before {
            content: '"';
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 60px;
            font-family: Georgia, serif;
            color: color-mix(in srgb, var(--theme-text-primary) 8%, transparent); /* Comillas más sutiles */
            line-height: 1;
            z-index: 0;
        }
        .testimonial-card > * { position: relative; z-index: 1; } /* Asegurar contenido sobre comillas */
        /* Floating CTA */
        .floating-cta {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 999;
            animation: pulse 2s infinite; 
        }
         /* Color del icono de WhatsApp */
         .whatsapp-icon { color: #25D366; }
         html.dark .floating-cta a { /* Fondo ligeramente más claro en oscuro */
             background: linear-gradient(135deg, var(--theme-accent-primary-gradient-start), var(--theme-accent-primary-gradient-end));
             color: #1E293B;
         }
        /* Countdown timer */
        .countdown-box {
            background: var(--theme-bg-tertiary); /* Adaptado */
            border-radius: 8px;
            padding: 5px 10px;
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            min-width: 50px;
        }
        .countdown-value {
            font-size: 24px;
            font-weight: 700;
            color: var(--theme-text-primary); /* Adaptado */
        }
        .countdown-label {
            font-size: 10px;
            text-transform: uppercase;
            color: var(--theme-text-secondary); /* Adaptado */
        }
        /* Chart tooltip styles - Usamos variables */
        .chartjs-tooltip {
            background: var(--theme-tooltip-bg) !important;
            color: var(--theme-tooltip-text) !important;
            border-radius: 4px !important;
            border: 1px solid var(--theme-tooltip-border) !important;
            box-shadow: 0 2px 5px var(--theme-shadow-color) !important;
            padding: 10px !important;
        }
        .chartjs-tooltip-key {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin-right: 5px;
        }
        .chartjs-tooltip-title {
            color: var(--theme-tooltip-title) !important;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .chartjs-tooltip-value {
             font-weight: bold !important;
        }
        /* --- Theme Toggle Button --- */
        #theme-toggle svg {
            width: 1.25rem; /* Ajusta tamaño de iconos */
            height: 1.25rem;
        }
        #theme-toggle .sun-icon { display: none; }
        html.dark #theme-toggle .sun-icon { display: block; }
        html.dark #theme-toggle .moon-icon { display: none; }
         .swiper {
            overflow-x: auto;
            overflow-y: hidden;
        }
        .swiper-wrapper {
            display: flex !important;
            flex-direction: row !important;
            align-items: stretch;
        }
        .swiper-slide {
            display: flex;
            justify-content: center;
            width: auto;
        }
        .testimonial-card {
            width: 100%;
            max-width: 400px; /* Adjust based on design */
        }