/* ==========================================================
   FUTURYCRAFT - REDESIGN CRIADORES (YouTuber / Streamer)
   Landing premium antes do formulário de candidatura.
   Carregado DEPOIS de criadores.css e home-redesign.css.
   Reutiliza o design system da Home/Staff (sec-badge, cards,
   steps-timeline, cta-box, btn-staff) e os tokens do upgrade.css.
   Não altera formulário, lógica, validações, API ou banco.
========================================================== */

/* ---------- CONTAINER (landing mais amplo, formulário compacto) ---------- */
.container.landing-container{
    width:min(95%,1080px);
    --max-width:1080px;
}

/* ---------- PARTÍCULAS (padrão da Staff) ---------- */
.particles{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
}

.particle{
    position:absolute;
    width:4px;
    height:4px;
    background:#00d9ff;
    border-radius:50%;
    opacity:.5;
    animation:particleMove 12s infinite linear;
}

.particle:nth-child(1){ left:10%; top:90%; animation-delay:0s; }
.particle:nth-child(2){ left:35%; top:80%; animation-delay:3s; }
.particle:nth-child(3){ left:60%; top:95%; animation-delay:6s; }
.particle:nth-child(4){ left:80%; top:75%; animation-delay:2s; }
.particle:nth-child(5){ left:90%; top:90%; animation-delay:5s; }

@keyframes particleMove{
    0%{ transform:translateY(0); opacity:0; }
    30%{ opacity:1; }
    100%{ transform:translateY(-120vh); opacity:0; }
}

.container.landing-container .progress-card,
.container.landing-container .form-card{
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
}

/* ---------- HERO ---------- */
.creators-hero{
    position:relative;
    padding:54px 0 10px;
    text-align:center;
}

.creators-hero > .hero-glow,
.creators-hero > .hero-grid{
    inset:auto;
    left:0;
    right:0;
    top:-40px;
    bottom:-40px;
}

.creators-hero > *{
    position:relative;
    z-index:1;
}

.creators-hero .hero-logo{
    display:block;
    margin:0 auto 12px;
    width:88px;
    filter:drop-shadow(0 0 26px rgba(0,217,255,.45));
}

.creators-hero .hero-title{
    font-size:clamp(1.9rem,5.4vw,3.2rem);
    margin-top:14px;
}

.creators-hero .hero-sub{
    margin-top:20px;
}

.creators-note{
    margin:18px auto 0;
    max-width:640px;
    font-size:clamp(.92rem,2vw,1.02rem);
    line-height:1.7;
    color:var(--fc-text-2);
}

.creators-prog{
    margin:30px auto 0;
    max-width:660px;
    padding:20px 24px;
    border-radius:18px;
    background:linear-gradient(160deg,rgba(19,29,50,.6),rgba(9,14,27,.66));
    border:1px solid var(--fc-border);
    border-left:3px solid rgba(76,194,255,.55);
    box-shadow:0 20px 44px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
    text-align:left;
    font-size:.92rem;
    line-height:1.7;
    color:var(--fc-text-2);
}

/* ---------- COMO FUNCIONA (3 etapas) ---------- */
.steps-timeline.steps-3{
    grid-template-columns:1fr 44px 1fr 44px 1fr;
}

/* Mobile: timeline vertical de 1 coluna (igual ao .steps-timeline base).
   Especificidade .steps-timeline.steps-3 (0-2-0) vence a coluna tripla
   mesmo dentro do @media — precisa regra própria com mesma força. */
@media (max-width:900px){
    .steps-timeline.steps-3{
        grid-template-columns:1fr;
        row-gap:2px;
        max-width:460px;
        margin-inline:auto;
    }

    .steps-timeline.steps-3 .step-link{
        height:46px;
        padding:0;
    }
}

/* ---------- CTA PRÉ-FORMULÁRIO ---------- */
.cta-note{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:22px;
    font-size:.78rem;
    letter-spacing:.4px;
    color:var(--fc-text-2);
    opacity:.92;
}

.cta-note i{
    color:var(--fc-primary);
}

/* ---------- FORMULÁRIO (ancoragem do CTA) ---------- */
#candidatura{
    scroll-margin-top:110px;
}

.aviso-pre-form{
    margin-top:1.6rem;
}

/* ---------- WIZARD DE PÁGINA (Apresentação → Formulário) ---------- */
.etapa-apresentacao{
    display:none;
}

.etapa-apresentacao.ativa{
    display:block;
}

.area-candidatura{
    display:none;
}

.area-candidatura.ativa{
    display:block;
}

@media (max-width:760px){
    .wizard-steps{
        flex-wrap:wrap;
        row-gap:.9rem;
    }

    .wizard-step{
        flex:1 1 30%;
    }
}

/* ---------- TELAS ESTREITAS (<400px) ---------- */
@media (max-width:400px){
    .creators-hero .hero-title{
        font-size:clamp(1.5rem,8.5vw,1.85rem);
    }

    .cta-box .btn-staff{
        width:100%;
        max-width:420px;
        justify-content:center;
    }
}

/* Texto longo/não-quebrável nunca deve estourar a tela */
.creators-prog,
.creators-note,
.cta-sub,
.step-node p,
.reason-card p{
    overflow-wrap:break-word;
}