.mobile-menu.active { display: flex; }
        .mobile-menu a { color: var(--primary-text); text-decoration: none; font-size: 1rem; padding: 10px 0; border-bottom: 1px solid var(--surface-stroke); }
        .mobile-lang-select { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border, #2a2a35); border-radius: 6px; padding: 6px 10px; font-size: 14px; cursor: pointer; outline: none; margin-top: 8px; width: 100%; }
        .mobile-lang-select:focus { border-color: var(--accent); }

        section { padding: var(--section-padding); }
        .section-container { max-width: 1200px; margin: 0 auto; }
        .section-header { text-align: center; margin-bottom: 36px; }
        .section-header h2 { font-size: 2rem; margin-bottom: 10px; }
        .section-header p { color: var(--secondary-text); }
        .card { background: var(--surface); border: 1px solid var(--surface-stroke); border-radius: var(--card-radius); padding: var(--card-padding); }
        .hero { padding: 140px 24px 72px; text-align: center; background: radial-gradient(ellipse at 50% 0%, var(--accent-glow) 0%, transparent 50%), linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%); }
        .hero-content { max-width: 820px; margin: 0 auto; }
        .hero-icon { width: 120px; height: 120px; border-radius: 28px; margin-bottom: 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); }
        .hero h1 { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 800; margin-bottom: 8px; }
        .hero-tagline { font-size: 1.25rem; color: var(--secondary-text); margin-bottom: 14px; }
        .hero-description { font-size: 1.05rem; color: var(--secondary-text); max-width: 700px; margin: 0 auto 28px; }
        .feature-list { max-width: 760px; margin: 0 auto; padding-left: 20px; color: var(--secondary-text); line-height: 1.9; font-size: 1rem; }
        .layout-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
        .layout-card h3 { font-size: 1.1rem; margin-bottom: 8px; color: var(--accent); }
        .specs { color: var(--secondary-text); font-size: 0.9rem; margin-bottom: 8px; }
        .difficulty-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; }
        .badge-free { background: #22c55e33; color: #22c55e; }
        .badge-premium { background: #f59e0b33; color: #f59e0b; }
        .steps-container { max-width: 700px; margin: 0 auto; }
        .step { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 20px; }
        .step-number { flex-shrink: 0; width: 36px; height: 36px; background: var(--accent); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; }
        .step-content h3 { font-size: 1.05rem; margin-bottom: 4px; }
        .step-content p { color: var(--secondary-text); font-size: 0.95rem; }
        .download-section { text-align: center; }
        .download-content { max-width: 600px; margin: 0 auto; }
        .download-content h2 { font-size: 2rem; margin-bottom: 12px; }
        .download-content p { color: var(--secondary-text); margin-bottom: 20px; }
        .play-badge img { height: 60px; transition: transform 0.2s; }
        .play-badge img:hover { transform: scale(1.05); }
        footer { border-top: 1px solid var(--surface-stroke); padding: 48px 24px; }
        .footer-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
        .footer-brand p { color: var(--secondary-text); margin-top: 8px; max-width: 300px; font-size: 0.9rem; }
        .footer-links h4 { margin-bottom: 12px; font-size: 0.95rem; }
        .footer-links ul { list-style: none; }
        .footer-links a { color: var(--secondary-text); text-decoration: none; font-size: 0.9rem; line-height: 2; }
        .footer-links a:hover { color: var(--accent); }
        .footer-bottom { max-width: 1200px; margin: 32px auto 0; padding-top: 24px; border-top: 1px solid var(--surface-stroke); display: flex; justify-content: space-between; color: var(--secondary-text); font-size: 0.85rem; }

        @media (max-width: 768px) {
            .nav-links { display: none; }
            .mobile-menu-btn { display: block; }
            .hero { padding: 120px 20px 56px; }
            .hero h1 { font-size: 2.2rem; }
            section { padding: 56px 20px; }
            .section-header h2 { font-size: 1.7rem; }
            .step { gap: 12px; }
            .footer-container { flex-direction: column; }
            .footer-bottom { flex-direction: column; text-align: center; }
        }
    </style>
    <script src="../assets/js/language.js"></script>
</head>
<body>
    <nav>
        <div class="nav-container">
            <a href="index.html" class="nav-logo">
                <img src="../assets/slidingpuzzle_icon.png" alt="Puzzle Deslizante">
                <span>Puzzle Deslizante</span>
            </a>
            <ul class="nav-links">
                <li><a href="index.html" class="nav-home">MentalDeload</a></li>
                <li><a href="#features">Caracter&iacute;sticas</a></li>
                <li><a href="#boards">Tableros</a></li>
                <li><a href="#how-to-play">C&oacute;mo jugar</a></li>
                <li><a href="#download">Descargar</a></li>
                <select class="lang-select" aria-label="Language"></select>
            </ul>
            <button class="mobile-menu-btn" aria-label="Men&uacute;">&#9776;</button>
        </div>
    </nav>

    <div class="mobile-menu" id="mobileMenu">
        <a href="index.html" class="nav-home">MentalDeload</a>
        <a href="#features">Caracter&iacute;sticas</a>
        <a href="#boards">Tableros</a>
        <a href="#how-to-play">C&oacute;mo jugar</a>
        <a href="#download">Descargar</a>
        <select class="mobile-lang-select" aria-label="Language"></select>
    </div>

    <section class="hero">
        <div class="hero-content">
            <img src="../assets/slidingpuzzle_icon.png" alt="Puzzle Deslizante" class="hero-icon">
            <h1>Puzzle Deslizante</h1>
            <p class="hero-tagline">Puzzle Cl&aacute;sico de Fichas Deslizantes</p>
            <p style="font-size: 1rem; color: var(--accent); margin-bottom: 8px;">por Riccardo Riedl</p>
            <p class="hero-description">
                Desliza fichas numeradas en el orden correcto en tableros de 3&times;3 a 8&times;8. Un puzzle atemporal con una experiencia tranquila, sin anuncios y completamente sin conexi&oacute;n.
            </p>
            <a href="https://play.google.com/store/apps/details?id=com.mentaldeload.slidingpuzzle" target="_blank" rel="noopener noreferrer" class="play-badge"><img src="../assets/googleplay/GetItOnGooglePlay_Badge_Web_color_Spanish.svg" alt="Disponible en Google Play"></a>
        </div>
    </section>

    <section id="features">
        <div class="section-container">
            <div class="section-header">
                <h2>Caracter&iacute;sticas principales</h2>
                <p>Dise&ntilde;o de puzzle enfocado sin distracciones</p>
            </div>
            <div class="card">
                <ul class="feature-list">
                    <li>Sin anuncios</li>
                    <li>Juego completamente sin conexi&oacute;n</li>
                    <li>No se requiere cuenta</li>
                    <li>Sin notificaciones push</li>
                    <li>Sin seguimiento ni anal&iacute;ticas</li>
                    <li>Puzzle deslizante cl&aacute;sico con controles t&aacute;ctiles intuitivos</li>
                    <li>M&uacute;ltiples tama&ntilde;os de tablero de 3&times;3 a 8&times;8</li>
                    <li>Caminos de viaje curados con dificultad creciente</li>
                    <li>Modo de juego libre con tableros variados</li>
                    <li>Seguimiento de progreso local</li>
                </ul>
            </div>
        </div>
    </section>

    <section id="boards" style="background: var(--surface);">
        <div class="section-container">
            <div class="section-header">
                <h2>Tama&ntilde;os de tablero</h2>
                <p>Elige tu desaf&iacute;o</p>
            </div>
            <div class="layout-grid">
                <div class="card layout-card">
                    <h3>3&times;3</h3>
                    <p class="specs">8 fichas &bull; Calentamiento r&aacute;pido</p>
                    <span class="difficulty-badge badge-free">Gratis</span>
                </div>
                <div class="card layout-card">
                    <h3>4&times;4</h3>
                    <p class="specs">15 fichas &bull; El cl&aacute;sico</p>
                    <span class="difficulty-badge badge-free">Gratis</span>
                </div>
                <div class="card layout-card">
                    <h3>5&times;5</h3>
                    <p class="specs">24 fichas &bull; Desaf&iacute;o moderado</p>
                    <span class="difficulty-badge badge-free">Gratis</span>
                </div>
                <div class="card layout-card">
                    <h3>6&times;6</h3>
                    <p class="specs">35 fichas &bull; Profundidad estrat&eacute;gica</p>
                    <span class="difficulty-badge badge-premium">Premium</span>
                </div>
                <div class="card layout-card">
                    <h3>7&times;7</h3>
                    <p class="specs">48 fichas &bull; Avanzado</p>
                    <span class="difficulty-badge badge-premium">Premium</span>
                </div>
                <div class="card layout-card">
                    <h3>8&times;8</h3>
                    <p class="specs">63 fichas &bull; Desaf&iacute;o experto</p>
                    <span class="difficulty-badge badge-premium">Premium</span>
                </div>
            </div>
        </div>
    </section>

    <section id="how-to-play">
        <div class="section-container">
            <div class="section-header">
                <h2>C&oacute;mo jugar</h2>
                <p>Desliza las fichas en el orden correcto</p>
            </div>
            <div class="steps-container">
                <div class="step">
                    <div class="step-number">1</div>
                    <div class="step-content">
                        <h3>Encuentra el espacio vac&iacute;o</h3>
                        <p>El tablero tiene un espacio vac&iacute;o. Solo las fichas adyacentes al espacio vac&iacute;o pueden moverse.</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h3>Desliza una ficha</h3>
                        <p>Toca una ficha junto al espacio vac&iacute;o para deslizarla a su posici&oacute;n.</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h3>Planifica tus movimientos</h3>
                        <p>Trabaja fila por fila de arriba a abajo. Piensa con anticipaci&oacute;n para no deshacer tu progreso.</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-number">4</div>
                    <div class="step-content">
                        <h3>Completa el puzzle</h3>
                        <p>Ordena todas las fichas en orden num&eacute;rico. Un final tranquilo y satisfactorio cada vez.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="download" class="download-section">
        <div class="section-container">
            <div class="download-content">
                <h2>Descargar Puzzle Deslizante</h2>
                <p>Disponible ahora en Google Play. Gratis, sin anuncios, completamente sin conexi&oacute;n.</p>
                <a href="https://play.google.com/store/apps/details?id=com.mentaldeload.slidingpuzzle" target="_blank" rel="noopener noreferrer" class="play-badge">
                    <img src="../assets/googleplay/GetItOnGooglePlay_Badge_Web_color_Spanish.svg" alt="Disponible en Google Play">
                </a>
                <p style="margin-top: 24px; font-size: 0.95rem; color: var(--secondary-text);">
                    Gratis &bull; Sin anuncios &bull; Offline-first &bull; Premium opcional
                </p>
            </div>
        </div>
    </section>

    <footer>
        <div class="footer-container">
            <div class="footer-brand">
                <h3><img src="../assets/mentaldeload_icon.png" alt="MentalDeload" style="width: 24px; height: 24px; vertical-align: middle; margin-right: 8px; border-radius: 4px;">MentalDeload</h3>
                <p>Juegos de puzzle cl&aacute;sicos para Android. Tranquilos, offline-first y respetuosos con la privacidad.</p>
            </div>
            <div class="footer-links">
                <h4>Juegos</h4>
                <ul>
                    <li><a href="peg-solitaire.html">Peg Solitaire</a></li>
                    <li><a href="mastermind.html">Codebreaker</a></li>
                    <li><a href="nonogram.html">Nonogram</a></li>
                    <li><a href="slidingpuzzle.html">Puzzle Deslizante</a></li>
                    <li><a href="mahjong.html">Mahjong Solitaire</a></li>
                    <li><a href="index.html">Todos los juegos</a></li>
                </ul>
            </div>
            <div class="footer-links">
                <h4>Legal</h4>
                <ul>
                    <li><a href="privacy.html">Pol&iacute;tica de privacidad</a></li>
                    <li><a href="imprint.html">Aviso legal</a></li>
                </ul>
            </div>
            <div class="footer-links">
                <h4>Contacto</h4>
                <ul>
                    <li><a href="mailto:mentaldeload@gmail.com">Correo electr&oacute;nico</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2026 MentalDeload. Todos los derechos reservados.</p>
            <p>Desarrollado por Riccardo Riedl</p>
        </div>
    </footer>

    <script>
        const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
        const mobileMenu = document.getElementById('mobileMenu');

        mobileMenuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('active');
            mobileMenuBtn.innerHTML = mobileMenu.classList.contains('active') ? '&times;' : '&#9776;';
        });

        mobileMenu.querySelectorAll('a').forEach(link => {
            link.addEventListener('click', () => {
                mobileMenu.classList.remove('active');
                mobileMenuBtn.innerHTML = '&#9776;';
            });
        });
    </script>
</body>
</html>