/* =========================================================
   YuGiOh PRO - Estratégias e Farming
   Compartilhado por F1, F2, F3 e próximos guias.
========================================================= */


/* =========================================================
   PERFIL COMPACTO DE DUELISTA
========================================================= */

.farming-duelist-profile {
    display: grid !important;
    grid-template-columns: 120px 54px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: center !important;
    padding: 18px !important;
}

.farming-duelist-profile .campaign-step-image {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: auto !important;
    background: transparent !important;
}

.farming-duelist-profile .campaign-step-image a {
    display: block;
}

.farming-duelist-profile .campaign-step-image img {
    display: block;
    width: 110px !important;
    height: 138px !important;
    object-fit: cover !important;
    margin: 0 auto;
    border-radius: 8px;
}

.farming-duelist-profile .campaign-step-content {
    display: contents !important;
}

.farming-duelist-profile .campaign-step-number {
    width: 46px !important;
    height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    border-radius: 50%;
}

.farming-duelist-info {
    min-width: 0;
}

.farming-duelist-info small {
    display: block;
    margin-bottom: 6px;
}

.farming-duelist-info h2 {
    margin: 0 0 10px;
}

.farming-duelist-info p {
    margin: 0 0 14px;
}

.farming-duelist-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 10px 0 14px;
}

.farming-duelist-stats span {
    white-space: nowrap;
}


/* =========================================================
   CARTAS EM DESTAQUE
========================================================= */

.farming-highlight-section {
    margin-top: 12px;
}

.farming-card-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.farming-card {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px !important;
    text-align: center;
    min-width: 0;
}

.farming-card-image {
    width: 100% !important;
    max-width: 220px !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    flex: 0 0 auto !important;
}

.farming-card-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.farming-card-name {
    line-height: 1.25;
}

.farming-card-power {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 8px;
}

.farming-card-pool {
    opacity: .85;
    font-size: .88em;
}

.farming-card-rate {
    font-size: .92em;
}

.farming-data-note {
    margin-top: 14px;
    opacity: .9;
}


/* =========================================================
   F3 - ESCALA DE RANK POW / TEC
========================================================= */

.rank-scale {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 8px;
    margin-top: 22px;
}

.rank-scale-item {
    min-width: 0;
    padding: 15px 8px;
    border: 1px solid rgba(255, 193, 7, .28);
    border-radius: 10px;
    text-align: center;
    background: rgba(8, 20, 43, .5);
}

.rank-scale-item strong {
    display: block;
    color: #ffc928;
    font-size: .9rem;
    margin-bottom: 5px;
}

.rank-scale-item span {
    display: block;
    font-size: .76rem;
    opacity: .82;
}

.rank-scale-item.rank-pow {
    border-color: rgba(255, 193, 7, .48);
}

.rank-scale-item.rank-tec {
    border-color: rgba(96, 165, 250, .42);
}

.rank-scale-item.rank-tec strong {
    color: #7ab7ff;
}


/* =========================================================
   F3 - POW X TEC
========================================================= */

.rank-comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.rank-comparison-card {
    padding: 22px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 12px;
    background: rgba(8, 20, 43, .45);
}

.rank-comparison-card.pow {
    border-color: rgba(255, 193, 7, .4);
}

.rank-comparison-card.tec {
    border-color: rgba(96, 165, 250, .4);
}

.rank-comparison-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    min-height: 34px;
    padding: 5px 12px;
    margin-bottom: 14px;
    border-radius: 999px;
    font-weight: 800;
}

.rank-comparison-card.pow .rank-comparison-label {
    color: #ffc928;
    border: 1px solid rgba(255, 193, 7, .55);
}

.rank-comparison-card.tec .rank-comparison-label {
    color: #7ab7ff;
    border: 1px solid rgba(96, 165, 250, .55);
}

.rank-comparison-card h2 {
    margin: 0 0 10px;
}

.rank-comparison-card ul {
    margin: 14px 0 0;
    padding-left: 22px;
}

.rank-comparison-card li {
    margin-bottom: 8px;
}


/* =========================================================
   F3 - TABELAS
========================================================= */

.rank-table-wrap {
    overflow-x: auto;
    margin-top: 18px;
}

.rank-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 670px;
}

.rank-table th,
.rank-table td {
    padding: 13px 16px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    text-align: left;
}

.rank-table th {
    color: #ffc928;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.rank-table td strong {
    color: #fff;
}


/* =========================================================
   F3 - FLUXO
========================================================= */

.rank-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.rank-flow article {
    padding: 18px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(8,20,43,.45);
}

.rank-flow-number {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border: 1px solid #ffc928;
    border-radius: 50%;
    color: #ffc928;
    font-weight: 800;
}

.rank-flow strong {
    display: block;
    margin-bottom: 7px;
}


/* =========================================================
   F3 - DESTAQUE
========================================================= */

.rank-important {
    padding: 20px;
    margin-top: 18px;
    border: 1px solid rgba(255, 193, 7, .35);
    border-radius: 12px;
    background: rgba(255, 193, 7, .035);
}

.rank-important strong {
    color: #ffc928;
}


/* =========================================================
   RESPONSIVO
========================================================= */

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

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

@media (max-width: 900px) {
    .farming-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 680px) {
    .farming-duelist-profile {
        grid-template-columns: 86px 44px minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 14px !important;
    }

    .farming-duelist-profile .campaign-step-image {
        width: 86px !important;
        min-width: 86px !important;
        max-width: 86px !important;
    }

    .farming-duelist-profile .campaign-step-image img {
        width: 78px !important;
        height: 98px !important;
    }

    .farming-duelist-profile .campaign-step-number {
        width: 38px !important;
        height: 38px !important;
    }

    .rank-comparison {
        grid-template-columns: 1fr;
    }

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

    .rank-flow {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .farming-card-grid {
        grid-template-columns: 1fr !important;
    }

    .farming-card-image {
        max-width: 240px !important;
    }

    .farming-duelist-profile {
        grid-template-columns: 72px minmax(0, 1fr) !important;
    }

    .farming-duelist-profile .campaign-step-image {
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
    }

    .farming-duelist-profile .campaign-step-image img {
        width: 66px !important;
        height: 82px !important;
    }

    .farming-duelist-profile .campaign-step-number {
        display: none !important;
    }
}

/* =========================================================
   F5 — EXEMPLOS DE GUARDIAN STARS
========================================================= */

.guardian-battle-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    margin-top: 24px;
}

.guardian-battle-card {
    text-align: center;
}

.guardian-battle-card img {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 0 auto 18px;
    border-radius: 8px;
}

.guardian-battle-card h3 {
    margin: 0 0 12px;
}

.guardian-battle-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 10px;
}

.guardian-battle-stars {
    margin: 8px 0 14px;
}

.guardian-battle-vs {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;
    margin: auto;

    border: 1px solid #f5b800;
    border-radius: 50%;

    font-size: 18px;
    font-weight: 800;
    color: #f5b800;
}

.guardian-battle-result {
    margin-top: 24px;
    padding: 18px 20px;

    border: 1px solid rgba(245, 184, 0, .65);
    border-radius: 10px;

    text-align: center;
}

.guardian-battle-result strong {
    color: #f5b800;
}

.guardian-battle-arrow {
    display: block;
    margin: 8px 0;

    font-size: 24px;
    font-weight: 800;
    color: #f5b800;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .guardian-battle-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .guardian-battle-vs {
        width: 50px;
        height: 50px;
    }

    .guardian-battle-card img {
        max-width: 260px;
    }

}

/* =========================================================
   F5 — GUARDIAN STARS NA PRÁTICA
========================================================= */

.guardian-battle-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 80px minmax(260px, 1fr);
    gap: 30px;
    align-items: center;
    margin: 28px 0;
}


/* CARTA */

.guardian-battle-card {
    padding: 22px;
    text-align: center;
    background: rgba(7, 18, 38, 0.35);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 12px;
}

.guardian-battle-card > a:first-child {
    display: block;
}

.guardian-battle-card img {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 0 auto 18px;
    border-radius: 8px;
}

.guardian-battle-card h3 {
    margin: 0 0 12px;
    font-size: 1.15rem;
    color: #ffffff;
}


/* ATK / DEF */

.guardian-battle-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0 0 10px;
}

.guardian-battle-stats span {
    color: #b8c5da;
}

.guardian-battle-stats strong {
    color: #ffc928;
}


/* GUARDIAN STARS */

.guardian-battle-stars {
    margin: 10px 0 16px;
    color: #b8c5da;
}

.guardian-battle-stars strong {
    color: #ffc928;
}


/* BOTÃO */

.guardian-battle-card .campaign-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
}


/* =========================================================
   VS
========================================================= */

.guardian-battle-vs {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;
    margin: auto;

    border: 2px solid #ffc928;
    border-radius: 50%;

    color: #ffc928;
    font-size: 1.1rem;
    font-weight: 900;

    background: rgba(255, 201, 40, 0.06);
}


/* =========================================================
   RESULTADO DA BATALHA
========================================================= */

.guardian-battle-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    margin: 26px 0 6px;
    padding: 22px 24px;

    text-align: center;

    background: rgba(255, 201, 40, 0.05);
    border: 1px solid rgba(255, 201, 40, 0.65);
    border-radius: 12px;
}

.guardian-battle-result > span:first-child {
    color: #ffffff;
    font-weight: 700;
}

.guardian-battle-result > strong {
    display: block;
    margin-top: 2px;

    color: #ffc928;
    font-size: 1.05rem;
}

.guardian-battle-result > span:last-child {
    margin-top: 8px;
    color: #b8c5da;
}


/* MARS → JUPITER / +500 */

.guardian-battle-arrow {
    display: block;
    margin: 9px 0;

    color: #ffc928;
    font-size: 1.35rem;
    line-height: 1.2;
    font-weight: 900;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .guardian-battle-grid {
        grid-template-columns: minmax(220px, 1fr) 60px minmax(220px, 1fr);
        gap: 18px;
    }

    .guardian-battle-card {
        padding: 16px;
    }

    .guardian-battle-card img {
        max-width: 260px;
    }

    .guardian-battle-vs {
        width: 52px;
        height: 52px;
        font-size: 0.95rem;
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 700px) {

    .guardian-battle-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .guardian-battle-card {
        width: 100%;
        max-width: 390px;
        margin: 0 auto;
    }

    .guardian-battle-card img {
        max-width: 280px;
    }

    .guardian-battle-vs {
        width: 54px;
        height: 54px;
        margin: 0 auto;
    }

    .guardian-battle-result {
        padding: 18px 15px;
    }

    .guardian-battle-stats {
        gap: 6px 14px;
    }

}

/* =========================================================
   F5 — ESCOLHA DE GUARDIAN STAR
========================================================= */

.guardian-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 26px 0;
}

.guardian-choice-card {
    position: relative;
    padding: 24px;

    background: rgba(7, 18, 38, 0.35);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 12px;
}

.guardian-choice-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    margin-bottom: 18px;

    border: 1px solid #ffc928;
    border-radius: 50%;

    color: #ffc928;
    font-weight: 800;
}

.guardian-choice-label {
    display: block;
    margin-bottom: 6px;

    color: #ffc928;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.guardian-choice-card h3 {
    margin: 0 0 14px;

    color: #ffffff;
    font-size: 1.35rem;
}

.guardian-choice-arrow {
    display: inline-block;
    margin-bottom: 12px;
    padding: 8px 12px;

    border: 1px solid rgba(255, 201, 40, 0.45);
    border-radius: 8px;

    color: #ffc928;
    font-weight: 900;
}

.guardian-choice-card > strong {
    display: block;
    margin-bottom: 12px;

    color: #ffffff;
}

.guardian-choice-card .guardian-choice-positive {
    color: #ffc928;
}

.guardian-choice-card p {
    margin: 0;

    color: #b8c5da;
    line-height: 1.65;
}


/* MOBILE */

@media (max-width: 700px) {

    .guardian-choice-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   F5 — EXEMPLO 2 — ESCOLHA DA GUARDIAN STAR
========================================================= */

.guardian-choice-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
    margin: 28px 0 !important;
}

.guardian-choice-card {
    display: block;
    position: relative;
    padding: 24px !important;

    background: rgba(7, 18, 38, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
}

.guardian-choice-number {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    margin-bottom: 16px;

    border: 1px solid #ffc928;
    border-radius: 50%;

    color: #ffc928;
    font-size: 0.85rem;
    font-weight: 900;
}

.guardian-choice-label {
    display: block !important;
    margin-bottom: 7px;

    color: #ffc928;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.guardian-choice-card h3 {
    margin: 0 0 16px !important;

    color: #ffffff;
    font-size: 1.4rem;
}

.guardian-choice-arrow {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    margin-bottom: 14px;
    padding: 9px 14px;

    background: rgba(255, 201, 40, 0.05);
    border: 1px solid rgba(255, 201, 40, 0.55);
    border-radius: 8px;

    color: #ffc928;
    font-size: 1rem;
    font-weight: 900;
}

.guardian-choice-card > strong {
    display: block !important;
    margin-bottom: 13px;

    color: #ffffff;
    font-size: 0.95rem;
}

.guardian-choice-card > strong.guardian-choice-positive {
    color: #ffc928;
}

.guardian-choice-card p {
    margin: 0 !important;

    color: #b8c5da;
    line-height: 1.65;
}


/* =========================================================
   DESTAQUE VISUAL ENTRE MARS E SUN
========================================================= */

.guardian-choice-card:first-child {
    border-color: rgba(255, 201, 40, 0.55);
}

.guardian-choice-card:first-child::before {
    content: "RECOMENDADO";

    position: absolute;
    top: 18px;
    right: 18px;

    padding: 5px 9px;

    background: rgba(255, 201, 40, 0.08);
    border: 1px solid rgba(255, 201, 40, 0.45);
    border-radius: 6px;

    color: #ffc928;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}


/* =========================================================
   DICA DO EXEMPLO
========================================================= */

.guardian-choice-grid + .guardian-battle-result {
    margin-top: 6px;
}

.guardian-battle-result + .campaign-note {
    margin-top: 18px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .guardian-choice-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .guardian-choice-card {
        padding: 20px !important;
    }

    .guardian-choice-card:first-child::before {
        top: 16px;
        right: 16px;
    }

}


/* =========================================================
   F6 — MELHORES CARTAS PARA TERMINAR FORBIDDEN MEMORIES
   Classes exclusivas: f6-*
   ========================================================= */


/* =========================================================
   ESTRUTURA PRINCIPAL
   ========================================================= */

.f6-page {
    width: 100%;
}

.f6-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.f6-section {
    margin-top: 24px;
    padding: 28px;
    background: #111d33;
    border: 1px solid #2b3d59;
    border-radius: 16px;
}

.f6-section h2 {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 26px;
    line-height: 1.2;
}

.f6-section h3 {
    color: #ffffff;
}

.f6-section p {
    color: #b9c8df;
    line-height: 1.7;
}


/* =========================================================
   HERO
   ========================================================= */

.f6-hero {
    position: relative;
    overflow: hidden;
    margin-top: 16px;
    padding: 52px 46px;
    min-height: 300px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            120deg,
            #172640 0%,
            #17243b 55%,
            #30302d 100%
        );

    border: 1px solid #31425d;
    border-radius: 18px;
}

.f6-hero-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.f6-eyebrow {
    display: block;
    margin-bottom: 14px;

    color: #ffc400;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.f6-hero h1 {
    margin: 0 0 20px;

    color: #ffffff;
    font-size: clamp(38px, 5vw, 66px);
    line-height: 0.98;
    letter-spacing: -1px;
}

.f6-hero p {
    max-width: 700px;
    margin: 0;

    color: #aec1dd;
    font-size: 17px;
    line-height: 1.6;
}

.f6-hero-star {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);

    color: rgba(255, 196, 0, 0.13);
    font-size: 130px;
    line-height: 1;
}


/* =========================================================
   INTRODUÇÃO
   ========================================================= */

.f6-intro p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   PASSOS DE PREPARAÇÃO
   ========================================================= */

.f6-preparation-head {
    margin-bottom: 20px;
}

.f6-preparation-label {
    display: block;

    color: #9db0cc;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.f6-preparation-title {
    margin: 4px 0 0 !important;
    font-size: 22px !important;
}

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

.f6-step {
    min-width: 0;
    padding: 20px;

    background: #0d182b;
    border: 1px solid #31425d;
    border-radius: 12px;
}

.f6-step-number {
    width: 38px;
    height: 38px;
    margin-bottom: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #ffc400;
    border-radius: 50%;

    color: #ffc400;
    font-size: 12px;
    font-weight: 800;
}

.f6-step h3 {
    margin: 0 0 8px;
    font-size: 16px;
}

.f6-step p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   GRID DAS CARTAS
   ========================================================= */

.f6-cards-header {
    margin-bottom: 22px;
}

.f6-cards-header p {
    margin-bottom: 0;
}

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

.f6-card {
    min-width: 0;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    background: #0d182b;
    border: 1px solid #31425d;
    border-radius: 13px;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

.f6-card:hover {
    transform: translateY(-3px);
    border-color: #d6a900;
}

.f6-card-image-wrap {
    padding: 16px 16px 0;
}

.f6-card-image-link {
    display: block;
    text-decoration: none;
}

.f6-card-image {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 1.46 / 1;
    object-fit: contain;

    border-radius: 7px;
}

.f6-card-body {
    flex: 1;
    padding: 16px 18px 20px;

    display: flex;
    flex-direction: column;
}

.f6-card-position {
    margin-bottom: 8px;

    color: #ffc400;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.f6-card-title {
    margin: 0 0 10px !important;

    color: #ffffff;
    font-size: 18px !important;
    line-height: 1.3;
}

.f6-card-title a {
    color: inherit;
    text-decoration: none;
}

.f6-card-title a:hover {
    color: #ffc400;
}

.f6-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;

    margin-bottom: 12px;

    color: #b8c9e1;
    font-size: 13px;
}

.f6-card-stats strong {
    color: #ffc400;
}

.f6-card-description {
    flex: 1;

    margin: 0 0 16px !important;

    color: #aebed5 !important;
    font-size: 13px;
    line-height: 1.6 !important;
}

.f6-card-link {
    display: inline-flex;
    align-items: center;

    width: fit-content;
    margin-top: auto;

    color: #ffc400;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.f6-card-link:hover {
    text-decoration: underline;
}


/* =========================================================
   RANKING / QUAL ESCOLHER
   ========================================================= */

.f6-ranking-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.f6-ranking-item {
    position: relative;

    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 16px;

    padding: 20px;

    background: #0d182b;
    border: 1px solid #31425d;
    border-radius: 12px;
}

.f6-ranking-number {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #ffc400;
    border-radius: 50%;

    color: #ffc400;
    font-size: 13px;
    font-weight: 800;
}

.f6-ranking-content h3 {
    margin: 0 0 7px;
    font-size: 18px;
}

.f6-ranking-content p {
    margin: 0;
    font-size: 14px;
}

.f6-ranking-tag {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 9px;

    color: #ffc400;
    background: rgba(255, 196, 0, 0.07);
    border: 1px solid rgba(255, 196, 0, 0.35);
    border-radius: 6px;

    font-size: 11px;
    font-weight: 800;
}


/* =========================================================
   DESTAQUE FINAL
   ========================================================= */

.f6-final-box {
    margin-top: 20px;
    padding: 22px 24px;

    text-align: center;

    background: #1d2531;
    border: 1px solid #d2a600;
    border-radius: 12px;
}

.f6-final-box small {
    display: block;
    margin-bottom: 7px;

    color: #ffffff;
    font-weight: 700;
}

.f6-final-box strong {
    display: block;

    color: #ffc400;
    font-size: 24px;
}

.f6-final-box p {
    max-width: 760px;
    margin: 10px auto 0;

    color: #c0cee0;
}


/* =========================================================
   DICA
   ========================================================= */

.f6-tip {
    margin-top: 18px;
    padding: 16px 18px;

    color: #dbe5f3;
    background: rgba(255, 196, 0, 0.055);
    border: 1px solid rgba(255, 196, 0, 0.55);
    border-radius: 9px;

    line-height: 1.6;
}

.f6-tip strong {
    color: #ffc400;
}


/* =========================================================
   LINKS INFERIORES
   ========================================================= */

.f6-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.f6-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 11px 16px;

    color: #ffc400;
    background: #0d182b;
    border: 1px solid #31425d;
    border-radius: 8px;

    font-weight: 800;
    text-decoration: none;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.f6-button:hover {
    background: #14223a;
    border-color: #ffc400;
}


/* =========================================================
   RESPONSIVO — TABLET
   ========================================================= */

@media (max-width: 980px) {

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

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

    .f6-hero {
        padding: 42px 32px;
    }

    .f6-hero-star {
        right: 35px;
        font-size: 100px;
    }
}


/* =========================================================
   RESPONSIVO — CELULAR
   ========================================================= */

@media (max-width: 680px) {

    .f6-container {
        width: min(100% - 20px, 1180px);
    }

    .f6-section {
        margin-top: 16px;
        padding: 20px 16px;
        border-radius: 12px;
    }

    .f6-hero {
        min-height: auto;
        padding: 34px 22px;
        border-radius: 14px;
    }

    .f6-hero h1 {
        font-size: 38px;
    }

    .f6-hero p {
        font-size: 15px;
    }

    .f6-hero-star {
        right: 15px;
        top: 35px;

        transform: none;

        font-size: 65px;
        opacity: 0.7;
    }

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

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

    .f6-ranking-grid {
        grid-template-columns: 1fr;
    }

    .f6-ranking-item {
        grid-template-columns: 44px 1fr;
        padding: 17px;
    }

    .f6-ranking-number {
        width: 40px;
        height: 40px;
    }

    .f6-card-image-wrap {
        padding: 14px 14px 0;
    }

    .f6-actions {
        flex-direction: column;
    }

    .f6-button {
        width: 100%;
    }
}

/* =========================================================
   F6 — NÍVEIS DE CARTAS PARA A RETA FINAL
   ========================================================= */

.f6-tier-area {
    margin-top: 28px;
}

.f6-tier-block {
    margin-top: 22px;
    padding: 24px;

    background: #0d182b;
    border: 1px solid #31425d;
    border-radius: 14px;
}

.f6-tier-block:first-child {
    margin-top: 0;
}


/* =========================================================
   CABEÇALHO DA CATEGORIA
   ========================================================= */

.f6-tier-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 22px;
}

.f6-tier-header-content {
    min-width: 0;
}

.f6-tier-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 8px;
    padding: 5px 10px;

    border: 1px solid rgba(255, 196, 0, 0.45);
    border-radius: 999px;

    color: #ffc400;
    background: rgba(255, 196, 0, 0.05);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.f6-tier-header h3 {
    margin: 0 0 8px;

    color: #ffffff;
    font-size: 22px;
}

.f6-tier-header p {
    max-width: 780px;
    margin: 0;

    color: #b8c8de;
    font-size: 14px;
    line-height: 1.65;
}

.f6-tier-range {
    flex: 0 0 auto;

    padding: 8px 12px;

    color: #ffc400;
    background: rgba(255, 196, 0, 0.05);
    border: 1px solid rgba(255, 196, 0, 0.4);
    border-radius: 8px;

    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}


/* =========================================================
   CORES POR CATEGORIA
   ========================================================= */

.f6-tier-block--recommended {
    border-color: rgba(255, 196, 0, 0.6);
}

.f6-tier-block--medium {
    border-color: rgba(91, 156, 255, 0.45);
}

.f6-tier-block--support {
    border-color: rgba(148, 163, 184, 0.35);
}

.f6-tier-block--medium .f6-tier-label,
.f6-tier-block--medium .f6-tier-range {
    color: #78adff;
    border-color: rgba(91, 156, 255, 0.45);
    background: rgba(91, 156, 255, 0.05);
}

.f6-tier-block--support .f6-tier-label,
.f6-tier-block--support .f6-tier-range {
    color: #becbe0;
    border-color: rgba(148, 163, 184, 0.35);
    background: rgba(148, 163, 184, 0.05);
}


/* =========================================================
   GRID DAS CARTAS
   ========================================================= */

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

.f6-tier-card {
    min-width: 0;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    background: #111d33;
    border: 1px solid #31425d;
    border-radius: 11px;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

.f6-tier-card:hover {
    transform: translateY(-3px);
    border-color: #d5aa00;
}

.f6-tier-card-image-wrap {
    padding: 13px 13px 0;
}

.f6-tier-card-image-wrap a {
    display: block;
}

.f6-tier-card-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    border-radius: 6px;
}

.f6-tier-card-body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 14px 15px 17px;
}

.f6-tier-card h4 {
    margin: 0 0 9px;

    color: #ffffff;
    font-size: 15px;
    line-height: 1.35;
}

.f6-tier-card h4 a {
    color: inherit;
    text-decoration: none;
}

.f6-tier-card h4 a:hover {
    color: #ffc400;
}

.f6-tier-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;

    margin-bottom: 12px;

    color: #aec0d8;
    font-size: 12px;
}

.f6-tier-card-stats strong {
    color: #ffc400;
}

.f6-tier-card-purpose {
    flex: 1;

    margin: 0 0 14px;

    color: #aebdd3;
    font-size: 12px;
    line-height: 1.55;
}

.f6-tier-card-link {
    display: inline-flex;
    width: fit-content;

    margin-top: auto;

    color: #ffc400;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.f6-tier-card-link:hover {
    text-decoration: underline;
}


/* =========================================================
   AVISO DAS CARTAS DE APOIO
   ========================================================= */

.f6-tier-warning {
    margin-top: 18px;
    padding: 16px 18px;

    color: #c4d0e2;
    background: rgba(255, 196, 0, 0.035);
    border: 1px solid rgba(255, 196, 0, 0.35);
    border-radius: 9px;

    font-size: 13px;
    line-height: 1.6;
}

.f6-tier-warning strong {
    color: #ffc400;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

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

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .f6-tier-block {
        padding: 18px 15px;
    }

    .f6-tier-header {
        flex-direction: column;
        gap: 10px;
    }

    .f6-tier-range {
        white-space: normal;
    }

    .f6-tier-grid {
        grid-template-columns: 1fr;
    }

    .f6-tier-card {
        max-width: 390px;
        margin: 0 auto;
    }

}

/* =========================================================
   F6 — EQUIPES PARA TERMINAR FORBIDDEN MEMORIES
   Classes exclusivas: f6-team-*
========================================================= */

.f6-teams-area {
    display: flex;
    flex-direction: column;
    gap: 26px;
    margin-top: 28px;
}


/* =========================================================
   BLOCO DA EQUIPE
========================================================= */

.f6-team {
    padding: 24px;

    background: #0d182b;
    border: 1px solid #31425d;
    border-radius: 14px;
}

.f6-team--recommended {
    border-color: rgba(255, 196, 0, 0.65);
}

.f6-team--medium {
    border-color: rgba(82, 147, 255, 0.55);
}

.f6-team--challenge {
    border-color: rgba(148, 163, 184, 0.45);
}


/* =========================================================
   CABEÇALHO
========================================================= */

.f6-team-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 22px;
}

.f6-team-header-content {
    min-width: 0;
}

.f6-team-badge {
    display: inline-flex;
    align-items: center;

    margin-bottom: 8px;
    padding: 6px 11px;

    border: 1px solid rgba(255, 196, 0, 0.5);
    border-radius: 999px;

    color: #ffc400;
    background: rgba(255, 196, 0, 0.06);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.f6-team--medium .f6-team-badge {
    color: #78adff;
    border-color: rgba(82, 147, 255, 0.55);
    background: rgba(82, 147, 255, 0.06);
}

.f6-team--challenge .f6-team-badge {
    color: #c0cada;
    border-color: rgba(148, 163, 184, 0.45);
    background: rgba(148, 163, 184, 0.05);
}

.f6-team-header h3 {
    margin: 0 0 8px;

    color: #ffffff;
    font-size: 24px;
}

.f6-team-header p {
    max-width: 780px;
    margin: 0;

    color: #b8c8de;
    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   ESTRELAS
========================================================= */

.f6-team-rating {
    flex: 0 0 auto;

    padding: 10px 13px;

    text-align: center;

    background: #111d33;
    border: 1px solid #31425d;
    border-radius: 9px;
}

.f6-team-rating small {
    display: block;
    margin-bottom: 4px;

    color: #9eafc8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.f6-team-rating strong {
    color: #ffc400;
    font-size: 17px;
    letter-spacing: 2px;
}


/* =========================================================
   CARTAS DA EQUIPE
========================================================= */

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

.f6-team-card {
    min-width: 0;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    background: #111d33;
    border: 1px solid #31425d;
    border-radius: 11px;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

.f6-team-card:hover {
    transform: translateY(-3px);
    border-color: #d3aa00;
}

.f6-team-card-image-wrap {
    padding: 14px 14px 0;
}

.f6-team-card-image-wrap a {
    display: block;
}

.f6-team-card-image {
    display: block;

    width: 100%;
    height: auto;

    margin: 0 auto;

    object-fit: contain;
    border-radius: 7px;
}

.f6-team-card-body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 15px 16px 18px;
}

.f6-team-card-role {
    display: block;
    margin-bottom: 6px;

    color: #ffc400;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.f6-team--medium .f6-team-card-role {
    color: #78adff;
}

.f6-team--challenge .f6-team-card-role {
    color: #c0cada;
}

.f6-team-card h4 {
    margin: 0 0 10px;

    color: #ffffff;
    font-size: 16px;
    line-height: 1.35;
}

.f6-team-card h4 a {
    color: inherit;
    text-decoration: none;
}

.f6-team-card h4 a:hover {
    color: #ffc400;
}

.f6-team-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;

    margin-bottom: 12px;

    color: #b2c2d9;
    font-size: 12px;
}

.f6-team-card-stats strong {
    color: #ffc400;
}

.f6-team-card-description {
    flex: 1;

    margin: 0 0 15px;

    color: #aebed5;
    font-size: 12px;
    line-height: 1.6;
}

.f6-team-card-link {
    display: inline-flex;
    width: fit-content;

    margin-top: auto;

    color: #ffc400;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.f6-team-card-link:hover {
    text-decoration: underline;
}


/* =========================================================
   RESUMO DA EQUIPE
========================================================= */

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

    margin-top: 20px;
}

.f6-team-summary-item {
    padding: 14px;

    text-align: center;

    background: #111d33;
    border: 1px solid #31425d;
    border-radius: 9px;
}

.f6-team-summary-item small {
    display: block;
    margin-bottom: 6px;

    color: #9dacbf;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.f6-team-summary-item strong {
    color: #ffc400;
    font-size: 13px;
}


/* =========================================================
   AVISO FINAL
========================================================= */

.f6-team-note {
    margin-top: 18px;
    padding: 16px 18px;

    color: #c1cee0;

    background: rgba(255, 196, 0, 0.035);
    border: 1px solid rgba(255, 196, 0, 0.35);
    border-radius: 9px;

    font-size: 13px;
    line-height: 1.6;
}

.f6-team-note strong {
    color: #ffc400;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

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

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

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    .f6-team {
        padding: 18px 15px;
    }

    .f6-team-header {
        flex-direction: column;
        gap: 12px;
    }

    .f6-team-grid {
        grid-template-columns: 1fr;
    }

    .f6-team-card {
        width: 100%;
        max-width: 390px;
        margin: 0 auto;
    }

    .f6-team-summary {
        grid-template-columns: 1fr 1fr;
    }

}
/* =========================================================
   F7 — COMO MONTAR UM DECK FORTE
   Classes exclusivas: f7-*
========================================================= */

.f7-page {
    width: 100%;
}

.f7-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}


/* HERO */

.f7-hero {
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;

    min-height: 300px;
    margin-top: 16px;
    padding: 50px 46px;

    background:
        linear-gradient(
            120deg,
            #172640 0%,
            #17243b 58%,
            #302f2a 100%
        );

    border: 1px solid #31425d;
    border-radius: 18px;
}

.f7-hero-content {
    position: relative;
    z-index: 2;
    max-width: 790px;
}

.f7-eyebrow {
    display: block;
    margin-bottom: 11px;

    color: #ffc400;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.f7-hero h1 {
    margin: 0 0 20px;

    color: #fff;
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1;
}

.f7-hero p {
    max-width: 720px;
    margin: 0;

    color: #b6c6dc;
    font-size: 16px;
    line-height: 1.65;
}

.f7-hero-symbol {
    position: absolute;
    right: 65px;
    top: 50%;

    transform: translateY(-50%);

    color: rgba(255, 196, 0, .14);
    font-size: 125px;
}


/* SEÇÕES */

.f7-section {
    margin-top: 24px;
    padding: 28px;

    background: #111d33;
    border: 1px solid #2b3d59;
    border-radius: 16px;
}

.f7-section h2 {
    margin: 0 0 16px;

    color: #fff;
    font-size: 27px;
}

.f7-section p {
    color: #b9c8df;
    line-height: 1.7;
}


/* NOTA */

.f7-note {
    margin-top: 20px;
    padding: 17px 19px;

    color: #c9d5e5;

    background: rgba(255, 196, 0, .045);
    border: 1px solid rgba(255, 196, 0, .45);
    border-radius: 9px;
}

.f7-note strong {
    color: #ffc400;
}


/* PRINCÍPIOS */

.f7-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;

    margin-top: 22px;
}

.f7-principle {
    padding: 20px;

    background: #0d182b;
    border: 1px solid #31425d;
    border-radius: 11px;
}

.f7-principle > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;
    margin-bottom: 14px;

    color: #ffc400;
    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 11px;
    font-weight: 900;
}

.f7-principle h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 16px;
}

.f7-principle p {
    margin: 0;
    font-size: 13px;
}


/* CAMADAS */

.f7-layers {
    display: flex;
    flex-direction: column;
    gap: 14px;

    margin-top: 22px;
}

.f7-layer {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 17px;

    padding: 20px;

    background: #0d182b;
    border: 1px solid #31425d;
    border-radius: 11px;
}

.f7-layer--power {
    border-color: rgba(255, 196, 0, .55);
}

.f7-layer-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    color: #ffc400;
    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 12px;
    font-weight: 900;
}

.f7-layer-label {
    color: #ffc400;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.f7-layer h3 {
    margin: 4px 0 6px;
    color: #fff;
}

.f7-layer p {
    margin: 0;
    font-size: 13px;
}


/* CHECK CARDS */

.f7-check-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;

    margin-top: 22px;
}

.f7-check-card {
    padding: 18px;

    background: #0d182b;
    border: 1px solid #31425d;
    border-radius: 10px;
}

.f7-check-card strong {
    color: #ffc400;
}

.f7-check-card p {
    margin: 9px 0 0;
    font-size: 12px;
}


/* BOTÕES */

.f7-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;

    margin-top: 20px;
}

.f7-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 11px 15px;

    color: #ffc400;
    background: #0d182b;
    border: 1px solid #31425d;
    border-radius: 8px;

    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.f7-button:hover {
    border-color: #ffc400;
}


/* EXEMPLO DE FUSÃO */

.f7-example {
    margin-top: 22px;
    padding: 22px;

    background: #0d182b;
    border: 1px solid #31425d;
    border-radius: 11px;
}

.f7-example-label {
    display: block;
    margin-bottom: 15px;

    color: #ffc400;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}

.f7-example-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;

    margin-bottom: 16px;
}

.f7-example-flow div {
    padding: 12px 16px;

    color: #fff;
    background: #111d33;
    border: 1px solid #31425d;
    border-radius: 8px;

    font-weight: 700;
}

.f7-example-flow b {
    color: #ffc400;
    font-size: 20px;
}

.f7-example-flow .f7-example-result {
    color: #ffc400;
    border-color: rgba(255, 196, 0, .55);
}

.f7-example > p {
    margin-bottom: 0;
    text-align: center;
}


/* EQUIPAMENTO */

.f7-math-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 22px;
    padding: 22px;

    background: #0d182b;
    border: 1px solid #31425d;
    border-radius: 11px;
}

.f7-math-box > div {
    min-width: 150px;
    padding: 15px;

    text-align: center;

    background: #111d33;
    border: 1px solid #31425d;
    border-radius: 9px;
}

.f7-math-box small {
    display: block;
    margin-bottom: 6px;

    color: #9fafc6;
    font-size: 9px;
    font-weight: 800;
}

.f7-math-box strong {
    color: #fff;
    font-size: 19px;
}

.f7-math-box > span {
    color: #ffc400;
    font-size: 22px;
    font-weight: 900;
}

.f7-math-box .f7-math-result {
    border-color: rgba(255, 196, 0, .55);
}

.f7-math-box .f7-math-result strong {
    color: #ffc400;
}


/* GUARDIAN STAR */

.f7-star-example {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;

    margin-top: 22px;
    padding: 22px;

    background: #0d182b;
    border: 1px solid #31425d;
    border-radius: 11px;
}

.f7-star-example > div {
    min-width: 150px;
    text-align: center;
}

.f7-star-example small {
    display: block;
    margin-bottom: 5px;

    color: #9fafc6;
    font-size: 9px;
    font-weight: 800;
}

.f7-star-example strong {
    color: #ffc400;
    font-size: 20px;
}

.f7-star-example > span {
    color: #ffc400;
    font-size: 25px;
    font-weight: 900;
}

.f7-star-example .f7-star-bonus {
    padding: 8px 13px;

    border: 1px solid #ffc400;
    border-radius: 8px;

    font-size: 17px;
}


/* ERROS */

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

    margin-top: 22px;
}

.f7-errors article {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;

    padding: 18px;

    background: #0d182b;
    border: 1px solid #31425d;
    border-radius: 10px;
}

.f7-errors article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    color: #ffc400;
    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 11px;
    font-weight: 900;
}

.f7-errors h3 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 15px;
}

.f7-errors p {
    margin: 0;
    font-size: 12px;
}


/* CHECKLIST */

.f7-checklist {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: 20px;
}

.f7-checklist > div {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 14px 16px;

    background: #0d182b;
    border: 1px solid #31425d;
    border-radius: 9px;
}

.f7-checklist span {
    color: #ffc400;
    font-weight: 900;
}

.f7-checklist p {
    margin: 0;
    font-size: 13px;
}


/* FINAL */

.f7-final {
    margin-top: 20px;
    padding: 22px;

    text-align: center;

    background: rgba(255, 196, 0, .045);
    border: 1px solid rgba(255, 196, 0, .55);
    border-radius: 11px;
}

.f7-final small {
    display: block;
    margin-bottom: 6px;

    color: #aebdd2;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.f7-final strong {
    display: block;

    color: #ffc400;
    font-size: 23px;
}

.f7-final p {
    max-width: 700px;
    margin: 10px auto 0;
}


/* GUIAS RELACIONADOS */

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

    margin-top: 22px;
}

.f7-related > a {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 24px;
    gap: 13px;
    align-items: center;

    padding: 17px;

    color: inherit;
    text-decoration: none;

    background: #0d182b;
    border: 1px solid #31425d;
    border-radius: 10px;
}

.f7-related > a:hover {
    border-color: #ffc400;
}

.f7-related > a > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    color: #ffc400;
    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 10px;
    font-weight: 900;
}

.f7-related strong {
    display: block;
    margin-bottom: 3px;

    color: #fff;
    font-size: 13px;
}

.f7-related small {
    display: block;

    color: #aebed5;
    font-size: 11px;
}

.f7-related b {
    color: #ffc400;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    .f7-principles {
        grid-template-columns: 1fr;
    }

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

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    .f7-container {
        width: min(100% - 20px, 1180px);
    }

    .f7-hero {
        min-height: auto;
        padding: 34px 22px;
    }

    .f7-hero h1 {
        font-size: 37px;
    }

    .f7-hero-symbol {
        right: 15px;
        top: 30px;

        transform: none;

        font-size: 65px;
    }

    .f7-section {
        margin-top: 16px;
        padding: 20px 16px;
        border-radius: 12px;
    }

    .f7-check-grid,
    .f7-errors,
    .f7-related {
        grid-template-columns: 1fr;
    }

    .f7-layer {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
    }

    .f7-layer-number {
        width: 38px;
        height: 38px;
    }

    .f7-actions {
        flex-direction: column;
    }

    .f7-button {
        width: 100%;
    }

    .f7-math-box {
        flex-direction: column;
    }

    .f7-math-box > div {
        width: 100%;
    }

    .f7-star-example {
        flex-direction: column;
    }

}
/* =========================================================
   F7 — EXEMPLOS VISUAIS
========================================================= */


/* =========================================================
   MONSTRO PRINCIPAL
========================================================= */

.f7-visual-feature {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 30px;
    align-items: center;

    margin-top: 24px;
    padding: 24px;

    background: #0d182b;
    border: 1px solid rgba(255, 196, 0, .45);
    border-radius: 13px;
}

.f7-visual-image {
    display: flex;
    justify-content: center;
}

.f7-visual-image a {
    display: block;
}

.f7-visual-image img {
    display: block;

    width: 100%;
    max-width: 280px;
    height: auto;

    margin: 0 auto;

    border-radius: 7px;
}

.f7-visual-content h3 {
    margin: 5px 0 13px;

    color: #fff;
    font-size: 24px;
}

.f7-visual-label {
    display: block;
    margin-bottom: 7px;

    color: #ffc400;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.f7-visual-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;

    margin-bottom: 15px;

    color: #b7c7dd;
    font-size: 13px;
}

.f7-visual-stats strong {
    color: #ffc400;
}


/* =========================================================
   FUSÃO VISUAL
========================================================= */

.f7-fusion-example {
    margin-top: 24px;
    padding: 24px;

    background: #0d182b;
    border: 1px solid #31425d;
    border-radius: 13px;
}

.f7-fusion-example > h3 {
    margin: 4px 0 8px;

    color: #fff;
    font-size: 22px;
}

.f7-fusion-example > p {
    margin-top: 0;
}

.f7-fusion-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        50px
        minmax(0, 1fr)
        50px
        minmax(0, 1fr);

    gap: 14px;
    align-items: center;

    margin-top: 24px;
}

.f7-fusion-card {
    min-width: 0;

    padding: 14px;

    text-align: center;

    background: #111d33;
    border: 1px solid #31425d;
    border-radius: 10px;
}

.f7-fusion-card--result {
    border-color: rgba(255, 196, 0, .65);
}

.f7-fusion-card a {
    display: block;
}

.f7-fusion-card img {
    display: block;

    width: 100%;
    max-width: 230px;
    height: auto;

    margin: 0 auto 13px;

    border-radius: 6px;
}

.f7-fusion-card h4 {
    min-height: 42px;
    margin: 0 0 8px;

    color: #fff;
    font-size: 14px;
    line-height: 1.4;
}

.f7-fusion-card > span {
    color: #aebed5;
    font-size: 11px;
}

.f7-fusion-card > span strong {
    margin-left: 4px;
    color: #ffc400;
}

.f7-fusion-symbol {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    margin: auto;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 22px;
    font-weight: 900;
}


/* =========================================================
   EQUIPAMENTO / SUPORTE
========================================================= */

.f7-support-example {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 28px;
    align-items: center;

    margin-top: 24px;
    padding: 22px;

    background: #0d182b;
    border: 1px solid #31425d;
    border-radius: 12px;
}

.f7-support-image {
    display: flex;
    justify-content: center;
}

.f7-support-image a {
    display: block;
}

.f7-support-image img {
    display: block;

    width: 100%;
    max-width: 225px;
    height: auto;

    margin: 0 auto;

    border-radius: 7px;
}

.f7-support-content h3 {
    margin: 5px 0 12px;

    color: #fff;
    font-size: 22px;
}

.f7-support-content p {
    font-size: 13px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .f7-visual-feature {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .f7-fusion-grid {
        grid-template-columns:
            minmax(0, 1fr)
            40px
            minmax(0, 1fr)
            40px
            minmax(0, 1fr);
    }

    .f7-support-example {
        grid-template-columns: 210px minmax(0, 1fr);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    .f7-visual-feature {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .f7-visual-image img {
        max-width: 270px;
    }


    .f7-fusion-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .f7-fusion-card {
        width: 100%;
        max-width: 330px;

        margin: 0 auto;
    }

    .f7-fusion-card img {
        max-width: 260px;
    }

    .f7-fusion-symbol {
        width: 42px;
        height: 42px;
    }


    .f7-support-example {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .f7-support-image img {
        max-width: 250px;
    }

}
/* =========================================================
   F8 — COMO VENCER OS HIGH MAGES
   Classes exclusivas: f8-*
========================================================= */

.f8-page {
    width: 100%;
}

.f8-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.f8-hero {
    position: relative;
    overflow: hidden;

    min-height: 310px;
    margin-top: 16px;
    padding: 50px 46px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            120deg,
            #172640 0%,
            #18253d 55%,
            #342e23 100%
        );

    border: 1px solid #31425d;
    border-radius: 18px;
}

.f8-hero-content {
    position: relative;
    z-index: 2;

    max-width: 800px;
}

.f8-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: #ffc400;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.f8-hero h1 {
    margin: 0 0 20px;

    color: #fff;

    font-size: clamp(38px, 5vw, 64px);
    line-height: 1;
}

.f8-hero p {
    max-width: 740px;
    margin: 0;

    color: #b8c8de;

    font-size: 16px;
    line-height: 1.65;
}

.f8-hero-symbol {
    position: absolute;

    right: 65px;
    top: 50%;

    transform: translateY(-50%);

    color: rgba(255, 196, 0, .13);

    font-size: 130px;
}


/* =========================================================
   SEÇÕES
========================================================= */

.f8-section {
    margin-top: 24px;
    padding: 28px;

    background: #111d33;

    border: 1px solid #2b3d59;
    border-radius: 16px;
}

.f8-section h2 {
    margin: 0 0 16px;

    color: #fff;
    font-size: 27px;
}

.f8-section > p {
    color: #b9c8df;
    line-height: 1.7;
}


/* =========================================================
   ALERTA
========================================================= */

.f8-alert {
    margin-top: 20px;
    padding: 17px 19px;

    color: #c7d3e4;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .42);
    border-radius: 9px;

    line-height: 1.6;
}

.f8-alert strong {
    color: #ffc400;
}


/* =========================================================
   HIGH MAGES
========================================================= */

.f8-mage-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

    margin-top: 24px;
}

.f8-mage-card {
    position: relative;

    padding: 22px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 12px;
}

.f8-mage-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.f8-mage-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 15px;
}

.f8-mage-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 11px;
    font-weight: 900;
}

.f8-mage-icon {
    color: rgba(255, 196, 0, .65);
    font-size: 30px;
}

.f8-mage-temple {
    display: block;

    margin-bottom: 5px;

    color: #ffc400;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;

    text-transform: uppercase;
}

.f8-mage-card h3 {
    margin: 0 0 5px;

    color: #fff;
    font-size: 20px;
}

.f8-mage-element {
    display: block;

    margin-bottom: 12px;

    color: #9fb0c8;

    font-size: 11px;
}

.f8-mage-card > p {
    margin: 0;

    color: #b6c5da;

    font-size: 13px;
    line-height: 1.65;
}

.f8-mage-strategy {
    margin-top: 16px;
    padding: 14px;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 8px;
}

.f8-mage-strategy strong {
    display: block;

    margin-bottom: 5px;

    color: #ffc400;

    font-size: 10px;
    text-transform: uppercase;
}

.f8-mage-strategy span {
    color: #b8c8dd;

    font-size: 12px;
    line-height: 1.55;
}


/* =========================================================
   PASSOS
========================================================= */

.f8-steps {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f8-steps article {
    display: grid;

    grid-template-columns:
        45px minmax(0, 1fr);

    gap: 14px;

    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f8-steps article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 10px;
    font-weight: 900;
}

.f8-steps h3 {
    margin: 0 0 6px;

    color: #fff;
    font-size: 15px;
}

.f8-steps p {
    margin: 0;

    color: #b4c4da;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   CARTAS COM IMAGENS
========================================================= */

.f8-card-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

    margin-top: 24px;
}

.f8-card {
    min-width: 0;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 11px;

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.f8-card:hover {
    transform: translateY(-3px);

    border-color: #ffc400;
}

.f8-card-image {
    padding: 14px 14px 0;
}

.f8-card-image a {
    display: block;
}

.f8-card-image img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0 auto;

    border-radius: 7px;
}

.f8-card-body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 15px 16px 18px;
}

.f8-card-role {
    display: block;

    margin-bottom: 6px;

    color: #ffc400;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;

    text-transform: uppercase;
}

.f8-card h3 {
    margin: 0 0 9px;

    color: #fff;

    font-size: 15px;
    line-height: 1.4;
}

.f8-card h3 a {
    color: inherit;
    text-decoration: none;
}

.f8-card h3 a:hover {
    color: #ffc400;
}

.f8-card-stats {
    display: flex;
    flex-wrap: wrap;

    gap: 7px 13px;

    margin-bottom: 11px;

    color: #adbed5;

    font-size: 11px;
}

.f8-card-stats strong {
    color: #ffc400;
}

.f8-card-body p {
    flex: 1;

    margin: 0 0 14px;

    color: #aebed4;

    font-size: 12px;
    line-height: 1.55;
}

.f8-card-link {
    width: fit-content;
    margin-top: auto;

    color: #ffc400;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.f8-card-link:hover {
    text-decoration: underline;
}


/* =========================================================
   FLUXO DE PODER
========================================================= */

.f8-power-flow {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 24px;
    padding: 22px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 11px;
}

.f8-power-item {
    min-width: 155px;

    padding: 15px;

    text-align: center;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 9px;
}

.f8-power-item small {
    display: block;

    margin-bottom: 5px;

    color: #96a8c1;

    font-size: 8px;
    font-weight: 900;
}

.f8-power-item strong {
    display: block;

    margin-bottom: 4px;

    color: #fff;

    font-size: 16px;
}

.f8-power-item span {
    color: #ffc400;

    font-size: 12px;
    font-weight: 800;
}

.f8-power-item--result {
    border-color: rgba(255, 196, 0, .65);
}

.f8-power-item--result strong {
    color: #ffc400;

    font-size: 22px;
}

.f8-power-arrow {
    color: #ffc400;

    font-size: 22px;
    font-weight: 900;
}

.f8-center-text {
    max-width: 780px;

    margin: 18px auto 0 !important;

    text-align: center;
}


/* =========================================================
   MELHORIAS
========================================================= */

.f8-improve-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f8-improve-grid article {
    padding: 20px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f8-improve-grid article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 12px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 10px;
    font-weight: 900;
}

.f8-improve-grid h3 {
    margin: 0 0 7px;

    color: #fff;
    font-size: 16px;
}

.f8-improve-grid p {
    margin: 0 0 12px;

    color: #b4c4d9;

    font-size: 12px;
    line-height: 1.6;
}

.f8-improve-grid a {
    color: #ffc400;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.f8-improve-grid a:hover {
    text-decoration: underline;
}


/* =========================================================
   CHECKLIST
========================================================= */

.f8-checklist {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-top: 20px;
}

.f8-checklist > div {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    padding: 14px 16px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 9px;
}

.f8-checklist span {
    color: #ffc400;
    font-weight: 900;
}

.f8-checklist p {
    margin: 0;

    color: #b8c8dd;

    font-size: 13px;
    line-height: 1.55;
}


/* =========================================================
   FINAL
========================================================= */

.f8-final-box {
    margin-top: 20px;
    padding: 23px;

    text-align: center;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .55);
    border-radius: 11px;
}

.f8-final-box > span {
    display: block;

    margin-bottom: 6px;

    color: #a9b8cd;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.f8-final-box strong {
    display: block;

    color: #ffc400;

    font-size: 22px;
}

.f8-final-box p {
    max-width: 720px;

    margin: 10px auto 0;

    color: #bac9dd;

    line-height: 1.6;
}


/* =========================================================
   GUIAS RELACIONADOS
========================================================= */

.f8-related {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f8-related > a {
    display: grid;

    grid-template-columns:
        44px minmax(0, 1fr) 24px;

    gap: 13px;
    align-items: center;

    padding: 17px;

    color: inherit;
    text-decoration: none;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f8-related > a:hover {
    border-color: #ffc400;
}

.f8-related > a > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 10px;
    font-weight: 900;
}

.f8-related strong {
    display: block;

    margin-bottom: 3px;

    color: #fff;
    font-size: 13px;
}

.f8-related small {
    display: block;

    color: #aebed5;
    font-size: 11px;
}

.f8-related b {
    color: #ffc400;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

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

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    .f8-container {
        width: min(100% - 20px, 1180px);
    }


    .f8-hero {
        min-height: auto;

        padding: 34px 22px;
    }

    .f8-hero h1 {
        font-size: 37px;
    }

    .f8-hero-symbol {
        right: 15px;
        top: 25px;

        transform: none;

        font-size: 65px;
    }


    .f8-section {
        margin-top: 16px;

        padding: 20px 16px;

        border-radius: 12px;
    }


    .f8-mage-grid,
    .f8-steps,
    .f8-card-grid,
    .f8-improve-grid,
    .f8-related {
        grid-template-columns: 1fr;
    }


    .f8-mage-card:last-child:nth-child(odd) {
        grid-column: auto;
    }


    .f8-card {
        width: 100%;
        max-width: 390px;

        margin: 0 auto;
    }


    .f8-power-flow {
        flex-direction: column;
    }

    .f8-power-item {
        width: 100%;
    }

}
/* =========================================================
   F8 — HIGH MAGES COM IMAGENS
========================================================= */


/* CARD */

.f8-mage-card {
    display: grid;

    grid-template-columns:
        185px minmax(0, 1fr);

    gap: 22px;

    align-items: stretch;

    padding: 18px;

    overflow: hidden;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 12px;

    transition:
        transform .2s ease,
        border-color .2s ease;
}


.f8-mage-card:hover {
    transform: translateY(-2px);

    border-color: rgba(
        255,
        196,
        0,
        .65
    );
}


/* ÚLTIMO HIGH MAGE */

.f8-mage-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}


/* =========================================================
   IMAGEM
========================================================= */

.f8-mage-image-wrap {
    position: relative;

    display: flex;

    align-items: flex-end;
    justify-content: center;

    min-height: 270px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 196, 0, .10),
            transparent 65%
        ),
        #111d33;

    border: 1px solid #31425d;
    border-radius: 10px;
}


.f8-mage-image-link {
    display: flex;

    width: 100%;
    height: 100%;

    align-items: flex-end;
    justify-content: center;

    text-decoration: none;
}


.f8-mage-image {
    display: block;

    width: 100%;
    max-width: 175px;

    height: 255px;

    object-fit: contain;

    object-position:
        center bottom;

    transition:
        transform .25s ease;
}


.f8-mage-card:hover
.f8-mage-image {

    transform:
        scale(1.035);

}


/* FALLBACK */

.f8-mage-image-wrap--empty {
    align-items: center;
}


.f8-mage-image-wrap--empty span {
    color:
        rgba(
            255,
            196,
            0,
            .28
        );

    font-size: 70px;
}


/* =========================================================
   CONTEÚDO
========================================================= */

.f8-mage-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.f8-mage-content
.f8-mage-top {

    margin-bottom: 12px;

}


.f8-mage-content h3 {
    margin:
        0 0 5px;

    color: #fff;

    font-size: 21px;
}


.f8-mage-content h3 a {
    color: inherit;

    text-decoration: none;
}


.f8-mage-content h3 a:hover {
    color: #ffc400;
}


.f8-mage-content > p {
    margin:
        0 0 14px;

    color: #b6c5da;

    font-size: 13px;
    line-height: 1.65;
}


/* =========================================================
   ESTRATÉGIA
========================================================= */

.f8-mage-content
.f8-mage-strategy {

    margin-top: auto;

}


/* =========================================================
   LINK DO DUELISTA
========================================================= */

.f8-mage-profile {
    display: inline-flex;

    width: fit-content;

    margin-top: 13px;

    color: #ffc400;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


.f8-mage-profile:hover {
    text-decoration: underline;
}


/* =========================================================
   HIGH MAGE FINAL EM TELA GRANDE
========================================================= */

.f8-mage-card:last-child:nth-child(odd)
.f8-mage-image-wrap {

    min-height: 290px;

}


.f8-mage-card:last-child:nth-child(odd)
.f8-mage-image {

    max-width: 190px;

    height: 275px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .f8-mage-card {
        grid-template-columns:
            150px minmax(0, 1fr);

        gap: 17px;
    }


    .f8-mage-image-wrap {
        min-height: 240px;
    }


    .f8-mage-image {
        max-width: 145px;

        height: 225px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    .f8-mage-card {
        grid-template-columns: 1fr;

        gap: 16px;

        padding: 16px;
    }


    .f8-mage-card:last-child:nth-child(odd) {
        grid-column: auto;
    }


    .f8-mage-image-wrap,
    .f8-mage-card:last-child:nth-child(odd)
    .f8-mage-image-wrap {

        width: 100%;

        min-height: 250px;

    }


    .f8-mage-image,
    .f8-mage-card:last-child:nth-child(odd)
    .f8-mage-image {

        width: 100%;

        max-width: 190px;

        height: 240px;

    }


    .f8-mage-content h3 {
        font-size: 20px;
    }

}
/* =========================================================
   F8 — AJUSTE FINAL DAS IMAGENS DOS HIGH MAGES
========================================================= */

.f8-mage-image-wrap {
    min-height: 215px;
}

.f8-mage-image {
    max-width: 165px;
    height: 200px;
    object-fit: contain;
    object-position: center bottom;
}

/* Evita o último card ficar exageradamente largo visualmente */
.f8-mage-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.f8-mage-card:last-child:nth-child(odd) .f8-mage-image-wrap {
    min-height: 215px;
}

.f8-mage-card:last-child:nth-child(odd) .f8-mage-image {
    max-width: 165px;
    height: 200px;
}

/* MOBILE */

@media (max-width: 680px) {

    .f8-mage-image-wrap,
    .f8-mage-card:last-child:nth-child(odd) .f8-mage-image-wrap {
        min-height: 205px;
    }

    .f8-mage-image,
    .f8-mage-card:last-child:nth-child(odd) .f8-mage-image {
        max-width: 155px;
        height: 190px;
    }

}
/* =========================================================
   F8 — AJUSTE FINAL DOS RETRATOS DOS HIGH MAGES
   ========================================================= */

.f8-mage-image-wrap {
    min-height: 0 !important;
    height: 210px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 12px !important;
}

.f8-mage-image-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;
}

/* AUMENTA O RETRATO */

.f8-mage-image {
    display: block !important;

    width: 145px !important;
    max-width: 145px !important;

    height: 145px !important;
    max-height: 145px !important;

    object-fit: contain !important;
    object-position: center !important;

    margin: auto !important;

    image-rendering: auto;
}


/* =========================================================
   ÚLTIMO HIGH MAGE
   ========================================================= */

.f8-mage-card:last-child:nth-child(odd) .f8-mage-image-wrap {
    min-height: 0 !important;
    height: 210px !important;
}

.f8-mage-card:last-child:nth-child(odd) .f8-mage-image {
    width: 145px !important;
    max-width: 145px !important;

    height: 145px !important;
    max-height: 145px !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .f8-mage-image {
        width: 135px !important;
        max-width: 135px !important;

        height: 135px !important;
        max-height: 135px !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .f8-mage-image-wrap,
    .f8-mage-card:last-child:nth-child(odd) .f8-mage-image-wrap {
        height: 190px !important;
    }

    .f8-mage-image,
    .f8-mage-card:last-child:nth-child(odd) .f8-mage-image {
        width: 140px !important;
        max-width: 140px !important;

        height: 140px !important;
        max-height: 140px !important;
    }

}
/* =========================================================
   F8 — AJUSTE FINAL DOS RETRATOS
   ========================================================= */

.f8-mage-image {
    width: 160px !important;
    max-width: 160px !important;

    height: 160px !important;
    max-height: 160px !important;

    object-fit: contain !important;
    object-position: center !important;
}

/* Kepura também mantém exatamente o mesmo tamanho */

.f8-mage-card:last-child:nth-child(odd) .f8-mage-image {
    width: 160px !important;
    max-width: 160px !important;

    height: 160px !important;
    max-height: 160px !important;
}


/* TABLET */

@media (max-width: 900px) {

    .f8-mage-image,
    .f8-mage-card:last-child:nth-child(odd) .f8-mage-image {
        width: 150px !important;
        max-width: 150px !important;

        height: 150px !important;
        max-height: 150px !important;
    }

}


/* MOBILE */

@media (max-width: 680px) {

    .f8-mage-image,
    .f8-mage-card:last-child:nth-child(odd) .f8-mage-image {
        width: 145px !important;
        max-width: 145px !important;

        height: 145px !important;
        max-height: 145px !important;
    }

}

/* =========================================================
   F9 — COMO VENCER SETO 3RD
========================================================= */

.f9-page {
    width: 100%;
}

.f9-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}


/* HERO */

.f9-hero {
    position: relative;
    overflow: hidden;

    min-height: 310px;
    margin-top: 16px;
    padding: 50px 46px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            120deg,
            #172640 0%,
            #19263f 57%,
            #352e23 100%
        );

    border: 1px solid #31425d;
    border-radius: 18px;
}

.f9-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.f9-eyebrow {
    display: block;
    margin-bottom: 10px;

    color: #ffc400;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.f9-hero h1 {
    margin: 0 0 20px;

    color: #fff;

    font-size: clamp(38px, 5vw, 64px);
    line-height: 1;
}

.f9-hero p {
    max-width: 740px;
    margin: 0;

    color: #b8c8de;
    font-size: 16px;
    line-height: 1.65;
}

.f9-hero-symbol {
    position: absolute;

    right: 65px;
    top: 50%;

    transform: translateY(-50%);

    color: rgba(255, 196, 0, .13);

    font-size: 130px;
}


/* SEÇÕES */

.f9-section {
    margin-top: 24px;
    padding: 28px;

    background: #111d33;

    border: 1px solid #2b3d59;
    border-radius: 16px;
}

.f9-section h2 {
    margin: 0 0 16px;

    color: #fff;
    font-size: 27px;
}

.f9-section > p {
    color: #b9c8df;
    line-height: 1.7;
}


/* BOSS */

.f9-boss-profile {
    display: grid;

    grid-template-columns:
        220px minmax(0, 1fr);

    gap: 28px;

    align-items: center;

    margin-top: 22px;
    padding: 22px;

    background: #0d182b;

    border: 1px solid rgba(255, 196, 0, .55);
    border-radius: 12px;
}

.f9-boss-image {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 220px;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f9-boss-image img {
    display: block;

    width: 170px;
    height: 170px;

    object-fit: contain;
}

.f9-boss-label {
    color: #ffc400;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.f9-boss-content h3 {
    margin: 5px 0 12px;

    color: #fff;
    font-size: 25px;
}

.f9-boss-content p {
    color: #b8c8dc;
    line-height: 1.65;
}


/* BOTÃO */

.f9-button {
    display: inline-flex;

    padding: 10px 14px;

    color: #ffc400;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 8px;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.f9-button:hover {
    border-color: #ffc400;
}


/* OBJETIVOS */

.f9-objectives {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f9-objectives article {
    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f9-objectives article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 13px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 10px;
    font-weight: 900;
}

.f9-objectives h3 {
    margin: 0 0 7px;

    color: #fff;
    font-size: 15px;
}

.f9-objectives p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* CARTAS */

.f9-card-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

    margin-top: 24px;
}

.f9-card {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 11px;
}

.f9-card:hover {
    border-color: #ffc400;
}

.f9-card-image {
    padding: 14px 14px 0;
}

.f9-card-image img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0 auto;

    border-radius: 7px;
}

.f9-card-body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 15px 16px 18px;
}

.f9-card-role {
    margin-bottom: 6px;

    color: #ffc400;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;

    text-transform: uppercase;
}

.f9-card h3 {
    margin: 0 0 9px;

    font-size: 15px;
}

.f9-card h3 a {
    color: #fff;
    text-decoration: none;
}

.f9-card h3 a:hover {
    color: #ffc400;
}

.f9-card-stats {
    display: flex;
    flex-wrap: wrap;

    gap: 7px 13px;

    margin-bottom: 11px;

    color: #adbed5;

    font-size: 11px;
}

.f9-card-stats strong {
    color: #ffc400;
}

.f9-card-body p {
    flex: 1;

    color: #aebed4;

    font-size: 12px;
    line-height: 1.55;
}

.f9-card-link {
    width: fit-content;
    margin-top: auto;

    color: #ffc400;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}


/* PLANO */

.f9-battle-plan {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f9-battle-plan article {
    display: grid;

    grid-template-columns:
        42px minmax(0, 1fr);

    gap: 14px;

    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f9-battle-plan article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 10px;
    font-weight: 900;
}

.f9-battle-plan h3 {
    margin: 0 0 6px;

    color: #fff;
    font-size: 15px;
}

.f9-battle-plan p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* EXEMPLO DE PODER */

.f9-power-example {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 23px;
    padding: 22px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 11px;
}

.f9-power-example > div {
    min-width: 150px;

    padding: 15px;

    text-align: center;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 9px;
}

.f9-power-example small {
    display: block;

    margin-bottom: 6px;

    color: #9aabc2;

    font-size: 8px;
    font-weight: 900;
}

.f9-power-example strong {
    display: block;

    color: #fff;

    font-size: 20px;
}

.f9-power-example span {
    color: #aebdd2;

    font-size: 10px;
}

.f9-power-example > b {
    color: #ffc400;

    font-size: 22px;
}

.f9-power-example .f9-power-result {
    border-color: rgba(255, 196, 0, .6);
}

.f9-power-result strong {
    color: #ffc400;
}


/* ALERTA */

.f9-alert {
    margin-top: 18px;
    padding: 16px 18px;

    color: #c5d1e1;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .42);
    border-radius: 9px;

    line-height: 1.6;
}

.f9-alert strong {
    color: #ffc400;
}


/* MELHORIAS */

.f9-improvement-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f9-improvement-grid article {
    padding: 19px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f9-improvement-grid article > span {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 12px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 10px;
    font-weight: 900;
}

.f9-improvement-grid h3 {
    margin: 0 0 7px;

    color: #fff;
    font-size: 15px;
}

.f9-improvement-grid p {
    color: #b5c5d9;

    font-size: 12px;
    line-height: 1.6;
}

.f9-improvement-grid a {
    color: #ffc400;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


/* CHECKLIST */

.f9-checklist {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-top: 20px;
}

.f9-checklist > div {
    display: flex;

    gap: 12px;

    padding: 14px 16px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 9px;
}

.f9-checklist span {
    color: #ffc400;
    font-weight: 900;
}

.f9-checklist p {
    margin: 0;

    color: #b8c8dd;

    font-size: 13px;
}


/* FINAL */

.f9-final {
    margin-top: 20px;
    padding: 23px;

    text-align: center;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .55);
    border-radius: 11px;
}

.f9-final small {
    display: block;

    margin-bottom: 6px;

    color: #a9b8cd;

    font-size: 9px;
    font-weight: 900;
}

.f9-final strong {
    display: block;

    color: #ffc400;

    font-size: 22px;
}

.f9-final p {
    max-width: 720px;

    margin: 10px auto 0;

    color: #bac9dd;

    line-height: 1.6;
}


/* RELACIONADOS */

.f9-related {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f9-related > a {
    display: grid;

    grid-template-columns:
        44px minmax(0, 1fr) 24px;

    gap: 13px;
    align-items: center;

    padding: 17px;

    text-decoration: none;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f9-related > a:hover {
    border-color: #ffc400;
}

.f9-related > a > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 10px;
    font-weight: 900;
}

.f9-related strong {
    display: block;

    margin-bottom: 3px;

    color: #fff;
    font-size: 13px;
}

.f9-related small {
    color: #aebed5;
    font-size: 11px;
}

.f9-related b {
    color: #ffc400;
}


/* TABLET */

@media (max-width: 980px) {

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

}


/* MOBILE */

@media (max-width: 680px) {

    .f9-container {
        width: min(100% - 20px, 1180px);
    }

    .f9-hero {
        min-height: auto;
        padding: 34px 22px;
    }

    .f9-hero h1 {
        font-size: 37px;
    }

    .f9-hero-symbol {
        right: 15px;
        top: 25px;

        transform: none;

        font-size: 65px;
    }

    .f9-section {
        margin-top: 16px;
        padding: 20px 16px;
    }

    .f9-boss-profile {
        grid-template-columns: 1fr;
    }

    .f9-boss-image {
        height: 200px;
    }

    .f9-objectives,
    .f9-card-grid,
    .f9-battle-plan,
    .f9-improvement-grid,
    .f9-related {
        grid-template-columns: 1fr;
    }

    .f9-card {
        max-width: 390px;
        margin: 0 auto;
    }

    .f9-power-example {
        flex-direction: column;
    }

    .f9-power-example > div {
        width: 100%;
    }

}

/* =========================================================
   F10 — COMO VENCER HEISHIN
========================================================= */

.f10-page {
    width: 100%;
}

.f10-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}


/* HERO */

.f10-hero {
    position: relative;
    overflow: hidden;

    min-height: 310px;
    margin-top: 16px;
    padding: 50px 46px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            120deg,
            #172640 0%,
            #19263f 57%,
            #352e23 100%
        );

    border: 1px solid #31425d;
    border-radius: 18px;
}

.f10-hero-content {
    position: relative;
    z-index: 2;

    max-width: 800px;
}

.f10-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: #ffc400;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.f10-hero h1 {
    margin: 0 0 20px;

    color: #fff;

    font-size: clamp(38px, 5vw, 64px);
    line-height: 1;
}

.f10-hero p {
    max-width: 740px;
    margin: 0;

    color: #b8c8de;

    font-size: 16px;
    line-height: 1.65;
}

.f10-hero-symbol {
    position: absolute;

    right: 65px;
    top: 50%;

    transform: translateY(-50%);

    color: rgba(255, 196, 0, .13);

    font-size: 130px;
}


/* SEÇÕES */

.f10-section {
    margin-top: 24px;
    padding: 28px;

    background: #111d33;

    border: 1px solid #2b3d59;
    border-radius: 16px;
}

.f10-section h2 {
    margin: 0 0 16px;

    color: #fff;

    font-size: 27px;
}

.f10-section > p {
    color: #b9c8df;

    line-height: 1.7;
}


/* PERFIL */

.f10-boss-profile {
    display: grid;

    grid-template-columns:
        220px minmax(0, 1fr);

    gap: 28px;

    align-items: center;

    margin-top: 22px;
    padding: 22px;

    background: #0d182b;

    border: 1px solid rgba(255, 196, 0, .55);
    border-radius: 12px;
}

.f10-boss-image {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 220px;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f10-boss-image img {
    display: block;

    width: 170px;
    height: 170px;

    object-fit: contain;
}

.f10-boss-label {
    color: #ffc400;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.f10-boss-content h3 {
    margin: 5px 0 12px;

    color: #fff;

    font-size: 25px;
}

.f10-boss-content p {
    color: #b8c8dc;

    line-height: 1.65;
}


/* BOTÃO */

.f10-button {
    display: inline-flex;

    padding: 10px 14px;

    color: #ffc400;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 8px;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.f10-button:hover {
    border-color: #ffc400;
}


/* OBJETIVOS */

.f10-objectives {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f10-objectives article {
    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f10-objectives article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 13px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 10px;
    font-weight: 900;
}

.f10-objectives h3 {
    margin: 0 0 7px;

    color: #fff;

    font-size: 15px;
}

.f10-objectives p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* CARTAS */

.f10-card-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

    margin-top: 24px;
}

.f10-card {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 11px;
}

.f10-card:hover {
    border-color: #ffc400;
}

.f10-card-image {
    padding: 14px 14px 0;
}

.f10-card-image img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0 auto;

    border-radius: 7px;
}

.f10-card-body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 15px 16px 18px;
}

.f10-card-role {
    margin-bottom: 6px;

    color: #ffc400;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;

    text-transform: uppercase;
}

.f10-card h3 {
    margin: 0 0 9px;

    font-size: 15px;
}

.f10-card h3 a {
    color: #fff;

    text-decoration: none;
}

.f10-card h3 a:hover {
    color: #ffc400;
}

.f10-card-stats {
    display: flex;
    flex-wrap: wrap;

    gap: 7px 13px;

    margin-bottom: 11px;

    color: #adbed5;

    font-size: 11px;
}

.f10-card-stats strong {
    color: #ffc400;
}

.f10-card-body p {
    flex: 1;

    color: #aebed4;

    font-size: 12px;
    line-height: 1.55;
}

.f10-card-link {
    width: fit-content;

    margin-top: auto;

    color: #ffc400;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}


/* PLANO */

.f10-battle-plan {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f10-battle-plan article {
    display: grid;

    grid-template-columns:
        42px minmax(0, 1fr);

    gap: 14px;

    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f10-battle-plan article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 10px;
    font-weight: 900;
}

.f10-battle-plan h3 {
    margin: 0 0 6px;

    color: #fff;

    font-size: 15px;
}

.f10-battle-plan p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* EXEMPLO */

.f10-power-example {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 23px;
    padding: 22px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 11px;
}

.f10-power-example > div {
    min-width: 150px;

    padding: 15px;

    text-align: center;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 9px;
}

.f10-power-example small {
    display: block;

    margin-bottom: 6px;

    color: #9aabc2;

    font-size: 8px;
    font-weight: 900;
}

.f10-power-example strong {
    display: block;

    color: #fff;

    font-size: 20px;
}

.f10-power-example span {
    color: #aebdd2;

    font-size: 10px;
}

.f10-power-example > b {
    color: #ffc400;

    font-size: 22px;
}

.f10-power-example .f10-power-result {
    border-color: rgba(255, 196, 0, .6);
}

.f10-power-result strong {
    color: #ffc400;
}


/* ALERTA */

.f10-alert {
    margin-top: 18px;
    padding: 16px 18px;

    color: #c5d1e1;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .42);
    border-radius: 9px;

    line-height: 1.6;
}

.f10-alert strong {
    color: #ffc400;
}


/* ERROS */

.f10-errors {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f10-errors article {
    display: grid;

    grid-template-columns:
        42px minmax(0, 1fr);

    gap: 14px;

    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f10-errors article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 10px;
    font-weight: 900;
}

.f10-errors h3 {
    margin: 0 0 6px;

    color: #fff;

    font-size: 15px;
}

.f10-errors p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* MELHORIAS */

.f10-improvement-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f10-improvement-grid article {
    padding: 19px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f10-improvement-grid article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 12px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 10px;
    font-weight: 900;
}

.f10-improvement-grid h3 {
    margin: 0 0 7px;

    color: #fff;

    font-size: 15px;
}

.f10-improvement-grid p {
    color: #b5c5d9;

    font-size: 12px;
    line-height: 1.6;
}

.f10-improvement-grid a {
    color: #ffc400;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


/* CHECKLIST */

.f10-checklist {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-top: 20px;
}

.f10-checklist > div {
    display: flex;

    gap: 12px;

    padding: 14px 16px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 9px;
}

.f10-checklist span {
    color: #ffc400;

    font-weight: 900;
}

.f10-checklist p {
    margin: 0;

    color: #b8c8dd;

    font-size: 13px;
}


/* FINAL */

.f10-final {
    margin-top: 20px;
    padding: 23px;

    text-align: center;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .55);
    border-radius: 11px;
}

.f10-final small {
    display: block;

    margin-bottom: 6px;

    color: #a9b8cd;

    font-size: 9px;
    font-weight: 900;
}

.f10-final strong {
    display: block;

    color: #ffc400;

    font-size: 22px;
}

.f10-final p {
    max-width: 720px;

    margin: 10px auto 0;

    color: #bac9dd;

    line-height: 1.6;
}


/* RELACIONADOS */

.f10-related {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f10-related > a {
    display: grid;

    grid-template-columns:
        44px minmax(0, 1fr) 24px;

    gap: 13px;
    align-items: center;

    padding: 17px;

    text-decoration: none;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f10-related > a:hover {
    border-color: #ffc400;
}

.f10-related > a > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 10px;
    font-weight: 900;
}

.f10-related strong {
    display: block;

    margin-bottom: 3px;

    color: #fff;

    font-size: 13px;
}

.f10-related small {
    color: #aebed5;

    font-size: 11px;
}

.f10-related b {
    color: #ffc400;
}


/* TABLET */

@media (max-width: 980px) {

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

}


/* MOBILE */

@media (max-width: 680px) {

    .f10-container {
        width: min(100% - 20px, 1180px);
    }

    .f10-hero {
        min-height: auto;

        padding: 34px 22px;
    }

    .f10-hero h1 {
        font-size: 37px;
    }

    .f10-hero-symbol {
        right: 15px;
        top: 25px;

        transform: none;

        font-size: 65px;
    }

    .f10-section {
        margin-top: 16px;

        padding: 20px 16px;
    }

    .f10-boss-profile {
        grid-template-columns: 1fr;
    }

    .f10-boss-image {
        height: 200px;
    }

    .f10-objectives,
    .f10-card-grid,
    .f10-battle-plan,
    .f10-errors,
    .f10-improvement-grid,
    .f10-related {
        grid-template-columns: 1fr;
    }

    .f10-card {
        max-width: 390px;

        margin: 0 auto;
    }

    .f10-power-example {
        flex-direction: column;
    }

    .f10-power-example > div {
        width: 100%;
    }

}
/* =========================================================
   F11 — COMO VENCER NITEMARE
========================================================= */

.f11-page {
    width: 100%;
}

.f11-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.f11-hero {
    position: relative;
    overflow: hidden;

    min-height: 330px;
    margin-top: 16px;
    padding: 52px 46px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            120deg,
            #172640 0%,
            #18243b 55%,
            #34291e 100%
        );

    border: 1px solid #31425d;
    border-radius: 18px;
}

.f11-hero-content {
    position: relative;
    z-index: 2;

    max-width: 800px;
}

.f11-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: #ffc400;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.f11-hero h1 {
    margin: 0 0 20px;

    color: #fff;

    font-size: clamp(38px, 5vw, 64px);
    line-height: 1;
}

.f11-hero p {
    max-width: 760px;
    margin: 0;

    color: #b8c8de;

    font-size: 16px;
    line-height: 1.65;
}

.f11-hero-symbol {
    position: absolute;

    right: 70px;
    top: 50%;

    transform: translateY(-50%);

    color: rgba(255, 196, 0, .12);

    font-size: 135px;
}


/* =========================================================
   SEÇÕES
========================================================= */

.f11-section {
    margin-top: 24px;
    padding: 28px;

    background: #111d33;

    border: 1px solid #2b3d59;
    border-radius: 16px;
}

.f11-section h2 {
    margin: 0 0 16px;

    color: #fff;

    font-size: 27px;
}

.f11-section > p {
    color: #b9c8df;

    line-height: 1.7;
}


/* =========================================================
   DESTAQUE
========================================================= */

.f11-highlight {
    margin-top: 20px;
    padding: 20px;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .5);
    border-radius: 10px;
}

.f11-highlight strong {
    display: block;

    margin-bottom: 7px;

    color: #ffc400;
}

.f11-highlight p {
    margin: 0;

    color: #bdcadb;

    line-height: 1.6;
}


/* =========================================================
   PERFIL NITEMARE
========================================================= */

.f11-boss-profile {
    display: grid;

    grid-template-columns:
        220px minmax(0, 1fr);

    gap: 28px;
    align-items: center;

    margin-top: 22px;
    padding: 22px;

    background: #0d182b;

    border: 1px solid rgba(255, 196, 0, .55);
    border-radius: 12px;
}

.f11-boss-image {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 220px;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f11-boss-image img {
    display: block;

    width: 170px;
    height: 170px;

    object-fit: contain;
}

.f11-boss-label {
    color: #ffc400;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.f11-boss-content h3 {
    margin: 5px 0 12px;

    color: #fff;

    font-size: 26px;
}

.f11-boss-content p {
    color: #b8c8dc;

    line-height: 1.65;
}

.f11-button {
    display: inline-flex;

    margin-top: 5px;
    padding: 10px 14px;

    color: #ffc400;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 8px;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.f11-button:hover {
    border-color: #ffc400;
}


/* =========================================================
   REQUISITOS
========================================================= */

.f11-requirements {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f11-requirements article {
    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f11-requirements article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 13px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 10px;
    font-weight: 900;
}

.f11-requirements h3 {
    margin: 0 0 8px;

    color: #fff;

    font-size: 15px;
}

.f11-requirements p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   CARTAS
========================================================= */

.f11-card-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

    margin-top: 24px;
}

.f11-card {
    position: relative;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 11px;

    transition:
        border-color .2s ease,
        transform .2s ease;
}

.f11-card:hover {
    border-color: #ffc400;

    transform: translateY(-2px);
}

.f11-card-image {
    padding: 14px 14px 0;
}

.f11-card-image img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0 auto;

    border-radius: 7px;
}

.f11-card-body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 15px 16px 18px;
}

.f11-card-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    margin-bottom: 10px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f11-card-role {
    margin-bottom: 6px;

    color: #ffc400;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;

    text-transform: uppercase;
}

.f11-card h3 {
    margin: 0 0 9px;

    font-size: 16px;
}

.f11-card h3 a {
    color: #fff;

    text-decoration: none;
}

.f11-card h3 a:hover {
    color: #ffc400;
}

.f11-card-stats {
    display: flex;
    flex-wrap: wrap;

    gap: 7px 13px;

    margin-bottom: 11px;

    color: #adbed5;

    font-size: 11px;
}

.f11-card-stats strong {
    color: #ffc400;
}

.f11-card-body p {
    flex: 1;

    color: #aebed4;

    font-size: 12px;
    line-height: 1.55;
}

.f11-card-link {
    width: fit-content;

    margin-top: auto;

    color: #ffc400;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================================================
   TIMELINE
========================================================= */

.f11-timeline {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f11-timeline article {
    display: grid;

    grid-template-columns:
        48px minmax(0, 1fr);

    gap: 15px;

    padding: 20px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f11-timeline-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 10px;
    font-weight: 900;
}

.f11-timeline small {
    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.f11-timeline h3 {
    margin: 4px 0 8px;

    color: #fff;

    font-size: 16px;
}

.f11-timeline p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   EXEMPLO DE PODER
========================================================= */

.f11-power-example {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 22px;
    padding: 22px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 11px;
}

.f11-power-box {
    min-width: 155px;

    padding: 17px;

    text-align: center;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 9px;
}

.f11-power-box small {
    display: block;

    margin-bottom: 6px;

    color: #a7b7cc;

    font-size: 8px;
    font-weight: 900;
}

.f11-power-box strong {
    display: block;

    color: #fff;

    font-size: 22px;
}

.f11-power-box span {
    color: #adbed4;

    font-size: 10px;
}

.f11-power-symbol {
    color: #ffc400;

    font-size: 24px;
    font-weight: 900;
}

.f11-power-final {
    border-color: rgba(255, 196, 0, .65);
}

.f11-power-final strong {
    color: #ffc400;
}


/* =========================================================
   ALERTA
========================================================= */

.f11-alert {
    margin-top: 18px;
    padding: 16px 18px;

    color: #c5d1e1;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .42);
    border-radius: 9px;

    line-height: 1.6;
}

.f11-alert strong {
    color: #ffc400;
}


/* =========================================================
   MÃO INICIAL
========================================================= */

.f11-hand-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f11-hand-grid article {
    padding: 19px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f11-hand-grid article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 13px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 10px;
    font-weight: 900;
}

.f11-hand-grid h3 {
    margin: 0 0 8px;

    color: #fff;

    font-size: 15px;
}

.f11-hand-grid p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   PERGUNTA
========================================================= */

.f11-question {
    margin-top: 18px;
    padding: 22px;

    text-align: center;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .5);
    border-radius: 10px;
}

.f11-question small {
    display: block;

    margin-bottom: 6px;

    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.f11-question strong {
    display: block;

    color: #fff;

    font-size: 18px;
}

.f11-question p {
    max-width: 720px;

    margin: 10px auto 0;

    color: #b9c8db;

    line-height: 1.6;
}


/* =========================================================
   ERROS
========================================================= */

.f11-errors {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f11-errors article {
    display: grid;

    grid-template-columns:
        42px minmax(0, 1fr);

    gap: 14px;

    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f11-errors article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 10px;
    font-weight: 900;
}

.f11-errors h3 {
    margin: 0 0 6px;

    color: #fff;

    font-size: 15px;
}

.f11-errors p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   MELHORIAS
========================================================= */

.f11-improvements {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f11-improvements > a {
    display: grid;

    grid-template-columns:
        44px minmax(0, 1fr);

    gap: 14px;

    padding: 19px;

    text-decoration: none;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f11-improvements > a:hover {
    border-color: #ffc400;
}

.f11-improvements > a > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 10px;
    font-weight: 900;
}

.f11-improvements small {
    display: block;

    margin-bottom: 4px;

    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
}

.f11-improvements strong {
    display: block;

    color: #fff;

    font-size: 14px;
}

.f11-improvements p {
    margin: 7px 0 0;

    color: #aebed4;

    font-size: 11px;
    line-height: 1.55;
}


/* =========================================================
   CHECKLIST
========================================================= */

.f11-checklist {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-top: 20px;
}

.f11-checklist > div {
    display: flex;

    gap: 12px;

    padding: 14px 16px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 9px;
}

.f11-checklist span {
    color: #ffc400;

    font-weight: 900;
}

.f11-checklist p {
    margin: 0;

    color: #b8c8dd;

    font-size: 13px;
}


/* =========================================================
   FINAL
========================================================= */

.f11-final-message {
    margin-top: 20px;
    padding: 26px;

    text-align: center;

    background:
        linear-gradient(
            120deg,
            rgba(255, 196, 0, .04),
            rgba(255, 196, 0, .09)
        );

    border: 1px solid rgba(255, 196, 0, .6);
    border-radius: 11px;
}

.f11-final-message small {
    display: block;

    margin-bottom: 7px;

    color: #ffc400;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.f11-final-message strong {
    display: block;

    max-width: 760px;

    margin: 0 auto;

    color: #fff;

    font-size: 21px;
}

.f11-final-message p {
    max-width: 720px;

    margin: 12px auto 0;

    color: #bdcadb;

    line-height: 1.6;
}


/* =========================================================
   RELACIONADOS
========================================================= */

.f11-related {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f11-related > a {
    display: grid;

    grid-template-columns:
        46px minmax(0, 1fr) 24px;

    gap: 13px;
    align-items: center;

    padding: 17px;

    text-decoration: none;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f11-related > a:hover {
    border-color: #ffc400;
}

.f11-related > a > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f11-related strong {
    display: block;

    margin-bottom: 3px;

    color: #fff;

    font-size: 13px;
}

.f11-related small {
    color: #aebed5;

    font-size: 11px;
}

.f11-related b {
    color: #ffc400;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

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

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    .f11-container {
        width: min(100% - 20px, 1180px);
    }

    .f11-hero {
        min-height: auto;

        padding: 34px 22px;
    }

    .f11-hero h1 {
        font-size: 37px;
    }

    .f11-hero-symbol {
        right: 18px;
        top: 24px;

        transform: none;

        font-size: 65px;
    }

    .f11-section {
        margin-top: 16px;

        padding: 20px 16px;
    }

    .f11-section h2 {
        font-size: 23px;
    }

    .f11-boss-profile {
        grid-template-columns: 1fr;
    }

    .f11-boss-image {
        height: 200px;
    }

    .f11-requirements,
    .f11-card-grid,
    .f11-timeline,
    .f11-hand-grid,
    .f11-errors,
    .f11-improvements,
    .f11-related {
        grid-template-columns: 1fr;
    }

    .f11-card {
        max-width: 390px;

        margin: 0 auto;
    }

    .f11-power-example {
        flex-direction: column;
    }

    .f11-power-box {
        width: 100%;
    }

    .f11-power-symbol {
        transform: rotate(90deg);
    }

}
/* =========================================================
   F12 — COMO VENCER DARKNITE
========================================================= */

.f12-page {
    width: 100%;
}

.f12-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}


/* HERO */

.f12-hero {
    position: relative;
    overflow: hidden;

    min-height: 320px;
    margin-top: 16px;
    padding: 50px 46px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            120deg,
            #172640 0%,
            #18243b 55%,
            #35291d 100%
        );

    border: 1px solid #31425d;
    border-radius: 18px;
}

.f12-hero-content {
    position: relative;
    z-index: 2;

    max-width: 800px;
}

.f12-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: #ffc400;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.f12-hero h1 {
    margin: 0 0 20px;

    color: #fff;

    font-size: clamp(38px, 5vw, 64px);
    line-height: 1;
}

.f12-hero p {
    max-width: 750px;
    margin: 0;

    color: #b8c8de;

    font-size: 16px;
    line-height: 1.65;
}

.f12-hero-symbol {
    position: absolute;

    right: 70px;
    top: 50%;

    transform: translateY(-50%);

    color: rgba(255, 196, 0, .12);

    font-size: 135px;
}


/* SEÇÕES */

.f12-section {
    margin-top: 24px;
    padding: 28px;

    background: #111d33;

    border: 1px solid #2b3d59;
    border-radius: 16px;
}

.f12-section h2 {
    margin: 0 0 16px;

    color: #fff;

    font-size: 27px;
}

.f12-section > p {
    color: #b9c8df;

    line-height: 1.7;
}


/* DESTAQUE */

.f12-highlight {
    margin-top: 20px;
    padding: 20px;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .5);
    border-radius: 10px;
}

.f12-highlight > span {
    display: block;

    margin-bottom: 6px;

    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.f12-highlight strong {
    display: block;

    color: #fff;

    font-size: 18px;
}

.f12-highlight p {
    margin: 8px 0 0;

    color: #bdcadb;

    line-height: 1.6;
}


/* PERFIL */

.f12-boss-profile {
    display: grid;

    grid-template-columns:
        220px minmax(0, 1fr);

    gap: 28px;
    align-items: center;

    margin-top: 22px;
    padding: 22px;

    background: #0d182b;

    border: 1px solid rgba(255, 196, 0, .55);
    border-radius: 12px;
}

.f12-boss-image {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 220px;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f12-boss-image img {
    display: block;

    width: 170px;
    height: 170px;

    object-fit: contain;
}

.f12-boss-label {
    color: #ffc400;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.f12-boss-content h3 {
    margin: 5px 0 12px;

    color: #fff;

    font-size: 26px;
}

.f12-boss-content p {
    color: #b8c8dc;

    line-height: 1.65;
}

.f12-button {
    display: inline-flex;

    margin-top: 5px;
    padding: 10px 14px;

    color: #ffc400;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 8px;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.f12-button:hover {
    border-color: #ffc400;
}


/* PILARES */

.f12-pillars {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f12-pillars article {
    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f12-pillars article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 13px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 10px;
    font-weight: 900;
}

.f12-pillars h3 {
    margin: 0 0 7px;

    color: #fff;

    font-size: 15px;
}

.f12-pillars p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* CARTAS */

.f12-card-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

    margin-top: 24px;
}

.f12-card {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 11px;

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.f12-card:hover {
    transform: translateY(-2px);

    border-color: #ffc400;
}

.f12-card-image {
    padding: 14px 14px 0;
}

.f12-card-image img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0 auto;

    border-radius: 7px;
}

.f12-card-body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 15px 16px 18px;
}

.f12-card-top {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 10px;
}

.f12-card-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 8px;
    font-weight: 900;
}

.f12-card-role {
    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .8px;
}

.f12-card h3 {
    margin: 0 0 10px;

    font-size: 16px;
}

.f12-card h3 a {
    color: #fff;

    text-decoration: none;
}

.f12-card h3 a:hover {
    color: #ffc400;
}

.f12-card-stats {
    display: flex;

    gap: 9px;

    margin-bottom: 12px;
}

.f12-card-stats > span {
    flex: 1;

    padding: 7px;

    color: #9eafc6;

    text-align: center;

    background: #111d33;

    border: 1px solid #2c3e59;
    border-radius: 6px;

    font-size: 8px;
    font-weight: 800;
}

.f12-card-stats strong {
    display: block;

    margin-top: 2px;

    color: #ffc400;

    font-size: 12px;
}

.f12-card-body p {
    flex: 1;

    color: #aebed4;

    font-size: 12px;
    line-height: 1.55;
}

.f12-card-link {
    width: fit-content;

    margin-top: auto;

    color: #ffc400;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


/* PLANO */

.f12-plan {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f12-plan article {
    display: grid;

    grid-template-columns:
        48px minmax(0, 1fr);

    gap: 15px;

    padding: 20px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f12-plan-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 10px;
    font-weight: 900;
}

.f12-plan small {
    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.f12-plan h3 {
    margin: 4px 0 8px;

    color: #fff;

    font-size: 16px;
}

.f12-plan p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* ESCALA DE PODER */

.f12-power-scale {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 22px;
    padding: 22px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 11px;
}

.f12-power-scale > div {
    min-width: 150px;

    padding: 16px;

    text-align: center;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 9px;
}

.f12-power-scale small {
    display: block;

    margin-bottom: 5px;

    color: #9eafc5;

    font-size: 8px;
    font-weight: 900;
}

.f12-power-scale strong {
    display: block;

    color: #fff;

    font-size: 22px;
}

.f12-power-scale span {
    color: #aebed4;

    font-size: 10px;
}

.f12-power-scale > b {
    color: #ffc400;

    font-size: 23px;
}

.f12-power-scale .f12-power-result {
    border-color: rgba(255, 196, 0, .65);
}

.f12-power-result strong {
    color: #ffc400;
}


/* ALERTA */

.f12-alert {
    margin-top: 18px;
    padding: 16px 18px;

    color: #c5d1e1;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .42);
    border-radius: 9px;

    line-height: 1.6;
}

.f12-alert strong {
    color: #ffc400;
}


/* DIAGNÓSTICO */

.f12-diagnosis {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f12-diagnosis article {
    padding: 19px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f12-diagnosis-head {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 10px;
}

.f12-diagnosis-head span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f12-diagnosis-head strong {
    color: #fff;

    font-size: 14px;
}

.f12-diagnosis p {
    color: #b5c5d9;

    font-size: 12px;
    line-height: 1.6;
}

.f12-diagnosis a {
    color: #ffc400;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


/* ERROS */

.f12-errors {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f12-errors article {
    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f12-errors article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 12px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f12-errors h3 {
    margin: 0 0 7px;

    color: #fff;

    font-size: 14px;
}

.f12-errors p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* CHECKLIST */

.f12-checklist {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-top: 20px;
}

.f12-checklist > div {
    display: flex;

    gap: 12px;

    padding: 14px 16px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 9px;
}

.f12-checklist span {
    color: #ffc400;

    font-weight: 900;
}

.f12-checklist p {
    margin: 0;

    color: #b8c8dd;

    font-size: 13px;
}


/* FINAL */

.f12-final {
    margin-top: 20px;
    padding: 26px;

    text-align: center;

    background:
        linear-gradient(
            120deg,
            rgba(255, 196, 0, .04),
            rgba(255, 196, 0, .09)
        );

    border: 1px solid rgba(255, 196, 0, .6);
    border-radius: 11px;
}

.f12-final small {
    display: block;

    margin-bottom: 6px;

    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.f12-final strong {
    display: block;

    color: #fff;

    font-size: 21px;
}

.f12-final p {
    max-width: 720px;

    margin: 10px auto;

    color: #bdcadb;

    line-height: 1.6;
}

.f12-final a {
    display: inline-flex;

    margin-top: 6px;
    padding: 10px 15px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 8px;

    font-size: 11px;
    font-weight: 900;

    text-decoration: none;
}


/* RELACIONADOS */

.f12-related {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f12-related > a {
    display: grid;

    grid-template-columns:
        46px minmax(0, 1fr) 24px;

    gap: 13px;
    align-items: center;

    padding: 17px;

    text-decoration: none;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f12-related > a:hover {
    border-color: #ffc400;
}

.f12-related > a > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f12-related strong {
    display: block;

    margin-bottom: 3px;

    color: #fff;

    font-size: 13px;
}

.f12-related small {
    color: #aebed5;

    font-size: 11px;
}

.f12-related b {
    color: #ffc400;
}


/* TABLET */

@media (max-width: 980px) {

    .f12-pillars,
    .f12-card-grid,
    .f12-errors {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* MOBILE */

@media (max-width: 680px) {

    .f12-container {
        width: min(100% - 20px, 1180px);
    }

    .f12-hero {
        min-height: auto;

        padding: 34px 22px;
    }

    .f12-hero h1 {
        font-size: 37px;
    }

    .f12-hero-symbol {
        right: 18px;
        top: 24px;

        transform: none;

        font-size: 65px;
    }

    .f12-section {
        margin-top: 16px;

        padding: 20px 16px;
    }

    .f12-section h2 {
        font-size: 23px;
    }

    .f12-boss-profile {
        grid-template-columns: 1fr;
    }

    .f12-boss-image {
        height: 200px;
    }

    .f12-pillars,
    .f12-card-grid,
    .f12-plan,
    .f12-diagnosis,
    .f12-errors,
    .f12-related {
        grid-template-columns: 1fr;
    }

    .f12-card {
        max-width: 390px;

        margin: 0 auto;
    }

    .f12-power-scale {
        flex-direction: column;
    }

    .f12-power-scale > div {
        width: 100%;
    }

}
/* =========================================================
   F13 — CHEFES FINAIS: ORDEM E PREPARAÇÃO
========================================================= */

.f13-page {
    width: 100%;
}

.f13-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}


/* HERO */

.f13-hero {
    position: relative;
    overflow: hidden;

    min-height: 330px;
    margin-top: 16px;
    padding: 52px 46px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            120deg,
            #172640 0%,
            #18243b 55%,
            #352a1e 100%
        );

    border: 1px solid #31425d;
    border-radius: 18px;
}

.f13-hero-content {
    position: relative;
    z-index: 2;
    max-width: 820px;
}

.f13-eyebrow {
    display: block;
    margin-bottom: 10px;

    color: #ffc400;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.f13-hero h1 {
    margin: 0 0 20px;

    color: #fff;

    font-size: clamp(38px, 5vw, 64px);
    line-height: 1;
}

.f13-hero p {
    max-width: 760px;
    margin: 0;

    color: #b8c8de;

    font-size: 16px;
    line-height: 1.65;
}

.f13-hero-symbol {
    position: absolute;
    right: 70px;
    top: 50%;

    transform: translateY(-50%);

    color: rgba(255, 196, 0, .12);

    font-size: 135px;
}


/* SEÇÃO */

.f13-section {
    margin-top: 24px;
    padding: 28px;

    background: #111d33;

    border: 1px solid #2b3d59;
    border-radius: 16px;
}

.f13-section h2 {
    margin: 0 0 16px;

    color: #fff;

    font-size: 27px;
}

.f13-section > p {
    color: #b9c8df;
    line-height: 1.7;
}


/* HIGHLIGHT */

.f13-highlight {
    margin-top: 20px;
    padding: 17px 19px;

    color: #c5d1e1;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .45);
    border-radius: 9px;
}

.f13-highlight strong {
    color: #ffc400;
}


/* BOSSES */

.f13-boss-list {
    display: flex;
    flex-direction: column;
    gap: 16px;

    margin-top: 24px;
}

.f13-boss-card {
    display: grid;

    grid-template-columns:
        54px 180px minmax(0, 1fr);

    gap: 20px;
    align-items: center;

    padding: 20px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 12px;
}

.f13-boss-card:hover {
    border-color: rgba(255, 196, 0, .65);
}

.f13-boss-order {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 11px;
    font-weight: 900;
}

.f13-boss-visual {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 190px;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 9px;
}

.f13-boss-visual img {
    display: block;

    width: 155px;
    height: 155px;

    object-fit: contain;
}

.f13-boss-placeholder {
    color: rgba(255, 196, 0, .28);
    font-size: 65px;
}

.f13-boss-label {
    color: #ffc400;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.f13-boss-content h3 {
    margin: 4px 0 8px;

    color: #fff;

    font-size: 23px;
}

.f13-boss-difficulty {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 10px;
}

.f13-boss-difficulty small {
    color: #95a7bf;

    font-size: 9px;
    font-weight: 800;
}

.f13-boss-difficulty strong {
    color: #ffc400;

    letter-spacing: 2px;
}

.f13-boss-content > p {
    color: #b5c5da;

    font-size: 13px;
    line-height: 1.6;
}

.f13-boss-tip {
    margin-top: 12px;
    padding: 12px 14px;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 8px;
}

.f13-boss-tip strong {
    color: #ffc400;

    font-size: 10px;
}

.f13-boss-tip span {
    margin-left: 5px;

    color: #b8c8dc;

    font-size: 12px;
}

.f13-boss-link {
    display: inline-flex;

    margin-top: 13px;

    color: #ffc400;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


/* LEVEL */

.f13-level-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f13-level-grid article {
    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f13-level-grid article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 12px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f13-level-grid small {
    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
}

.f13-level-grid h3 {
    margin: 5px 0 8px;

    color: #fff;

    font-size: 15px;
}

.f13-level-grid p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* DIAGNOSIS */

.f13-diagnosis {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f13-diagnosis article {
    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f13-diagnosis article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 12px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f13-diagnosis h3 {
    margin: 0 0 7px;

    color: #fff;

    font-size: 15px;
}

.f13-diagnosis p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* ACTIONS */

.f13-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;

    margin-top: 20px;
}

.f13-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 14px;

    color: #ffc400;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 8px;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.f13-button:hover {
    border-color: #ffc400;
}


/* CHECKLIST */

.f13-checklist {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: 20px;
}

.f13-checklist > div {
    display: flex;
    gap: 12px;

    padding: 14px 16px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 9px;
}

.f13-checklist span {
    color: #ffc400;

    font-weight: 900;
}

.f13-checklist p {
    margin: 0;

    color: #b8c8dd;

    font-size: 13px;
}


/* FINAL */

.f13-final {
    margin-top: 20px;
    padding: 26px;

    text-align: center;

    background:
        linear-gradient(
            120deg,
            rgba(255, 196, 0, .04),
            rgba(255, 196, 0, .09)
        );

    border: 1px solid rgba(255, 196, 0, .6);
    border-radius: 11px;
}

.f13-final small {
    display: block;

    margin-bottom: 6px;

    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
}

.f13-final strong {
    display: block;

    color: #fff;

    font-size: 21px;
}

.f13-final p {
    max-width: 720px;

    margin: 10px auto 0;

    color: #bdcadb;

    line-height: 1.6;
}


/* RELATED */

.f13-related {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f13-related > a {
    display: grid;

    grid-template-columns:
        46px minmax(0, 1fr) 24px;

    gap: 13px;
    align-items: center;

    padding: 17px;

    text-decoration: none;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f13-related > a:hover {
    border-color: #ffc400;
}

.f13-related > a > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f13-related strong {
    display: block;

    margin-bottom: 3px;

    color: #fff;

    font-size: 13px;
}

.f13-related small {
    color: #aebed5;

    font-size: 11px;
}

.f13-related b {
    color: #ffc400;
}


/* TABLET */

@media (max-width: 980px) {

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

}


/* MOBILE */

@media (max-width: 680px) {

    .f13-container {
        width: min(100% - 20px, 1180px);
    }

    .f13-hero {
        min-height: auto;
        padding: 34px 22px;
    }

    .f13-hero h1 {
        font-size: 37px;
    }

    .f13-hero-symbol {
        right: 18px;
        top: 24px;

        transform: none;

        font-size: 65px;
    }

    .f13-section {
        margin-top: 16px;
        padding: 20px 16px;
    }

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

    .f13-boss-order {
        margin: 0 auto;
    }

    .f13-boss-visual {
        min-height: 190px;
    }

    .f13-level-grid,
    .f13-diagnosis,
    .f13-related {
        grid-template-columns: 1fr;
    }

    .f13-actions {
        flex-direction: column;
    }

    .f13-button {
        width: 100%;
    }

}

.f13-high-mages-row {
    gap: 8px;
}

.f13-high-mage {
    padding: 3px;
}

.f13-high-mages-row .f13-high-mage img {
    max-width: 105px !important;
    height: 125px !important;
}
/* =========================================================
   F14 — MELHORES EQUIPAMENTOS
========================================================= */

.f14-page {
    width: 100%;
}

.f14-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.f14-hero {
    position: relative;
    overflow: hidden;

    min-height: 320px;
    margin-top: 16px;
    padding: 50px 46px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            120deg,
            #172640 0%,
            #18243b 55%,
            #352a1d 100%
        );

    border: 1px solid #31425d;
    border-radius: 18px;
}

.f14-hero-content {
    position: relative;
    z-index: 2;

    max-width: 810px;
}

.f14-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: #ffc400;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.f14-hero h1 {
    margin: 0 0 20px;

    color: #fff;

    font-size: clamp(38px, 5vw, 64px);
    line-height: 1;
}

.f14-hero p {
    max-width: 750px;
    margin: 0;

    color: #b8c8de;

    font-size: 16px;
    line-height: 1.65;
}

.f14-hero-symbol {
    position: absolute;

    right: 70px;
    top: 50%;

    transform: translateY(-50%);

    color: rgba(255, 196, 0, .13);

    font-size: 135px;
}


/* =========================================================
   SEÇÕES
========================================================= */

.f14-section {
    margin-top: 24px;
    padding: 28px;

    background: #111d33;

    border: 1px solid #2b3d59;
    border-radius: 16px;
}

.f14-section h2 {
    margin: 0 0 16px;

    color: #fff;

    font-size: 27px;
}

.f14-section > p {
    color: #b9c8df;

    line-height: 1.7;
}


/* =========================================================
   REGRA
========================================================= */

.f14-rule {
    margin-top: 20px;
    padding: 22px;

    text-align: center;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .5);
    border-radius: 10px;
}

.f14-rule span {
    display: block;

    margin-bottom: 6px;

    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.f14-rule strong {
    display: block;

    color: #fff;

    font-size: 20px;
}

.f14-rule p {
    margin: 8px 0 0;

    color: #bdcadb;
}


/* =========================================================
   EQUIP GRID
========================================================= */

.f14-equip-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

    margin-top: 24px;
}

.f14-equip-card {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 11px;

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.f14-equip-card:hover {
    transform: translateY(-3px);
}

.f14-equip-card--best {
    border-color: rgba(255, 196, 0, .65);
}

.f14-equip-card--good {
    border-color: rgba(91, 156, 255, .48);
}

.f14-equip-card--support {
    border-color: rgba(148, 163, 184, .38);
}

.f14-equip-card:hover {
    border-color: #ffc400;
}


/* IMAGEM */

.f14-equip-image {
    padding: 14px 14px 0;
}

.f14-equip-image img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0 auto;

    border-radius: 7px;
}


/* BODY */

.f14-equip-body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 15px 16px 18px;
}

.f14-equip-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-bottom: 10px;
}

.f14-equip-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f14-equip-tier {
    padding: 4px 7px;

    color: #ffc400;

    background: rgba(255, 196, 0, .05);

    border: 1px solid rgba(255, 196, 0, .4);
    border-radius: 999px;

    font-size: 8px;
    font-weight: 900;

    text-transform: uppercase;
}

.f14-equip-role {
    color: #9eafc6;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .8px;

    text-transform: uppercase;
}

.f14-equip-body h3 {
    margin: 6px 0 10px;

    font-size: 16px;
}

.f14-equip-body h3 a {
    color: #fff;

    text-decoration: none;
}

.f14-equip-body h3 a:hover {
    color: #ffc400;
}


/* BONUS */

.f14-bonus {
    margin-bottom: 12px;
    padding: 11px;

    text-align: center;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 8px;
}

.f14-bonus small {
    display: block;

    color: #9eafc6;

    font-size: 8px;
    font-weight: 900;
}

.f14-bonus strong {
    display: block;

    margin: 2px 0;

    color: #ffc400;

    font-size: 22px;
}

.f14-bonus span {
    color: #aebed4;

    font-size: 9px;
}

.f14-equip-body p {
    flex: 1;

    color: #aebed4;

    font-size: 12px;
    line-height: 1.55;
}

.f14-card-link {
    width: fit-content;

    margin-top: auto;

    color: #ffc400;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================================================
   TIERS
========================================================= */

.f14-tier-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 15px;

    margin-top: 22px;
}

.f14-tier {
    padding: 20px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f14-tier--best {
    border-color: rgba(255, 196, 0, .65);
}

.f14-tier > span {
    display: block;

    margin-bottom: 10px;

    color: #ffc400;

    letter-spacing: 2px;
}

.f14-tier h3 {
    margin: 0 0 5px;

    color: #fff;

    font-size: 18px;
}

.f14-tier strong {
    color: #ffc400;

    font-size: 11px;
}

.f14-tier p {
    margin: 9px 0 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   EXEMPLO
========================================================= */

.f14-power-example {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 22px;
    padding: 24px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 11px;
}

.f14-power-card {
    min-width: 180px;

    padding: 18px;

    text-align: center;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 9px;
}

.f14-power-card small {
    display: block;

    margin-bottom: 5px;

    color: #9eafc5;

    font-size: 8px;
    font-weight: 900;
}

.f14-power-card strong {
    display: block;

    color: #fff;

    font-size: 24px;
}

.f14-power-card span {
    color: #aebed4;

    font-size: 10px;
}

.f14-power-symbol {
    color: #ffc400;

    font-size: 25px;
    font-weight: 900;
}

.f14-power-card--result {
    border-color: rgba(255, 196, 0, .65);
}

.f14-power-card--result strong {
    color: #ffc400;
}

.f14-example-text {
    max-width: 760px;

    margin: 18px auto 0 !important;

    text-align: center;
}


/* =========================================================
   ALERTA
========================================================= */

.f14-alert {
    margin-top: 18px;
    padding: 16px 18px;

    color: #c5d1e1;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .42);
    border-radius: 9px;

    line-height: 1.6;
}

.f14-alert strong {
    color: #ffc400;
}


/* =========================================================
   COMPARAÇÃO
========================================================= */

.f14-comparison {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 15px;

    margin-top: 22px;
}

.f14-comparison article {
    padding: 22px;

    text-align: center;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f14-comparison-highlight {
    border-color: rgba(255, 196, 0, .65) !important;
}

.f14-comparison-value {
    margin-bottom: 10px;

    color: #ffc400;

    font-size: 29px;
    font-weight: 900;
}

.f14-comparison h3 {
    margin: 0 0 8px;

    color: #fff;

    font-size: 17px;
}

.f14-comparison p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   PASSOS
========================================================= */

.f14-steps {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f14-steps article {
    display: grid;

    grid-template-columns:
        44px minmax(0, 1fr);

    gap: 14px;

    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f14-steps article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 10px;
    font-weight: 900;
}

.f14-steps h3 {
    margin: 0 0 6px;

    color: #fff;

    font-size: 15px;
}

.f14-steps p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   ERROS
========================================================= */

.f14-errors {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f14-errors article {
    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f14-errors article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 12px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f14-errors h3 {
    margin: 0 0 7px;

    color: #fff;

    font-size: 14px;
}

.f14-errors p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   CHECKLIST
========================================================= */

.f14-checklist {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-top: 20px;
}

.f14-checklist > div {
    display: flex;

    gap: 12px;

    padding: 14px 16px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 9px;
}

.f14-checklist span {
    color: #ffc400;

    font-weight: 900;
}

.f14-checklist p {
    margin: 0;

    color: #b8c8dd;

    font-size: 13px;
}


/* =========================================================
   FINAL
========================================================= */

.f14-final {
    margin-top: 20px;
    padding: 26px;

    text-align: center;

    background:
        linear-gradient(
            120deg,
            rgba(255, 196, 0, .04),
            rgba(255, 196, 0, .09)
        );

    border: 1px solid rgba(255, 196, 0, .6);
    border-radius: 11px;
}

.f14-final small {
    display: block;

    margin-bottom: 6px;

    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
}

.f14-final strong {
    display: block;

    color: #fff;

    font-size: 21px;
}

.f14-final p {
    max-width: 720px;

    margin: 10px auto;

    color: #bdcadb;

    line-height: 1.6;
}

.f14-final a {
    display: inline-flex;

    margin-top: 6px;
    padding: 10px 15px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 8px;

    font-size: 11px;
    font-weight: 900;

    text-decoration: none;
}


/* =========================================================
   RELATED
========================================================= */

.f14-related {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f14-related > a {
    display: grid;

    grid-template-columns:
        46px minmax(0, 1fr) 24px;

    gap: 13px;
    align-items: center;

    padding: 17px;

    text-decoration: none;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f14-related > a:hover {
    border-color: #ffc400;
}

.f14-related > a > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f14-related strong {
    display: block;

    margin-bottom: 3px;

    color: #fff;

    font-size: 13px;
}

.f14-related small {
    color: #aebed5;

    font-size: 11px;
}

.f14-related b {
    color: #ffc400;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

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

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    .f14-container {
        width: min(100% - 20px, 1180px);
    }

    .f14-hero {
        min-height: auto;

        padding: 34px 22px;
    }

    .f14-hero h1 {
        font-size: 37px;
    }

    .f14-hero-symbol {
        right: 18px;
        top: 24px;

        transform: none;

        font-size: 65px;
    }

    .f14-section {
        margin-top: 16px;

        padding: 20px 16px;
    }

    .f14-section h2 {
        font-size: 23px;
    }

    .f14-equip-grid,
    .f14-tier-grid,
    .f14-comparison,
    .f14-steps,
    .f14-errors,
    .f14-related {
        grid-template-columns: 1fr;
    }

    .f14-equip-card {
        width: 100%;
        max-width: 390px;

        margin: 0 auto;
    }

    .f14-power-example {
        flex-direction: column;
    }

    .f14-power-card {
        width: 100%;
    }

}

/* =========================================================
   F15 — MELHORES RITUAIS
========================================================= */

.f15-page {
    width: 100%;
}

.f15-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}


/* HERO */

.f15-hero {
    position: relative;
    overflow: hidden;

    min-height: 320px;
    margin-top: 16px;
    padding: 50px 46px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            120deg,
            #172640 0%,
            #18243b 55%,
            #352a1d 100%
        );

    border: 1px solid #31425d;
    border-radius: 18px;
}

.f15-hero-content {
    position: relative;
    z-index: 2;
    max-width: 810px;
}

.f15-eyebrow {
    display: block;
    margin-bottom: 10px;

    color: #ffc400;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.f15-hero h1 {
    margin: 0 0 20px;

    color: #fff;

    font-size: clamp(38px, 5vw, 64px);
    line-height: 1;
}

.f15-hero p {
    max-width: 760px;
    margin: 0;

    color: #b8c8de;

    font-size: 16px;
    line-height: 1.65;
}

.f15-hero-symbol {
    position: absolute;

    right: 70px;
    top: 50%;

    transform: translateY(-50%);

    color: rgba(255, 196, 0, .13);

    font-size: 135px;
}


/* SEÇÃO */

.f15-section {
    margin-top: 24px;
    padding: 28px;

    background: #111d33;

    border: 1px solid #2b3d59;
    border-radius: 16px;
}

.f15-section h2 {
    margin: 0 0 16px;

    color: #fff;

    font-size: 27px;
}

.f15-section > p {
    color: #b9c8df;

    line-height: 1.7;
}


/* FLUXO */

.f15-flow {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 22px;
    padding: 20px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 11px;
}

.f15-flow > div {
    min-width: 125px;

    padding: 13px;

    text-align: center;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 8px;
}

.f15-flow small {
    display: block;

    color: #9eafc6;

    font-size: 8px;
    font-weight: 900;
}

.f15-flow strong {
    color: #fff;

    font-size: 12px;
}

.f15-flow > b {
    color: #ffc400;

    font-size: 20px;
}

.f15-flow .f15-flow-result {
    border-color: rgba(255, 196, 0, .65);
}

.f15-flow-result strong {
    color: #ffc400;
}


/* ALERTA */

.f15-alert {
    margin-top: 18px;
    padding: 16px 18px;

    color: #c5d1e1;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .42);
    border-radius: 9px;

    line-height: 1.6;
}

.f15-alert strong {
    color: #ffc400;
}


/* RITUAIS */

.f15-ritual-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

    margin-top: 24px;
}

.f15-ritual-card {
    display: grid;

    grid-template-columns:
        220px minmax(0, 1fr);

    gap: 20px;

    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 12px;
}

.f15-ritual-card--best {
    border-color: rgba(255, 196, 0, .62);
}

.f15-ritual-card--good {
    border-color: rgba(91, 156, 255, .45);
}

.f15-ritual-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.f15-ritual-image img {
    display: block;

    width: 100%;
    max-width: 205px;

    height: auto;

    border-radius: 7px;
}

.f15-ritual-body {
    min-width: 0;
}

.f15-ritual-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-bottom: 8px;
}

.f15-ritual-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f15-ritual-tier {
    padding: 4px 8px;

    color: #ffc400;

    border: 1px solid rgba(255, 196, 0, .4);
    border-radius: 999px;

    font-size: 8px;
    font-weight: 900;
}

.f15-ritual-role {
    color: #9eafc6;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .8px;
}

.f15-ritual-body h3 {
    margin: 5px 0 10px;

    font-size: 18px;
}

.f15-ritual-body h3 a {
    color: #fff;

    text-decoration: none;
}

.f15-ritual-body h3 a:hover {
    color: #ffc400;
}

.f15-ritual-stats {
    display: flex;

    gap: 10px;

    margin-bottom: 12px;
}

.f15-ritual-stats > span {
    flex: 1;

    padding: 8px;

    text-align: center;

    color: #9eafc6;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 7px;

    font-size: 8px;
}

.f15-ritual-stats strong {
    display: block;

    margin-top: 2px;

    color: #ffc400;

    font-size: 14px;
}

.f15-ritual-spell {
    margin-bottom: 12px;
    padding: 9px 11px;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 7px;
}

.f15-ritual-spell small {
    display: block;

    margin-bottom: 2px;

    color: #9eafc6;

    font-size: 7px;
    font-weight: 900;
}

.f15-ritual-spell a {
    color: #ffc400;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.f15-materials {
    margin-bottom: 12px;
}

.f15-materials small {
    display: block;

    margin-bottom: 6px;

    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
}

.f15-materials span {
    display: block;

    margin-bottom: 4px;
    padding: 6px 8px;

    color: #b8c8dc;

    background: #111d33;

    border: 1px solid #2c3e59;
    border-radius: 6px;

    font-size: 10px;
}

.f15-ritual-body p {
    color: #aebed4;

    font-size: 12px;
    line-height: 1.55;
}

.f15-card-link {
    color: #ffc400;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


/* DECISÃO */

.f15-decision-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f15-decision {
    padding: 19px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f15-decision--yes {
    border-color: rgba(255, 196, 0, .45);
}

.f15-decision > span {
    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
}

.f15-decision h3 {
    margin: 6px 0 8px;

    color: #fff;

    font-size: 15px;
}

.f15-decision p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* EXEMPLO */

.f15-example-chain {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 22px;
    padding: 22px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 11px;
}

.f15-example-chain > div {
    min-width: 150px;

    padding: 14px;

    text-align: center;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 8px;
}

.f15-example-chain small {
    display: block;

    margin-bottom: 5px;

    color: #9eafc6;

    font-size: 8px;
    font-weight: 900;
}

.f15-example-chain strong {
    color: #fff;

    font-size: 11px;
}

.f15-example-chain > b {
    color: #ffc400;

    font-size: 20px;
}

.f15-example-ritual,
.f15-example-result {
    border-color: rgba(255, 196, 0, .6) !important;
}

.f15-example-result strong {
    color: #ffc400;
}


/* RITUAL VS FUSÃO */

.f15-versus {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        60px
        minmax(0, 1fr);

    gap: 16px;
    align-items: center;

    margin-top: 22px;
}

.f15-versus article {
    padding: 20px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f15-versus article > span {
    color: #ffc400;

    font-size: 9px;
    font-weight: 900;
}

.f15-versus h3 {
    margin: 5px 0 12px;

    color: #fff;

    font-size: 18px;
}

.f15-versus ul {
    margin: 0;
    padding-left: 20px;

    color: #b8c8dc;

    font-size: 12px;
    line-height: 1.8;
}

.f15-vs {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    margin: auto;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-weight: 900;
}

.f15-rule {
    margin-top: 18px;
    padding: 16px 18px;

    color: #c5d1e1;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .42);
    border-radius: 9px;
}

.f15-rule strong {
    color: #ffc400;
}


/* ERROS */

.f15-errors {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f15-errors article {
    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f15-errors article > span {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 12px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f15-errors h3 {
    margin: 0 0 7px;

    color: #fff;

    font-size: 14px;
}

.f15-errors p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* CHECKLIST */

.f15-checklist {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-top: 20px;
}

.f15-checklist > div {
    display: flex;

    gap: 12px;

    padding: 14px 16px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 9px;
}

.f15-checklist span {
    color: #ffc400;

    font-weight: 900;
}

.f15-checklist p {
    margin: 0;

    color: #b8c8dd;

    font-size: 13px;
}


/* FINAL */

.f15-final {
    margin-top: 20px;
    padding: 26px;

    text-align: center;

    background:
        linear-gradient(
            120deg,
            rgba(255, 196, 0, .04),
            rgba(255, 196, 0, .09)
        );

    border: 1px solid rgba(255, 196, 0, .6);
    border-radius: 11px;
}

.f15-final small {
    display: block;

    margin-bottom: 6px;

    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
}

.f15-final strong {
    display: block;

    color: #fff;

    font-size: 21px;
}

.f15-final p {
    max-width: 720px;

    margin: 10px auto;

    color: #bdcadb;

    line-height: 1.6;
}

.f15-final a {
    display: inline-flex;

    margin-top: 6px;
    padding: 10px 15px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 8px;

    font-size: 11px;
    font-weight: 900;

    text-decoration: none;
}


/* RELATED */

.f15-related {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f15-related > a {
    display: grid;

    grid-template-columns:
        46px minmax(0, 1fr) 24px;

    gap: 13px;
    align-items: center;

    padding: 17px;

    text-decoration: none;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f15-related > a:hover {
    border-color: #ffc400;
}

.f15-related > a > span {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f15-related strong {
    display: block;

    margin-bottom: 3px;

    color: #fff;

    font-size: 13px;
}

.f15-related small {
    color: #aebed5;

    font-size: 11px;
}

.f15-related b {
    color: #ffc400;
}


/* TABLET */

@media (max-width: 980px) {

    .f15-ritual-grid {
        grid-template-columns: 1fr;
    }

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

}


/* MOBILE */

@media (max-width: 680px) {

    .f15-container {
        width: min(100% - 20px, 1180px);
    }

    .f15-hero {
        min-height: auto;
        padding: 34px 22px;
    }

    .f15-hero h1 {
        font-size: 37px;
    }

    .f15-hero-symbol {
        right: 18px;
        top: 24px;

        transform: none;

        font-size: 65px;
    }

    .f15-section {
        margin-top: 16px;
        padding: 20px 16px;
    }

    .f15-section h2 {
        font-size: 23px;
    }

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

    .f15-ritual-image img {
        max-width: 260px;
    }

    .f15-decision-grid,
    .f15-errors,
    .f15-related {
        grid-template-columns: 1fr;
    }

    .f15-versus {
        grid-template-columns: 1fr;
    }

    .f15-flow,
    .f15-example-chain {
        flex-direction: column;
    }

}
/* =========================================================
   F16 — PASSWORDS E STARCHIPS
========================================================= */

.f16-page {
    width: 100%;
}

.f16-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.f16-hero {
    position: relative;
    overflow: hidden;

    min-height: 320px;
    margin-top: 16px;
    padding: 50px 46px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            120deg,
            #172640 0%,
            #18243b 55%,
            #352a1d 100%
        );

    border: 1px solid #31425d;
    border-radius: 18px;
}

.f16-hero-content {
    position: relative;
    z-index: 2;

    max-width: 820px;
}

.f16-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: #ffc400;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.f16-hero h1 {
    margin: 0 0 20px;

    color: #fff;

    font-size: clamp(38px, 5vw, 64px);
    line-height: 1;
}

.f16-hero p {
    max-width: 760px;
    margin: 0;

    color: #b8c8de;

    font-size: 16px;
    line-height: 1.65;
}

.f16-hero-symbol {
    position: absolute;

    right: 70px;
    top: 50%;

    transform: translateY(-50%);

    color: rgba(255, 196, 0, .13);

    font-size: 135px;
    font-weight: 900;
}


/* =========================================================
   SEÇÕES
========================================================= */

.f16-section {
    margin-top: 24px;
    padding: 28px;

    background: #111d33;

    border: 1px solid #2b3d59;
    border-radius: 16px;
}

.f16-section h2 {
    margin: 0 0 16px;

    color: #fff;

    font-size: 27px;
}

.f16-section > p {
    color: #b9c8df;

    line-height: 1.7;
}


/* =========================================================
   FLUXO
========================================================= */

.f16-flow {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 22px;
    padding: 22px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 11px;
}

.f16-flow > div {
    min-width: 150px;

    padding: 15px;

    text-align: center;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 8px;
}

.f16-flow small {
    display: block;

    margin-bottom: 4px;

    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
}

.f16-flow strong {
    display: block;

    color: #fff;

    font-size: 14px;
}

.f16-flow span {
    color: #9eafc5;

    font-size: 10px;
}

.f16-flow > b {
    color: #ffc400;

    font-size: 21px;
}

.f16-flow-result {
    border-color: rgba(255, 196, 0, .65) !important;
}

.f16-flow-result strong {
    color: #ffc400;
}


/* =========================================================
   ALERTA
========================================================= */

.f16-alert {
    margin-top: 18px;
    padding: 16px 18px;

    color: #c5d1e1;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .42);
    border-radius: 9px;

    line-height: 1.6;
}

.f16-alert strong {
    color: #ffc400;
}


/* =========================================================
   PRINCÍPIOS
========================================================= */

.f16-principles {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f16-principles article {
    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f16-principles article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 12px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f16-principles h3 {
    margin: 0 0 7px;

    color: #fff;

    font-size: 15px;
}

.f16-principles p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   CARDS
========================================================= */

.f16-card-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

    margin-top: 24px;
}

.f16-card {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 11px;

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.f16-card:hover {
    transform: translateY(-3px);

    border-color: #ffc400;
}

.f16-card--low {
    border-color: rgba(94, 204, 142, .40);
}

.f16-card--medium {
    border-color: rgba(91, 156, 255, .45);
}

.f16-card--high {
    border-color: rgba(255, 196, 0, .60);
}


/* =========================================================
   IMAGEM
========================================================= */

.f16-card-image {
    padding: 14px 14px 0;
}

.f16-card-image img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0 auto;

    border-radius: 7px;
}


/* =========================================================
   BODY
========================================================= */

.f16-card-body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 15px 16px 18px;
}

.f16-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-bottom: 10px;
}

.f16-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f16-cost-badge {
    padding: 4px 8px;

    color: #ffc400;

    background: rgba(255, 196, 0, .05);

    border: 1px solid rgba(255, 196, 0, .35);
    border-radius: 999px;

    font-size: 8px;
    font-weight: 900;

    text-transform: uppercase;
}

.f16-card-body h3 {
    margin: 0 0 10px;

    font-size: 16px;
}

.f16-card-body h3 a {
    color: #fff;

    text-decoration: none;
}

.f16-card-body h3 a:hover {
    color: #ffc400;
}


/* =========================================================
   ATK / DEF
========================================================= */

.f16-stats {
    display: flex;

    gap: 9px;

    margin-bottom: 10px;
}

.f16-stats > span {
    flex: 1;

    padding: 7px;

    text-align: center;

    color: #9eafc6;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 7px;

    font-size: 8px;
    font-weight: 800;
}

.f16-stats strong {
    display: block;

    margin-top: 2px;

    color: #ffc400;

    font-size: 13px;
}


/* =========================================================
   PASSWORD
========================================================= */

.f16-password-box {
    margin-bottom: 9px;
    padding: 10px;

    text-align: center;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 7px;
}

.f16-password-box small {
    display: block;

    margin-bottom: 3px;

    color: #9eafc6;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: .8px;
}

.f16-password-box strong {
    color: #fff;

    font-family: monospace;

    font-size: 16px;
    letter-spacing: 2px;
}


/* =========================================================
   STARCHIPS
========================================================= */

.f16-starchip-box {
    margin-bottom: 13px;
    padding: 10px;

    text-align: center;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .35);
    border-radius: 7px;
}

.f16-starchip-box small {
    display: block;

    color: #9eafc6;

    font-size: 7px;
    font-weight: 900;
}

.f16-starchip-box strong {
    display: block;

    margin: 2px 0;

    color: #ffc400;

    font-size: 20px;
}

.f16-starchip-box span {
    color: #aebed4;

    font-size: 9px;
}

.f16-card-link {
    width: fit-content;

    margin-top: auto;

    color: #ffc400;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================================================
   VERSUS
========================================================= */

.f16-versus {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        60px
        minmax(0, 1fr);

    gap: 16px;
    align-items: center;

    margin-top: 22px;
}

.f16-versus article {
    padding: 20px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f16-versus article > span {
    color: #ffc400;

    font-size: 9px;
    font-weight: 900;
}

.f16-versus h3 {
    margin: 5px 0 12px;

    color: #fff;

    font-size: 18px;
}

.f16-versus ul {
    margin: 0;
    padding-left: 20px;

    color: #b8c8dc;

    font-size: 12px;
    line-height: 1.8;
}

.f16-vs {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    margin: auto;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-weight: 900;
}


/* =========================================================
   REGRA
========================================================= */

.f16-rule {
    margin-top: 18px;
    padding: 16px 18px;

    color: #c5d1e1;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .42);
    border-radius: 9px;
}

.f16-rule strong {
    color: #ffc400;
}


/* =========================================================
   PASSOS
========================================================= */

.f16-steps {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f16-steps article {
    display: grid;

    grid-template-columns:
        44px minmax(0, 1fr);

    gap: 14px;

    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f16-steps article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 10px;
    font-weight: 900;
}

.f16-steps h3 {
    margin: 0 0 6px;

    color: #fff;

    font-size: 15px;
}

.f16-steps p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   ERROS
========================================================= */

.f16-errors {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f16-errors article {
    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f16-errors article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 12px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f16-errors h3 {
    margin: 0 0 7px;

    color: #fff;

    font-size: 14px;
}

.f16-errors p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   CHECKLIST
========================================================= */

.f16-checklist {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-top: 20px;
}

.f16-checklist > div {
    display: flex;

    gap: 12px;

    padding: 14px 16px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 9px;
}

.f16-checklist span {
    color: #ffc400;

    font-weight: 900;
}

.f16-checklist p {
    margin: 0;

    color: #b8c8dd;

    font-size: 13px;
}


/* =========================================================
   FINAL
========================================================= */

.f16-final {
    margin-top: 20px;
    padding: 26px;

    text-align: center;

    background:
        linear-gradient(
            120deg,
            rgba(255, 196, 0, .04),
            rgba(255, 196, 0, .09)
        );

    border: 1px solid rgba(255, 196, 0, .6);
    border-radius: 11px;
}

.f16-final small {
    display: block;

    margin-bottom: 6px;

    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
}

.f16-final strong {
    display: block;

    color: #fff;

    font-size: 21px;
}

.f16-final p {
    max-width: 720px;

    margin: 10px auto;

    color: #bdcadb;

    line-height: 1.6;
}

.f16-final a {
    display: inline-flex;

    margin-top: 6px;
    padding: 10px 15px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 8px;

    font-size: 11px;
    font-weight: 900;

    text-decoration: none;
}


/* =========================================================
   RELATED
========================================================= */

.f16-related {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f16-related > a {
    display: grid;

    grid-template-columns:
        46px minmax(0, 1fr) 24px;

    gap: 13px;
    align-items: center;

    padding: 17px;

    text-decoration: none;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f16-related > a:hover {
    border-color: #ffc400;
}

.f16-related > a > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f16-related strong {
    display: block;

    margin-bottom: 3px;

    color: #fff;

    font-size: 13px;
}

.f16-related small {
    color: #aebed5;

    font-size: 11px;
}

.f16-related b {
    color: #ffc400;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    .f16-card-grid,
    .f16-principles,
    .f16-errors {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    .f16-container {
        width: min(100% - 20px, 1180px);
    }


    .f16-hero {
        min-height: auto;

        padding: 34px 22px;
    }

    .f16-hero h1 {
        font-size: 37px;
    }

    .f16-hero-symbol {
        right: 18px;
        top: 24px;

        transform: none;

        font-size: 65px;
    }


    .f16-section {
        margin-top: 16px;

        padding: 20px 16px;
    }

    .f16-section h2 {
        font-size: 23px;
    }


    .f16-card-grid,
    .f16-principles,
    .f16-steps,
    .f16-errors,
    .f16-related {
        grid-template-columns: 1fr;
    }


    .f16-card {
        width: 100%;
        max-width: 390px;

        margin: 0 auto;
    }


    .f16-versus {
        grid-template-columns: 1fr;
    }


    .f16-flow {
        flex-direction: column;
    }

}
/* =========================================================
   F17 — CARTAS RARAS PARA FARMAR
========================================================= */

.f17-page {
    width: 100%;
}

.f17-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}


/* HERO */

.f17-hero {
    position: relative;
    overflow: hidden;

    min-height: 320px;
    margin-top: 16px;
    padding: 50px 46px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            120deg,
            #172640 0%,
            #18243b 55%,
            #352a1d 100%
        );

    border: 1px solid #31425d;
    border-radius: 18px;
}

.f17-hero-content {
    position: relative;
    z-index: 2;

    max-width: 820px;
}

.f17-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: #ffc400;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.f17-hero h1 {
    margin: 0 0 20px;

    color: #fff;

    font-size: clamp(38px, 5vw, 64px);
    line-height: 1;
}

.f17-hero p {
    max-width: 760px;
    margin: 0;

    color: #b8c8de;

    font-size: 16px;
    line-height: 1.65;
}

.f17-hero-symbol {
    position: absolute;

    right: 70px;
    top: 50%;

    transform: translateY(-50%);

    color: rgba(255, 196, 0, .13);

    font-size: 135px;
}


/* SEÇÕES */

.f17-section {
    margin-top: 24px;
    padding: 28px;

    background: #111d33;

    border: 1px solid #2b3d59;
    border-radius: 16px;
}

.f17-section h2 {
    margin: 0 0 16px;

    color: #fff;

    font-size: 27px;
}

.f17-section > p {
    color: #b9c8df;

    line-height: 1.7;
}


/* REGRA */

.f17-rule {
    margin-top: 20px;
    padding: 22px;

    text-align: center;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .5);
    border-radius: 10px;
}

.f17-rule > span {
    display: block;

    margin-bottom: 6px;

    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
}

.f17-rule strong {
    display: block;

    color: #fff;

    font-size: 20px;
}

.f17-rule p {
    margin: 8px 0 0;

    color: #bdcadb;
}

.f17-rule--small {
    text-align: left;
}


/* CARTAS */

.f17-card-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 16px;

    margin-top: 24px;
}

.f17-card {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 11px;

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.f17-card--best {
    border-color: rgba(255, 196, 0, .6);
}

.f17-card--good {
    border-color: rgba(91, 156, 255, .45);
}

.f17-card:hover {
    transform: translateY(-3px);

    border-color: #ffc400;
}

.f17-card-image {
    padding: 14px 14px 0;
}

.f17-card-image img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0 auto;

    border-radius: 7px;
}

.f17-card-body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 15px 16px 18px;
}

.f17-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-bottom: 9px;
}

.f17-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f17-tier {
    padding: 4px 8px;

    color: #ffc400;

    border: 1px solid rgba(255, 196, 0, .38);
    border-radius: 999px;

    font-size: 8px;
    font-weight: 900;
}

.f17-role {
    color: #9eafc6;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .8px;

    text-transform: uppercase;
}

.f17-card h3 {
    margin: 6px 0 10px;

    font-size: 16px;
}

.f17-card h3 a {
    color: #fff;

    text-decoration: none;
}

.f17-card h3 a:hover {
    color: #ffc400;
}

.f17-stats {
    display: flex;

    gap: 9px;

    margin-bottom: 11px;
}

.f17-stats > span {
    flex: 1;

    padding: 7px;

    text-align: center;

    color: #9eafc6;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 7px;

    font-size: 8px;
}

.f17-stats strong {
    display: block;

    margin-top: 2px;

    color: #ffc400;

    font-size: 13px;
}

.f17-card-body > p {
    color: #aebed4;

    font-size: 12px;
    line-height: 1.55;
}


/* DROP */

.f17-drop-box {
    margin-top: auto;
    margin-bottom: 13px;
    padding: 12px;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 8px;
}

.f17-drop-box > small {
    display: block;

    margin-bottom: 8px;

    color: #ffc400;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: .8px;
}

.f17-drop-duelist {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 9px;
}

.f17-drop-duelist img {
    display: block;

    width: 50px;
    height: 50px;

    object-fit: contain;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 7px;
}

.f17-drop-duelist strong {
    display: block;

    color: #fff;

    font-size: 12px;
}

.f17-drop-duelist span {
    display: block;

    margin-top: 2px;

    color: #9eafc6;

    font-size: 9px;
}

.f17-drop-box > a {
    color: #ffc400;

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.f17-card-link {
    color: #ffc400;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


/* PRIORIDADES */

.f17-priority-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f17-priority-grid article {
    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f17-priority-grid article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 12px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f17-priority-grid h3 {
    margin: 0 0 7px;

    color: #fff;

    font-size: 14px;
}

.f17-priority-grid p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* PROBABILITY */

.f17-probability {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 22px;
    padding: 22px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 11px;
}

.f17-probability > div {
    min-width: 155px;

    padding: 15px;

    text-align: center;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 8px;
}

.f17-probability small {
    display: block;

    margin-bottom: 5px;

    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
}

.f17-probability strong {
    display: block;

    color: #fff;

    font-size: 14px;
}

.f17-probability span {
    color: #9eafc6;

    font-size: 9px;
}

.f17-probability > b {
    color: #ffc400;

    font-size: 21px;
}

.f17-probability-result {
    border-color: rgba(255, 196, 0, .6) !important;
}


/* ALERTA */

.f17-alert {
    margin-top: 18px;
    padding: 16px 18px;

    color: #c5d1e1;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .42);
    border-radius: 9px;

    line-height: 1.6;
}

.f17-alert strong {
    color: #ffc400;
}


/* VERSUS */

.f17-versus {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        60px
        minmax(0, 1fr);

    gap: 16px;
    align-items: center;

    margin-top: 22px;
}

.f17-versus article {
    padding: 20px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f17-versus article > span {
    color: #ffc400;

    font-size: 9px;
    font-weight: 900;
}

.f17-versus h3 {
    margin: 5px 0 12px;

    color: #fff;

    font-size: 18px;
}

.f17-versus ul {
    margin: 0;
    padding-left: 20px;

    color: #b8c8dc;

    font-size: 12px;
    line-height: 1.8;
}

.f17-vs {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    margin: auto;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-weight: 900;
}


/* ERROS */

.f17-errors {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f17-errors article {
    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f17-errors article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 12px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f17-errors h3 {
    margin: 0 0 7px;

    color: #fff;

    font-size: 14px;
}

.f17-errors p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* CHECKLIST */

.f17-checklist {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-top: 20px;
}

.f17-checklist > div {
    display: flex;

    gap: 12px;

    padding: 14px 16px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 9px;
}

.f17-checklist span {
    color: #ffc400;

    font-weight: 900;
}

.f17-checklist p {
    margin: 0;

    color: #b8c8dd;

    font-size: 13px;
}


/* FINAL */

.f17-final {
    margin-top: 20px;
    padding: 26px;

    text-align: center;

    background:
        linear-gradient(
            120deg,
            rgba(255, 196, 0, .04),
            rgba(255, 196, 0, .09)
        );

    border: 1px solid rgba(255, 196, 0, .6);
    border-radius: 11px;
}

.f17-final small {
    display: block;

    margin-bottom: 6px;

    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
}

.f17-final strong {
    display: block;

    color: #fff;

    font-size: 21px;
}

.f17-final p {
    max-width: 720px;

    margin: 10px auto;

    color: #bdcadb;

    line-height: 1.6;
}

.f17-final a {
    display: inline-flex;

    margin-top: 6px;
    padding: 10px 15px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 8px;

    font-size: 11px;
    font-weight: 900;

    text-decoration: none;
}


/* RELATED */

.f17-related {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f17-related > a {
    display: grid;

    grid-template-columns:
        46px minmax(0, 1fr) 24px;

    gap: 13px;
    align-items: center;

    padding: 17px;

    text-decoration: none;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f17-related > a:hover {
    border-color: #ffc400;
}

.f17-related > a > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f17-related strong {
    display: block;

    margin-bottom: 3px;

    color: #fff;

    font-size: 13px;
}

.f17-related small {
    color: #aebed5;

    font-size: 11px;
}

.f17-related b {
    color: #ffc400;
}


/* TABLET */

@media (max-width: 980px) {

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

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

}


/* MOBILE */

@media (max-width: 680px) {

    .f17-container {
        width: min(100% - 20px, 1180px);
    }

    .f17-hero {
        min-height: auto;
        padding: 34px 22px;
    }

    .f17-hero h1 {
        font-size: 37px;
    }

    .f17-hero-symbol {
        right: 18px;
        top: 24px;

        transform: none;

        font-size: 65px;
    }

    .f17-section {
        margin-top: 16px;
        padding: 20px 16px;
    }

    .f17-section h2 {
        font-size: 23px;
    }

    .f17-card-grid,
    .f17-priority-grid,
    .f17-errors,
    .f17-related {
        grid-template-columns: 1fr;
    }

    .f17-card {
        width: 100%;
        max-width: 390px;

        margin: 0 auto;
    }

    .f17-versus {
        grid-template-columns: 1fr;
    }

    .f17-probability {
        flex-direction: column;
    }

    .f17-probability > div {
        width: 100%;
    }

}
/* =========================================================
   F18 — MELHORES MAGIAS E ARMADILHAS
========================================================= */

.f18-page {
    width: 100%;
}

.f18-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.f18-hero {
    position: relative;
    overflow: hidden;

    min-height: 320px;
    margin-top: 16px;
    padding: 50px 46px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            120deg,
            #172640 0%,
            #18243b 55%,
            #352a1d 100%
        );

    border: 1px solid #31425d;
    border-radius: 18px;
}

.f18-hero-content {
    position: relative;
    z-index: 2;

    max-width: 820px;
}

.f18-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: #ffc400;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.f18-hero h1 {
    margin: 0 0 20px;

    color: #fff;

    font-size: clamp(38px, 5vw, 64px);
    line-height: 1;
}

.f18-hero p {
    max-width: 760px;
    margin: 0;

    color: #b8c8de;

    font-size: 16px;
    line-height: 1.65;
}

.f18-hero-symbol {
    position: absolute;

    right: 70px;
    top: 50%;

    transform: translateY(-50%);

    color: rgba(255, 196, 0, .13);

    font-size: 135px;
}


/* =========================================================
   SEÇÕES
========================================================= */

.f18-section {
    margin-top: 24px;
    padding: 28px;

    background: #111d33;

    border: 1px solid #2b3d59;
    border-radius: 16px;
}

.f18-section h2 {
    margin: 0 0 16px;

    color: #fff;

    font-size: 27px;
}

.f18-section > p {
    color: #b9c8df;

    line-height: 1.7;
}


/* =========================================================
   REGRA
========================================================= */

.f18-rule {
    margin-top: 20px;
    padding: 22px;

    text-align: center;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .5);
    border-radius: 10px;
}

.f18-rule > span {
    display: block;

    margin-bottom: 6px;

    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.f18-rule strong {
    display: block;

    color: #fff;

    font-size: 20px;
}

.f18-rule p {
    margin: 8px 0 0;

    color: #bdcadb;
}


/* =========================================================
   CARTAS
========================================================= */

.f18-card-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

    margin-top: 24px;
}

.f18-card {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 11px;

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.f18-card:hover {
    transform: translateY(-3px);

    border-color: #ffc400;
}

.f18-card--best {
    border-color: rgba(255, 196, 0, .60);
}

.f18-card--good {
    border-color: rgba(91, 156, 255, .45);
}

.f18-card--trap {
    border-color: rgba(190, 100, 220, .45);
}

.f18-card--support {
    border-color: rgba(148, 163, 184, .40);
}


/* =========================================================
   IMAGEM
========================================================= */

.f18-card-image {
    padding: 14px 14px 0;
}

.f18-card-image img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0 auto;

    border-radius: 7px;
}


/* =========================================================
   BODY
========================================================= */

.f18-card-body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 15px 16px 18px;
}

.f18-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-bottom: 9px;
}

.f18-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f18-category {
    padding: 4px 8px;

    color: #ffc400;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .35);
    border-radius: 999px;

    font-size: 8px;
    font-weight: 900;

    text-transform: uppercase;
}

.f18-tier {
    color: #9eafc6;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .8px;

    text-transform: uppercase;
}

.f18-card h3 {
    margin: 6px 0 10px;

    font-size: 16px;
}

.f18-card h3 a {
    color: #fff;

    text-decoration: none;
}

.f18-card h3 a:hover {
    color: #ffc400;
}


/* FUNÇÃO */

.f18-role {
    margin-bottom: 11px;
    padding: 9px 10px;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 7px;
}

.f18-role small {
    display: block;

    margin-bottom: 2px;

    color: #9eafc6;

    font-size: 7px;
    font-weight: 900;
}

.f18-role strong {
    color: #ffc400;

    font-size: 11px;
}

.f18-card-body > p {
    flex: 1;

    color: #aebed4;

    font-size: 12px;
    line-height: 1.55;
}

.f18-card-link {
    width: fit-content;

    margin-top: auto;

    color: #ffc400;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================================================
   VERSUS
========================================================= */

.f18-versus {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        60px
        minmax(0, 1fr);

    gap: 16px;
    align-items: center;

    margin-top: 22px;
}

.f18-versus article {
    padding: 20px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f18-versus article > span {
    color: #ffc400;

    font-size: 9px;
    font-weight: 900;
}

.f18-versus h3 {
    margin: 5px 0 12px;

    color: #fff;

    font-size: 18px;
}

.f18-versus ul {
    margin: 0;
    padding-left: 20px;

    color: #b8c8dc;

    font-size: 12px;
    line-height: 1.8;
}

.f18-vs {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    margin: auto;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-weight: 900;
}


/* =========================================================
   BALANÇO
========================================================= */

.f18-balance {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 22px;
    padding: 22px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 11px;
}

.f18-balance article {
    min-width: 170px;

    padding: 15px;

    text-align: center;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 8px;
}

.f18-balance small {
    display: block;

    margin-bottom: 5px;

    color: #9eafc6;

    font-size: 8px;
    font-weight: 900;
}

.f18-balance strong {
    display: block;

    color: #fff;

    font-size: 14px;
}

.f18-balance span {
    color: #aebed4;

    font-size: 9px;
}

.f18-balance > b {
    color: #ffc400;

    font-size: 21px;
}

.f18-balance-result {
    border-color: rgba(255, 196, 0, .6) !important;
}

.f18-balance-result strong {
    color: #ffc400;
}


/* =========================================================
   ALERTA
========================================================= */

.f18-alert {
    margin-top: 18px;
    padding: 16px 18px;

    color: #c5d1e1;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .42);
    border-radius: 9px;

    line-height: 1.6;
}

.f18-alert strong {
    color: #ffc400;
}


/* =========================================================
   CENÁRIOS
========================================================= */

.f18-scenarios {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f18-scenarios article {
    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f18-scenarios article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 12px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f18-scenarios h3 {
    margin: 0 0 7px;

    color: #fff;

    font-size: 14px;
}

.f18-scenarios p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   DECISÃO
========================================================= */

.f18-decision {
    max-width: 800px;

    margin: 22px auto 0;
}

.f18-decision-question,
.f18-decision-final {
    padding: 17px;

    text-align: center;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 9px;
}

.f18-decision-question small,
.f18-decision-final small {
    display: block;

    margin-bottom: 5px;

    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
}

.f18-decision-question strong,
.f18-decision-final strong {
    color: #fff;

    font-size: 14px;
}

.f18-decision-arrow {
    padding: 7px;

    text-align: center;

    color: #ffc400;

    font-size: 20px;
    font-weight: 900;
}

.f18-decision-final {
    border-color: rgba(255, 196, 0, .6);
}

.f18-decision-final strong {
    color: #ffc400;
}


/* =========================================================
   ERROS
========================================================= */

.f18-errors {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f18-errors article {
    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f18-errors article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 12px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f18-errors h3 {
    margin: 0 0 7px;

    color: #fff;

    font-size: 14px;
}

.f18-errors p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   CHECKLIST
========================================================= */

.f18-checklist {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-top: 20px;
}

.f18-checklist > div {
    display: flex;

    gap: 12px;

    padding: 14px 16px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 9px;
}

.f18-checklist span {
    color: #ffc400;

    font-weight: 900;
}

.f18-checklist p {
    margin: 0;

    color: #b8c8dd;

    font-size: 13px;
}


/* =========================================================
   FINAL
========================================================= */

.f18-final {
    margin-top: 20px;
    padding: 26px;

    text-align: center;

    background:
        linear-gradient(
            120deg,
            rgba(255, 196, 0, .04),
            rgba(255, 196, 0, .09)
        );

    border: 1px solid rgba(255, 196, 0, .6);
    border-radius: 11px;
}

.f18-final small {
    display: block;

    margin-bottom: 6px;

    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
}

.f18-final strong {
    display: block;

    color: #fff;

    font-size: 21px;
}

.f18-final p {
    max-width: 720px;

    margin: 10px auto;

    color: #bdcadb;

    line-height: 1.6;
}

.f18-final a {
    display: inline-flex;

    margin-top: 6px;
    padding: 10px 15px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 8px;

    font-size: 11px;
    font-weight: 900;

    text-decoration: none;
}


/* =========================================================
   RELATED
========================================================= */

.f18-related {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f18-related > a {
    display: grid;

    grid-template-columns:
        46px minmax(0, 1fr) 24px;

    gap: 13px;
    align-items: center;

    padding: 17px;

    text-decoration: none;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f18-related > a:hover {
    border-color: #ffc400;
}

.f18-related > a > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f18-related strong {
    display: block;

    margin-bottom: 3px;

    color: #fff;

    font-size: 13px;
}

.f18-related small {
    color: #aebed5;

    font-size: 11px;
}

.f18-related b {
    color: #ffc400;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    .f18-card-grid,
    .f18-scenarios,
    .f18-errors {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    .f18-container {
        width: min(100% - 20px, 1180px);
    }


    .f18-hero {
        min-height: auto;

        padding: 34px 22px;
    }

    .f18-hero h1 {
        font-size: 37px;
    }

    .f18-hero-symbol {
        right: 18px;
        top: 24px;

        transform: none;

        font-size: 65px;
    }


    .f18-section {
        margin-top: 16px;

        padding: 20px 16px;
    }

    .f18-section h2 {
        font-size: 23px;
    }


    .f18-card-grid,
    .f18-scenarios,
    .f18-errors,
    .f18-related {
        grid-template-columns: 1fr;
    }


    .f18-card {
        width: 100%;
        max-width: 390px;

        margin: 0 auto;
    }


    .f18-versus {
        grid-template-columns: 1fr;
    }


    .f18-balance {
        flex-direction: column;
    }

    .f18-balance article {
        width: 100%;
    }

}
/* =========================================================
   F19 — FUSÕES DE 2000 A 3000 ATK
========================================================= */

.f19-page {
    width: 100%;
}

.f19-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.f19-hero {
    position: relative;
    overflow: hidden;

    min-height: 320px;
    margin-top: 16px;
    padding: 50px 46px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            120deg,
            #172640 0%,
            #18243b 55%,
            #352a1d 100%
        );

    border: 1px solid #31425d;
    border-radius: 18px;
}

.f19-hero-content {
    position: relative;
    z-index: 2;

    max-width: 830px;
}

.f19-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: #ffc400;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.f19-hero h1 {
    margin: 0 0 20px;

    color: #fff;

    font-size: clamp(38px, 5vw, 64px);
    line-height: 1;
}

.f19-hero p {
    max-width: 770px;
    margin: 0;

    color: #b8c8de;

    font-size: 16px;
    line-height: 1.65;
}

.f19-hero-symbol {
    position: absolute;

    right: 70px;
    top: 50%;

    transform: translateY(-50%);

    color: rgba(255, 196, 0, .13);

    font-size: 135px;
}


/* =========================================================
   SEÇÕES
========================================================= */

.f19-section {
    margin-top: 24px;
    padding: 28px;

    background: #111d33;

    border: 1px solid #2b3d59;
    border-radius: 16px;
}

.f19-section h2 {
    margin: 0 0 16px;

    color: #fff;

    font-size: 27px;
}

.f19-section > p {
    color: #b9c8df;

    line-height: 1.7;
}


/* =========================================================
   REGRA
========================================================= */

.f19-rule {
    margin-top: 20px;
    padding: 22px;

    text-align: center;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .5);
    border-radius: 10px;
}

.f19-rule > span {
    display: block;

    margin-bottom: 6px;

    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.f19-rule strong {
    display: block;

    color: #fff;

    font-size: 20px;
}

.f19-rule p {
    margin: 8px 0 0;

    color: #bdcadb;
}


/* =========================================================
   GRID DAS FUSÕES
========================================================= */

.f19-fusion-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

    margin-top: 24px;
}

.f19-fusion-card {
    display: grid;

    grid-template-columns:
        185px minmax(0, 1fr);

    gap: 18px;

    padding: 16px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 11px;

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.f19-fusion-card:hover {
    transform: translateY(-2px);

    border-color: #ffc400;
}

.f19-fusion-card--low {
    border-color: rgba(94, 204, 142, .38);
}

.f19-fusion-card--mid {
    border-color: rgba(91, 156, 255, .45);
}

.f19-fusion-card--high {
    border-color: rgba(255, 196, 0, .60);
}


/* =========================================================
   IMAGEM
========================================================= */

.f19-result-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.f19-result-image a {
    display: block;
}

.f19-result-image img {
    display: block;

    width: 100%;
    max-width: 175px;
    height: auto;

    margin: 0 auto;

    border-radius: 7px;
}


/* =========================================================
   BODY
========================================================= */

.f19-fusion-body {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.f19-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 9px;
}

.f19-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f19-range {
    padding: 4px 8px;

    color: #ffc400;

    border: 1px solid rgba(255, 196, 0, .35);
    border-radius: 999px;

    font-size: 8px;
    font-weight: 900;
}

.f19-fusion-body h3 {
    margin: 0 0 10px;

    font-size: 17px;
}

.f19-fusion-body h3 a {
    color: #fff;

    text-decoration: none;
}

.f19-fusion-body h3 a:hover {
    color: #ffc400;
}


/* =========================================================
   STATS
========================================================= */

.f19-stats {
    display: flex;

    gap: 9px;

    margin-bottom: 12px;
}

.f19-stats > span {
    flex: 1;

    padding: 8px;

    text-align: center;

    color: #9eafc6;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 7px;

    font-size: 8px;
}

.f19-stats strong {
    display: block;

    margin-top: 2px;

    color: #ffc400;

    font-size: 14px;
}


/* =========================================================
   FORMULA
========================================================= */

.f19-formula {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 13px;
    padding: 10px;

    text-align: center;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 8px;
}

.f19-formula a {
    color: #d8e2ef;

    font-size: 10px;
    font-weight: 700;

    text-decoration: none;
}

.f19-formula a:hover {
    color: #ffc400;
}

.f19-formula b {
    color: #ffc400;

    font-size: 13px;
}

.f19-formula strong {
    color: #ffc400;

    font-size: 10px;
}

.f19-card-link {
    width: fit-content;

    margin-top: auto;

    color: #ffc400;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================================================
   PROGRESSÃO
========================================================= */

.f19-power-flow {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 22px;
    padding: 24px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 11px;
}

.f19-power-flow > div {
    min-width: 190px;

    padding: 18px;

    text-align: center;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 9px;
}

.f19-power-flow small {
    display: block;

    margin-bottom: 5px;

    color: #9eafc6;

    font-size: 8px;
    font-weight: 900;
}

.f19-power-flow strong {
    display: block;

    color: #fff;

    font-size: 22px;
}

.f19-power-flow span {
    color: #aebed4;

    font-size: 10px;
}

.f19-power-flow > b {
    color: #ffc400;

    font-size: 24px;
}

.f19-power-result {
    border-color: rgba(255, 196, 0, .65) !important;
}

.f19-power-result strong {
    color: #ffc400;
}

.f19-center-text {
    max-width: 760px;

    margin: 18px auto 0 !important;

    text-align: center;
}


/* =========================================================
   PRINCÍPIOS
========================================================= */

.f19-principles {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f19-principles article {
    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f19-principles article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 12px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f19-principles h3 {
    margin: 0 0 7px;

    color: #fff;

    font-size: 14px;
}

.f19-principles p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   ERROS
========================================================= */

.f19-errors {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f19-errors article {
    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f19-errors article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 12px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f19-errors h3 {
    margin: 0 0 7px;

    color: #fff;

    font-size: 14px;
}

.f19-errors p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   ALERTA
========================================================= */

.f19-alert {
    margin-top: 18px;
    padding: 16px 18px;

    color: #c5d1e1;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .42);
    border-radius: 9px;

    line-height: 1.6;
}


/* =========================================================
   CHECKLIST
========================================================= */

.f19-checklist {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-top: 20px;
}

.f19-checklist > div {
    display: flex;

    gap: 12px;

    padding: 14px 16px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 9px;
}

.f19-checklist span {
    color: #ffc400;

    font-weight: 900;
}

.f19-checklist p {
    margin: 0;

    color: #b8c8dd;

    font-size: 13px;
}


/* =========================================================
   FINAL
========================================================= */

.f19-final {
    margin-top: 20px;
    padding: 26px;

    text-align: center;

    background:
        linear-gradient(
            120deg,
            rgba(255, 196, 0, .04),
            rgba(255, 196, 0, .09)
        );

    border: 1px solid rgba(255, 196, 0, .6);
    border-radius: 11px;
}

.f19-final small {
    display: block;

    margin-bottom: 6px;

    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
}

.f19-final strong {
    display: block;

    color: #fff;

    font-size: 21px;
}

.f19-final p {
    max-width: 720px;

    margin: 10px auto;

    color: #bdcadb;

    line-height: 1.6;
}

.f19-final a {
    display: inline-flex;

    margin-top: 6px;
    padding: 10px 15px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 8px;

    font-size: 11px;
    font-weight: 900;

    text-decoration: none;
}


/* =========================================================
   RELATED
========================================================= */

.f19-related {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f19-related > a {
    display: grid;

    grid-template-columns:
        46px minmax(0, 1fr) 24px;

    gap: 13px;
    align-items: center;

    padding: 17px;

    text-decoration: none;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f19-related > a:hover {
    border-color: #ffc400;
}

.f19-related > a > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f19-related strong {
    display: block;

    margin-bottom: 3px;

    color: #fff;

    font-size: 13px;
}

.f19-related small {
    color: #aebed5;

    font-size: 11px;
}

.f19-related b {
    color: #ffc400;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    .f19-fusion-grid {
        grid-template-columns: 1fr;
    }

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

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    .f19-container {
        width: min(100% - 20px, 1180px);
    }


    .f19-hero {
        min-height: auto;

        padding: 34px 22px;
    }

    .f19-hero h1 {
        font-size: 37px;
    }

    .f19-hero-symbol {
        right: 18px;
        top: 24px;

        transform: none;

        font-size: 65px;
    }


    .f19-section {
        margin-top: 16px;

        padding: 20px 16px;
    }

    .f19-section h2 {
        font-size: 23px;
    }


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

    .f19-result-image img {
        max-width: 260px;
    }


    .f19-principles,
    .f19-errors,
    .f19-related {
        grid-template-columns: 1fr;
    }


    .f19-power-flow {
        flex-direction: column;
    }

    .f19-power-flow > div {
        width: 100%;
    }

}
/* =========================================================
   F20 — MELHORES CARTAS POR FASE
========================================================= */

.f20-page {
    width: 100%;
}

.f20-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}


/* HERO */

.f20-hero {
    position: relative;
    overflow: hidden;

    min-height: 320px;
    margin-top: 16px;
    padding: 50px 46px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            120deg,
            #172640 0%,
            #18243b 55%,
            #352a1d 100%
        );

    border: 1px solid #31425d;
    border-radius: 18px;
}

.f20-hero-content {
    position: relative;
    z-index: 2;

    max-width: 830px;
}

.f20-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: #ffc400;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.f20-hero h1 {
    margin: 0 0 20px;

    color: #fff;

    font-size: clamp(38px, 5vw, 64px);
    line-height: 1;
}

.f20-hero p {
    max-width: 770px;
    margin: 0;

    color: #b8c8de;

    font-size: 16px;
    line-height: 1.65;
}

.f20-hero-symbol {
    position: absolute;

    right: 70px;
    top: 50%;

    transform: translateY(-50%);

    color: rgba(255, 196, 0, .13);

    font-size: 135px;
}


/* SEÇÕES */

.f20-section {
    margin-top: 24px;
    padding: 28px;

    background: #111d33;

    border: 1px solid #2b3d59;
    border-radius: 16px;
}

.f20-section h2 {
    margin: 0 0 16px;

    color: #fff;

    font-size: 27px;
}

.f20-section > p {
    color: #b9c8df;

    line-height: 1.7;
}


/* REGRA */

.f20-rule {
    margin-top: 20px;
    padding: 22px;

    text-align: center;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .5);
    border-radius: 10px;
}

.f20-rule > span {
    display: block;

    margin-bottom: 6px;

    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
}

.f20-rule strong {
    display: block;

    color: #fff;

    font-size: 20px;
}

.f20-rule p {
    margin: 8px 0 0;

    color: #bdcadb;
}


/* PROGRESS */

.f20-progress {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 22px;
    padding: 24px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 11px;
}

.f20-progress article {
    min-width: 205px;

    padding: 18px;

    text-align: center;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 9px;
}

.f20-progress small {
    display: block;

    margin-bottom: 5px;

    color: #9eafc6;

    font-size: 8px;
    font-weight: 900;
}

.f20-progress strong {
    display: block;

    color: #fff;

    font-size: 22px;
}

.f20-progress span {
    color: #aebed4;

    font-size: 10px;
}

.f20-progress > b {
    color: #ffc400;

    font-size: 24px;
}

.f20-progress-final {
    border-color: rgba(255, 196, 0, .65) !important;
}

.f20-progress-final strong {
    color: #ffc400;
}


/* ALERTA */

.f20-alert {
    margin-top: 18px;
    padding: 16px 18px;

    color: #c5d1e1;

    background: rgba(255, 196, 0, .04);

    border: 1px solid rgba(255, 196, 0, .42);
    border-radius: 9px;

    line-height: 1.6;
}

.f20-alert strong {
    color: #ffc400;
}


/* CARDS */

.f20-card-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

    margin-top: 24px;
}

.f20-card {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 11px;

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.f20-card:hover {
    transform: translateY(-3px);

    border-color: #ffc400;
}

.f20-card--early {
    border-color: rgba(94, 204, 142, .40);
}

.f20-card--mid {
    border-color: rgba(91, 156, 255, .45);
}

.f20-card--late {
    border-color: rgba(255, 196, 0, .60);
}

.f20-card-image {
    padding: 14px 14px 0;
}

.f20-card-image img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0 auto;

    border-radius: 7px;
}

.f20-card-body {
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 15px 16px 18px;
}

.f20-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-bottom: 9px;
}

.f20-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f20-stage {
    padding: 4px 8px;

    color: #ffc400;

    border: 1px solid rgba(255, 196, 0, .35);
    border-radius: 999px;

    font-size: 8px;
    font-weight: 900;
}

.f20-role {
    color: #9eafc6;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .8px;

    text-transform: uppercase;
}

.f20-card h3 {
    margin: 6px 0 10px;

    font-size: 16px;
}

.f20-card h3 a {
    color: #fff;

    text-decoration: none;
}

.f20-card h3 a:hover {
    color: #ffc400;
}

.f20-stats {
    display: flex;

    gap: 9px;

    margin-bottom: 11px;
}

.f20-stats > span {
    flex: 1;

    padding: 7px;

    text-align: center;

    color: #9eafc6;

    background: #111d33;

    border: 1px solid #31425d;
    border-radius: 7px;

    font-size: 8px;
}

.f20-stats strong {
    display: block;

    margin-top: 2px;

    color: #ffc400;

    font-size: 13px;
}

.f20-card-body > p {
    flex: 1;

    color: #aebed4;

    font-size: 12px;
    line-height: 1.55;
}

.f20-card-link {
    width: fit-content;

    margin-top: auto;

    color: #ffc400;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


/* SINAIS */

.f20-signs {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f20-signs article {
    padding: 18px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f20-signs article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 12px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f20-signs h3 {
    margin: 0 0 7px;

    color: #fff;

    font-size: 14px;
}

.f20-signs p {
    margin: 0;

    color: #b5c5da;

    font-size: 12px;
    line-height: 1.6;
}


/* CHECKLIST */

.f20-checklist {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-top: 20px;
}

.f20-checklist > div {
    display: flex;

    gap: 12px;

    padding: 14px 16px;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 9px;
}

.f20-checklist span {
    color: #ffc400;

    font-weight: 900;
}

.f20-checklist p {
    margin: 0;

    color: #b8c8dd;

    font-size: 13px;
}


/* FINAL */

.f20-final {
    margin-top: 20px;
    padding: 26px;

    text-align: center;

    background:
        linear-gradient(
            120deg,
            rgba(255, 196, 0, .04),
            rgba(255, 196, 0, .09)
        );

    border: 1px solid rgba(255, 196, 0, .6);
    border-radius: 11px;
}

.f20-final small {
    display: block;

    margin-bottom: 6px;

    color: #ffc400;

    font-size: 8px;
    font-weight: 900;
}

.f20-final strong {
    display: block;

    color: #fff;

    font-size: 21px;
}

.f20-final p {
    max-width: 720px;

    margin: 10px auto;

    color: #bdcadb;

    line-height: 1.6;
}

.f20-final a {
    display: inline-flex;

    margin-top: 6px;
    padding: 10px 15px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 8px;

    font-size: 11px;
    font-weight: 900;

    text-decoration: none;
}


/* RELATED */

.f20-related {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.f20-related > a {
    display: grid;

    grid-template-columns:
        46px minmax(0, 1fr) 24px;

    gap: 13px;
    align-items: center;

    padding: 17px;

    text-decoration: none;

    background: #0d182b;

    border: 1px solid #31425d;
    border-radius: 10px;
}

.f20-related > a:hover {
    border-color: #ffc400;
}

.f20-related > a > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    color: #ffc400;

    border: 1px solid #ffc400;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 900;
}

.f20-related strong {
    display: block;

    margin-bottom: 3px;

    color: #fff;

    font-size: 13px;
}

.f20-related small {
    color: #aebed5;

    font-size: 11px;
}

.f20-related b {
    color: #ffc400;
}


/* TABLET */

@media (max-width: 980px) {

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

}


/* MOBILE */

@media (max-width: 680px) {

    .f20-container {
        width: min(100% - 20px, 1180px);
    }


    .f20-hero {
        min-height: auto;

        padding: 34px 22px;
    }

    .f20-hero h1 {
        font-size: 37px;
    }

    .f20-hero-symbol {
        right: 18px;
        top: 24px;

        transform: none;

        font-size: 65px;
    }


    .f20-section {
        margin-top: 16px;

        padding: 20px 16px;
    }

    .f20-section h2 {
        font-size: 23px;
    }


    .f20-card-grid,
    .f20-signs,
    .f20-related {
        grid-template-columns: 1fr;
    }


    .f20-card {
        width: 100%;
        max-width: 390px;

        margin: 0 auto;
    }


    .f20-progress {
        flex-direction: column;
    }

    .f20-progress article {
        width: 100%;
    }

}