/* Shared body blocks for inner pages (hero lives in site-shell.css) */

.page-section {
    padding-block: clamp(76px, 9vw, 118px);
}

.page-section--surface {
    background: var(--surface);
    border-block: 1px solid var(--line);
}

.page-heading {
    max-width: 720px;
    margin-bottom: 42px;
}

.page-heading h2 {
    max-width: 680px;
}

.page-heading > p,
.page-heading--split > p {
    margin: 0;
    color: var(--muted);
}

.page-heading--split {
    max-width: none;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
}

.page-heading--split > p {
    max-width: 420px;
    padding-bottom: 8px;
}

/* Category catalog */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.catalog-card {
    --catalog-accent: #8d65ff;
    position: relative;
    display: block;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    isolation: isolate;
    transition: transform 200ms ease, border-color 200ms ease;
}

.catalog-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg, rgba(7, 9, 13, 0.96) 0%, rgba(7, 9, 13, 0.62) 38%, transparent 72%);
    pointer-events: none;
}

.catalog-card:hover {
    border-color: color-mix(in srgb, var(--catalog-accent) 55%, white 8%);
    transform: translateY(-5px);
}

.catalog-card__image {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    transition: filter 220ms ease;
}

.catalog-card:hover .catalog-card__image {
    filter: saturate(1.08) brightness(1.05);
}

.catalog-card--gold { --catalog-accent: #ffca58; }
.catalog-card--green { --catalog-accent: #37e6a1; }
.catalog-card--blue { --catalog-accent: #55a5ff; }

.catalog-card__number {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--catalog-accent);
    background: rgba(9, 11, 16, 0.72);
    border: 1px solid color-mix(in srgb, var(--catalog-accent) 35%, transparent);
    border-radius: 13px;
    font-size: 0.7rem;
    font-weight: 900;
    backdrop-filter: blur(10px);
}

.catalog-card__copy {
    position: absolute;
    right: 52px;
    bottom: 16px;
    left: 18px;
    z-index: 2;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
}

.catalog-card h3 {
    margin-bottom: 7px;
    font-size: 1.25rem;
}

.catalog-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
}

.catalog-card b {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.05rem;
    transition: color 180ms ease, transform 180ms ease;
}

.catalog-card:hover b {
    color: #fff;
    transform: translate(3px, -3px);
}

/* Game picks */
.pick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.pick-card {
    overflow: hidden;
    background: #0c0f15;
    border: 1px solid var(--line);
    border-radius: 22px;
    transition: transform 200ms ease, border-color 200ms ease;
}

.pick-card:hover {
    border-color: rgba(255, 202, 88, 0.3);
    transform: translateY(-5px);
}

.pick-card__image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--surface-2);
}

#conteudo .pick-card__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.pick-card__image span {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1;
    padding: 5px 8px;
    color: #fff;
    background: rgba(9, 11, 16, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 7px;
    backdrop-filter: blur(10px);
    font-size: 0.62rem;
    font-weight: 850;
}

.pick-card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
}

.pick-card__body small {
    color: var(--gold);
    font-size: 0.65rem;
    font-weight: 850;
    text-transform: uppercase;
}

.pick-card__body h3 {
    margin: 4px 0 0;
    font-size: 1.05rem;
}

.pick-card__body a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    padding-left: 2px;
    color: #171109;
    background: var(--gold);
    border-radius: 50%;
    font-size: 0.7rem;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.pick-card__body a:hover,
.pick-card__body a:focus-visible {
    box-shadow: 0 10px 26px rgba(255, 202, 88, 0.25);
    transform: scale(1.06);
}

/* Guide steps */
.guide-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr);
    align-items: start;
    gap: clamp(50px, 8vw, 110px);
}

.guide-layout__intro {
    position: sticky;
    top: 130px;
    margin-bottom: 0;
}

.step-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.step-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
}

.step-list li > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: var(--gold);
    background: var(--gold-soft);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 900;
}

.step-list h3 {
    margin: 2px 0 7px;
    font-size: 1.04rem;
}

.step-list p {
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
}

/* Bottom CTA */
.page-cta {
    padding: 0 0 clamp(82px, 10vw, 132px);
}

.page-cta__box {
    min-height: 310px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    padding: clamp(36px, 6vw, 72px);
    background:
        radial-gradient(circle at 84% 22%, rgba(255, 202, 88, 0.2), transparent 25rem),
        linear-gradient(135deg, #1a1230, #10141d 55%, #111820);
    border: 1px solid rgba(255, 202, 88, 0.18);
    border-radius: 28px;
    box-shadow: var(--shadow);
}

.page-cta__box > div {
    max-width: 720px;
}

.page-cta h2 {
    margin-bottom: 14px;
}

.page-cta p {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
}

.page-cta .button {
    flex-shrink: 0;
}

@media (max-width: 980px) {
    .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pick-card:last-child {
        grid-column: 1 / -1;
    }

    .guide-layout {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .guide-layout__intro {
        position: static;
    }

    .page-cta__box {
        align-items: flex-start;
        flex-direction: column;
        gap: 28px;
    }
}

@media (max-width: 680px) {
    .page-section {
        padding-block: 74px;
    }

    .page-heading,
    .page-heading--split {
        margin-bottom: 30px;
    }

    .page-heading--split {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .catalog-grid,
    .pick-grid {
        grid-template-columns: 1fr;
    }

    .catalog-card {
        border-radius: 18px;
    }

    .catalog-card__number {
        top: 10px;
        left: 10px;
        width: 38px;
        height: 38px;
        border-radius: 11px;
        font-size: 0.64rem;
    }

    .catalog-card__copy {
        right: 40px;
        bottom: 12px;
        left: 12px;
    }

    .catalog-card h3 {
        font-size: 0.95rem;
        line-height: 1.18;
    }

    .catalog-card p {
        font-size: 0.72rem;
        line-height: 1.25;
    }

    .catalog-card b {
        right: 12px;
        bottom: 12px;
        font-size: 0.9rem;
    }

    .pick-card:last-child {
        grid-column: auto;
    }

    .pick-card__image {
        aspect-ratio: 1 / 1;
    }

    .guide-layout {
        min-width: 0;
    }

    .step-list li {
        gap: 14px;
        padding: 20px;
    }

    .page-cta {
        padding-bottom: 78px;
    }

    .page-cta__box {
        min-height: 0;
        padding: 34px 24px;
        border-radius: 22px;
    }

    .page-cta .button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .catalog-card,
    .pick-card,
    .pick-card__body a {
        transition: none;
    }
}

/* ── Missões page ── */

.xp-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 28px;
    background: linear-gradient(135deg, rgba(255, 202, 88, 0.1), rgba(136, 92, 255, 0.08));
    border: 1px solid rgba(255, 202, 88, 0.2);
    border-radius: 18px;
}

.xp-strip__label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.xp-strip strong {
    display: block;
    margin-top: 4px;
    font-size: 1.6rem;
    line-height: 1.1;
}

.xp-strip__meta {
    display: flex;
    gap: 28px;
}

.xp-strip__meta div {
    text-align: right;
}

.xp-strip__meta span {
    display: block;
    color: var(--muted-2);
    font-size: 0.68rem;
}

.xp-strip__meta b {
    font-size: 0.92rem;
}

.task-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 16px;
    margin-top: 28px;
}

.task-main {
    padding: 30px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
}

.task-main__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.task-badge {
    padding: 5px 10px;
    color: var(--gold);
    background: var(--gold-soft);
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.task-reward {
    color: var(--green);
    font-size: 0.88rem;
    font-weight: 850;
}

.task-main h3 {
    margin-bottom: 10px;
    font-size: 1.35rem;
}

.task-main > p {
    margin-bottom: 22px;
    color: var(--muted);
    font-size: 0.88rem;
}

.task-progress {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 0.78rem;
}

.task-progress span {
    color: var(--muted);
}

.task-progress strong {
    color: #fff;
}

.task-bar {
    height: 8px;
    margin-bottom: 24px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}

.task-bar span {
    display: block;
    width: var(--fill, 0%);
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-2));
    border-radius: inherit;
}

.task-stack {
    display: grid;
    gap: 10px;
}

.task-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.task-item__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--gold);
    background: var(--gold-soft);
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 900;
}

.task-item__icon--done {
    color: var(--green);
    background: rgba(55, 230, 161, 0.12);
}

.task-item small {
    display: block;
    color: var(--muted-2);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
}

.task-item h3 {
    margin: 3px 0 0;
    font-size: 0.95rem;
}

.task-item p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 0.74rem;
}

.task-item > strong {
    color: var(--gold);
    font-size: 0.82rem;
    white-space: nowrap;
}

.task-item > strong.is-done {
    color: var(--green);
}

.week-rewards {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

.week-reward {
    padding: 18px 10px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: border-color 180ms ease;
}

.week-reward.is-today {
    border-color: rgba(255, 202, 88, 0.45);
    background: rgba(255, 202, 88, 0.06);
}

.week-reward span {
    display: block;
    color: var(--muted-2);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
}

.week-reward strong {
    display: block;
    margin: 6px 0 4px;
    font-size: 1.1rem;
}

.week-reward b {
    color: var(--gold);
    font-size: 0.68rem;
    font-weight: 850;
}

@media (max-width: 980px) {
    .task-layout {
        grid-template-columns: 1fr;
    }

    .week-rewards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .week-reward:nth-child(n + 5) {
        grid-column: span 1;
    }
}

@media (max-width: 680px) {
    .xp-strip {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    .xp-strip__meta {
        width: 100%;
        justify-content: space-between;
    }

    .week-rewards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .task-item {
        grid-template-columns: auto 1fr;
    }

    .task-item > strong {
        grid-column: 2;
        margin-top: -8px;
        justify-self: start;
    }
}

/* ── Ofertas page ── */

.deal-spotlight {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 28px 32px;
    background: linear-gradient(135deg, rgba(255, 202, 88, 0.14), rgba(136, 92, 255, 0.1));
    border: 1px solid rgba(255, 202, 88, 0.28);
    border-radius: 22px;
}

.deal-spotlight__icon {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    color: #171109;
    background: var(--gold);
    border-radius: 18px;
    font-size: 1.5rem;
    font-weight: 900;
}

.deal-spotlight h3 {
    margin-bottom: 6px;
    font-size: 1.3rem;
}

.deal-spotlight p {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.deal-spotlight .button {
    flex-shrink: 0;
}

.deal-calendar {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
}

.deal-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
    border-bottom: 1px solid var(--line);
}

.deal-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 8px;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-right: 1px solid var(--line);
    font-size: 0.68rem;
    font-weight: 750;
    cursor: default;
}

.deal-day:last-child {
    border-right: 0;
}

.deal-day strong {
    color: #fff;
    font-size: 1.05rem;
}

.deal-day small {
    color: var(--gold);
    font-size: 0.58rem;
    font-weight: 850;
    text-transform: uppercase;
}

.deal-day.is-active {
    color: #fff;
    background: rgba(255, 202, 88, 0.08);
}

.deal-panel {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
    padding: 32px;
}

.deal-panel__tag {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--gold);
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.deal-panel h3 {
    margin-bottom: 8px;
    font-size: 1.25rem;
}

.deal-panel p {
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
}

.deal-panel__badge {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    color: var(--gold);
    background: var(--gold-soft);
    border: 1px solid rgba(255, 202, 88, 0.25);
    border-radius: 16px;
    font-size: 1.3rem;
    font-weight: 900;
}

.offer-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.offer-tile {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    transition: border-color 180ms ease;
}

.offer-tile:hover {
    border-color: rgba(255, 202, 88, 0.3);
}

.offer-tile__mark {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--gold);
    background: var(--gold-soft);
    border-radius: 11px;
    font-size: 0.72rem;
    font-weight: 900;
}

.offer-tile small {
    display: block;
    color: var(--muted-2);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
}

.offer-tile h3 {
    margin: 4px 0 6px;
    font-size: 1rem;
}

.offer-tile p {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
}

.note-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.note-list li {
    padding: 18px 22px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--line);
    border-radius: 14px;
    font-size: 0.82rem;
}

.note-list strong {
    color: #e8ebf2;
}

@media (max-width: 980px) {
    .deal-spotlight,
    .deal-panel {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .deal-spotlight__icon,
    .deal-panel__badge {
        justify-self: center;
    }

    .deal-spotlight .button,
    .deal-panel .button {
        width: 100%;
    }

    .deal-days {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .deal-day:nth-child(n + 5) {
        border-top: 1px solid var(--line);
    }

    .offer-tiles {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .deal-spotlight {
        padding: 22px;
    }

    .deal-days {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .deal-panel {
        padding: 24px 20px;
    }
}

/* ── Clube page ── */

.club-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
}

.club-status__level {
    display: flex;
    align-items: center;
    gap: 16px;
}

.club-medal {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 1.1rem;
    font-weight: 900;
}

.club-medal--bronze { color: #cd7f32; background: rgba(205, 127, 50, 0.12); border: 1px solid rgba(205, 127, 50, 0.3); }
.club-medal--gold { color: var(--gold); background: var(--gold-soft); border: 1px solid rgba(255, 202, 88, 0.35); }
.club-medal--platinum { color: #c8d0da; background: rgba(200, 208, 218, 0.1); border: 1px solid rgba(200, 208, 218, 0.25); }
.club-medal--diamond { color: #7ee8ff; background: rgba(126, 232, 255, 0.1); border: 1px solid rgba(126, 232, 255, 0.25); }

.club-status small {
    display: block;
    color: var(--muted-2);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
}

.club-status h3 {
    margin: 3px 0 0;
    font-size: 1.15rem;
}

.club-status__xp {
    text-align: right;
}

.club-status__xp span {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
}

.club-status__xp strong {
    font-size: 1.1rem;
}

.club-level-bar {
    margin-top: 14px;
    padding: 20px 24px;
    background: rgba(255, 202, 88, 0.05);
    border: 1px solid rgba(255, 202, 88, 0.15);
    border-radius: 16px;
}

.club-level-bar__top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 0.78rem;
}

.club-level-bar__top span {
    color: var(--muted);
}

.club-level-bar__track {
    height: 10px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}

.club-level-bar__track span {
    display: block;
    width: var(--fill, 0%);
    height: 100%;
    background: linear-gradient(90deg, #ffdd82, var(--gold));
    border-radius: inherit;
}

.club-level-bar > p {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 0.8rem;
}

.club-ladder {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.club-tier {
    padding: 24px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    text-align: center;
}

.club-tier--current {
    border-color: rgba(255, 202, 88, 0.4);
    background: rgba(255, 202, 88, 0.05);
}

.club-tier__tag {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 8px;
    color: var(--muted-2);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    font-size: 0.58rem;
    font-weight: 850;
    text-transform: uppercase;
}

.club-tier--current .club-tier__tag {
    color: var(--gold);
    background: var(--gold-soft);
}

.club-tier .club-medal {
    margin: 0 auto 14px;
}

.club-tier h3 {
    margin-bottom: 4px;
    font-size: 1.05rem;
}

.club-tier > p {
    margin: 0 0 16px;
    color: var(--muted-2);
    font-size: 0.72rem;
}

.club-tier ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.club-tier li {
    padding: 6px 0;
    color: var(--muted);
    border-top: 1px solid var(--line);
    font-size: 0.74rem;
}

.club-tier li::before {
    content: "✓ ";
    color: var(--gold);
}

.club-perks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.club-perk {
    padding: 26px 22px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
}

.club-perk__icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    color: var(--gold);
    background: var(--gold-soft);
    border-radius: 13px;
    font-size: 1.1rem;
}

.club-perk h3 {
    margin-bottom: 6px;
    font-size: 0.95rem;
}

.club-perk p {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
}

.club-path {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.club-path li {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 20px;
    padding-bottom: 28px;
    position: relative;
}

.club-path li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 48px;
    left: 23px;
    width: 2px;
    height: calc(100% - 48px);
    background: var(--line);
}

.club-path li > span {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: #171109;
    background: var(--gold);
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 900;
    z-index: 1;
}

.club-path h3 {
    margin: 4px 0 6px;
    font-size: 1rem;
}

.club-path p {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
}

@media (max-width: 980px) {
    .club-ladder {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .club-perks {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .club-status {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    .club-status__xp {
        text-align: left;
    }

    .club-ladder {
        grid-template-columns: 1fr;
    }

    .club-path li {
        gap: 14px;
        padding-bottom: 22px;
    }
}

/* ── Ajuda page ── */

.help-topics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.help-topic {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    transition: border-color 180ms ease, transform 180ms ease;
}

.help-topic:hover {
    border-color: rgba(255, 202, 88, 0.35);
    transform: translateY(-3px);
}

.help-topic__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--gold);
    background: var(--gold-soft);
    border-radius: 10px;
    font-size: 0.85rem;
}

.help-topic h3 {
    margin: 0;
    font-size: 0.92rem;
}

.help-topic p {
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
}

.help-faq {
    display: grid;
    gap: 8px;
}

.help-faq details {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.help-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.help-faq summary::-webkit-details-marker {
    display: none;
}

.help-faq summary::after {
    content: "+";
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: var(--gold);
    background: var(--gold-soft);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 400;
    transition: transform 180ms ease;
}

.help-faq details[open] summary::after {
    content: "−";
}

.help-faq details p {
    margin: 0;
    padding: 0 22px 20px;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.55;
}

.help-channels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.help-channel {
    padding: 24px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
}

.help-channel__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    color: var(--green);
    background: rgba(55, 230, 161, 0.1);
    border-radius: 12px;
    font-size: 1rem;
}

.help-channel h3 {
    margin-bottom: 6px;
    font-size: 0.95rem;
}

.help-channel p {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 0.78rem;
}

.help-channel a {
    color: var(--gold);
    font-size: 0.8rem;
    font-weight: 800;
}

.help-responsible {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 28px 32px;
    background: linear-gradient(135deg, rgba(55, 230, 161, 0.08), rgba(255, 202, 88, 0.06));
    border: 1px solid rgba(55, 230, 161, 0.2);
    border-radius: 20px;
}

.help-responsible__badge {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(55, 230, 161, 0.15);
    border: 1px solid rgba(55, 230, 161, 0.3);
    border-radius: 14px;
    font-size: 0.85rem;
    font-weight: 900;
}

.help-responsible h3 {
    margin-bottom: 6px;
    font-size: 1.1rem;
}

.help-responsible p {
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
}

@media (max-width: 980px) {
    .help-topics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .help-channels {
        grid-template-columns: 1fr;
    }

    .help-responsible {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .help-responsible__badge {
        justify-self: center;
    }

    .help-responsible .button {
        width: 100%;
    }
}

@media (max-width: 680px) {
    .help-topics {
        grid-template-columns: 1fr;
    }

    .help-faq summary {
        padding: 16px 18px;
        font-size: 0.85rem;
    }

    .help-faq details p {
        padding: 0 18px 16px;
        font-size: 0.8rem;
    }

    .help-responsible {
        padding: 22px;
    }
}

/* ── Slots page ── */

.slot-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.slot-tag {
    padding: 8px 16px;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 750;
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.slot-tag:hover,
.slot-tag.is-active {
    color: #fff;
    background: var(--gold-soft);
    border-color: rgba(255, 202, 88, 0.4);
}

.slot-showcase {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.slot-card {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    transition: border-color 180ms ease, transform 180ms ease;
}

.slot-card:hover {
    border-color: rgba(136, 92, 255, 0.35);
    transform: translateY(-3px);
}

.slot-card__thumb {
    width: 120px;
    height: 120px;
    overflow: hidden;
    background: var(--surface-2);
    border-radius: 14px;
}

#conteudo .slot-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.slot-card__body small {
    display: block;
    color: var(--gold);
    font-size: 0.62rem;
    font-weight: 850;
    text-transform: uppercase;
}

.slot-card__body h3 {
    margin: 4px 0 6px;
    font-size: 1rem;
}

.slot-card__body p {
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
}

.slot-card__rtp {
    padding: 5px 9px;
    color: var(--green);
    background: rgba(55, 230, 161, 0.1);
    border-radius: 7px;
    font-size: 0.68rem;
    font-weight: 850;
    white-space: nowrap;
}

.slot-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.slot-stat {
    padding: 22px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.slot-stat strong {
    display: block;
    margin-bottom: 4px;
    font-size: 1.4rem;
    line-height: 1.1;
}

.slot-stat span {
    color: var(--muted);
    font-size: 0.74rem;
}

.slot-providers {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.slot-provider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 700;
}

.slot-provider b {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #171109;
    background: var(--gold);
    border-radius: 8px;
    font-size: 0.65rem;
}

@media (max-width: 980px) {
    .slot-showcase {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .slot-card {
        grid-template-columns: 90px 1fr;
    }

    .slot-card__thumb {
        width: 90px;
        height: 90px;
    }

    .slot-card__rtp {
        grid-column: 2;
        justify-self: start;
        margin-top: -4px;
    }

    .slot-stats {
        grid-template-columns: 1fr;
    }
}

/* ── Casino ao vivo page ── */

.live-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    background: rgba(255, 75, 105, 0.08);
    border: 1px solid rgba(255, 75, 105, 0.25);
    border-radius: 14px;
}

.live-strip__dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    background: #ff4b69;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 75, 105, 0.2);
    animation: live-pulse 1.8s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.live-strip p {
    margin: 0;
    font-size: 0.84rem;
}

.live-strip strong {
    color: #ff6b85;
}

.live-tables {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.live-table {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    transition: border-color 180ms ease, transform 180ms ease;
}

.live-table:hover {
    border-color: rgba(255, 75, 105, 0.35);
    transform: translateY(-4px);
}

.live-table__img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--surface-2);
}

#conteudo .live-table__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.live-table__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    color: #fff;
    background: rgba(255, 75, 105, 0.9);
    border-radius: 7px;
    font-size: 0.6rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.live-table__badge::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
}

.live-table__body {
    padding: 16px 18px;
}

.live-table__body small {
    color: var(--muted-2);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
}

.live-table__body h3 {
    margin: 4px 0 6px;
    font-size: 1rem;
}

.live-table__body p {
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
}

.live-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
}

.live-feature {
    padding: 24px 20px;
    text-align: center;
    border-right: 1px solid var(--line);
}

.live-feature:last-child {
    border-right: 0;
}

.live-feature__num {
    display: block;
    margin-bottom: 6px;
    color: #ff6b85;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
}

.live-feature h3 {
    margin-bottom: 4px;
    font-size: 0.88rem;
}

.live-feature p {
    margin: 0;
    color: var(--muted);
    font-size: 0.72rem;
}

.live-hours {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.live-hours li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 0.84rem;
}

.live-hours span {
    color: var(--muted);
}

.live-hours strong {
    color: var(--gold);
    font-size: 0.78rem;
}

@media (max-width: 980px) {
    .live-tables {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .live-features {
        grid-template-columns: 1fr;
    }

    .live-feature {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .live-feature:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 680px) {
    .live-tables {
        grid-template-columns: 1fr;
    }

    .live-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .live-strip__dot {
        animation: none;
    }
}

/* ── Esportes page ── */

.sport-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sport-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.sport-pill:hover,
.sport-pill.is-active {
    color: var(--text);
    background: rgba(55, 230, 161, 0.08);
    border-color: rgba(55, 230, 161, 0.35);
}

.sport-pill__icon {
    font-size: 0.9rem;
    line-height: 1;
}

.match-board {
    display: grid;
    gap: 10px;
}

.match-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: border-color 160ms ease;
}

.match-row:hover {
    border-color: rgba(55, 230, 161, 0.3);
}

.match-row__info {
    min-width: 0;
}

.match-row__league {
    display: block;
    margin-bottom: 6px;
    color: var(--muted-2);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.match-row__teams {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    font-size: 0.9rem;
    font-weight: 700;
}

.match-row__teams span {
    color: var(--muted);
    font-weight: 500;
    font-size: 0.72rem;
}

.match-row__time {
    color: var(--muted);
    font-size: 0.72rem;
}

.match-row__time.is-live {
    color: var(--green);
    font-weight: 700;
}

.match-row__odds {
    display: flex;
    gap: 6px;
}

.odd-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 8px 10px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    transition: border-color 160ms ease, background 160ms ease;
}

.odd-btn:hover {
    background: rgba(55, 230, 161, 0.1);
    border-color: rgba(55, 230, 161, 0.35);
}

.odd-btn strong {
    font-size: 0.82rem;
    color: var(--green);
}

.bet-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.bet-card {
    padding: 22px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.bet-card__icon {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 1.4rem;
    line-height: 1;
}

.bet-card h3 {
    margin-bottom: 6px;
    font-size: 0.92rem;
}

.bet-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
}

.league-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.league-tag {
    padding: 8px 14px;
    color: var(--muted);
    background: transparent;
    border: 1px dashed var(--line);
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    transition: border-color 160ms ease, color 160ms ease;
}

.league-tag:hover {
    color: var(--gold);
    border-color: rgba(212, 175, 55, 0.4);
    border-style: solid;
}

@media (max-width: 680px) {
    .match-row {
        grid-template-columns: 1fr;
    }

    .match-row__odds {
        justify-content: flex-start;
    }

    .bet-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Crash page ── */

.crash-meter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.crash-meter__label {
    width: 100%;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.crash-chip {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 850;
}

.crash-chip--low {
    color: #ff6b85;
    background: rgba(255, 75, 105, 0.12);
}

.crash-chip--mid {
    color: var(--gold);
    background: rgba(212, 175, 55, 0.12);
}

.crash-chip--high {
    color: var(--green);
    background: rgba(55, 230, 161, 0.12);
}

.crash-games {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.crash-game {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    transition: border-color 160ms ease, transform 160ms ease;
}

.crash-game:hover {
    border-color: rgba(100, 140, 255, 0.35);
    transform: translateY(-3px);
}

.crash-game__img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--surface-2);
}

#conteudo .crash-game__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.crash-game__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 18px;
}

.crash-game__body small {
    color: var(--muted-2);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
}

.crash-game__body h3 {
    margin: 4px 0 6px;
    font-size: 1rem;
}

.crash-game__body p {
    flex: 1;
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 0.74rem;
}

.crash-game__meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 0.68rem;
    font-weight: 700;
}

.crash-game__meta span {
    color: var(--muted);
}

.crash-game__meta strong {
    color: var(--green);
}

.crash-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    counter-reset: crash-step;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
}

.crash-step {
    position: relative;
    padding: 24px 20px;
    text-align: center;
    background: var(--surface);
    border-right: 1px solid var(--line);
}

.crash-step:last-child {
    border-right: 0;
}

.crash-step::before {
    counter-increment: crash-step;
    content: counter(crash-step);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 0 auto 10px;
    color: #171109;
    background: var(--gold);
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 900;
}

.crash-step h3 {
    margin-bottom: 4px;
    font-size: 0.88rem;
}

.crash-step p {
    margin: 0;
    color: var(--muted);
    font-size: 0.72rem;
}

.crash-feed {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crash-feed li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 0.8rem;
}

.crash-feed__time {
    color: var(--muted-2);
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

.crash-feed__game {
    color: var(--muted);
    font-size: 0.74rem;
}

.crash-feed__mult {
    font-weight: 900;
    white-space: nowrap;
}

.crash-feed__mult.is-low { color: #ff6b85; }
.crash-feed__mult.is-mid { color: var(--gold); }
.crash-feed__mult.is-high { color: var(--green); }

@media (max-width: 980px) {
    .crash-games {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crash-steps {
        grid-template-columns: 1fr;
    }

    .crash-step {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .crash-step:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 680px) {
    .crash-games {
        grid-template-columns: 1fr;
    }

    .crash-feed li {
        grid-template-columns: 1fr auto;
    }

    .crash-feed__game {
        grid-column: 1 / -1;
    }
}

/* ── Benefícios page ── */

.benefit-spotlight {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 30px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(55, 230, 161, 0.06));
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 18px;
}

.benefit-spotlight__label {
    display: block;
    margin-bottom: 4px;
    color: var(--gold);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.benefit-spotlight h2 {
    margin: 0 0 6px;
    font-size: 1.5rem;
}

.benefit-spotlight p {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    max-width: 420px;
}

.benefit-spotlight__value {
    text-align: right;
}

.benefit-spotlight__value strong {
    display: block;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--gold);
}

.benefit-spotlight__value span {
    color: var(--muted);
    font-size: 0.72rem;
}

.benefit-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.benefit-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
    padding: 20px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: 0 14px 14px 0;
}

.benefit-list__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    background: rgba(212, 175, 55, 0.12);
    border-radius: 10px;
}

.benefit-list h3 {
    margin-bottom: 4px;
    font-size: 0.92rem;
}

.benefit-list p {
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
}

.benefit-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.benefit-duo__card {
    padding: 24px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.benefit-duo__card.is-featured {
    border-color: rgba(212, 175, 55, 0.35);
    background: rgba(212, 175, 55, 0.04);
}

.benefit-duo__card small {
    display: block;
    margin-bottom: 8px;
    color: var(--muted-2);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
}

.benefit-duo__card h3 {
    margin-bottom: 14px;
    font-size: 1rem;
}

.benefit-duo__card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.benefit-duo__card li {
    position: relative;
    padding: 6px 0 6px 18px;
    color: var(--muted);
    font-size: 0.78rem;
    border-bottom: 1px solid var(--line);
}

.benefit-duo__card li:last-child {
    border-bottom: 0;
}

.benefit-duo__card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: 900;
    font-size: 0.72rem;
}

.benefit-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.benefit-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.benefit-check::before {
    content: "✓";
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--green);
    background: rgba(55, 230, 161, 0.12);
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 900;
}

@media (max-width: 680px) {
    .benefit-spotlight {
        flex-direction: column;
        align-items: flex-start;
    }

    .benefit-spotlight__value {
        text-align: left;
    }

    .benefit-duo {
        grid-template-columns: 1fr;
    }

    .benefit-checks {
        grid-template-columns: 1fr;
    }
}

/* ── Promoções page ── */

.promo-countdown {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    background: rgba(100, 140, 255, 0.08);
    border: 1px solid rgba(100, 140, 255, 0.25);
    border-radius: 14px;
}

.promo-countdown p {
    margin: 0;
    font-size: 0.84rem;
}

.promo-countdown strong {
    color: #8cb4ff;
}

.promo-countdown__timer {
    display: flex;
    gap: 8px;
}

.promo-countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.promo-countdown__unit b {
    font-size: 1.1rem;
    line-height: 1;
}

.promo-countdown__unit span {
    margin-top: 2px;
    color: var(--muted-2);
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
}

.promo-stack {
    display: grid;
    gap: 12px;
}

.promo-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 20px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: border-color 160ms ease;
}

.promo-item:hover {
    border-color: rgba(100, 140, 255, 0.3);
}

.promo-item__tag {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.6rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.promo-item__tag--hot {
    color: #ff6b85;
    background: rgba(255, 75, 105, 0.12);
}

.promo-item__tag--new {
    color: var(--green);
    background: rgba(55, 230, 161, 0.12);
}

.promo-item__tag--vip {
    color: var(--gold);
    background: rgba(212, 175, 55, 0.12);
}

.promo-item__body h3 {
    margin-bottom: 4px;
    font-size: 0.94rem;
}

.promo-item__body p {
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
}

.promo-item__cta {
    padding: 8px 16px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 9px;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
    transition: background 160ms ease, border-color 160ms ease;
}

.promo-item:hover .promo-item__cta {
    background: rgba(100, 140, 255, 0.12);
    border-color: rgba(100, 140, 255, 0.35);
}

.promo-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.promo-tile {
    padding: 22px 16px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: transform 160ms ease, border-color 160ms ease;
}

.promo-tile:hover {
    border-color: rgba(212, 175, 55, 0.35);
    transform: translateY(-3px);
}

.promo-tile__icon {
    display: block;
    margin-bottom: 10px;
    font-size: 1.6rem;
    line-height: 1;
}

.promo-tile h3 {
    margin-bottom: 4px;
    font-size: 0.82rem;
}

.promo-tile p {
    margin: 0;
    color: var(--muted);
    font-size: 0.68rem;
}

.promo-terms {
    padding: 22px 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.promo-terms h3 {
    margin-bottom: 12px;
    font-size: 0.88rem;
}

.promo-terms ol {
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.7;
}

.promo-terms li + li {
    margin-top: 6px;
}

@media (max-width: 980px) {
    .promo-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .promo-countdown {
        flex-direction: column;
        align-items: flex-start;
    }

    .promo-item {
        grid-template-columns: 1fr;
    }

    .promo-item__tag {
        justify-self: start;
    }

    .promo-item__cta {
        justify-self: start;
    }

    .promo-tiles {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Mobile page ── */

.mobile-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    text-align: center;
    background: rgba(55, 230, 161, 0.08);
    border: 1px solid rgba(55, 230, 161, 0.25);
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 700;
}

.mobile-badge::before {
    content: "📱";
    font-size: 1rem;
}

.mobile-showcase {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: center;
}

.mobile-showcase__device {
    position: relative;
    padding: 14px;
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: 32px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.mobile-showcase__device::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 5px;
    background: var(--line);
    border-radius: 99px;
}

#conteudo .mobile-showcase__device img {
    display: block;
    width: 100%;
    border-radius: 22px;
    object-fit: cover;
}

.mobile-showcase__list {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-showcase__list li {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 14px;
    align-items: start;
}

.mobile-showcase__list li::before {
    content: "";
    width: 10px;
    height: 10px;
    margin-top: 5px;
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(55, 230, 161, 0.15);
}

.mobile-showcase__list h3 {
    margin-bottom: 4px;
    font-size: 0.9rem;
}

.mobile-showcase__list p {
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
}

.mobile-perks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.mobile-perk {
    padding: 28px 20px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.mobile-perk strong {
    display: block;
    margin-bottom: 6px;
    font-size: 2rem;
    line-height: 1;
    color: var(--green);
}

.mobile-perk span {
    display: block;
    margin-bottom: 4px;
    font-size: 0.82rem;
    font-weight: 700;
}

.mobile-perk p {
    margin: 0;
    color: var(--muted);
    font-size: 0.7rem;
}

.mobile-access {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: mobile-step;
}

.mobile-access li {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}

.mobile-access li:last-child {
    border-bottom: 0;
}

.mobile-access li::before {
    counter-increment: mobile-step;
    content: counter(mobile-step);
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: #171109;
    background: var(--gold);
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 900;
}

.mobile-access h3 {
    margin-bottom: 4px;
    font-size: 0.9rem;
}

.mobile-access p {
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
}

.mobile-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.mobile-platform {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
}

.mobile-platform span {
    font-size: 1.1rem;
    line-height: 1;
}

@media (max-width: 980px) {
    .mobile-showcase {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .mobile-showcase__device {
        max-width: 260px;
        margin: 0 auto;
    }

    .mobile-perks {
        grid-template-columns: 1fr;
    }
}

/* ── Jogo responsável page ── */

.rg-alert {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px;
    background: rgba(255, 165, 70, 0.08);
    border: 1px solid rgba(255, 165, 70, 0.3);
    border-radius: 14px;
}

.rg-alert__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    color: #ffb347;
    background: rgba(255, 165, 70, 0.15);
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 900;
}

.rg-alert h2 {
    margin-bottom: 6px;
    font-size: 1rem;
}

.rg-alert p {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
}

.rg-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.rg-tool {
    padding: 24px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    text-align: center;
}

.rg-tool__icon {
    display: block;
    margin-bottom: 12px;
    font-size: 1.5rem;
    line-height: 1;
}

.rg-tool h3 {
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.rg-tool p {
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
}

.rg-signs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.rg-sign {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 0.78rem;
    color: var(--muted);
}

.rg-sign::before {
    content: "!";
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: #ffb347;
    background: rgba(255, 165, 70, 0.15);
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 900;
}

.rg-help {
    display: grid;
    gap: 10px;
}

.rg-help__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.rg-help__item h3 {
    margin-bottom: 2px;
    font-size: 0.88rem;
}

.rg-help__item p {
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
}

.rg-help__contact {
    padding: 8px 16px;
    color: var(--green);
    background: rgba(55, 230, 161, 0.1);
    border: 1px solid rgba(55, 230, 161, 0.25);
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 850;
    white-space: nowrap;
}

.rg-principles {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

.rg-principles li {
    padding: 16px 22px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    font-size: 0.82rem;
}

.rg-principles li:last-child {
    border-bottom: 0;
}

.rg-principles strong {
    color: var(--gold);
}

@media (max-width: 980px) {
    .rg-tools {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .rg-signs {
        grid-template-columns: 1fr;
    }

    .rg-help__item {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Termos de uso page ── */

.terms-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    padding: 14px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 0.76rem;
    color: var(--muted);
}

.terms-meta strong {
    color: var(--text);
}

.terms-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.terms-toc a {
    padding: 8px 14px;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    transition: border-color 160ms ease, color 160ms ease;
}

.terms-toc a:hover {
    color: var(--text);
    border-color: rgba(212, 175, 55, 0.35);
}

.terms-summary {
    padding: 22px 24px;
    background: rgba(212, 175, 55, 0.06);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 14px;
}

.terms-summary h2 {
    margin-bottom: 12px;
    font-size: 0.92rem;
}

.terms-summary ul {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.7;
}

.terms-articles {
    display: grid;
    gap: 20px;
}

.terms-article {
    padding: 24px 26px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.terms-article__num {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 10px;
    color: var(--gold);
    background: rgba(212, 175, 55, 0.1);
    border-radius: 6px;
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.terms-article h2 {
    margin-bottom: 12px;
    font-size: 1rem;
}

.terms-article p {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.65;
}

.terms-article p:last-child {
    margin-bottom: 0;
}

.terms-related {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.terms-related a {
    display: block;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 700;
    transition: border-color 160ms ease;
}

.terms-related a:hover {
    border-color: rgba(212, 175, 55, 0.35);
}

.terms-related a span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 500;
}

@media (max-width: 680px) {
    .terms-related {
        grid-template-columns: 1fr;
    }
}

/* ── Privacidade page ── */

.privacy-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    background: rgba(140, 120, 255, 0.08);
    border: 1px solid rgba(140, 120, 255, 0.25);
    border-radius: 14px;
    font-size: 0.82rem;
}

.privacy-badge__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: #a898ff;
    background: rgba(140, 120, 255, 0.15);
    border-radius: 10px;
    font-size: 1rem;
}

.privacy-badge p {
    margin: 0;
    color: var(--muted);
}

.privacy-badge strong {
    color: #b8a8ff;
}

.privacy-data {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.privacy-data__item {
    padding: 20px 18px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.privacy-data__item span {
    display: block;
    margin-bottom: 10px;
    font-size: 1.4rem;
    line-height: 1;
}

.privacy-data__item h3 {
    margin-bottom: 4px;
    font-size: 0.82rem;
}

.privacy-data__item p {
    margin: 0;
    color: var(--muted);
    font-size: 0.68rem;
}

.privacy-flow {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.privacy-flow li {
    position: relative;
    padding: 18px 0 18px 28px;
    border-left: 2px solid var(--line);
    margin-left: 8px;
}

.privacy-flow li:last-child {
    border-left-color: transparent;
}

.privacy-flow li::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 22px;
    width: 12px;
    height: 12px;
    background: #a898ff;
    border: 2px solid var(--bg);
    border-radius: 50%;
}

.privacy-flow h3 {
    margin-bottom: 4px;
    font-size: 0.88rem;
}

.privacy-flow p {
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
}

.privacy-rights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.privacy-right {
    padding: 18px 14px;
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: 12px;
}

.privacy-right strong {
    display: block;
    margin-bottom: 6px;
    color: var(--green);
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.privacy-right span {
    font-size: 0.76rem;
    color: var(--muted);
}

.privacy-contact {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 24px 26px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.privacy-contact h2 {
    margin-bottom: 6px;
    font-size: 0.94rem;
}

.privacy-contact p {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
}

.privacy-contact a {
    padding: 10px 20px;
    color: #b8a8ff;
    background: rgba(140, 120, 255, 0.1);
    border: 1px solid rgba(140, 120, 255, 0.3);
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.privacy-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.privacy-links a {
    padding: 10px 18px;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    transition: border-color 160ms ease, color 160ms ease;
}

.privacy-links a:hover {
    color: var(--text);
    border-color: rgba(140, 120, 255, 0.35);
}

@media (max-width: 980px) {
    .privacy-data {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .privacy-rights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .privacy-data {
        grid-template-columns: 1fr;
    }

    .privacy-rights {
        grid-template-columns: 1fr;
    }

    .privacy-contact {
        grid-template-columns: 1fr;
    }
}

/* ── Novidades page ── */

.new-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.08), rgba(100, 140, 255, 0.06));
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 14px;
    font-size: 0.82rem;
}

.new-strip strong {
    color: var(--gold);
}

.new-spotlight {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 24px;
    align-items: center;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
}

.new-spotlight__img {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: var(--surface-2);
}

#conteudo .new-spotlight__img img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.new-spotlight__tag {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 10px;
    color: #171109;
    background: var(--gold);
    border-radius: 6px;
    font-size: 0.6rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.new-spotlight__body small {
    display: block;
    margin-bottom: 6px;
    color: var(--muted-2);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
}

.new-spotlight__body h2 {
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.new-spotlight__body p {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 0.8rem;
}

.new-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.new-card {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: border-color 160ms ease, transform 160ms ease;
}

.new-card:hover {
    border-color: rgba(212, 175, 55, 0.35);
    transform: translateY(-3px);
}

.new-card__ribbon {
    position: absolute;
    top: 10px;
    right: -28px;
    z-index: 1;
    width: 100px;
    padding: 4px 0;
    color: #171109;
    background: var(--gold);
    font-size: 0.55rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(45deg);
}

.new-card__img {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--surface-2);
}

#conteudo .new-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.new-card__body {
    padding: 12px 14px;
}

.new-card__body small {
    color: var(--muted-2);
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
}

.new-card__body h3 {
    margin: 2px 0 0;
    font-size: 0.82rem;
}

.new-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.new-day {
    padding: 14px 8px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 0.68rem;
}

.new-day.is-today {
    border-color: rgba(212, 175, 55, 0.4);
    background: rgba(212, 175, 55, 0.06);
}

.new-day b {
    display: block;
    margin-bottom: 4px;
    color: var(--muted-2);
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
}

.new-day span {
    display: block;
    color: var(--muted);
    font-size: 0.62rem;
    line-height: 1.3;
}

.new-day.is-today span {
    color: var(--gold);
    font-weight: 700;
}

@media (max-width: 980px) {
    .new-spotlight {
        grid-template-columns: 1fr;
    }

    .new-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .new-week {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 680px) {
    .new-grid {
        grid-template-columns: 1fr 1fr;
    }

    .new-week {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Pagamentos page ── */

.pay-pix {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px;
    background: linear-gradient(135deg, rgba(55, 230, 161, 0.1), rgba(55, 230, 161, 0.03));
    border: 1px solid rgba(55, 230, 161, 0.3);
    border-radius: 16px;
}

.pay-pix__label {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pay-pix__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--green);
    background: rgba(55, 230, 161, 0.15);
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 900;
}

.pay-pix h2 {
    margin-bottom: 2px;
    font-size: 1rem;
}

.pay-pix p {
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
}

.pay-pix__speed {
    text-align: right;
}

.pay-pix__speed strong {
    display: block;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--green);
}

.pay-pix__speed span {
    color: var(--muted);
    font-size: 0.68rem;
}

.pay-methods {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.pay-method {
    padding: 22px 16px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: border-color 160ms ease;
}

.pay-method.is-primary {
    border-color: rgba(55, 230, 161, 0.35);
    background: rgba(55, 230, 161, 0.04);
}

.pay-method__logo {
    display: block;
    margin-bottom: 10px;
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1;
}

.pay-method h3 {
    margin-bottom: 4px;
    font-size: 0.82rem;
}

.pay-method p {
    margin: 0;
    color: var(--muted);
    font-size: 0.66rem;
}

.pay-dual {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.pay-dual__col {
    padding: 24px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.pay-dual__col h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 0.92rem;
}

.pay-dual__col h3::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--green);
    border-radius: 50%;
}

.pay-dual__col.is-withdraw h3::before {
    background: var(--gold);
}

.pay-dual__steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: pay-step;
}

.pay-dual__steps li {
    position: relative;
    padding: 8px 0 8px 24px;
    color: var(--muted);
    font-size: 0.78rem;
    border-bottom: 1px solid var(--line);
}

.pay-dual__steps li:last-child {
    border-bottom: 0;
}

.pay-dual__steps li::before {
    counter-increment: pay-step;
    content: counter(pay-step);
    position: absolute;
    left: 0;
    color: var(--muted-2);
    font-size: 0.68rem;
    font-weight: 900;
}

.pay-limits {
    display: grid;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

.pay-limit {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    padding: 14px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    font-size: 0.78rem;
}

.pay-limit:last-child {
    border-bottom: 0;
}

.pay-limit--head {
    background: var(--surface-2);
    color: var(--muted-2);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pay-limit span:last-child {
    text-align: right;
    font-weight: 700;
    color: var(--green);
}

.pay-notes {
    display: grid;
    gap: 8px;
}

.pay-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 0.76rem;
    color: var(--muted);
}

.pay-note::before {
    content: "i";
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--gold);
    background: rgba(212, 175, 55, 0.12);
    border-radius: 50%;
    font-size: 0.62rem;
    font-weight: 900;
    font-style: normal;
}

@media (max-width: 980px) {
    .pay-methods {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pay-dual {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .pay-pix {
        flex-direction: column;
        align-items: flex-start;
    }

    .pay-pix__speed {
        text-align: left;
    }

    .pay-methods {
        grid-template-columns: 1fr;
    }

    .pay-limit {
        grid-template-columns: 1fr 1fr;
        font-size: 0.72rem;
    }

    .pay-limit span:last-child {
        grid-column: 1 / -1;
        text-align: left;
        padding-top: 4px;
    }
}

/* ── Sobre page ── */

.about-intro {
    padding: 32px 30px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
}

.about-intro blockquote {
    margin: 0 0 12px;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.5;
}

.about-intro blockquote em {
    color: var(--gold);
    font-style: normal;
}

.about-intro cite {
    color: var(--muted);
    font-size: 0.76rem;
    font-style: normal;
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
}

.about-stat {
    padding: 24px 16px;
    text-align: center;
    border-right: 1px solid var(--line);
}

.about-stat:last-child {
    border-right: 0;
}

.about-stat strong {
    display: block;
    margin-bottom: 4px;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--gold);
}

.about-stat span {
    display: block;
    margin-bottom: 2px;
    font-size: 0.78rem;
    font-weight: 700;
}

.about-stat p {
    margin: 0;
    color: var(--muted);
    font-size: 0.64rem;
}

.about-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.about-value {
    padding: 22px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    border-top: 3px solid var(--line);
}

.about-value:nth-child(1) { border-top-color: var(--green); }
.about-value:nth-child(2) { border-top-color: var(--gold); }
.about-value:nth-child(3) { border-top-color: #8cb4ff; }

.about-value h3 {
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.about-value p {
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
}

.about-milestones {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-milestones li {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}

.about-milestones li:last-child {
    border-bottom: 0;
}

.about-milestones__year {
    color: var(--gold);
    font-size: 0.88rem;
    font-weight: 900;
}

.about-milestones h3 {
    margin-bottom: 4px;
    font-size: 0.88rem;
}

.about-milestones p {
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
}

.about-offer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.about-offer__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.about-offer__item span {
    font-size: 1.1rem;
    line-height: 1;
}

@media (max-width: 980px) {
    .about-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-stat:nth-child(2) {
        border-right: 0;
    }

    .about-stat:nth-child(1),
    .about-stat:nth-child(2) {
        border-bottom: 1px solid var(--line);
    }

    .about-values {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .about-stats {
        grid-template-columns: 1fr;
    }

    .about-stat {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .about-stat:last-child {
        border-bottom: 0;
    }

    .about-offer {
        grid-template-columns: 1fr;
    }
}

/* ── VIP page ── */

.vip-crown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 24px;
    text-align: center;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(140, 120, 255, 0.06));
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 14px;
    font-size: 0.84rem;
    font-weight: 700;
}

.vip-crown::before {
    content: "👑";
    font-size: 1.2rem;
    line-height: 1;
}

.vip-tiers {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.vip-tier {
    padding: 20px 12px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: border-color 160ms ease, transform 160ms ease;
}

.vip-tier.is-active {
    border-color: rgba(212, 175, 55, 0.5);
    background: rgba(212, 175, 55, 0.06);
    transform: scale(1.03);
}

.vip-tier__icon {
    display: block;
    margin-bottom: 8px;
    font-size: 1.3rem;
    line-height: 1;
}

.vip-tier h3 {
    margin-bottom: 4px;
    font-size: 0.78rem;
}

.vip-tier p {
    margin: 0;
    color: var(--muted);
    font-size: 0.62rem;
}

.vip-compare {
    display: grid;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

.vip-compare__row {
    display: grid;
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 8px;
    padding: 14px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    font-size: 0.76rem;
}

.vip-compare__row:last-child {
    border-bottom: 0;
}

.vip-compare__row--head {
    background: var(--surface-2);
    color: var(--muted-2);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
}

.vip-compare__row span:not(:first-child) {
    text-align: center;
    color: var(--muted);
}

.vip-compare__row .is-yes {
    color: var(--green);
    font-weight: 800;
}

.vip-exclusive {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.vip-exclusive__card {
    padding: 24px 20px;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        linear-gradient(135deg, rgba(212, 175, 55, 0.35), rgba(140, 120, 255, 0.2)) border-box;
    border-radius: 16px;
}

.vip-exclusive__card span {
    display: block;
    margin-bottom: 10px;
    font-size: 1.4rem;
    line-height: 1;
}

.vip-exclusive__card h3 {
    margin-bottom: 6px;
    font-size: 0.88rem;
}

.vip-exclusive__card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.72rem;
}

.vip-path {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.vip-path__step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
}

.vip-path__step::before {
    content: "→";
    color: var(--gold);
    font-weight: 900;
}

.vip-path__step:first-child::before {
    content: none;
}

@media (max-width: 980px) {
    .vip-tiers {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .vip-exclusive {
        grid-template-columns: 1fr;
    }

    .vip-compare__row {
        grid-template-columns: 1fr 1fr;
        font-size: 0.72rem;
    }

    .vip-compare__row--head span:nth-child(n+3) {
        display: none;
    }
}

@media (max-width: 680px) {
    .vip-tiers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vip-compare__row {
        grid-template-columns: 1fr;
    }

    .vip-compare__row span:not(:first-child) {
        text-align: left;
        padding-left: 12px;
    }

    .vip-path__step::before {
        display: none;
    }

    .vip-path {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── Torneios page ── */

.tourney-prize {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(255, 75, 105, 0.06));
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 16px;
}

.tourney-prize__label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-2);
}

.tourney-prize h2 {
    margin: 4px 0 0;
    font-size: 1.1rem;
}

.tourney-prize__amount {
    text-align: right;
}

.tourney-prize__amount strong {
    display: block;
    font-size: 2rem;
    line-height: 1;
    color: var(--gold);
}

.tourney-prize__amount span {
    color: var(--muted);
    font-size: 0.68rem;
}

.tourney-cards {
    display: grid;
    gap: 12px;
}

.tourney-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 20px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: border-color 160ms ease;
}

.tourney-card:hover {
    border-color: rgba(212, 175, 55, 0.35);
}

.tourney-card__status {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.6rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tourney-card__status--live {
    color: #ff6b85;
    background: rgba(255, 75, 105, 0.12);
}

.tourney-card__status--soon {
    color: var(--gold);
    background: rgba(212, 175, 55, 0.12);
}

.tourney-card__body h3 {
    margin-bottom: 4px;
    font-size: 0.94rem;
}

.tourney-card__body p {
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
}

.tourney-card__prize {
    text-align: right;
    white-space: nowrap;
}

.tourney-card__prize strong {
    display: block;
    font-size: 1.1rem;
    color: var(--green);
}

.tourney-card__prize span {
    color: var(--muted);
    font-size: 0.64rem;
}

.tourney-podium {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    gap: 10px;
    align-items: end;
}

.tourney-podium__place {
    padding: 20px 14px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.tourney-podium__place--first {
    padding: 28px 14px;
    border-color: rgba(212, 175, 55, 0.4);
    background: rgba(212, 175, 55, 0.06);
}

.tourney-podium__medal {
    display: block;
    margin-bottom: 8px;
    font-size: 1.5rem;
    line-height: 1;
}

.tourney-podium__place strong {
    display: block;
    margin-bottom: 2px;
    font-size: 0.82rem;
}

.tourney-podium__place span {
    display: block;
    color: var(--gold);
    font-size: 0.9rem;
    font-weight: 900;
}

.tourney-podium__place small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.64rem;
}

.tourney-how {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.tourney-how__item {
    padding: 20px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    text-align: center;
}

.tourney-how__num {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0 auto 10px;
    color: #171109;
    background: var(--gold);
    border-radius: 50%;
    font-size: 0.82rem;
    font-weight: 900;
}

.tourney-how__item h3 {
    margin-bottom: 4px;
    font-size: 0.84rem;
}

.tourney-how__item p {
    margin: 0;
    color: var(--muted);
    font-size: 0.7rem;
}

@media (max-width: 980px) {
    .tourney-podium {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .tourney-podium__place--first {
        order: -1;
    }

    .tourney-how {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .tourney-prize {
        flex-direction: column;
        align-items: flex-start;
    }

    .tourney-prize__amount {
        text-align: left;
    }

    .tourney-card {
        grid-template-columns: 1fr;
    }

    .tourney-card__prize {
        text-align: left;
    }
}

/* ── Provedores page ── */

.provider-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.provider-bar__item {
    padding: 18px 16px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.provider-bar__item strong {
    display: block;
    margin-bottom: 2px;
    font-size: 1.3rem;
    color: var(--gold);
}

.provider-bar__item span {
    color: var(--muted);
    font-size: 0.68rem;
}

.provider-list {
    display: grid;
    gap: 14px;
}

.provider-row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 20px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    transition: border-color 160ms ease;
}

.provider-row:hover {
    border-color: rgba(100, 140, 255, 0.3);
}

.provider-row__logo {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    color: #171109;
    background: var(--gold);
    border-radius: 14px;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.provider-row__body h3 {
    margin-bottom: 4px;
    font-size: 0.94rem;
}

.provider-row__body p {
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
}

.provider-row__meta {
    text-align: right;
    white-space: nowrap;
}

.provider-row__meta strong {
    display: block;
    font-size: 0.88rem;
    color: var(--green);
}

.provider-row__meta span {
    color: var(--muted);
    font-size: 0.64rem;
}

.provider-showcase {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.provider-game {
    display: block;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    transition: transform 160ms ease, border-color 160ms ease;
}

.provider-game:hover {
    border-color: rgba(212, 175, 55, 0.35);
    transform: translateY(-3px);
}

.provider-game__img {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--surface-2);
}

#conteudo .provider-game__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.provider-game span {
    display: block;
    padding: 8px 10px;
    font-size: 0.66rem;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.provider-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.provider-tag {
    padding: 10px 16px;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
}

@media (max-width: 980px) {
    .provider-showcase {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .provider-bar {
        grid-template-columns: 1fr;
    }

    .provider-row {
        grid-template-columns: 52px 1fr;
    }

    .provider-row__logo {
        width: 52px;
        height: 52px;
        font-size: 0.6rem;
    }

    .provider-row__meta {
        grid-column: 2;
        text-align: left;
    }

    .provider-showcase {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Mobile readability (small screens) ── */

@media (max-width: 680px) {
    .page-heading h2,
    .page-cta h2 {
        font-size: 1.4rem;
        line-height: 1.3;
        letter-spacing: -0.02em;
    }

    .page-heading > p,
    .page-heading--split > p,
    .page-cta p {
        font-size: 1rem;
        line-height: 1.65;
    }

    #conteudo .page-section h3,
    #conteudo .page-cta h3 {
        font-size: 1.05rem;
        line-height: 1.4;
    }

    #conteudo .page-section p,
    #conteudo .page-section li,
    #conteudo .page-cta p {
        font-size: 0.98rem;
        line-height: 1.65;
    }

    #conteudo .page-section small {
        font-size: 0.82rem;
        line-height: 1.45;
    }

    .eyebrow {
        font-size: 0.78rem;
        letter-spacing: 0.04em;
    }

    .page-cta__box {
        gap: 22px;
    }

    .page-cta h2 {
        margin-bottom: 10px;
    }
}