:root {
            --bg-deep: #050101;       
            --bg-panel: #120405;      
            --bg-panel-hover: #1c0608;
            --border-light: #2a0a0c;
            --border-strong: #4a1216;      
            --text-main: #fff0f2;
            --text-muted: #b8989d;      
            --neon-red: #ff003c;      
            --neon-orange: #ff5e00;   
            --neon-yellow: #ccff00;   
            --pastel-pink: #ffb3c6;   
            --font-head: 'Orbitron', sans-serif;
            --font-body: 'Rajdhani', sans-serif;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        
        body {
            background-color: var(--bg-deep);
            color: var(--text-main);
            font-family: var(--font-body);
            min-height: 100vh;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: var(--bg-deep); }
        ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--neon-orange); }

        .app-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
        
        .top-nav {
            display: flex; justify-content: space-between; align-items: center;
            padding: 1.2rem 2rem;
            background: rgba(5, 1, 1, 0.85);
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border-light);
            position: sticky; top: 0; z-index: 100;
            gap: 2rem;
        }
        
        .logo { 
            font-family: var(--font-head); font-size: 1.8rem; font-weight: 900; 
            color: var(--text-main); letter-spacing: 1px; text-decoration: none;
            display: flex; align-items: center; flex-shrink: 0;
            text-shadow: 0 0 10px rgba(255, 0, 60, 0.3);
        }
        .logo-accent { color: var(--neon-red); }
        
        .search-container { flex: 1; max-width: 700px; position: relative; display: flex; align-items: center; }
        .search-input {
            width: 100%; padding: 0.8rem 1.2rem 0.8rem 2.8rem;
            border-radius: 8px; border: 1px solid var(--border-strong);
            background: rgba(255, 255, 255, 0.02); color: var(--text-main);
            font-family: var(--font-body); font-weight: 600; font-size: 1rem;
            transition: all 0.3s ease; outline: none;
        }
        .search-input::placeholder { color: var(--text-muted); }
        .search-input:focus { border-color: var(--neon-red); background: rgba(255, 0, 60, 0.05); box-shadow: 0 0 0 3px rgba(255, 0, 60, 0.15); }
        .search-icon { position: absolute; left: 14px; color: var(--text-muted); width: 18px; height: 18px; pointer-events: none; }

        .menu-btn { background: none; border: none; color: var(--text-main); cursor: pointer; padding: 0.5rem; display: flex; align-items: center; justify-content: center; transition: 0.2s;}
        .menu-btn:hover { color: var(--neon-yellow); }
        
        @media (max-width: 768px) { 
            .top-nav { flex-wrap: wrap; padding: 1rem; gap: 1rem;}
            .search-container { order: 3; min-width: 100%; margin-top: 0.5rem; }
            .logo { font-size: 1.4rem; }
        }

        .sidebar {
            position: fixed; top: 0; right: 0; width: 320px; height: 100vh;
            background: var(--bg-panel); border-left: 1px solid var(--border-light);
            z-index: 1000; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex; flex-direction: column; overflow-y: auto;
        }
        .sidebar.open { transform: translateX(0); box-shadow: -10px 0 50px rgba(255, 0, 60, 0.1); }
        
        .sidebar-header { padding: 1.5rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); }
        .sidebar-title { font-family: var(--font-head); color: var(--neon-yellow); font-size: 1.2rem; font-weight: 700; letter-spacing: 1px;}
        .close-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0.5rem; transition: color 0.2s;}
        .close-btn:hover { color: var(--neon-red); }

        .sidebar-nav { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
        .sidebar-nav a {
            display: flex; align-items: center; gap: 1rem; padding: 0.8rem 1rem;
            color: var(--text-main); text-decoration: none; font-size: 1.05rem; font-weight: 600;
            border-radius: 8px; transition: all 0.2s;
        }
        .sidebar-nav a:hover { background: var(--bg-panel-hover); color: var(--neon-orange); }
        .sidebar-nav a svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; opacity: 0.8; }
        .sidebar-nav a:hover svg { opacity: 1; }

        .sidebar-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(3px);
            z-index: 999; display: none; opacity: 0; transition: opacity 0.3s;
        }
        .sidebar-overlay.active { display: block; opacity: 1; }
        
        .sidebar-submenu { display: none; flex-direction: column; padding-left: 2.5rem; gap: 0.5rem; margin-top: 0.5rem; border-left: 1px solid var(--border-strong); margin-left: 1rem; }
        .sidebar-submenu a { padding: 0.5rem 0; font-size: 0.95rem; font-weight: 500; }
        .sidebar-submenu a::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--neon-yellow); border-radius: 50%; margin-right: 8px; }
        .has-submenu:hover .sidebar-submenu, .has-submenu:focus-within .sidebar-submenu { display: flex; }

       .main-content { padding: 2rem 1.5rem; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 4rem; width: 100%; }
        
        .white-sheet h1 { font-family: var(--font-head); font-size: 2.2rem; color: #111; margin-bottom: 0.5rem; text-transform: uppercase; }
        .white-sheet .date { color: #666; font-size: 1rem; border-bottom: 1px solid #ddd; padding-bottom: 2rem; margin-bottom: 2rem; font-weight: 600; }
        .white-sheet h2 { font-family: var(--font-head); font-size: 1.3rem; color: var(--neon-red); margin-top: 2.5rem; margin-bottom: 1rem; }
        .white-sheet p { font-size: 1.1rem; line-height: 1.8; color: #333; margin-bottom: 1rem; font-weight: 500; }
        .white-sheet strong { color: #000; font-weight: 700; }
        
        @media (min-width: 768px) {
            .main-content { padding: 4rem 5%; gap: 6rem; }
        }
        
        .section-header { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2.5rem; }
        .section-title { 
            font-family: var(--font-head); 
            font-size: clamp(1.4rem, 3vw, 2.2rem); 
            font-weight: 800; 
            color: var(--text-main); 
            text-transform: uppercase; 
            letter-spacing: 1px;
            white-space: normal;
            line-height: 1.2;
        }
        .section-line { height: 1px; flex: 1; background: linear-gradient(90deg, var(--border-strong), transparent); }

        .hero-section {
            background: radial-gradient(circle at top center, var(--bg-panel-hover) 0%, var(--bg-deep) 100%);
            border-radius: 24px; 
            padding: 5rem 1.5rem;
            text-align: center;
            border: 1px solid var(--border-light);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-shadow: 0 20px 50px rgba(255, 0, 60, 0.05);
        }
        
        @media (min-width: 768px) {
            .hero-section { padding: 7rem 3rem; }
        }

        .hero-subtitle { font-family: var(--font-head); color: var(--pastel-pink); font-size: clamp(0.85rem, 2vw, 1.1rem); letter-spacing: 4px; margin-bottom: 1.5rem; font-weight: 700; text-transform: uppercase; text-shadow: 0 0 15px rgba(255, 179, 198, 0.4); }
        
        .hero-title {
            font-family: var(--font-head); font-size: clamp(2.5rem, 6vw, 5.5rem);
            font-weight: 900; line-height: 1.1; letter-spacing: -1px; color: var(--text-main);
            text-shadow: 0 10px 30px rgba(0,0,0,0.8);
        }
        .title-gemini { color: var(--neon-red); text-shadow: 0 0 20px rgba(255, 0, 60, 0.5); }

        .hero-desc {
            margin-top: 1.5rem; color: var(--text-muted); font-size: 1.1rem; max-width: 650px; line-height: 1.6; font-weight: 500;
        }

        .info-content {
            background: var(--bg-panel); padding: 2.5rem; border-radius: 16px; border: 1px solid var(--border-light); 
            line-height: 1.8; color: var(--text-muted); font-size: 1.05rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }
        .info-content strong { color: var(--text-main); font-weight: 700; }
        .highlight-pink { color: var(--pastel-pink); font-weight: 700; text-shadow: 0 0 8px rgba(255,179,198,0.3);}
        .highlight-yellow { color: var(--neon-yellow); font-weight: 700; }

        .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
        @media (min-width: 768px) { .cards-grid { gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } }

        .card { 
            background: var(--bg-panel); border: 1px solid var(--border-light); border-radius: 16px; 
            padding: 1.2rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
            display: flex; flex-direction: column; gap: 1.2rem; position: relative; overflow: hidden;
        }
        .card:hover { 
            border-color: var(--neon-red); transform: translateY(-6px); 
            box-shadow: 0 12px 30px rgba(0,0,0,0.8), 0 0 0 1px rgba(255, 0, 60, 0.3); 
        }
        
        .card-header-image {
            background: var(--bg-deep); border-radius: 12px; height: 160px;
            overflow: hidden; position: relative; border: 1px solid var(--border-light); transition: 0.3s;
        }
        .card:hover .card-header-image { border-color: var(--border-strong); }
        .card-header-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
        .card:hover .card-header-image img { transform: scale(1.05); }

        .card-title { font-family: var(--font-head); color: var(--text-main); font-size: 1.3rem; font-weight: 800; text-align: center; margin: 0;}
        
        .btn-action {
            display: flex; align-items: center; justify-content: center; text-align: center;
            width: 100%; 
            padding: 0.8rem 0.2rem; /* Relleno lateral mínimo */
            background: transparent;
            border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text-main);
            font-family: var(--font-head); font-weight: 700; 
            font-size: clamp(0.7rem, 2.5vw, 0.9rem); 
            letter-spacing: 0.5px; text-decoration: none; text-transform: uppercase; 
            transition: all 0.3s ease; margin-top: auto;
            white-space: nowrap; 
        }
        .btn-action:hover { 
            background: linear-gradient(90deg, var(--neon-red), var(--neon-orange)); 
            border-color: transparent; color: #fff; box-shadow: 0 4px 15px rgba(255, 0, 60, 0.4); 
        }

        .badge {
            position: absolute; top: 1rem; right: 1rem; padding: 0.4rem 0.8rem; border-radius: 6px;
            font-family: var(--font-head); font-size: 0.75rem; font-weight: 800; 
            background: var(--neon-yellow); color: #000; text-transform: uppercase; letter-spacing: 1px; z-index: 20;
            box-shadow: 0 0 10px rgba(204, 255, 0, 0.4);
        }

        .card-interactive { padding: 0; min-height: 520px; }
        .card-interactive .badge { background: var(--pastel-pink); box-shadow: 0 0 10px rgba(255, 179, 198, 0.4); }
        .card-interactive:nth-child(2) .badge { background: var(--neon-yellow); }
        .card-interactive:nth-child(3) .badge { background: var(--neon-orange); color: #fff;}
        
        .card-cover { 
            position: relative; height: 220px; background: var(--bg-deep); 
            border-bottom: 1px solid var(--border-light); overflow: hidden;
        }
        .card-cover-bg { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; transition: transform 0.5s ease, opacity 0.3s; }
        .card-interactive:hover .card-cover-bg { opacity: 0.7; transform: scale(1.05); }
        
        .card-cover-content { 
            position: absolute; bottom: 0; left: 0; width: 100%; padding: 1.5rem; 
            background: linear-gradient(to top, var(--bg-panel) 5%, transparent); 
            display: flex; align-items: flex-end; gap: 1rem; z-index: 10;
        }
        .card-logo { 
            width: 56px; height: 56px; border-radius: 12px; border: 2px solid var(--border-light); 
            background: var(--bg-deep); z-index: 2; object-fit: cover; box-shadow: 0 4px 10px rgba(0,0,0,0.5);
        }
        
        .card-body { padding: 1.2rem; display: flex; flex-direction: column; gap: 1.2rem; flex-grow: 1; }
        @media (min-width: 768px) { .card-body { padding: 1.5rem; gap: 1.5rem; } }
        
        .specs-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.95rem; color: var(--text-muted); font-weight: 600; }
        .specs-list li { display: flex; align-items: center; gap: 0.6rem; }
        .specs-list li::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--neon-yellow); border-radius: 2px; }

        .screenshots-slider { 
            display: flex; gap: 0.8rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.8rem; 
            scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
        }
        .screenshots-slider::-webkit-scrollbar { height: 6px; }
        .screenshots-slider::-webkit-scrollbar-track { background: transparent; }
        .screenshots-slider::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
        
        .screenshot-item { 
            scroll-snap-align: start; flex-shrink: 0; width: 140px; height: 80px; 
            border-radius: 8px; border: 1px solid var(--border-light); object-fit: cover; 
            background-color: var(--bg-deep); transition: border-color 0.3s;
        }
        .screenshot-item:hover { border-color: var(--neon-orange); }
        
        /* BOTONES INFERIORES: Ajuste de espaciado para que no se aprieten */
        .card-buttons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-top: auto; }
        .btn-grid-full { grid-column: span 2; margin-bottom: 0.2rem;}
        @media (min-width: 768px) { .card-buttons-grid { gap: 0.8rem; } }

        /* BANNERS */
        .banner-section {
            background: var(--bg-panel); border: 1px solid var(--border-light); border-radius: 24px;
            padding: 4rem 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.4);
        }
        .banner-title { font-family: var(--font-head); font-size: clamp(1.5rem, 4vw, 2.5rem); color: var(--text-main); font-weight: 800; text-transform: uppercase; line-height: 1.2;}
        .banner-text { color: var(--text-muted); font-size: 1.1rem; max-width: 700px; line-height: 1.6; font-weight: 500;}
        .btn-solid {
            background: var(--text-main); color: var(--bg-deep); padding: 1rem 2.5rem; border-radius: 8px;
            font-family: var(--font-head); font-weight: 800; text-decoration: none; text-transform: uppercase;
            letter-spacing: 1px; transition: 0.3s; border: none; cursor: pointer; font-size: 1rem; margin-top: 1rem;
        }
        .btn-solid:hover { background: linear-gradient(90deg, var(--neon-orange), var(--neon-red)); color: #fff; box-shadow: 0 8px 25px rgba(255, 94, 0, 0.4); }

        /* CORRECCIÓN FINAL: CATÁLOGO DE PRECIOS DESLIZABLE */
        .pricing-container {
            width: 100%;
            overflow-x: auto; /* Permite scroll horizontal */
            padding-bottom: 1.5rem; /* Espacio para barra */
            scrollbar-width: thin;
            scrollbar-color: var(--neon-red) var(--bg-panel);
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
        }
        .pricing-container::-webkit-scrollbar { height: 8px; }
        .pricing-container::-webkit-scrollbar-track { background: var(--bg-panel); border-radius: 4px;}
        .pricing-container::-webkit-scrollbar-thumb { background: var(--neon-red); border-radius: 4px; }

        .pricing-grid {
            display: flex; /* Fuerza las tarjetas lado a lado */
            gap: 1.5rem;
            width: max-content; /* GARANTIZA QUE EL CONTENEDOR NO SE APLASTE */
            padding: 1rem 0.5rem; /* Padding para que la sombra hover no se corte */
        }
        
        .price-card { 
            width: 310px; /* Ancho fijo exacto para móvil */
            flex-shrink: 0; /* Evita que Flexbox la comprima */
            scroll-snap-align: center;
            background: var(--bg-panel); border: 1px solid var(--border-light); border-radius: 20px; 
            padding: 2.5rem 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; position: relative; 
            overflow: hidden; transition: 0.3s; min-height: 400px;
        }
        
        @media (min-width: 1024px) {
            .pricing-container { overflow-x: visible; padding-bottom: 0; }
            .pricing-grid {
                display: grid; 
                grid-template-columns: repeat(3, 1fr);
                width: 100%; 
                max-width: 1200px;
                margin: 0 auto;
            }
            .price-card { width: auto; padding: 3.5rem 2.5rem; }
        }

        .price-card:hover { border-color: var(--neon-orange); transform: translateY(-6px); box-shadow: 0 15px 35px rgba(255, 94, 0, 0.15); }
        .price-card.highlight { border-color: var(--neon-red); background: linear-gradient(180deg, rgba(255, 0, 60, 0.05) 0%, var(--bg-panel) 100%); }
        .price-card.highlight::before {
            content: 'RECOMENDADO'; position: absolute; top: 1.5rem; right: -2.8rem; background: var(--neon-yellow); color: #000; font-family: var(--font-head); font-size: 0.75rem; font-weight: 800; padding: 0.4rem 3.5rem; transform: rotate(45deg); letter-spacing: 1px; box-shadow: 0 2px 15px rgba(204, 255, 0, 0.5);
        }
        .price-title { font-family: var(--font-head); font-size: 1.4rem; color: var(--text-muted); margin-bottom: 0.5rem; text-transform: uppercase; font-weight: 700;}
        .price-amount { font-family: var(--font-head); font-size: 3.5rem; font-weight: 900; color: var(--text-main); line-height: 1;}
        .price-features { list-style: none; display: flex; flex-direction: column; gap: 1.2rem; margin: 1.5rem 0; flex-grow: 1; }
        .price-features li { display: flex; align-items: flex-start; gap: 1rem; font-size: 1.05rem; color: var(--text-main); font-weight: 600;}
        .price-features li svg { width: 22px; height: 22px; stroke: var(--neon-orange); flex-shrink: 0; margin-top: 0.1rem; }

        /* FOOTER */
        .main-footer {
            background: var(--bg-panel); border-top: 1px solid var(--border-light);
            padding: 5rem 5% 2rem; margin-top: 5rem; display: flex; flex-direction: column; gap: 4rem;
        }
        .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 3rem; max-width: 1400px; margin: 0 auto; width: 100%; }
        .footer-col h4 { font-family: var(--font-head); color: var(--text-main); font-size: 1.1rem; margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 800;}
        .footer-col a { display: block; color: var(--text-muted); text-decoration: none; margin-bottom: 1rem; font-weight: 600; font-size: 0.95rem; transition: 0.2s; }
        .footer-col a:hover { color: var(--neon-yellow); padding-left: 5px; }
        .footer-bottom { border-top: 1px solid var(--border-light); padding-top: 2rem; text-align: center; color: var(--text-muted); font-size: 0.9rem; font-family: var(--font-body); letter-spacing: 1px; font-weight: 500;}

        .btn-whatsapp {
            position: fixed; bottom: 30px; right: 30px;
            background: linear-gradient(135deg, #25D366, #128C7E); color: white;
            width: 60px; height: 60px; border-radius: 50%;
            display: flex; justify-content: center; align-items: center;
            box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4);
            z-index: 1000; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .btn-whatsapp:hover {
            transform: scale(1.1) translateY(-5px);
            box-shadow: 0 8px 25px rgba(37, 211, 102, 0.7);
            background: linear-gradient(135deg, #128C7E, #25D366);
        }
        @media (max-width: 768px) {
            .btn-whatsapp { width: 50px; height: 50px; bottom: 20px; right: 20px; }
            .btn-whatsapp svg { width: 25px; height: 25px; }
        }