*{
    margin:0;
    padding:0;
    box-sizing:border-box
}

html,body{
    width:100%;
    height:100%;
    min-height:100dvh;
    font-family:system-ui,sans-serif;
    background:#eef2f7;
    display:flex;
    flex-direction:column;
    overscroll-behavior:none;
    overflow:hidden
}

/* ===== HEADER ===== */
.header{
    width:100%;
    height:72px;
    min-height:72px;
    background:#1f3863;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 14px;
    flex-shrink:0
}

.header img{
    height:52px;
    object-fit:contain
}

/* ===== GRID PRINCIPAL (prioridade 1366x768) ===== */
.content{
    flex:1;
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:26px 18px;

    display:grid;
    grid-template-columns:repeat(4,minmax(210px,1fr));
    justify-items:center;
    align-items:center;
    gap:28px;

    overflow:hidden
}

/* ===== CARD ===== */
.option{
    width:100%;
    max-width:270px;
    height:190px;
    background:#1f3863;
    border-radius:18px;
    box-shadow:0 10px 22px rgba(0,0,0,.14);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    cursor:pointer;
    transition:transform .18s, box-shadow .18s;
    flex-shrink:0;
    user-select:none
}

.option:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 28px rgba(0,0,0,.18)
}

.option:active{
    transform:translateY(-1px) scale(.985);
    box-shadow:0 10px 18px rgba(0,0,0,.2)
}

.option img{
    width:84px;
    height:84px;
    object-fit:contain
}

.option span{
    font-size:22px;
    font-weight:650;
    color:#fff;
    letter-spacing:.2px
}

/* ===== TELAS GRANDES (1920x1080+) ===== */
@media(min-width:1600px){
    .header{
        height:80px;
        min-height:80px;
        padding:0 18px
    }

    .header img{
        height:60px
    }

    .content{
        max-width:1400px;
        padding:34px 22px;
        gap:34px
    }

    .option{
        max-width:290px;
        height:205px
    }

    .option img{
        width:92px;
        height:92px
    }

    .option span{
        font-size:23px
    }
}

/* ===== NOTEBOOKS COM ALTURA MENOR (ex: 1366x768 com barra, zoom, etc.) ===== */
@media(max-height:720px){
    .header{
        height:66px;
        min-height:66px
    }

    .header img{
        height:48px
    }

    .content{
        padding:18px 16px;
        gap:22px
    }

    .option{
        height:170px;
        max-width:260px;
        gap:14px
    }

    .option img{
        width:74px;
        height:74px
    }

    .option span{
        font-size:20px
    }
}

/* ===== QUEBRA PRA 2 COLUNAS (tablets/notebooks menores em largura) ===== */
@media(max-width:1180px){
    .content{
        grid-template-columns:repeat(2,minmax(220px,1fr));
        gap:22px;
        padding:20px 16px
    }

    .option{
        max-width:320px;
        height:170px
    }
}

/* ===== MOBILE ===== */
@media(max-width:720px){
    html,body{
        overflow:auto
    }

    .header{
        height:64px;
        min-height:64px
    }

    .header img{
        height:44px
    }

    .content{
        grid-template-columns:1fr;
        gap:14px;
        padding:16px 12px
    }

    .option{
        height:110px;
        border-radius:14px;
        gap:10px
    }

    .option img{
        width:40px;
        height:40px
    }

    .option span{
        font-size:16px
    }
}