/* =====================================================================
   LANDING (raiz) — 2026-10-16
   ---------------------------------------------------------------------
   Carregado SO pelo index.php, depois do tema.css. Mexe apenas no que
   vem DEPOIS do hero: o hero (coins + "SUBWAY PAY" + PLAY NOW) fica como
   esta. Objetivo: a raiz deixar de ser "um cartao estreito no meio do
   azul" em telas largas e ganhar as secoes "como funciona" e vantagens.
   Celular: tudo empilhado em uma coluna, no mesmo estilo adesivo.
   Tokens (--preto, --borda, --offset...) vem do tema.css.
   ===================================================================== */

.pg-inicio { --ld-max: 1040px; }

/* ---------------------------------------------------- titulo de secao */
.ld-h2 {
    color: #fff; text-align: center; text-transform: uppercase;
    font-size: 30px; line-height: 1; letter-spacing: .02em;
    text-shadow: -3px 3px 0 var(--preto);
    margin: 0 0 20px !important;
    font-family: 'right grotesk', var(--fonte-texto) !important;
}
.ld-sub {
    color: #eaf7ff; text-align: center; font-size: 15px; line-height: 1.5;
    margin: -8px auto 22px; max-width: 520px;
    font-family: var(--fonte-texto);
}
.ld-wrap { width: 100%; max-width: var(--ld-max); margin: 0 auto; }

/* ---------------------------------------------------- boas-vindas */
.pg-inicio .mint-section { padding: 10px 16px 6px !important; }
.pg-inicio .mint-section .minting-container { margin-top: 44px !important; }
.pg-inicio .mint-section h2 { font-size: 30px !important; line-height: 1; }
.pg-inicio .mint-section .paragraph { margin: 10px 0 18px !important; }

/* ---------------------------------------------------- como funciona */
.ld-steps { padding: 34px 16px 6px; background: var(--ciano); }
.ld-grid3 { display: grid; grid-template-columns: 1fr; gap: 14px; }
.ld-step {
    position: relative;
    background: #fff; border: var(--borda); border-radius: var(--raio);
    box-shadow: var(--offset-sm);
    padding: 20px 18px 18px 18px; text-align: left;
    font-family: var(--fonte-texto);
}
.ld-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px;
    background: linear-gradient(180deg,#ffd454 0%,var(--amarelo) 100%);
    border: var(--borda); box-shadow: -3px 3px 0 0 var(--preto);
    font-weight: 800; font-size: 18px; color: var(--preto);
    margin-bottom: 12px;
}
.ld-step h3 {
    margin: 0 0 6px !important; font-size: 18px; line-height: 1.15; color: var(--preto);
    text-transform: uppercase; font-family: 'right grotesk', var(--fonte-texto) !important;
}
.ld-step p { margin: 0 !important; font-size: 14px; line-height: 1.55; color: #3b4652; }
.ld-cta { display: block; width: 100%; max-width: 320px; margin: 22px auto 0 !important; text-align: center; font-size: 20px !important; }

/* ---------------------------------------------------- vantagens */
.ld-perks { padding: 26px 16px 10px; background: var(--ciano); }
.ld-perk {
    display: flex; flex-direction: column; gap: 4px;
    background: #fff; border: var(--borda); border-radius: var(--raio-sm);
    box-shadow: var(--offset-sm);
    padding: 14px 16px; text-align: left; font-family: var(--fonte-texto);
}
.ld-perk b { font-size: 15px; color: var(--preto); }
.ld-perk span { font-size: 13px; color: #55657a; line-height: 1.45; }

/* ---------------------------------------------------- faq / rodape */
.pg-inicio .faq-section { padding-top: 36px !important; }

/* ===================================================================== */
/* DESKTOP (>= 900px): grade em colunas, cartao de boas-vindas em 2 colunas */
/* ===================================================================== */
@media (min-width: 900px) {
    .ld-h2 { font-size: 40px; margin-bottom: 26px !important; }
    .ld-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

    /* boas-vindas: texto a esquerda, imagem a direita */
    .pg-inicio .mint-section { padding: 20px 24px 10px !important; }
    .pg-inicio .mint-section .minting-container {
        max-width: var(--ld-max) !important;
        display: grid; grid-template-columns: 1.15fr .85fr; column-gap: 44px; align-items: center;
        text-align: left; padding: 48px 52px !important; margin-top: 36px !important;
    }
    .pg-inicio .mint-section .minting-container img.mint-card-image {
        grid-column: 2; grid-row: 1 / span 4; justify-self: center; align-self: center;
        width: 280px !important; height: 280px !important; object-fit: contain;
        border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
        background: transparent !important; margin: 0 !important;
        filter: drop-shadow(-8px 10px 0 rgba(31,32,36,.18));
    }
    .pg-inicio .mint-section h2 { grid-column: 1; font-size: 46px !important; margin: 0 0 10px !important; }
    .pg-inicio .mint-section .paragraph { grid-column: 1; font-size: 16px !important; line-height: 1.6 !important; margin: 0 0 22px !important; }
    .pg-inicio .mint-section .primary-button { grid-column: 1; justify-self: start; font-size: 20px !important; padding: 15px 34px !important; }
    .pg-inicio .mint-section .price { grid-column: 1; margin-top: 12px; }

    /* como funciona / vantagens */
    .ld-steps { padding: 56px 24px 10px; }
    .ld-step { padding: 26px 24px 24px; }
    .ld-step h3 { font-size: 20px; }
    .ld-step p { font-size: 15px; }
    .ld-cta { margin-top: 32px !important; }
    .ld-perks { padding: 36px 24px 10px; }
    .ld-perk { padding: 18px 20px; }
    .ld-perk b { font-size: 16px; }

    /* FAQ em 2 colunas */
    .pg-inicio .faq-section { padding: 50px 24px 50px !important; }
    .pg-inicio .faq-container {
        max-width: var(--ld-max) !important;
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start;
    }
    .pg-inicio .faq-container > h2 { grid-column: 1 / -1; font-size: 40px; margin-bottom: 8px !important; }
    .pg-inicio .question, .pg-inicio .question.first, .pg-inicio .question.last { margin: 0 !important; padding: 20px 20px 18px !important; }
    .pg-inicio .question h3 { font-size: 18px; }
    .pg-inicio .question > div, .pg-inicio .question > p { font-size: 14.5px !important; }

    /* rodape um pouco mais largo */
    .pg-inicio .footer-section .follow-test { max-width: 640px; font-size: 12px !important; }
}

@media (min-width: 1200px) {
    .pg-inicio .mint-section .minting-container img.mint-card-image { width: 320px !important; height: 320px !important; }
}