# A Odisseia do Asfalto: Uma Jornada Épica de Moto 🌄🌊

Das altas montanhas às praias selvagens: viva uma roadtrip de moto inesquecível. Descubra a nossa história de aventura e teste o seu perfil de viajante.

---

import ArticleScript from '@/components/ArticleScript';

{/* Hero Section Adventure */}
<div className="text-center mb-12 relative">
  <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl h-64 bg-emerald-500/10 rounded-full blur-[100px] pointer-events-none"></div>
  
  <div className="inline-flex items-center gap-2 px-4 py-2 bg-emerald-500/20 text-emerald-400 border border-emerald-500/50 rounded-full text-sm font-bold uppercase tracking-widest mb-6 shadow-[0_0_15px_rgba(16,185,129,0.3)]">
    <span>🌲</span> RELATO DE AVENTURA
  </div>
  
  <h1 className="text-4xl md:text-6xl font-black mb-6 leading-tight text-white drop-shadow-lg">
    Da Montanha <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-500">ao Mar</span>
  </h1>
  
  <p className="text-xl text-slate-300 font-medium mb-10 max-w-2xl mx-auto">
    3000 quilômetros, 3 climas, 1 moto. Uma epopeia de pura liberdade através das paisagens mais belas.
  </p>
  
  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div className="bg-slate-900 border border-slate-700/50 p-6 rounded-2xl backdrop-blur-md hover:border-emerald-500/50 transition-colors shadow-xl">
      <div className="text-4xl mb-3">🏔️</div>
      <div className="text-sm text-slate-400 uppercase tracking-wider font-semibold mb-1">Altitude Máx</div>
      <div className="text-xl font-black text-emerald-400">2800m</div>
    </div>
    <div className="bg-slate-900 border border-slate-700/50 p-6 rounded-2xl backdrop-blur-md hover:border-amber-500/50 transition-colors shadow-xl">
      <div className="text-4xl mb-3">🏜️</div>
      <div className="text-sm text-slate-400 uppercase tracking-wider font-semibold mb-1">Deserto</div>
      <div className="text-xl font-black text-amber-500">45°C</div>
    </div>
    <div className="bg-slate-900 border border-slate-700/50 p-6 rounded-2xl backdrop-blur-md hover:border-cyan-500/50 transition-colors shadow-xl">
      <div className="text-4xl mb-3">🌊</div>
      <div className="text-sm text-slate-400 uppercase tracking-wider font-semibold mb-1">Oceano</div>
      <div className="text-xl font-black text-cyan-400">A Chegada</div>
    </div>
  </div>
</div>

<div className="flex justify-center my-10">
  <AdSense slot="4357278838" format="auto" />
</div>

<div className="prose prose-invert prose-lg max-w-none">
    
    <div className="my-12 relative p-8 rounded-3xl bg-slate-900 border border-emerald-500/30 shadow-[0_0_30px_rgba(16,185,129,0.1)] overflow-hidden">
        <div className="absolute top-0 left-0 w-2 h-full bg-gradient-to-b from-emerald-400 to-cyan-500"></div>
        <div className="text-6xl text-emerald-500/20 absolute top-4 left-6 font-serif">"</div>
        <p className="relative z-10 text-xl md:text-2xl font-medium italic text-slate-200 m-0 pl-6 border-none">
            O asfalto não é apenas uma superfície, é uma promessa. Aquela que o leva onde ninguém o espera.
        </p>
    </div>

    <h2 className="text-3xl font-bold flex items-center gap-3 mt-12 mb-6">
        <span className="text-emerald-400">Capítulo 1 :</span> O Sopro dos Cumes 🏔️
    </h2>
    <p className="text-slate-300 leading-relaxed">
        A partida foi ao amanhecer. O ar estava cortante, carregado com o cheiro dos pinheiros. A minha moto, carregada como uma mula mas pronta a saltar, parecia tão impaciente quanto eu. As primeiras curvas revelaram a majestade dos Alpes.
    </p>
    <p className="text-slate-300 leading-relaxed">
        Andar de moto nas montanhas é uma dança. Travar, olhar, acelerar. Cada curva é uma pergunta, cada saída é uma resposta. A 2000m de altitude, o motor respira de forma diferente e o homem também. Sente-se pequeno, mas infinitamente vivo.
    </p>

    <h2 className="text-3xl font-bold flex items-center gap-3 mt-12 mb-6">
        <span className="text-amber-500">Capítulo 2 :</span> Atravessando o Vazio 🏜️
    </h2>
    <p className="text-slate-300 leading-relaxed">
        Depois da frescura, o fogo. A paisagem mudou abruptamente. A pedra cinzenta deu lugar ao ocre ardente. O deserto das Bardenas, uma vasta extensão hostil e magnífica.
    </p>
    <p className="text-slate-300 leading-relaxed">
        Aqui, é a mente que pilota. O calor penetra sob o capacete, a linha reta hipnotiza. Mas que beleza! Monólitos de terra erguem-se como guardiões silenciosos. Foi então que percebi que uma viagem de moto não é uma fuga, mas um encontro com nós mesmos.
    </p>

    <div className="my-10 bg-amber-500/10 border border-amber-500/30 p-6 rounded-2xl backdrop-blur-sm">
        <h4 className="text-amber-500 text-xl font-bold mb-2 flex items-center gap-2">
            <span>⚠️</span> Lição do Deserto
        </h4>
        <p className="text-amber-200/80 m-0">Leve sempre mais água do que gasolina. E nunca subestime o cansaço causado pelo calor.</p>
    </div>

    <h2 className="text-3xl font-bold flex items-center gap-3 mt-12 mb-6">
        <span className="text-cyan-400">Capítulo 3 :</span> O Oceano como Recompensa 🌊
    </h2>
    <p className="text-slate-300 leading-relaxed">
        Após três dias de poeira, o cheiro do sal. A chegada à costa basca foi uma libertação. O azul infinito do Atlântico contrastando com o verde das colinas.
    </p>
    <p className="text-slate-300 leading-relaxed">
        Baixar o descanso de frente para o mar, tirar o capacete e cheirar a brisa do mar... É a própria essência de uma roadtrip. O cansaço evapora, deixando apenas memórias gravadas para sempre.
    </p>

    <h2 className="text-3xl font-bold mt-12 mb-6">Conclusão: O Apelo do Regresso</h2>
    <p className="text-slate-300 leading-relaxed">
        Esta viagem transformou-me. Aprendi que luxo não é um hotel de 5 estrelas, mas um acampamento sob a Via Láctea. Que a velocidade importa menos que o ritmo.
    </p>
</div>

{/* Start of Traveler Quiz */}
<div className="mt-20 border-t border-slate-800 pt-16">
    <div id="quiz-intro-block-adv" className="bg-slate-900 border border-emerald-500/30 rounded-3xl p-10 md:p-14 text-center shadow-[0_0_40px_rgba(16,185,129,0.15)] relative overflow-hidden">
        <div className="absolute top-0 right-0 w-64 h-64 bg-emerald-500/10 rounded-full blur-3xl pointer-events-none"></div>
        <h2 className="text-3xl md:text-5xl font-black text-white mb-6 relative z-10">
             Que Viajante de Moto é Você? 🌍
        </h2>
        <p className="text-xl text-slate-300 mb-10 relative z-10 max-w-2xl mx-auto">
            Aventureiro extremo, condutor zen ou explorador de conforto? 8 perguntas para descobrir o seu perfil.
        </p>
        <button id="start-btn-adv" className="relative z-10 bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white border-none px-10 py-5 rounded-full text-xl font-black cursor-pointer shadow-[0_10px_30px_rgba(16,185,129,0.3)] uppercase tracking-wider transition-all hover:scale-105">
            Começar a Aventura
        </button>
    </div>

    {/* Progress Bar */}
    <div id="quiz-progress-container-adv" className="sticky top-0 z-50 bg-slate-950/90 backdrop-blur-md p-4 border-b border-slate-800 hidden mt-10">
        <div className="max-w-3xl mx-auto">
            <div className="flex justify-between mb-2">
                <span className="text-sm font-bold text-emerald-400" id="quiz-progress-text-adv">Pergunta 1/8</span>
            </div>
            <div className="h-2 bg-slate-800 rounded-full overflow-hidden">
                <div id="quiz-progress-bar-adv" className="h-full w-[12.5%] bg-gradient-to-r from-emerald-400 to-teal-500 transition-all duration-300 rounded-full"></div>
            </div>
        </div>
    </div>

    <form id="quiz-form-adv" className="max-w-3xl mx-auto my-10 hidden">

        {/* Q1 */}
        <div className="quiz-page-adv active bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden" id="adv-page-1">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-emerald-400 to-teal-600 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">1</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">O seu destino de sonho?</h3>
            </div>
            <div className="flex flex-col gap-4 text-white">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q1" value="desert" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">As dunas do Saara (Sozinho no mundo)</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q1" value="route" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">A Rota 66 (Lendária e confortável)</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q1" value="montagne" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Os passos Alpinos (Curvas sem parar)</span>
                </label>
            </div>
            <div className="text-right mt-8">
                <button type="button" className="next-btn-adv bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white disabled:opacity-50 disabled:cursor-not-allowed border-none px-10 py-4 rounded-xl text-lg font-bold cursor-pointer shadow-[0_10px_30px_rgba(16,185,129,0.3)] transition-all" disabled>Próximo →</button>
            </div>
        </div>

        {/* Q2 */}
        <div className="quiz-page-adv bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="adv-page-2">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-emerald-400 to-teal-600 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">2</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">A sua noite ideal numa viagem?</h3>
            </div>
            <div className="flex flex-col gap-4 text-white">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q2" value="bivouac" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Numa tenda, à fogueira</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q2" value="hotel" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Hotel com piscina e estacionamento seguro</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q2" value="gite" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Turismo de habitação para conhecer os locais</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                <button type="button" className="prev-btn-adv bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold cursor-pointer transition-all">← Voltar</button>
                <button type="button" className="next-btn-adv bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white disabled:opacity-50 disabled:cursor-not-allowed border-none px-10 py-4 rounded-xl text-lg font-bold cursor-pointer shadow-[0_10px_30px_rgba(16,185,129,0.3)] transition-all" disabled>Próximo →</button>
            </div>
        </div>

        {/* Q3 */}
        <div className="quiz-page-adv bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="adv-page-3">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-emerald-400 to-teal-600 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">3</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">Uma avaria no meio do nada...</h3>
            </div>
            <div className="flex flex-col gap-4 text-white">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q3" value="mecano" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Tenho o meu kit de ferramentas, eu arranjo!</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q3" value="assistance" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Ligo para a assistência, sem stress</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q3" value="stress" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Pânico total...</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                <button type="button" className="prev-btn-adv bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold cursor-pointer transition-all">← Voltar</button>
                <button type="button" className="next-btn-adv bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white disabled:opacity-50 disabled:cursor-not-allowed border-none px-10 py-4 rounded-xl text-lg font-bold cursor-pointer shadow-[0_10px_30px_rgba(16,185,129,0.3)] transition-all" disabled>Próximo →</button>
            </div>
        </div>

        {/* Q4 */}
        <div className="quiz-page-adv bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="adv-page-4">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-emerald-400 to-teal-600 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">4</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">Quantos km por dia?</h3>
            </div>
            <div className="flex flex-col gap-4 text-white">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q4" value="cool" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">150-200 km (Com calma)</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q4" value="moyen" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">300-400 km (Bom ritmo)</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q4" value="hard" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">+600 km (A devorar asfalto)</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                 <button type="button" className="prev-btn-adv bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold cursor-pointer transition-all">← Voltar</button>
                <button type="button" className="next-btn-adv bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white disabled:opacity-50 disabled:cursor-not-allowed border-none px-10 py-4 rounded-xl text-lg font-bold cursor-pointer shadow-[0_10px_30px_rgba(16,185,129,0.3)] transition-all" disabled>Próximo →</button>
            </div>
        </div>

        {/* Q5 */}
        <div className="quiz-page-adv bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="adv-page-5">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-emerald-400 to-teal-600 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">5</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">A sua bagagem?</h3>
            </div>
            <div className="flex flex-col gap-4 text-white">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q5" value="alu" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Malas de alumínio (O visual Aventura)</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q5" value="souple" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Sacos macios impermeáveis (Leve)</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q5" value="sac" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Apenas uma mochila (Minimalista)</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                 <button type="button" className="prev-btn-adv bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold cursor-pointer transition-all">← Voltar</button>
                <button type="button" className="next-btn-adv bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white disabled:opacity-50 disabled:cursor-not-allowed border-none px-10 py-4 rounded-xl text-lg font-bold cursor-pointer shadow-[0_10px_30px_rgba(16,185,129,0.3)] transition-all" disabled>Próximo →</button>
            </div>
        </div>

        {/* Q6 */}
        <div className="quiz-page-adv bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="adv-page-6">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-emerald-400 to-teal-600 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">6</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">A chuva chega...</h3>
            </div>
            <div className="flex flex-col gap-4 text-white">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q6" value="continue" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Visto o impermeável e continuo!</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q6" value="stop" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Paro no primeiro café</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                 <button type="button" className="prev-btn-adv bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold cursor-pointer transition-all">← Voltar</button>
                <button type="button" className="next-btn-adv bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white disabled:opacity-50 disabled:cursor-not-allowed border-none px-10 py-4 rounded-xl text-lg font-bold cursor-pointer shadow-[0_10px_30px_rgba(16,185,129,0.3)] transition-all" disabled>Próximo →</button>
            </div>
        </div>

        {/* Q7 */}
        <div className="quiz-page-adv bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="adv-page-7">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-emerald-400 to-teal-600 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">7</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">GPS ou Mapa de Papel?</h3>
            </div>
            <div className="flex flex-col gap-4 text-white">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q7" value="gps" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">O GPS mais recente com trilho GPX</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q7" value="carte" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Mapa de papel no depósito</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q7" value="pif" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Ao calhas, logo se vê!</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                 <button type="button" className="prev-btn-adv bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold cursor-pointer transition-all">← Voltar</button>
                <button type="button" className="next-btn-adv bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white disabled:opacity-50 disabled:cursor-not-allowed border-none px-10 py-4 rounded-xl text-lg font-bold cursor-pointer shadow-[0_10px_30px_rgba(16,185,129,0.3)] transition-all" disabled>Próximo →</button>
            </div>
        </div>

        {/* Q8 */}
        <div className="quiz-page-adv bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="adv-page-8">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-emerald-400 to-teal-600 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">8</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">O objetivo da viagem?</h3>
            </div>
            <div className="flex flex-col gap-4 text-white">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q8" value="destination" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Chegar ao destino</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q8" value="chemin" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">O caminho percorrido</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:border-emerald-400/50 hover:bg-slate-800">
                    <input type="radio" name="adv_q8" value="rencontre" className="w-5 h-5 accent-emerald-500" /> 
                    <span className="text-lg">Os encontros humanos</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                 <button type="button" className="prev-btn-adv bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold cursor-pointer transition-all">← Voltar</button>
                <button type="button" className="next-btn-adv bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white disabled:opacity-50 disabled:cursor-not-allowed border-none px-10 py-4 rounded-xl text-lg font-bold cursor-pointer shadow-[0_10px_30px_rgba(16,185,129,0.3)] transition-all" disabled>Ver o meu Perfil</button>
            </div>
        </div>

    </form>

    {/* Results Panel */}
    <div id="quiz-result-adv" className="hidden max-w-3xl mx-auto my-16">
        <div className="bg-slate-900 border border-emerald-500/30 rounded-[2.5rem] p-10 md:p-16 text-center shadow-[0_0_50px_rgba(16,185,129,0.1)] relative overflow-hidden">
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-emerald-500/5 blur-3xl pointer-events-none"></div>
            
            <div className="text-7xl mb-6 relative z-10">🦅</div>
            <h2 className="text-3xl md:text-4xl font-black text-white mb-8 relative z-10">O Seu Perfil de Aventureiro</h2>
            
            <div id="quiz-result-content-adv" className="text-xl text-slate-300 mb-10 relative z-10 font-medium leading-relaxed bg-slate-800/50 p-8 rounded-2xl border border-slate-700/50"></div>
            
            <div className="text-center mt-10 relative z-10">
                <button id="restart-quiz-adv" className="bg-slate-800 hover:bg-slate-700 text-white border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold transition-all flex items-center justify-center gap-3 mx-auto">
                    🔄 Tentar de Novo
                </button>
            </div>
        </div>
    </div>
</div>

<div className="flex flex-col sm:flex-row gap-4 justify-center my-16 border-t border-slate-800 pt-10 px-4">
    <a href="#" className="universal-whatsapp-btn bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-8 rounded-2xl transition-all shadow-[0_10px_20px_rgba(37,211,102,0.3)] flex items-center justify-center gap-3">
        <span className="text-2xl">📱</span> Partilhar o meu perfil
    </a>
    <a href="/dashboard" className="bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white px-8 py-4 rounded-2xl font-black transition-all flex items-center justify-center gap-3 shadow-lg">
        👤 Ver Estatísticas Completas
    </a>
</div>

<ArticleStyle content={`
/* Force styles on dynamically injected results */
#quiz-result-content-adv h3 {
    font-size: 1.5rem;
    color: #34d399; /* emerald-400 */
    margin-bottom: 1rem;
    font-weight: 900;
}
#quiz-result-content-adv p {
    color: #cbd5e1; /* slate-300 */
}

/* Radio button selections */
input[type="radio"]:checked + span {
    color: #34d399;
    font-weight: 700;
}

@media (max-width: 768px) {
    .next-btn-adv, .prev-btn-adv {
        width: 100%;
        margin-bottom: 10px;
    }
}
`} />

<ArticleScript src="/scripts/quizzes/de-la-montagne-a-la-mer-le-recit-grandiose-dune-av-fr.js" />

