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

.teams-hero {
    padding: 58px 0;

    background:
        linear-gradient(
            120deg,
            #063f75,
            #075ba4
        );

    color: white;
}


.teams-kicker {
    color: #ffb47c;

    font-size: 10px;

    font-weight: 950;

    letter-spacing: .8px;
}


.teams-hero h1 {
    margin:
        7px 0 8px;

    font-size:
        clamp(
            34px,
            5vw,
            53px
        );
}


.teams-hero p {
    margin: 0;

    color: #dcecf8;

    font-size: 14px;
}


/* =====================================================
   RESUMO
===================================================== */

.teams-summary {
    padding: 20px 0;

    background: #f3f7fa;
}


.teams-summary-grid {
    display: grid;

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

    gap: 11px;
}


.teams-summary-grid article {
    padding: 15px;

    border:
        1px solid #dfe8ef;

    border-radius: 12px;

    background: white;
}


.teams-summary-grid small,
.teams-summary-grid strong {
    display: block;
}


.teams-summary-grid small {
    color: #7c90a0;

    font-size: 8px;

    font-weight: 900;
}


.teams-summary-grid strong {
    margin-top: 4px;

    color: #073f75;

    font-size: 26px;
}


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

.teams-content {
    padding: 38px 0 60px;
}


.teams-toolbar {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 30px;
}


.teams-toolbar > div:first-child > span {
    color: #ff6b00;

    font-size: 9px;

    font-weight: 950;
}


.teams-toolbar h2 {
    color: #073f75;

    margin: 4px 0;
}


.team-filter {
    display: flex;

    gap: 7px;
}


.team-filter-button {
    border:
        1px solid #d4e0e9;

    background: white;

    color: #567085;

    padding: 9px 13px;

    border-radius: 8px;

    font-weight: 800;

    cursor: pointer;
}


.team-filter-button.active {
    background: #07549a;

    border-color: #07549a;

    color: white;
}


/* =====================================================
   CATEGORIA
===================================================== */

.category-section {
    margin-top: 30px;
}


.category-heading {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 13px;
}


.category-symbol {
    width: 45px;
    height: 45px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color: white;

    font-size: 23px;

    font-weight: 950;
}


.category-symbol--female {
    background: #ff7a16;
}


.category-symbol--male {
    background: #07549a;
}


.category-heading span {
    color: #7b8fa0;

    font-size: 8px;

    font-weight: 900;
}


.category-heading h2 {
    color: #073f75;

    margin: 2px 0 0;

    font-size: 21px;
}


/* =====================================================
   EQUIPES
===================================================== */

.teams-grid {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 13px;
}


.team-card {
    border:
        1px solid #dfe8ef;

    border-radius: 14px;

    background: white;

    padding: 16px;
}


.team-card-header {
    display: flex;

    justify-content: space-between;

    align-items: center;
}


.team-card-symbol {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background: #edf4f8;

    color: #07549a;

    font-size: 22px;

    font-weight: 950;
}


.team-card--female
.team-card-symbol {
    background: #fff0e4;

    color: #e66c12;
}


.team-confirmed {
    padding: 5px 8px;

    border-radius: 99px;

    background: #e3f7ec;

    color: #168354;

    font-size: 8px;

    font-weight: 900;
}


.team-card-body {
    margin-top: 17px;
}


.team-card-body small {
    color: #8597a5;

    font-size: 8px;

    font-weight: 900;
}


.team-card-body h3 {
    margin:
        3px 0 4px;

    color: #073f75;

    font-size: 18px;
}


.team-card-body p {
    margin: 0;

    color: #74899a;

    font-size: 10px;
}


.team-card-stats {
    margin-top: 17px;

    padding-top: 13px;

    border-top:
        1px solid #e3eaf0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;
}


.team-card-stats small,
.team-card-stats strong {
    display: block;
}


.team-card-stats small {
    color: #8093a2;

    font-size: 7px;
}


.team-card-stats strong {
    color: #073f75;

    font-size: 19px;

    margin-top: 2px;
}


.view-team-button {
    border: none;

    border-radius: 8px;

    padding: 8px 11px;

    background: #07549a;

    color: white;

    font-size: 9px;

    font-weight: 850;
}


/* =====================================================
   VAZIO
===================================================== */

.teams-empty {
    padding: 70px 20px;

    text-align: center;
}


.teams-empty > div {
    font-size: 45px;
}


.teams-empty h2 {
    color: #073f75;
}


.teams-empty p {
    color: #75899a;

    font-size: 11px;
}


/* =====================================================
   MODAL
===================================================== */

.team-modal {
    display: none;

    position: fixed;

    inset: 0;

    z-index: 400;
}


.team-modal.open {
    display: block;
}


.team-modal-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(3,31,57,.73);

    backdrop-filter: blur(5px);
}


.team-modal-dialog {
    position: relative;

    width:
        min(
            620px,
            calc(100% - 28px)
        );

    margin: 8vh auto;

    padding: 25px;

    border-radius: 17px;

    background: white;

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.3);
}


.team-modal-close {
    position: absolute;

    right: 14px;

    top: 9px;

    border: none;

    background: transparent;

    font-size: 30px;

    color: #778b9b;
}


.team-modal-top {
    display: flex;

    align-items: center;

    gap: 14px;
}


.team-modal-symbol {
    width: 55px;
    height: 55px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    background: #07549a;

    color: white;

    font-size: 30px;
}


.team-modal-top span {
    color: #ff6b00;

    font-size: 8px;

    font-weight: 950;
}


.team-modal-top h2 {
    color: #073f75;

    margin:
        3px 0;
}


.team-modal-top p {
    color: #778c9d;

    margin: 0;

    font-size: 10px;
}


.team-public-status {
    margin-top: 20px;

    padding: 13px;

    display: flex;

    gap: 10px;

    align-items: center;

    border-radius: 10px;

    background: #eaf8f0;

    color: #168354;
}


.team-public-status strong,
.team-public-status small {
    display: block;
}


.team-public-status small {
    margin-top: 2px;

    font-size: 8px;
}


.team-modal-data {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 9px;

    margin-top: 18px;
}


.team-modal-data article {
    padding: 12px;

    border-radius: 9px;

    background: #f3f7fa;
}


.team-modal-data small,
.team-modal-data strong {
    display: block;
}


.team-modal-data small {
    color: #8295a5;

    font-size: 8px;
}


.team-modal-data strong {
    color: #173c5b;

    margin-top: 3px;

    font-size: 11px;
}


.team-privacy-note {
    margin-top: 18px;

    padding: 13px;

    border-radius: 9px;

    background: #fff5df;

    color: #876211;
}


.team-privacy-note strong {
    font-size: 10px;
}


.team-privacy-note p {
    margin:
        4px 0 0;

    font-size: 9px;

    line-height: 1.45;
}


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

@media(max-width:900px) {

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


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

}


@media(max-width:600px) {

    .teams-toolbar {
        align-items: stretch;

        flex-direction: column;
    }


    .team-filter {
        overflow-x: auto;
    }


    .teams-grid,
    .teams-summary-grid,
    .team-modal-data {
        grid-template-columns: 1fr;
    }

}

.team-public-card{display:grid;grid-template-columns:90px 1fr;gap:16px;align-items:center}.team-public-card__image{width:90px;aspect-ratio:1;border-radius:20px;overflow:hidden;background:linear-gradient(145deg,#09296f,#f59e0b);display:grid;place-items:center}.team-public-card__image img{width:100%;height:100%;object-fit:cover}.team-public-card__image span{color:#fff;font-size:2rem}@media(max-width:540px){.team-public-card{grid-template-columns:70px 1fr}.team-public-card__image{width:70px}}