/*==========================================================
    RESET
==========================================================*/

*,
*:before,
*:after {
    box-sizing: border-box;
}

html {
    width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    color: #333;
    background: #fff;
    overflow-x: hidden;
    line-height: 1.6;
}

/*==========================================================
    CONTAINER
==========================================================*/

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}



/*==========================================================
    TOP BAR
==========================================================*/

.top-bar {
    background: #0f5570;
    color: #fff;
    min-height: 38px;
}

.top-bar-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    min-height: 38px;
    flex-wrap: wrap;
}

.top-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

    .top-links a {
        color: #fff;
        text-decoration: none;
        margin: 0 12px;
        font-size: 13px;
        transition: .30s;
    }

        .top-links a:hover {
            color: #ff6b00;
        }

/*==========================================================
    HEADER
==========================================================*/

.navbar-custom {
    background: #fff;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    position: relative;
    z-index: 999;
}

.navbar-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 90px;
}

/*==========================================================
    LOGO
==========================================================*/

.logo-area {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 40px;
}

    .logo-area img {
        display: block;
        height: 70px;
        width: auto;
    }

/*==========================================================
    MENU
==========================================================*/

.container-menu {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}
/*==============================
NAVBAR
==============================*/

.navbar-custom {
    background: #fff;
    border: none;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    border-radius: 0;
    margin-bottom: 0;
    min-height: 90px;
    box-shadow: none;
}

    .navbar-custom .container-menu {
        position: relative;
    }

/*==============================
LOGO
==============================*/

.logo-area {
    display: flex;
    align-items: center;
    height: 90px;
    padding: 0;
}

    .logo-area img {
        height: 68px;
        width: auto;
        display: block;
    }

/*==============================
MENU PRINCIPAL
==============================*/

.navbar-collapse {
    border-top: none;
    box-shadow: none;
}

.navbar-nav {
    float: right;
    margin-top: 18px;

}

    .navbar-nav > li {
        margin-left: 10px;
    }

        .navbar-nav > li > a {
            color: #0f5570 !important;
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
            padding: 15px 16px;
            transition: .30s;
        }

            .navbar-nav > li > a:hover {
                color: #ff6b00 !important;
                background: transparent !important;
            }

/*============================================
    QUEBRA SUB MENU 1024 PX
==============================================*/
@media  (max-width: 1024px) {
    .navbar-nav > li {
        margin-left: 50px;
    }
}

    /*============================================
    QUEBRA MENU EM 1360 PX 
==============================================*/

@media  (max-width: 1366px) {
    .navbar-collapse {
        padding-right: 14px;
        padding-left: 15px;
        overflow-x: visible;
        border-top: 1px solid transparent;
        -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
        -webkit-overflow-scrolling: touch;
    }

    .navbar-nav > li > a {
        color: #0f5570 !important;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        padding: 15px 12px;
        transition: .30s;
    }
}

    /*==============================
SUBMENU
==============================*/

    .dropdown-menu {
        background: #1d6b88;
        border: none;
        border-radius: 0;
        min-width: 280px;
        padding: 0;
        margin-top: 0;
        box-shadow: 0 12px 35px rgba(0,0,0,.18);
    }

        .dropdown-menu > li > a {
            color: #fff;
            padding: 14px 22px;
            font-size: 15px;
            font-weight: 500;
            transition: .25s;
        }

            .dropdown-menu > li > a:hover {
                background: #17586f;
                color: #fff;
            }

    /*==============================
BOTÃO MOBILE
==============================*/

    .navbar-toggle {
        margin-top: 28px;
        border: none;
        background: transparent !important;
    }

        .navbar-toggle:hover,
        .navbar-toggle:focus {
            background: transparent !important;
        }

        .navbar-toggle .icon-bar {
            background: #0f5570;
            width: 24px;
            height: 3px;
        }

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

    @media (max-width:991px) {

        .navbar-nav {
            float: none;
            margin: 0;
        }

        .navbar-collapse {
            background: #fff;
            border-top: 1px solid #eee;
            margin-top: 8px;
        }

        .navbar-nav > li {
            margin: 0;
        }

            .navbar-nav > li > a {
                padding-left: 12px;
                padding-right: 12px;
                font-size: 13px;
                font-weight: 600;
            }

        .dropdown-menu {
            position: static;
            float: none;
            width: 100%;
            box-shadow: none;
            background: #0f5570;
        }
    }
    /* ==========================================================
   06 - BANNER / CAROUSEL
========================================================== */

    header {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .banner-container {
        width: 100%;
        height: 100%;
        padding: 0;
    }

    .carousel {
        width: 100%;
        margin-bottom: 0;
    }

    #headerCarousel {
        width: 100%;
    }

    .carousel-inner {
        width: 100%;
    }

        .carousel-inner > .item {
            width: 100%;
        }

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

    .carousel-hero {
        position: relative;
        height: 500px;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

        .carousel-hero .container {
            position: relative;
            width: 100%;
            max-width: 1320px;
            z-index: 20;
        }

        .carousel-hero::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 8px;
            background: #ff6b00;
            z-index: 30;
        }

        /*==========================================================
    BACKGROUND
==========================================================*/

        .carousel-hero img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            z-index: 1;
        }

    /*==========================================================
    GRADIENTES
==========================================================*/

    .gradient-1 {
        background: linear-gradient(90deg,#5f00b8,#3d78ff);
    }

    .gradient-2 {
        background: linear-gradient(90deg,#6a00cc,#4c7fff);
    }

    .gradient-3 {
        background: linear-gradient(90deg,#4d00aa,#3f91ff);
    }

    /*==========================================================
    TEXTO
==========================================================*/

.carousel-content {
    position: absolute;
    width: 48%;
    max-width: 620px;
    margin: 0;
    color: #fff;
    z-index: 50;
}

        .carousel-content h1 {
            font-size: 58px;
            font-weight: 800;
            line-height: 1.08;
            margin-bottom: 25px;
        }

        .carousel-content p {
            font-size: 23px;
            line-height: 1.55;
            margin-bottom: 35px;
        }

    .tag {
        display: inline-block;
        margin-bottom: 18px;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 3px;
        color: #ffc400;
        text-transform: uppercase;
    }

/*==========================================================
    POSIÇÕES DO CONTEÚDO DO BANNER
==========================================================*/

.carousel-content {
    position: absolute;
    width: 48%;
    max-width: 620px;
    margin: 0;
    color: #fff;
    z-index: 50;
}

/* SUPERIOR */
.posicao-SUPERIOR_ESQUERDO {
    left: 80px;
    top: 60px;
}

.posicao-SUPERIOR_CENTRO {
    left: 50%;
    transform: translate(-50%, 2%);
    text-align: center;
}

.posicao-SUPERIOR_DIREITO {
    left: 70%;    
    text-align: center;
}

/* CENTRO */
.posicao-CENTRO_ESQUERDO {
    left: 80px;
    transform: translate(-65%, 20%);
    text-align: center;
}

.posicao-CENTRO {
    left: 50%;   
    transform: translate(-50%, 20%);
    text-align: center;
}

.posicao-CENTRO_DIREITO {
    left: 95%;
    text-align: center;
    transform: translate(-50%, 20%);
}

/* INFERIOR */
.posicao-INFERIOR_ESQUERDO {
    left: 80px;
    transform: translate(-65%, 75%);
    text-align: center;
}

.posicao-INFERIOR_CENTRO {
    left: 50%;    
    transform: translate(-50%, 75%);
    text-align: center;   
    
}

.posicao-INFERIOR_DIREITO {
    left: 95%;
    transform: translate(-50%, 75%);
    text-align: center;
}


    /*==========================================================
    BOTÕES
==========================================================*/

.banner-buttons {
    display: flex;
    gap: 18px;
    margin-top: 35px;
    flex-wrap: wrap;
}

    .btn-banner {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 180px;
        padding: 15px 28px;
        background: #ff6b00;
        color: #fff;
        border-radius: 40px;
        text-decoration: none;
        font-weight: 700;
        transition: .30s;
    }

        .btn-banner:hover {
            background: #ff7c22;
            color: #fff;
            transform: translateY(-2px);
            text-decoration: none;
        }

    .btn-banner-outline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 180px;
        padding: 14px 28px;
        border: 2px solid #fff;
        color: #fff;
        border-radius: 40px;
        font-weight: 700;
        text-decoration: none;
        transition: .30s;
    }

        .btn-banner-outline:hover {
            background: #fff;
            color: #0f5570;
            text-decoration: none;
        }

    /*==========================================================
    INDICADORES
==========================================================*/

    .carousel-indicators {
        bottom: 28px;
    }

        .carousel-indicators li {
            width: 14px;
            height: 14px;
            margin: 0 6px;
            border-radius: 50%;
            border: 2px solid #fff;
            background: transparent;
        }

        .carousel-indicators .active {
            background: #fff;
        }

    /*==========================================================
    SETAS
==========================================================*/

    .carousel-control {
        width: 8%;
        background: none !important;
        opacity: 1;
    }

        .carousel-control:hover {
            background: none !important;
        }

        .carousel-control .glyphicon {
            font-size: 44px;
            margin-top: -22px;
        }

    /*==========================================================
    ANIMAÇÕES
==========================================================*/

    .carousel-content {
        animation: fadeBanner .9s ease;
    }

    @keyframes fadeBanner {

        from {
            opacity: 0;
            transform: translateY(25px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ==========================================================
   07 - HOME
==========================================================*/

    /*==========================================================
    SEÇÃO GERAL
==========================================================*/

    .section-home {
        padding: 80px 0;
    }

    .section-title {
        text-align: center;
        margin-bottom: 60px;
    }

        .section-title h2 {
            color: #0f5570;
            font-size: 42px;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .section-title p {
            color: #666;
            font-size: 18px;
            max-width: 700px;
            margin: auto;
            line-height: 30px;
        }

    /*==========================================================
    DESTAQUES
==========================================================*/

    .features-section {
        padding: 70px 0;
        background: #fff;
    }

    .feature-card {
        background: #fff;
        padding: 35px;
        text-align: center;
        border-radius: 16px;
        transition: .35s;
        height: 100%;
    }

        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 35px rgba(0,0,0,.08);
        }

    .feature-icon {
        width: 90px;
        height: 90px;
        margin: auto;
        border-radius: 50%;
        background: #eef6fa;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 25px;
    }

        .feature-icon i {
            font-size: 42px;
            color: #0f5570;
        }

    .feature-card h3 {
        font-size: 22px;
        font-weight: 700;
        color: #0f5570;
        margin-bottom: 18px;
    }

    .feature-card p {
        color: #666;
        line-height: 28px;
        font-size: 16px;
    }

    /*==========================================================
    CURSOS HOME
==========================================================*/

    .cursos-home {
        padding: 90px 0;
        background: #f8fafc;
    }

    .curso-card {
        background: #fff;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,.08);
        transition: .35s;
        height: 100%;
    }

        .curso-card:hover {
            transform: translateY(-8px);
        }

        .curso-card img {
            width: 100%;
            height: 240px;
            object-fit: cover;
        }

    .curso-body {
        padding: 28px;
    }

        .curso-body h3 {
            color: #0f5570;
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .curso-body p {
            color: #666;
            line-height: 28px;
            margin-bottom: 25px;
        }

    .btn-curso {
        display: inline-block;
        padding: 14px 28px;
        background: #ff6b00;
        color: #fff;
        border-radius: 40px;
        text-decoration: none;
        font-weight: 700;
        transition: .30s;
    }

        .btn-curso:hover {
            background: #f25d00;
            color: #fff;
            text-decoration: none;
        }

    /*==========================================================
    NOTÍCIAS
==========================================================*/

    .noticias-home {
        padding: 90px 0;
        background: #fff;
    }

    .noticia-card {
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 8px 25px rgba(0,0,0,.08);
        transition: .35s;
        height: 100%;
    }

        .noticia-card:hover {
            transform: translateY(-8px);
        }

        .noticia-card img {
            width: 100%;
            height: 220px;
            object-fit: cover;
        }

    .noticia-body {
        padding: 28px;
    }

    .noticia-data {
        color: #ff6b00;
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .noticia-body h3 {
        color: #0f5570;
        font-size: 24px;
        margin-bottom: 15px;
    }

    .noticia-body p {
        color: #666;
        line-height: 28px;
    }

    /*==========================================================
    BOTÃO CENTRAL
==========================================================*/

    .btn-center {
        text-align: center;
        margin-top: 50px;
    }

    .btn-home {
        display: inline-block;
        background: #0f5570;
        color: #fff;
        padding: 16px 36px;
        border-radius: 40px;
        text-decoration: none;
        font-weight: 700;
        transition: .30s;
    }

        .btn-home:hover {
            background: #0b4258;
            color: #fff;
            text-decoration: none;
        }


    /* ==========================================================
   08 - COMPONENTES GERAIS
==========================================================*/

    /*==========================================================
    TÍTULOS
==========================================================*/

    .page-title {
        margin: 60px 0 40px;
        text-align: center;
    }

        .page-title h1 {
            font-size: 46px;
            color: #0f5570;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .page-title p {
            max-width: 750px;
            margin: auto;
            color: #666;
            font-size: 18px;
            line-height: 30px;
        }

    /*==========================================================
    CARDS PADRÃO
==========================================================*/

    .card-default {
        background: #fff;
        border-radius: 18px;
        padding: 35px;
        box-shadow: 0 10px 35px rgba(0,0,0,.08);
        margin-bottom: 35px;
        transition: .30s;
    }

        .card-default:hover {
            transform: translateY(-6px);
        }

    /*==========================================================
    BOTÕES
==========================================================*/

    .btn-primary {
        background: #0f5570;
        border: none;
        border-radius: 40px;
        padding: 14px 32px;
        color: #fff;
        font-weight: 700;
        transition: .30s;
    }

        .btn-primary:hover {
            background: #0a4258;
            color: #fff;
        }

    .btn-secondary {
        background: #ff6b00;
        border: none;
        border-radius: 40px;
        padding: 14px 32px;
        color: #fff;
        font-weight: 700;
        transition: .30s;
    }

        .btn-secondary:hover {
            background: #f06000;
            color: #fff;
        }

    /*==========================================================
    FORMULÁRIOS
==========================================================*/

    .form-group {
        margin-bottom: 20px;
    }

    .form-control {
        height: 52px;
        border-radius: 10px;
        border: 1px solid #d9d9d9;
        box-shadow: none;
        font-size: 15px;
        transition: .30s;
    }

        .form-control:focus {
            border-color: #0f5570;
            box-shadow: 0 0 0 3px rgba(15,85,112,.10);
        }

    textarea.form-control {
        height: 170px;
        resize: vertical;
    }

    /*==========================================================
    TABELAS
==========================================================*/

    .table {
        background: #fff;
        border-radius: 14px;
        overflow: hidden;
    }

        .table thead {
            background: #0f5570;
            color: #fff;
        }

        .table th {
            padding: 18px;
            border: none;
            font-weight: 700;
        }

        .table td {
            padding: 16px;
            vertical-align: middle;
        }

    /*==========================================================
    ALERTAS
==========================================================*/

    .alert {
        border: none;
        border-radius: 12px;
        padding: 18px 22px;
        margin-bottom: 30px;
    }

    .alert-success {
        background: #eaf8ef;
        color: #2c6f43;
    }

    .alert-warning {
        background: #fff8e6;
        color: #8d6b00;
    }

    .alert-danger {
        background: #fdecec;
        color: #9a1f1f;
    }

    /*==========================================================
    PAGINAÇÃO
==========================================================*/

    .pagination {
        margin-top: 40px;
        text-align: center;
    }

        .pagination > li > a {
            color: #0f5570;
            border-radius: 8px;
            margin: 0 4px;
            border: 1px solid #ddd;
            transition: .30s;
        }

            .pagination > li > a:hover {
                background: #0f5570;
                color: #fff;
            }

        .pagination > .active > a {
            background: #ff6b00;
            border-color: #ff6b00;
            color: #fff;
        }

    /*==========================================================
    BADGES
==========================================================*/

    .badge {
        background: #ff6b00;
        padding: 8px 14px;
        border-radius: 30px;
        font-size: 12px;
        font-weight: 700;
    }

    /*==========================================================
    SOMBRAS UTILITÁRIAS
==========================================================*/

    .shadow-sm {
        box-shadow: 0 4px 12px rgba(0,0,0,.08);
    }

    .shadow {
        box-shadow: 0 10px 30px rgba(0,0,0,.12);
    }

    .shadow-lg {
        box-shadow: 0 20px 45px rgba(0,0,0,.18);
    }

    /*==========================================================
    ESPAÇAMENTOS
==========================================================*/

    .mt-20 {
        margin-top: 20px;
    }

    .mt-30 {
        margin-top: 30px;
    }

    .mt-40 {
        margin-top: 40px;
    }

    .mt-50 {
        margin-top: 50px;
    }

    .mb-20 {
        margin-bottom: 20px;
    }

    .mb-30 {
        margin-bottom: 30px;
    }

    .mb-40 {
        margin-bottom: 40px;
    }

    .mb-50 {
        margin-bottom: 50px;
    }

    .pt-50 {
        padding-top: 50px;
    }

    .pb-50 {
        padding-bottom: 50px;
    }

    /*==========================================================
    FOOTER
==========================================================*/




    footer {
        background: #0f5570;
        color: #fff;
        text-align: center;
        padding: 25px;
        margin-top: 40px;
    }


    .footer-top {
        padding: 60px 0;
    }

    .footer-title {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 25px;
    }

    .footer-links {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .footer-links li {
            margin-bottom: 12px;
        }

        .footer-links a {
            color: #dfe9ee;
            text-decoration: none;
            transition: .30s;
        }

            .footer-links a:hover {
                color: #fff;
                padding-left: 6px;
            }

    .footer-bottom {
        border-top: 1px solid rgba(255,255,255,.10);
        padding: 20px 0;
        text-align: center;
        font-size: 14px;
        color: #d8d8d8;
    }

    /* ==========================================================
   09 - PÁGINA DO CURSO
==========================================================*/

    /*==========================================================
    LAYOUT GERAL
==========================================================*/

    .curso-detalhes {
        margin: 50px auto 80px;
    }

    .curso-titulo {
        color: #0f5570;
        font-size: 44px;
        font-weight: 700;
        margin-bottom: 30px;
    }

    .curso-grid {
        display: flex;
        gap: 30px;
        align-items: flex-start;
    }

    /*==========================================================
    MENU LATERAL
==========================================================*/

    .menu-curso {
        background: #fff;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 12px 35px rgba(0,0,0,.08);
        position: sticky;
        top: 110px;
    }

        .menu-curso ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .menu-curso li {
            border-bottom: 1px solid #ececec;
        }

            .menu-curso li:last-child {
                border: none;
            }

            .menu-curso li a {
                display: block;
                padding: 18px 24px;
                color: #0f5570;
                font-size: 15px;
                font-weight: 600;
                text-decoration: none;
                transition: .30s;
                position: relative;
            }

                .menu-curso li a:before {
                    content: "›";
                    color: #ff6b00;
                    margin-right: 12px;
                    font-size: 18px;
                }

                .menu-curso li a:hover {
                    background: #0f5570;
                    color: #fff;
                    padding-left: 30px;
                }

                    .menu-curso li a:hover:before {
                        color: #fff;
                    }

    /*==========================================================
    VÍDEO
==========================================================*/

    .video-box {
        background: #fff;
        border-radius: 18px;
        padding: 30px;
        box-shadow: 0 12px 35px rgba(0,0,0,.08);
        margin-bottom: 35px;
    }

        .video-box h2 {
            color: #0f5570;
            font-size: 30px;
            font-weight: 700;
            margin-top: 0;
            margin-bottom: 20px;
        }

    .video-responsive {
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        padding-bottom: 56.25%;
        height: 0;
    }

        .video-responsive iframe {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            border: none;
        }





    /*==========================================================
    CARD INSCRIÇÃO
==========================================================*/

    .card-inscricao {
        background: #fff;
        border-radius: 18px;
        padding: 35px;
        box-shadow: 0 15px 40px rgba(0,0,0,.10);
        position: sticky;
        top: 110px;
        overflow: hidden;
    }

    .curso-detalhes .card-inscricao h2 {
        color: #0f5570;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.2;
        margin-top: 0;
        margin-bottom: 25px;
        white-space: normal;
        overflow-wrap: break-word;
    }

    .card-inscricao p {
        color: #666;
        line-height: 28px;
    }

    .desconto {
        width: 95px;
        height: 95px;
        border-radius: 50%;
        background: #ff6b00;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 25px;
        font-size: 30px;
        font-weight: bold;
    }

    .btn-inscricao {
        display: block;
        width: 100%;
        margin-top: 25px;
        background: #ff6b00;
        color: #fff;
        text-align: center;
        padding: 16px;
        border-radius: 40px;
        font-size: 17px;
        font-weight: 700;
        text-decoration: none;
        transition: .30s;
    }

        .btn-inscricao:hover {
            background: #e85f00;
            color: #fff;
            text-decoration: none;
            transform: translateY(-3px);
        }

    .btn-whatsapp {
        display: block;
        width: 100%;
        margin-top: 15px;
        background: #25D366;
        color: #fff;
        text-align: center;
        padding: 15px;
        border-radius: 40px;
        font-weight: 700;
        text-decoration: none;
        transition: .30s;
    }

        .btn-whatsapp:hover {
            background: #20b859;
            color: #fff;
        }




    /*==========================================================
    CARD DE INVESTIMENTO / INSCRIÇÃO
==========================================================*/

    .card-inscricao {
        background: #fff;
        border-radius: 18px;
        padding: 28px;
        box-shadow: 0 12px 35px rgba(0,0,0,.08);
        margin-bottom: 35px;
    }

        .card-inscricao h2 {
            color: #0f5570;
            font-size: 28px;
            font-weight: 700;
            margin-top: 0;
            margin-bottom: 25px;
        }

    .investimento-item {
        padding: 15px 0;
        border-bottom: 1px solid #eee;
    }

    .investimento-label {
        display: block;
        color: #777;
        font-size: 14px;
        margin-bottom: 5px;
    }

    .investimento-valor {
        display: block;
        color: #0f5570;
        font-size: 24px;
        font-weight: 700;
    }

    .investimento-condicoes {
        margin-top: 25px;
    }

        .investimento-condicoes h3 {
            color: #333;
            font-size: 18px;
            font-weight: 700;
            margin-top: 0;
            margin-bottom: 12px;
        }

    .investimento-texto {
        color: #666;
        font-size: 15px;
        line-height: 1.6;
    }

    .inscricao-area {
        margin-top: 25px;
    }

    .btn-inscricao {
        display: block;
        width: 100%;
        text-align: center;
        background: #0f5570;
        color: #fff !important;
        border-radius: 8px;
        padding: 13px 20px;
        font-size: 16px;
        font-weight: 700;
        text-decoration: none !important;
        transition: .2s ease;
    }

        .btn-inscricao:hover {
            background: #0b4358;
            color: #fff !important;
        }


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

    .curso-section {
        background: #fff;
        border-radius: 18px;
        padding: 35px;
        margin-bottom: 35px;
        box-shadow: 0 10px 30px rgba(0,0,0,.08);
    }

        .curso-section h2 {
            color: #0f5570;
            font-size: 34px;
            font-weight: 700;
            margin-top: 0;
            margin-bottom: 25px;
        }

        .curso-section p {
            color: #555;
            line-height: 30px;
            font-size: 17px;
        }

    /*==========================================================
    MATRIZ
==========================================================*/

    .table {
        margin-bottom: 0;
    }

        .table th {
            background: #0f5570;
            color: #fff;
            border: none;
        }

        .table td {
            vertical-align: middle;
        }

    /*==========================================================
    PROFESSORES
==========================================================*/

    .professor-card {
        background: #fff;
        border-radius: 14px;
        text-align: center;
        padding: 30px;
        box-shadow: 0 10px 25px rgba(0,0,0,.08);
        transition: .30s;
    }

        .professor-card:hover {
            transform: translateY(-6px);
        }

        .professor-card img {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 20px;
        }

        .professor-card h4 {
            color: #0f5570;
            font-weight: 700;
        }

        .professor-card p {
            color: #777;
        }

    /* ==========================================================
   10 - ANIMAÇÕES E EXPERIÊNCIA DO USUÁRIO
==========================================================*/

    /*==========================================================
    ROLAGEM SUAVE
==========================================================*/

    html {
        scroll-behavior: smooth;
    }

    /*==========================================================
    ANIMAÇÃO PADRÃO
==========================================================*/

    .fade-up {
        opacity: 0;
        transform: translateY(35px);
        transition: all .70s ease;
    }

        .fade-up.show {
            opacity: 1;
            transform: translateY(0);
        }

    /*==========================================================
    HOVER DOS CARDS
==========================================================*/

    .card-default,
    .curso-card,
    .professor-card,
    .feature-card,
    .noticia-card,
    .card-inscricao,
    .video-box,
    .menu-curso {
        transition: transform .30s ease, box-shadow .30s ease;
    }

        .card-default:hover,
        .curso-card:hover,
        .professor-card:hover,
        .feature-card:hover,
        .noticia-card:hover,
        .video-box:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 45px rgba(0,0,0,.12);
        }

        /*==========================================================
    MENU LATERAL
==========================================================*/

        .menu-curso li {
            transition: .30s;
        }

            .menu-curso li:hover {
                background: #0f5570;
            }

                .menu-curso li:hover a {
                    color: #fff;
                }

            /* item ativo */

            .menu-curso li.active {
                background: #ff6b00;
            }

                .menu-curso li.active a {
                    color: #fff;
                }

                    .menu-curso li.active a:before {
                        color: #fff;
                    }

    /*==========================================================
    BOTÕES
==========================================================*/

    .btn-banner,
    .btn-banner-outline,
    .btn-primary,
    .btn-secondary,
    .btn-home,
    .btn-inscricao,
    .btn-whatsapp {
        transition: background .30s, transform .25s, box-shadow .30s;
    }

        .btn-banner:hover,
        .btn-primary:hover,
        .btn-secondary:hover,
        .btn-home:hover,
        .btn-inscricao:hover,
        .btn-whatsapp:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 25px rgba(0,0,0,.18);
        }

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

    a {
        transition: .25s;
    }

    /*==========================================================
    IMAGENS
==========================================================*/

    img {
        transition: transform .40s;
    }

    .curso-card:hover img,
    .noticia-card:hover img {
        transform: scale(1.04);
    }

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

    .curso-section {
        scroll-margin-top: 120px;
    }

    /*==========================================================
    TABELAS
==========================================================*/

    .table tbody tr {
        transition: .25s;
    }

        .table tbody tr:hover {
            background: #f5f9fc;
        }

    /*==========================================================
    INPUTS
==========================================================*/

    .form-control {
        transition: border-color .30s, box-shadow .30s;
    }

        .form-control:focus {
            border-color: #0f5570;
            box-shadow: 0 0 10px rgba(15,85,112,.18);
        }

    /*==========================================================
    FOOTER
==========================================================*/

    .footer-links a {
        position: relative;
    }

        .footer-links a:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -4px;
            width: 0;
            height: 2px;
            background: #ff6b00;
            transition: .30s;
        }

        .footer-links a:hover:after {
            width: 100%;
        }

    /*==========================================================
    SCROLLBAR
==========================================================*/

    ::-webkit-scrollbar {
        width: 10px;
    }

    ::-webkit-scrollbar-track {
        background: #f4f4f4;
    }

    ::-webkit-scrollbar-thumb {
        background: #0f5570;
        border-radius: 20px;
    }

        ::-webkit-scrollbar-thumb:hover {
            background: #0b4258;
        }

    /*==========================================================
    SELEÇÃO DE TEXTO
==========================================================*/

    ::selection {
        background: #ff6b00;
        color: #fff;
    }

    /* ==========================================================
   11 - BANNER RESPONSIVO
==========================================================*/

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

    .carousel-hero {
        position: relative;
        display: flex;
        align-items: center;
        overflow: hidden;
        height: 560px;
    }

        .carousel-hero img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
        }

        /*==========================================================
    CONTAINER
==========================================================*/

        .carousel-hero .container {
            position: relative;
            z-index: 20;
        }

    /*==========================================================
    TEXTO
==========================================================*/

    .carousel-content {
        max-width: 620px;
        margin-left: 80px;
    }

        .carousel-content h1 {
            font-size: 60px;
            line-height: 1.1;
            font-weight: 800;
            color: #fff;
            margin-bottom: 25px;
        }

        .carousel-content p {
            color: #fff;
            font-size: 23px;
            line-height: 1.6;
            margin-bottom: 35px;
        }

    .tag {
        display: inline-block;
        margin-bottom: 20px;
    }

    /*==========================================================
    BOTÕES
==========================================================*/

    .banner-buttons {
        display: flex;
        gap: 18px;
        flex-wrap: wrap;
    }

    .btn-banner {
        padding: 16px 38px;
        border-radius: 50px;
    }

    .btn-banner-outline {
        padding: 14px 36px;
        border-radius: 50px;
    }

    /*==========================================================
    SETAS
==========================================================*/

    .carousel-control {
        width: 70px;
    }

        .carousel-control .glyphicon {
            font-size: 52px;
        }

    /*==========================================================
    INDICADORES
==========================================================*/

    .carousel-indicators {
        bottom: 25px;
    }

        .carousel-indicators li {
            width: 14px;
            height: 14px;
        }

        .carousel-indicators .active {
            width: 14px;
            height: 14px;
        }

    /*==========================================================
    NOTEBOOK
==========================================================*/

    @media (max-width:1400px) {

        .carousel-hero {
            height: 520px;
        }

        

            .carousel-content h1 {
                font-size: 54px;
            }
    }

    /*==========================================================
    NOTEBOOK PEQUENO
==========================================================*/

    @media (max-width:1200px) {

        .carousel-hero {
            height: 480px;
        }

        .carousel-content {
            max-width: 520px;
        }

            .carousel-content h1 {
                font-size: 46px;
            }

            .carousel-content p {
                font-size: 21px;
            }
    }

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

    @media (max-width:991px) {

        .navbar-wrapper {
            height: 80px;
            justify-content: space-between;
        }

        .menu-top {
            display: none;
        }

        .menu-toggle {
            display: none;
            width: 46px;
            height: 46px;
            border: none;
            background: transparent;
            cursor: pointer;
            padding: 0;
            margin-left: 20px;
            position: relative;
            z-index: 10001;
        }

            .menu-toggle span {
                display: block;
                width: 28px;
                height: 3px;
                background: #0f5570;
                margin: 6px auto;
                border-radius: 3px;
                transition: .30s;
            }

        .menu-open {
            display: flex !important;
        }
    }

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

    @media (max-width:767px) {

        .carousel-hero {
            height: 360px;
        }

        .carousel-content {
            padding: 0 25px;
        }

            .carousel-content h1 {
                font-size: 32px;
            }

            .carousel-content p {
                font-size: 17px;
                margin-bottom: 20px;
            }

        .tag {
            font-size: 13px;
            letter-spacing: 2px;
        }

        .btn-banner,
        .btn-banner-outline {
            width: 100%;
        }

        .carousel-control {
            display: none;
        }


        /* Ajuste das posições no celular */

        .carousel-content {
            width: calc(100% - 50px);
            max-width: none;
            left: 25px;
            right: 25px;
            top: 50%;
            bottom: auto;
            transform: translateY(-50%);
            text-align: left;
        }

        /* No celular, todas as posições ficam centralizadas verticalmente */

        .posicao-SUPERIOR_ESQUERDO,
        .posicao-SUPERIOR_CENTRO,
        .posicao-SUPERIOR_DIREITO,
        .posicao-CENTRO_ESQUERDO,
        .posicao-CENTRO,
        .posicao-CENTRO_DIREITO,
        .posicao-INFERIOR_ESQUERDO,
        .posicao-INFERIOR_CENTRO,
        .posicao-INFERIOR_DIREITO {
            left: 25px;
            right: 25px;
            top: 50%;
            bottom: auto;
            transform: translateY(-50%);
            text-align: left;
        }


    }

    /*==========================================================
    SMARTPHONE PEQUENO
==========================================================*/



    @media (max-width:360px) {

        .carousel-hero {
            height: 320px;
        }

        .carousel-content {
            padding: 0 15px;
        }

            .carousel-content h1 {
                font-size: 26px;
                margin-bottom: 15px;
            }

            .carousel-content p {
                font-size: 15px;
                line-height: 1.5;
            }

        .btn-banner,
        .btn-banner-outline {
            padding: 12px;
            font-size: 14px;
        }
    }

    /* ==========================================================
   12 - MENU PROFISSIONAL
==========================================================*/

    /*==========================================================
    HEADER
==========================================================*/

    header.site-header {
        position: relative;
        z-index: 9999;
    }

    /*==========================================================
    NAVBAR
==========================================================*/

    .navbar-custom {
        position: sticky;
        top: 0;
        z-index: 9999;
        background: #fff;
        transition: all .35s ease;
        box-shadow: none;
    }

        /*==========================================================
    MENU AO ROLAR
==========================================================*/

        .navbar-custom.scrolled {
            height: 72px;
            box-shadow: 0 8px 30px rgba(0,0,0,.08);
        }

            .navbar-custom.scrolled .logo-area img {
                height: 58px;
            }

            .navbar-custom.scrolled .navbar-wrapper {
                height: 72px;
            }

    /*==========================================================
    WRAPPER
==========================================================*/

    .navbar-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 90px;
        transition: .30s;
    }

    /*==========================================================
    LOGO
==========================================================*/

    .logo-area {
        display: flex;
        align-items: center;
    }

        .logo-area img {
            height: 70px;
            transition: .30s;
        }

    /*==========================================================
    MENU
==========================================================*/
    .menu-top {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 1;
        gap: 6px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .menu-top > li {
            position: relative;
            margin: 0;
        }

        .menu-top li a {
            display: block;
            padding: 10px 8px;
            color: #0f5570;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0;
            white-space: nowrap;
            transition: .30s;
        }

            .menu-top li a:hover {
                color: #ff6b00;
            }


    @media (max-width:1200px) {

        .menu-top {
            gap: 2px;
        }

            .menu-top li a {
                font-size: 12px;
                padding: 10px 6px;
            }
    }

    /*==========================================================
    LINHA ABAIXO
==========================================================*/

    .menu-top li a:after {
        content: "";
        position: absolute;
        left: 18px;
        bottom: 8px;
        width: 0;
        height: 3px;
        background: #ff6b00;
        transition: .30s;
    }

    .menu-top li a:hover:after {
        width: calc(100% - 36px);
    }

    .menu-top li a:hover {
        color: #ff6b00;
    }

    /*==========================================================
    ITEM ATIVO
==========================================================*/

    .menu-top li.active a {
        color: #ff6b00;
    }

        .menu-top li.active a:after {
            width: calc(100% - 36px);
        }

    /*==========================================================
    SUBMENU
==========================================================*/

    .submenu {
        border-radius: 0 0 14px 14px;
        overflow: hidden;
        box-shadow: 0 18px 40px rgba(0,0,0,.12);
        border: none;
        transform: translateY(15px);
        opacity: 0;
        visibility: hidden;
        transition: .30s;
    }

    .dropdown-menu-custom:hover .submenu {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .submenu li {
        border-bottom: 1px solid rgba(255,255,255,.10);
    }

        .submenu li:last-child {
            border: none;
        }

        .submenu li a {
            padding: 15px 24px;
            font-size: 14px;
        }

            .submenu li a:hover {
                background: #0f5570;
                padding-left: 32px;
            }

    /*==========================================================
    BOTÃO MOBILE (PREPARAÇÃO)
==========================================================*/

    .menu-toggle {
        display: none;
        width: 45px;
        height: 45px;
        border: none;
        background: none;
        cursor: pointer;
    }

        .menu-toggle span {
            display: block;
            height: 3px;
            margin: 7px 0;
            background: #0f5570;
            border-radius: 4px;
            transition: .30s;
        }

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

    @media(max-width:991px) {

        .navbar-wrapper {
            height: 80px;
        }

        .logo-area img {
            height: 58px;
        }

        .menu-top {
            gap: 2px;
        }

            .menu-top li a {
                padding: 12px;
                font-size: 13px;
            }
    }

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

    .menu-toggle {
        display: none;
    }

    @media (max-width:991px) {

        .navbar-wrapper {
            position: relative;
            justify-content: space-between;
            align-items: center;
        }

        .menu-toggle {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 34px;
            height: 26px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
        }

            .menu-toggle span {
                display: block;
                width: 100%;
                height: 3px;
                background: #0f5570;
                border-radius: 3px;
            }

        #menuPrincipal {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background: #fff;
            box-shadow: 0 8px 20px rgba(0,0,0,.15);
            z-index: 9999;
        }

            #menuPrincipal.menu-open {
                display: block;
            }

            #menuPrincipal li {
                display: block;
                margin: 0;
            }

                #menuPrincipal li a {
                    display: block;
                    padding: 16px 20px;
                    border-bottom: 1px solid #eee;
                }
    }

    /*==========================================
  DIRIGENTES
==========================================*/

    .titulo-azul {
        color: #0072b5;
        font-size: 40px;
        font-weight: 700;
        margin-bottom: 40px;
    }

    .dirigente-foto {
        width: 260px;
        height: 330px;
        object-fit: cover;
    }

        .dirigente-foto:hover {
            transform: scale(1.03);
        }

    .dirigente-nome {
        margin-top: 18px;
        font-size: 26px;
        font-weight: 700;
        color: #333;
        text-transform: uppercase;
    }

    .dirigente-cargo {
        font-size: 22px;
        color: #666;
        font-style: italic;
        font-weight: 600;
    }

    /*================================

     GALERIA

=================================*/

    .galeria-img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        border-radius: 4px;
        transition: .3s;
    }

        .galeria-img:hover {
            transform: scale(1.03);
        }


    /*=============================
        LOCALIZAÇÃO GOOGLE MAPS
    ===============================
    */

    .mapa-google iframe {
        width: 100%;
        height: 450px;
        border: 0;
        border-radius: 8px;
    }

    /*=========================

      CALENDARIO ACADEMICO

    =========================
  */

    .calendario-preview {
        max-height: 260px;
        border-radius: 8px;
        border: 1px solid #ddd;
        transition: .3s;
    }

        .calendario-preview:hover {
            transform: scale(1.03);
        }

    .card {
        border-radius: 12px;
    }

    .card-body h3 {
        color: #0d4d8b;
        font-weight: 600;
    }

    /* ==========================================================
   SERVIÇOS
========================================================== */

    .servico-page {
        padding: 20px 0 60px;
    }


    /* CABEÇALHO */

    .servico-header {
        padding: 20px 0 35px;
    }

        .servico-header h1 {
            color: #0f5570;
            font-size: 36px;
            font-weight: 700;
            margin-bottom: 15px;
        }

    .servico-resumo {
        max-width: 900px;
        color: #666;
        font-size: 17px;
        line-height: 1.7;
    }


    /* IMAGEM */

    .servico-imagem {
        margin-bottom: 45px;
    }

        .servico-imagem img {
            width: 100%;
            max-height: 450px;
            object-fit: cover;
            border-radius: 8px;
        }


    /* SEÇÕES */

    .servico-page section {
        margin-bottom: 45px;
    }

        .servico-page section h2 {
            color: #0f5570;
            font-size: 27px;
            font-weight: 700;
            margin-bottom: 25px;
        }


    /* TEXTO */

    .servico-texto {
        color: #555;
        font-size: 16px;
        line-height: 1.8;
    }

        .servico-texto p {
            margin-bottom: 15px;
        }


    /* CARDS */

    .servico-card {
        display: block;
        position: relative;
        height: 100%;
        min-height: 220px;
        padding: 28px;
        margin-bottom: 30px;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 8px;
        text-decoration: none !important;
        transition: all .3s ease;
    }

        .servico-card:hover {
            transform: translateY(-5px);
            border-color: #0f5570;
            box-shadow: 0 10px 28px rgba(0,0,0,.08);
        }

    .servico-card-icone {
        margin-bottom: 18px;
    }

        .servico-card-icone i {
            font-size: 38px;
            color: #0f5570;
        }

    .servico-card-conteudo h3 {
        color: #0f5570;
        font-size: 19px;
        font-weight: 700;
        margin-top: 0;
        margin-bottom: 12px;
    }

    .servico-card-conteudo p {
        color: #666;
        font-size: 14px;
        line-height: 1.6;
    }

    .servico-card-link {
        position: absolute;
        bottom: 20px;
        right: 25px;
        color: #ff6b00;
        font-size: 13px;
        font-weight: 700;
    }

        .servico-card-link i {
            margin-left: 5px;
        }


    /* INFORMAÇÃO */

    .servico-box {
        display: flex;
        align-items: flex-start;
        padding: 30px;
        background: #f5f7f8;
        border-left: 5px solid #0f5570;
        border-radius: 6px;
    }

    .servico-box-icone {
        margin-right: 25px;
    }

        .servico-box-icone i {
            color: #0f5570;
            font-size: 38px;
        }

    .servico-box h2 {
        margin-top: 0;
    }


    /* LINK EXTERNO */

    .servico-destaque {
        display: flex;
        align-items: center;
        padding: 35px;
        background: #0f5570;
        border-radius: 8px;
        color: #fff;
    }

    .servico-destaque-icone {
        margin-right: 25px;
    }

        .servico-destaque-icone i {
            font-size: 45px;
            color: #ff7a00;
        }

    .servico-destaque-conteudo h2 {
        color: #fff !important;
        margin-top: 0;
    }

    .servico-destaque-conteudo p {
        margin-bottom: 20px;
        opacity: .9;
    }

    .servico-destaque .btn {
        background: #ff7a00;
        border-color: #ff7a00;
        font-weight: 700;
    }

        .servico-destaque .btn:hover {
            background: #e86100;
            border-color: #e86100;
        }


    /* NORMAS */

    .servico-normas {
        padding: 30px;
        background: #f8f9fa;
        border-radius: 8px;
    }


    /* CONTATO */

    .servico-contato {
        padding-top: 10px;
    }

    .servico-contato-item {
        display: flex;
        align-items: center;
        min-height: 100px;
        padding: 20px;
        margin-bottom: 20px;
        border: 1px solid #e5e5e5;
        border-radius: 8px;
        background: #fff;
    }

        .servico-contato-item > i {
            margin-right: 18px;
            font-size: 28px;
            color: #0f5570;
        }

        .servico-contato-item strong {
            display: block;
            margin-bottom: 5px;
            color: #0f5570;
        }

        .servico-contato-item span {
            display: block;
            color: #666;
        }
    /* ==========================================================
   BIBLIOTECA
========================================================== */

    .biblioteca-page {
        padding: 30px 0 60px;
    }

        .biblioteca-page section {
            margin-bottom: 45px;
        }

        .biblioteca-page h2 {
            color: #0f5570;
            font-weight: 700;
            margin-bottom: 25px;
        }

    .biblioteca-apresentacao p {
        font-size: 16px;
        line-height: 1.8;
        color: #666;
    }


    /* ACESSOS */

    .biblioteca-acessos {
        display: flex;
        align-items: stretch;
        background: #0f5570;
        border-radius: 8px;
        overflow: hidden;
    }

    .biblioteca-acesso-titulo {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 25px;
        color: #fff;
    }

        .biblioteca-acesso-titulo h2 {
            color: #fff;
            margin: 0;
        }

        .biblioteca-acesso-titulo i {
            font-size: 35px;
            color: #ff7a00;
        }

    .biblioteca-acesso {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 25px;
        color: #fff;
        text-decoration: none !important;
        border-left: 1px solid rgba(255,255,255,.2);
        transition: .3s;
    }

        .biblioteca-acesso:hover {
            background: rgba(255,255,255,.08);
        }

        .biblioteca-acesso i {
            font-size: 35px;
            color: #ff7a00;
        }

        .biblioteca-acesso strong {
            display: block;
            font-size: 16px;
            margin-bottom: 7px;
        }

        .biblioteca-acesso span {
            display: block;
            font-size: 13px;
            opacity: .9;
        }


    /* CARDS */

    .biblioteca-card {
        background: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 8px;
        padding: 25px;
        min-height: 230px;
        margin-bottom: 30px;
        text-align: center;
        transition: .3s;
    }

        .biblioteca-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 25px rgba(0,0,0,.08);
        }

        .biblioteca-card i {
            font-size: 38px;
            color: #0f5570;
            margin-bottom: 18px;
        }

        .biblioteca-card h3 {
            font-size: 19px;
            color: #0f5570;
            font-weight: 700;
        }

        .biblioteca-card p {
            color: #666;
            line-height: 1.6;
        }


    /* TABELA */

    .biblioteca-tabela th {
        background: #0f5570;
        color: #fff;
        text-align: center;
    }

    .biblioteca-tabela td {
        text-align: center;
        vertical-align: middle !important;
    }


    /* DESTAQUE */

    .biblioteca-destaque {
        display: flex;
        align-items: center;
        gap: 25px;
        padding: 30px;
        background: #f5f7f8;
        border-left: 5px solid #0f5570;
        border-radius: 6px;
    }

        .biblioteca-destaque i {
            font-size: 45px;
            color: #0f5570;
        }

        .biblioteca-destaque h2 {
            margin-bottom: 10px;
        }


    /* ALERTA */

    .biblioteca-alerta {
        padding: 25px;
        background: #fff7ed;
        border-left: 5px solid #ff7a00;
        border-radius: 6px;
    }

        .biblioteca-alerta h2 {
            margin-top: 0;
        }


    /* LISTA */

    .biblioteca-lista {
        padding-left: 25px;
    }

        .biblioteca-lista li {
            margin-bottom: 12px;
            color: #555;
            line-height: 1.6;
        }


    /* CONTATO */

    .biblioteca-contato {
        background: #f5f7f8;
        padding: 30px;
        border-radius: 8px;
    }

        .biblioteca-contato p {
            margin-bottom: 8px;
        }


    /*
        ==========================
        EAD
        ==========================
    */



    .ead-destaque {
        margin: 50px 0;
    }

    .ead-box {
        background: #0f5570;
        color: #fff;
        padding: 45px;
        border-radius: 10px;
        text-align: center;
    }

        .ead-box h2 {
            font-size: 34px;
            margin-bottom: 20px;
        }

        .ead-box p {
            font-size: 18px;
            margin-bottom: 30px;
        }

    /*====================
        TUTORIAIS MOODLE
        ===================
    */

    .ead-tutoriais {
        margin: 50px 0;
    }

    .tutorial-card {
        display: block;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        color: #333;
        text-decoration: none;
        transition: .30s;
    }

        .tutorial-card:hover {
            background: #f6f6f6;
        }

        .tutorial-card i {
            color: #d9534f;
            font-size: 30px;
            margin-right: 15px;
        }


    /* =========================================================
   SAE - ATENDIMENTO AO ESTUDANTE
   ========================================================= */

    .sae-page {
        margin-bottom: 50px;
    }


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

    .sae-header {
        margin-bottom: 35px;
    }

    .sae-header-conteudo {
        padding: 35px;
        background: #f7f9fb;
        border-left: 5px solid #1d5d8f;
        border-radius: 4px;
    }

    .sae-header h1 {
        margin-top: 0;
        margin-bottom: 15px;
        color: #1d5d8f;
        font-size: 32px;
        font-weight: 600;
    }

    .sae-header p {
        margin: 0;
        color: #555;
        font-size: 17px;
        line-height: 1.7;
    }


    /* =========================================================
   APRESENTAÇÃO
   ========================================================= */

    .sae-apresentacao {
        margin-bottom: 40px;
    }

    .sae-texto {
        color: #444;
        font-size: 16px;
        line-height: 1.8;
    }

        .sae-texto p {
            margin-bottom: 18px;
        }

        .sae-texto h2,
        .sae-texto h3 {
            color: #1d5d8f;
        }


    /* =========================================================
   TÍTULO DA ÁREA DE BENEFÍCIOS
   ========================================================= */

    .sae-itens {
        margin-top: 35px;
        margin-bottom: 45px;
    }

    .sae-itens-header {
        margin-bottom: 25px;
    }

        .sae-itens-header h2 {
            margin-top: 0;
            margin-bottom: 8px;
            color: #1d5d8f;
            font-size: 27px;
            font-weight: 600;
        }

        .sae-itens-header p {
            margin: 0;
            color: #666;
            font-size: 16px;
        }


    /* =========================================================
   LISTA DE PASTAS
   ========================================================= */

    .sae-lista {
        width: 100%;
    }


    /* =========================================================
   CADA ITEM / PASTA
   ========================================================= */

    .sae-item {
        margin-bottom: 14px;
        background: #fff;
        border: 1px solid #dce3e8;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        transition: box-shadow 0.25s ease, border-color 0.25s ease;
    }

        .sae-item:hover {
            border-color: #b8cbd9;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }


    /* =========================================================
   CABEÇALHO DA PASTA
   ========================================================= */

    .sae-item-header {
        min-height: 78px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 22px;
        background: #f8fafc;
    }


    /* =========================================================
   IDENTIFICAÇÃO
   ========================================================= */

    .sae-item-identificacao {
        display: flex;
        align-items: center;
        gap: 15px;
    }

        .sae-item-identificacao h3 {
            margin: 0;
            color: #1d5d8f;
            font-size: 20px;
            font-weight: 600;
        }


    /* =========================================================
   ÍCONE
   ========================================================= */

    .sae-item-icone {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #1d5d8f;
        color: #fff;
        border-radius: 5px;
        font-size: 18px;
        flex-shrink: 0;
    }


    /* =========================================================
   BOTÃO SAIBA MAIS
   ========================================================= */

    .sae-item-botao {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 9px 15px;
        background: transparent;
        border: 1px solid #1d5d8f;
        border-radius: 4px;
        color: #1d5d8f;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease;
    }

        .sae-item-botao:hover {
            background: #1d5d8f;
            color: #fff;
        }

        .sae-item-botao i {
            transition: transform 0.2s ease;
        }


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

    .sae-item-conteudo {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        padding-left: 25px;
        padding-right: 25px;
        background: #fff;
        transition: max-height 0.35s ease, opacity 0.25s ease, padding-top 0.35s ease, padding-bottom 0.35s ease;
    }


    /* =========================================================
   ITEM ABERTO
   ========================================================= */

    .sae-item.aberto .sae-item-conteudo {
        max-height: 3000px;
        opacity: 1;
        padding-top: 25px;
        padding-bottom: 30px;
    }


    /* =========================================================
   TEXTO INTERNO
   ========================================================= */

    .sae-item-texto {
        color: #444;
        font-size: 16px;
        line-height: 1.8;
    }

        .sae-item-texto p {
            margin-top: 0;
            margin-bottom: 18px;
        }

        .sae-item-texto h2 {
            margin-top: 25px;
            margin-bottom: 12px;
            color: #1d5d8f;
            font-size: 22px;
        }

        .sae-item-texto h3 {
            margin-top: 20px;
            margin-bottom: 10px;
            color: #1d5d8f;
            font-size: 19px;
        }

        .sae-item-texto strong {
            color: #333;
        }


        /* =========================================================
   LINKS DENTRO DO CONTEÚDO
   ========================================================= */

        .sae-item-texto a {
            color: #1d5d8f;
            font-weight: 600;
        }

            .sae-item-texto a:hover {
                color: #16486e;
                text-decoration: underline;
            }


    /* =========================================================
   BOTÃO EXTERNO DO ITEM
   ========================================================= */

    .sae-item-link {
        margin-top: 25px;
        padding-top: 20px;
        border-top: 1px solid #e5e5e5;
    }

        .sae-item-link .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }


    /* =========================================================
   INFORMAÇÕES
   ========================================================= */

    .sae-informacoes {
        margin-top: 40px;
        margin-bottom: 40px;
        padding: 30px;
        background: #f7f9fb;
        border-radius: 6px;
    }

        .sae-informacoes h2 {
            margin-top: 0;
            margin-bottom: 20px;
            color: #1d5d8f;
            font-size: 25px;
        }


    /* =========================================================
   CONTATO
   ========================================================= */

    .sae-contato {
        margin-top: 45px;
        padding-top: 35px;
        border-top: 1px solid #e1e1e1;
    }

        .sae-contato h2 {
            margin-top: 0;
            margin-bottom: 25px;
            color: #1d5d8f;
            font-size: 26px;
        }


    .sae-contato-item {
        min-height: 130px;
        margin-bottom: 20px;
        padding: 22px;
        background: #f8fafc;
        border: 1px solid #e1e7eb;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }


        .sae-contato-item > i {
            margin-bottom: 5px;
            color: #1d5d8f;
            font-size: 22px;
        }


        .sae-contato-item strong {
            color: #333;
            font-size: 15px;
        }


        .sae-contato-item span {
            color: #666;
            line-height: 1.6;
        }


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

    @media (max-width: 767px) {

        .sae-header-conteudo {
            padding: 25px 20px;
        }

        .sae-header h1 {
            font-size: 26px;
        }

        .sae-header p {
            font-size: 15px;
        }

        .sae-item-header {
            align-items: flex-start;
            gap: 15px;
            padding: 15px;
        }

        .sae-item-identificacao {
            gap: 10px;
        }

            .sae-item-identificacao h3 {
                font-size: 17px;
            }

        .sae-item-icone {
            width: 38px;
            height: 38px;
            font-size: 16px;
        }

        .sae-item-botao {
            padding: 8px 10px;
            font-size: 13px;
            flex-shrink: 0;
        }

        .sae-item-conteudo {
            padding-left: 18px;
            padding-right: 18px;
        }

        .sae-item.aberto .sae-item-conteudo {
            padding-top: 20px;
            padding-bottom: 25px;
        }

        .sae-item-texto {
            font-size: 15px;
        }
    }


    /* =========================================================
   OUVIDORIA - CHAT DE MANIFESTAÇÃO
   ========================================================= */

    .ouvidoria-chat {
        max-width: 900px;
        margin: 30px auto 60px;
        background: #fff;
        border: 1px solid #dfe5ea;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    }


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

    .ouvidoria-chat-header {
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 25px 30px;
        background: #1d5d8f;
        color: #fff;
    }

    .ouvidoria-chat-header-icone {
        width: 52px;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 50%;
        font-size: 24px;
    }

    .ouvidoria-chat-header h2 {
        margin: 0 0 5px;
        font-size: 24px;
        font-weight: 600;
    }

    .ouvidoria-chat-header p {
        margin: 0;
        font-size: 15px;
        opacity: 0.92;
    }


    /* =========================================================
   ÁREA DE MENSAGENS
   ========================================================= */

    .ouvidoria-chat-mensagens {
        padding: 30px;
        background: #f5f7f9;
    }


    /* =========================================================
   MENSAGENS
   ========================================================= */

    .chat-mensagem {
        display: flex;
        margin-bottom: 18px;
    }

    .chat-atendente {
        justify-content: flex-start;
    }

    .chat-usuario {
        justify-content: flex-end;
    }

    .chat-mensagem-conteudo {
        max-width: 75%;
        padding: 15px 18px;
        border-radius: 8px;
        font-size: 15px;
        line-height: 1.7;
    }

    .chat-atendente .chat-mensagem-conteudo {
        background: #fff;
        color: #444;
        border: 1px solid #e1e6ea;
    }

    .chat-usuario .chat-mensagem-conteudo {
        background: #1d5d8f;
        color: #fff;
    }


    /* =========================================================
   OPÇÕES
   ========================================================= */

    .chat-opcoes {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 20px;
        margin-bottom: 25px;
    }

    .chat-opcao {
        min-height: 58px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        padding: 15px 18px;
        background: #fff;
        border: 1px solid #d5dfe6;
        border-radius: 6px;
        color: #1d5d8f;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

        .chat-opcao:hover {
            background: #1d5d8f;
            border-color: #1d5d8f;
            color: #fff;
            transform: translateY(-2px);
        }

        .chat-opcao i {
            width: 24px;
            text-align: center;
            font-size: 18px;
        }


    /* =========================================================
   FORMULÁRIO
   ========================================================= */

    .chat-formulario {
        margin-top: 20px;
        padding: 25px;
        background: #fff;
        border: 1px solid #dfe5ea;
        border-radius: 7px;
    }

        .chat-formulario .form-group {
            margin-bottom: 20px;
        }

        .chat-formulario label {
            display: block;
            margin-bottom: 7px;
            color: #333;
            font-size: 14px;
            font-weight: 600;
        }

        .chat-formulario .form-control {
            min-height: 42px;
            border: 1px solid #ccd6dd;
            border-radius: 4px;
            box-shadow: none;
        }

        .chat-formulario textarea.form-control {
            resize: vertical;
            min-height: 130px;
        }

        .chat-formulario .form-control:focus {
            border-color: #1d5d8f;
            box-shadow: 0 0 0 2px rgba(29, 93, 143, 0.08);
        }


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

    .chat-resumo {
        margin-top: 20px;
        padding: 25px;
        background: #fff;
        border: 1px solid #dfe5ea;
        border-radius: 7px;
    }

        .chat-resumo h3 {
            margin-top: 0;
            margin-bottom: 20px;
            color: #1d5d8f;
            font-size: 21px;
        }

        .chat-resumo p {
            margin-bottom: 12px;
            color: #444;
            line-height: 1.6;
        }

    .chat-resumo-texto {
        padding: 15px;
        background: #f7f9fb;
        border: 1px solid #e3e8ec;
        border-radius: 5px;
        color: #444;
        line-height: 1.7;
        white-space: pre-wrap;
    }


    /* =========================================================
   BOTÕES
   ========================================================= */

    .ouvidoria-chat .btn-primary {
        background: #1d5d8f;
        border-color: #1d5d8f;
    }

        .ouvidoria-chat .btn-primary:hover {
            background: #16486e;
            border-color: #16486e;
        }


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

    @media (max-width: 767px) {

        .ouvidoria-chat {
            margin-top: 20px;
            border-radius: 5px;
        }

        .ouvidoria-chat-header {
            padding: 20px;
        }

        .ouvidoria-chat-header-icone {
            width: 44px;
            height: 44px;
            font-size: 20px;
        }

        .ouvidoria-chat-header h2 {
            font-size: 20px;
        }

        .ouvidoria-chat-header p {
            font-size: 14px;
        }

        .ouvidoria-chat-mensagens {
            padding: 20px 15px;
        }

        .chat-opcoes {
            grid-template-columns: 1fr;
        }

        .chat-mensagem-conteudo {
            max-width: 90%;
        }

        .chat-formulario,
        .chat-resumo {
            padding: 18px;
        }
    }


    /* ==========================================================
   DOCUMENTOS
   ========================================================== */

    .documentos-container {
        margin: 30px 0 60px 0;
    }

    .documentos-cabecalho {
        margin-bottom: 30px;
    }

    .documentos-container h1 {
        color: #17648b;
        font-size: 32px;
        font-weight: 600;
        margin-bottom: 12px;
    }

    .documentos-apresentacao {
        color: #666;
        line-height: 1.7;
    }

    .documento-card {
        border: 1px solid #d9e1e6;
        border-radius: 6px;
        margin-bottom: 15px;
        background: #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, .05);
        overflow: hidden;
    }

    .documento-card-header {
        min-height: 78px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 22px;
        background: #f8fafc;
    }

    .documento-card-titulo {
        display: flex;
        align-items: center;
        gap: 15px;
        color: #17649a;
        font-size: 21px;
        font-weight: 600;
    }

    .documento-icone {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #17649a;
        color: #fff;
        border-radius: 5px;
        font-size: 19px;
        flex-shrink: 0;
    }

    .documento-toggle {
        border: 1px solid #17649a;
        background: #fff;
        color: #17649a;
        padding: 9px 17px;
        border-radius: 4px;
        font-weight: 600;
        cursor: pointer;
        transition: all .2s ease;
        white-space: nowrap;
    }

        .documento-toggle:hover {
            background: #17649a;
            color: #fff;
        }

        .documento-toggle i {
            margin-left: 7px;
        }

    .documento-card-body {
        display: none;
        padding: 20px 22px;
        border-top: 1px solid #e1e6ea;
        background: #fff;
    }

    .documento-card.aberto .documento-card-body {
        display: block;
    }

    .documento-arquivo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 15px 5px;
        border-bottom: 1px solid #e9ecef;
    }

        .documento-arquivo:last-child {
            border-bottom: none;
        }

    .documento-arquivo-info {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
    }

        .documento-arquivo-info > i {
            color: #c62828;
            font-size: 25px;
            flex-shrink: 0;
        }

        .documento-arquivo-info strong {
            display: block;
            color: #444;
            font-size: 16px;
            margin-bottom: 3px;
        }

        .documento-arquivo-info small {
            display: block;
            color: #777;
            font-size: 13px;
        }

    .btn-documento-download {
        display: inline-block;
        padding: 8px 14px;
        background: #17649a;
        color: #fff !important;
        border-radius: 4px;
        text-decoration: none !important;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
        transition: background .2s ease;
    }

        .btn-documento-download:hover {
            background: #114c74;
        }

        .btn-documento-download i {
            margin-right: 5px;
        }

    .documento-vazio {
        padding: 15px 5px;
        color: #777;
        font-style: italic;
    }


    /* ==========================================================
   RESPONSIVO - DOCUMENTOS
   ========================================================== */



    @media (max-width: 767px) {

        .documento-card-body {
            display: none;
            padding: 20px;
        }

        .documento-card.aberto .documento-card-body {
            display: block;
        }

        .documento-card-header {
            align-items: flex-start;
            gap: 15px;
        }

        .documento-card-titulo {
            font-size: 18px;
        }

        .documento-toggle {
            padding: 8px 11px;
            font-size: 13px;
        }

        .documento-arquivo {
            align-items: flex-start;
            flex-direction: column;
        }

        .btn-documento-download {
            margin-left: 39px;
        }
    }

    /*
    CONTATOS

*/

    .contato-card {
        background: #fff;
        padding: 30px;
        margin-bottom: 30px;
        border-radius: 6px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }

        .contato-card h2 {
            margin-top: 0;
            margin-bottom: 20px;
        }

    .contato-resumo {
        margin-bottom: 25px;
        line-height: 1.7;
    }

    .contato-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 22px;
    }

    .contato-icon {
        width: 42px;
        min-width: 42px;
        font-size: 22px;
        margin-right: 15px;
    }

    .contato-item strong {
        display: block;
        margin-bottom: 5px;
    }

    .contato-item p {
        margin: 0;
        line-height: 1.6;
    }

    .contato-item a {
        text-decoration: none;
    }

    .contato-item small {
        display: block;
        margin-top: 3px;
    }

    .contato-form .form-group {
        margin-bottom: 20px;
    }

    .contato-form label {
        font-weight: 600;
    }

    .btn-enviar-contato {
        padding: 10px 25px;
    }


    /* ============================================================
   NOTÍCIAS
   ============================================================ */


    .noticias-pagina {
        padding-top: 35px;
        padding-bottom: 60px;
    }

    .noticias-grid {
        margin-top: 30px;
    }

    .noticia-card {
        background: #fff;
        border: 1px solid #e5e5e5;
        margin-bottom: 30px;
        height: 100%;
        overflow: hidden;
    }

    .noticia-card-imagem {
        overflow: hidden;
    }

        .noticia-card-imagem img {
            width: 100%;
            height: 220px;
            object-fit: cover;
        }

    .noticia-card-conteudo {
        padding: 22px;
    }

    .noticia-card-data {
        color: #777;
        font-size: 13px;
        margin-bottom: 8px;
    }

    .noticia-card-conteudo h2 {
        font-size: 22px;
        line-height: 1.3;
        margin-top: 5px;
        margin-bottom: 12px;
    }

    .noticia-card-conteudo p {
        line-height: 1.6;
        margin-bottom: 18px;
    }

    .noticia-detalhe {
        padding-top: 35px;
        padding-bottom: 60px;
    }

    .noticia-header h1 {
        margin-bottom: 8px;
    }

    .noticia-data {
        color: #777;
        font-size: 14px;
    }

    .noticia-imagem {
        margin: 25px 0;
    }

        .noticia-imagem img {
            width: 100%;
            max-height: 500px;
            object-fit: cover;
        }

    .noticia-resumo {
        font-size: 18px;
        line-height: 1.7;
        font-weight: 500;
        margin: 25px 0;
    }

    .noticia-conteudo {
        font-size: 16px;
        line-height: 1.8;
    }

        .noticia-conteudo img {
            max-width: 100%;
            height: auto;
        }

        .noticia-conteudo h2,
        .noticia-conteudo h3 {
            margin-top: 30px;
            margin-bottom: 15px;
        }

    .noticia-voltar {
        margin-top: 35px;
    }

    .noticia-card-categoria {
        display: inline-block;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 8px;
        letter-spacing: 0.5px;
    }

    .noticia-categoria {
        display: inline-block;
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 6px;
    }

    /* ==========================================================
   HOME - FISMA
   ========================================================== */

    /* ---------- Estrutura geral ---------- */

    .home-section {
        padding: 70px 0;
    }

    .home-section-light {
        background: #f7f9fb;
    }

    .home-section-title {
        text-align: center;
        margin-bottom: 45px;
    }

        .home-section-title h2 {
            color: #075b78;
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .home-section-title p {
            color: #6b7280;
            font-size: 17px;
        }


    /* ---------- Matrículas ---------- */

    .home-matriculas {
        position: relative;
        overflow: hidden;
        padding: 65px 0;
        background: linear-gradient(135deg, #075b78 0%, #087ea1 100%);
        color: #fff;
    }

        .home-matriculas h2 {
            font-size: 38px;
            font-weight: 800;
            margin-bottom: 15px;
        }

        .home-matriculas p {
            font-size: 18px;
            margin-bottom: 30px;
        }

        .home-matriculas .btn {
            border-radius: 30px;
            padding: 14px 30px;
            font-weight: 700;
            text-transform: uppercase;
        }


    /* ---------- Acessos ---------- */

    .home-acessos {
        background: #fff;
    }

    .home-acesso-card {
        display: flex;
        align-items: center;
        min-height: 145px;
        padding: 25px;
        background: #fff;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 5px 20px rgba(0, 0, 0, .06);
        transition: all .25s ease;
        text-decoration: none !important;
    }

        .home-acesso-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, .10);
        }

    .home-acesso-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
        margin-right: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #eef7fa;
        color: #075b78;
        font-size: 25px;
    }

    .home-acesso-card h3 {
        margin: 0 0 7px;
        color: #075b78;
        font-size: 19px;
        font-weight: 700;
    }

    .home-acesso-card p {
        margin: 0;
        color: #6b7280;
        font-size: 14px;
    }


    /* ---------- Cursos ---------- */

    .home-cursos {
        background: #f7f9fb;
    }

    .home-curso-card {
        height: 100%;
        overflow: hidden;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, .07);
        transition: transform .25s ease, box-shadow .25s ease;
    }

        .home-curso-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
        }

    .home-curso-card-body {
        padding: 25px;
    }

    .home-curso-card h3 {
        color: #075b78;
        font-size: 20px;
        font-weight: 700;
        margin-top: 0;
    }

    .home-curso-card p {
        color: #666;
        line-height: 1.6;
    }

    .home-curso-card .btn {
        margin-top: 15px;
        border-radius: 25px;
    }


    /* ---------- Notícias ---------- */

    .home-noticias {
        background: #fff;
    }

    .home-noticia-card {
        height: 100%;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        overflow: hidden;
        transition: all .25s ease;
    }

        .home-noticia-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
        }

    .home-noticia-imagem {
        width: 100%;
        height: 190px;
        object-fit: cover;
    }

    .home-noticia-body {
        padding: 25px;
    }

    .home-noticia-categoria {
        display: inline-block;
        margin-bottom: 10px;
        padding: 5px 12px;
        border-radius: 20px;
        background: #eef7fa;
        color: #075b78;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .home-noticia-card h3 {
        color: #075b78;
        font-size: 20px;
        font-weight: 700;
    }

    .home-noticia-card p {
        color: #666;
        line-height: 1.6;
    }


    /* ---------- Institucional ---------- */

    .home-institucional {
        background: #f7f9fb;
    }

        .home-institucional h2 {
            color: #075b78;
            font-weight: 700;
        }

        .home-institucional p {
            color: #555;
            font-size: 17px;
            line-height: 1.8;
        }


    /* ---------- Botões ---------- */

    .home-btn-primary {
        display: inline-block;
        padding: 13px 28px;
        border-radius: 28px;
        background: #f58220;
        color: #fff !important;
        font-weight: 700;
        text-decoration: none !important;
        transition: all .25s ease;
    }

        .home-btn-primary:hover {
            background: #e56f0c;
            transform: translateY(-2px);
        }

    .home-btn-outline {
        display: inline-block;
        padding: 12px 27px;
        border: 2px solid #075b78;
        border-radius: 28px;
        color: #075b78 !important;
        font-weight: 700;
        text-decoration: none !important;
        transition: all .25s ease;
    }

        .home-btn-outline:hover {
            background: #075b78;
            color: #fff !important;
        }


    /* ---------- Responsivo ---------- */

    @media (max-width: 991px) {

        .home-section {
            padding: 50px 0;
        }

        .home-matriculas h2 {
            font-size: 32px;
        }

        .home-section-title h2 {
            font-size: 28px;
        }
    }

    @media (max-width: 767px) {

        .home-section {
            padding: 40px 0;
        }

        .home-matriculas {
            text-align: center;
            padding: 45px 20px;
        }

            .home-matriculas h2 {
                font-size: 28px;
            }

        .home-acesso-card {
            margin-bottom: 15px;
        }

        .home-curso-card,
        .home-noticia-card {
            margin-bottom: 20px;
        }
    }

    /* =========================================
   ACESSOS RÁPIDOS / PORTAIS
   ========================================= */

    .home-acesso-card {
        width: 100%;
        height: 190px;
        min-height: 190px;
        display: flex;
        align-items: center;
        padding: 25px;
        background: #fff;
        border: 1px solid #e1e7eb;
        border-radius: 12px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
        text-decoration: none !important;
        transition: all 0.25s ease;
    }

        .home-acesso-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
            text-decoration: none !important;
        }


    /* Ícone */

    .home-acesso-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 18px;
        border-radius: 50%;
        background: #eef8fc;
        font-size: 28px;
    }


    /* Título */

    .home-acesso-card h3 {
        margin: 0 0 8px 0;
        color: #005b78;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.15;
    }


    /* Descrição */

    .home-acesso-card p {
        margin: 0;
        color: #6f7782;
        font-size: 15px;
        line-height: 1.55;
    }


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

    @media (max-width: 767px) {

        .home-acesso-card {
            height: auto;
            min-height: 180px;
        }
    }


    /* =========================================================
   MATRÍCULAS ABERTAS - HOME
   ========================================================= */

    .home-matriculas {
        padding: 35px 0;
        background: #f5f7f9;
    }

    .home-matriculas-card {
        background: linear-gradient(135deg, #08627d, #0d7895);
        border-radius: 14px;
        padding: 32px 40px;
        min-height: 150px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
        border-top: 4px solid #ff7a00;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    }

    .home-matriculas-conteudo {
        flex: 1;
    }

    .home-matriculas-label {
        display: block;
        color: #ffffff;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.8px;
        margin-bottom: 8px;
    }

    .home-matriculas-card h2 {
        margin: 0 0 8px 0;
        color: #ffffff;
        font-size: 32px;
        font-weight: 700;
    }

    .home-matriculas-card p {
        margin: 0;
        color: #ffffff;
        font-size: 16px;
        line-height: 1.5;
    }

    .home-matriculas-acao {
        flex-shrink: 0;
    }

    .btn-matriculas {
        display: inline-block;
        background: #ff7a00;
        color: #ffffff !important;
        padding: 13px 28px;
        border-radius: 28px;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none !important;
        transition: all 0.2s ease;
    }

        .btn-matriculas:hover {
            background: #e96d00;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
        }


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

    @media (max-width: 767px) {

        .home-matriculas {
            padding: 25px 0;
        }

        .home-matriculas-card {
            padding: 28px 24px;
            flex-direction: column;
            align-items: flex-start;
        }

            .home-matriculas-card h2 {
                font-size: 27px;
            }

            .home-matriculas-card p {
                font-size: 15px;
            }

        .home-matriculas-acao {
            width: 100%;
        }

        .btn-matriculas {
            width: 100%;
            text-align: center;
        }
    }


    .home-curso-card {
        height: 390px;
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
        display: flex;
        flex-direction: column;
        transition: all 0.2s ease;
    }

        .home-curso-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
        }


    /* Área da imagem */
    .home-curso-imagem {
        width: 100%;
        height: 170px;
        overflow: hidden;
        flex-shrink: 0;
    }

        .home-curso-imagem img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }


    /* Quando o curso não tiver imagem */
    .home-curso-imagem-vazia {
        width: 100%;
        height: 170px;
        background: linear-gradient(135deg, #eaf5f8, #dceff4);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0b6682;
        font-size: 42px;
    }


    /* Conteúdo */
    .home-curso-conteudo {
        padding: 22px 24px;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

        .home-curso-conteudo h3 {
            margin: 0 0 10px 0;
            color: #08627d;
            font-size: 21px;
            font-weight: 700;
        }

        .home-curso-conteudo p {
            margin: 0;
            color: #707985;
            font-size: 15px;
            line-height: 1.5;
        }


    /* Botão sempre na mesma posição */
    .home-curso-botao {
        margin-top: auto;
    }

        .home-curso-botao a {
            display: inline-block;
            padding: 10px 25px;
            border: 2px solid #086b88;
            border-radius: 25px;
            color: #086b88 !important;
            font-weight: 600;
            text-decoration: none !important;
        }

            .home-curso-botao a:hover {
                background: #086b88;
                color: #fff !important;
            }



    .home-curso-card {
        height: 390px;
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
        display: flex;
        flex-direction: column;
        transition: all 0.2s ease;
    }

        .home-curso-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
        }


    /* Área da imagem — sempre igual */
    .home-curso-imagem {
        width: 100%;
        height: 170px;
        overflow: hidden;
        flex-shrink: 0;
        margin: 0;
    }

        .home-curso-imagem img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }


    /* Quando não houver imagem */
    .home-curso-imagem-vazia {
        width: 100%;
        height: 170px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #eaf5f8, #dceff4);
        color: #08627d;
    }

        .home-curso-imagem-vazia span {
            font-size: 42px;
        }


    /* Corpo do card */
    .home-curso-card-body {
        padding: 22px 24px;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

        .home-curso-card-body h3 {
            margin: 0 0 10px 0;
            color: #08627d;
            font-size: 21px;
            font-weight: 700;
        }

        .home-curso-card-body p {
            margin: 0;
            color: #707985;
            font-size: 15px;
            line-height: 1.5;
        }


    /* Botão fica sempre no mesmo lugar */
    .home-curso-card-footer {
        margin-top: auto;
    }


    /* Espaçamento do botão "Ver todos" */
    .home-cursos-todos {
        margin-top: 5px;
    }

    /* =========================================================
   NOTÍCIAS - HOME
   ========================================================= */

    .home-noticias {
        padding: 70px 0;
        background: #fff;
    }


    /* CARD */

    .home-noticia-card {
        height: 390px;
        background: #fff;
        border: 1px solid #e1e6e9;
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: all 0.2s ease;
    }

        .home-noticia-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
        }


    /* IMAGEM */

    .home-noticia-imagem {
        width: 100%;
        height: 165px;
        overflow: hidden;
        flex-shrink: 0;
    }

        .home-noticia-imagem img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }


    /* SEM IMAGEM */

    .home-noticia-imagem-vazia {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient( 135deg, #eaf5f8, #dceff4 );
        color: #08627d;
        font-size: 22px;
        font-weight: 700;
    }


    /* CORPO */

    .home-noticia-body {
        padding: 20px 22px;
        display: flex;
        flex-direction: column;
        flex: 1;
    }


    /* CATEGORIA + DATA */

    .home-noticia-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 18px;
    }

    .home-noticia-categoria {
        display: inline-block;
        padding: 6px 11px;
        border-radius: 20px;
        background: #eaf5f8;
        color: #08627d;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .home-noticia-meta small {
        color: #666;
        font-size: 12px;
    }


    /* TÍTULO */

    .home-noticia-body h3 {
        margin: 0 0 9px 0;
        color: #08627d;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.3;
    }


    /* RESUMO */

    .home-noticia-body p {
        margin: 0;
        color: #707985;
        font-size: 14px;
        line-height: 1.5;
    }


    /* RODAPÉ */

    .home-noticia-footer {
        margin-top: auto;
    }


    /* LER MAIS */

    .home-noticia-link {
        display: inline-block;
        color: #287bc1 !important;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none !important;
    }

        .home-noticia-link:hover {
            color: #08627d !important;
        }


    /* BOTÃO TODAS */

    .home-noticias-todas {
        margin-top: 28px;
    }




    /*==========================================================
    NOTÍCIAS DO CURSO
==========================================================*/

    .curso-noticias {
        margin-top: 10px;
    }

    .curso-bloco-header {
        margin-bottom: 30px;
    }

        .curso-bloco-header h2 {
            color: #0f5570;
            font-size: 30px;
            font-weight: 700;
            margin-top: 8px;
            margin-bottom: 10px;
        }

        .curso-bloco-header p {
            color: #666;
            font-size: 16px;
            line-height: 1.7;
            margin-bottom: 0;
        }

    .curso-noticia-card {
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,.08);
        margin-bottom: 30px;
        height: 100%;
    }

    .curso-noticia-imagem {
        width: 100%;
        height: 220px;
        overflow: hidden;
    }

        .curso-noticia-imagem img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .curso-noticia-body {
        padding: 25px;
    }

    .curso-noticia-categoria {
        display: inline-block;
        color: #ff6b00;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 6px;
    }

    .curso-noticia-data {
        display: block;
        color: #999;
        margin-bottom: 12px;
    }

    .curso-noticia-body h3 {
        color: #0f5570;
        font-size: 21px;
        font-weight: 700;
        line-height: 1.35;
        margin-top: 0;
        margin-bottom: 12px;
    }

    .curso-noticia-body p {
        color: #666;
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 18px;
    }

    .curso-noticia-link {
        color: #ff6b00;
        font-weight: 700;
        text-decoration: none;
    }

        .curso-noticia-link:hover {
            color: #e85f00;
            text-decoration: none;
        }

        .curso-noticia-link span {
            margin-left: 5px;
        }



    /* ========================================================= FOOTER ========================================================= */

    .site-footer {
        background: #062b57;
        color: #fff;
    }
    /* ========================================================= ÁREA PRINCIPAL ========================================================= */

    .site-footer-main {
        padding: 55px 0 40px;
    }
    /* ========================================================= LOGO ========================================================= */

    .site-footer-logo {
        max-width: 150px;
        height: auto;
        margin-bottom: 18px;
    }

    .site-footer-brand p {
        max-width: 320px;
        margin: 0;
        color: rgba(255, 255, 255, 0.78);
        font-size: 14px;
        line-height: 1.7;
    }
    /* ========================================================= TÍTULOS ========================================================= */

    .site-footer-title {
        margin: 5px 0 20px;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }
    /* ========================================================= LINKS ========================================================= */

    .site-footer-links {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .site-footer-links li {
            margin-bottom: 10px;
        }

        .site-footer-links a {
            color: rgba(255, 255, 255, 0.75);
            font-size: 13px;
            text-decoration: none;
            transition: color 0.2s ease;
        }

            .site-footer-links a:hover {
                color: #fff;
                text-decoration: none;
            }
    /* ========================================================= FAIXA INFERIOR ========================================================= */

    .site-footer-bottom {
        padding: 18px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        background: #04244a;
    }

    .site-footer-copy {
        margin: 0;
        color: rgba(255, 255, 255, 0.65);
        font-size: 12px;
        line-height: 1.6;
    }
    /* ========================================================= REDES SOCIAIS ========================================================= */

    .site-footer-social {
        text-align: right;
    }

        .site-footer-social a {
            display: inline-block;
            margin-left: 18px;
            color: rgba(255, 255, 255, 0.75);
            font-size: 12px;
            text-decoration: none;
            transition: color 0.2s ease;
        }

            .site-footer-social a:hover {
                color: #fff;
                text-decoration: none;
            }
    /* ========================================================= RESPONSIVO ========================================================= */

    @media (max-width: 991px) {
        .site-footer-main {
            padding: 45px 0 25px;
        }

        .site-footer-brand {
            margin-bottom: 15px;
        }
    }

    @media (max-width: 767px) {
        .site-footer-main {
            padding: 40px 0 20px;
        }

        .site-footer-title {
            margin-top: 15px;
        }

        .site-footer-bottom {
            text-align: center;
        }

        .site-footer-social {
            margin-top: 12px;
            text-align: center;
        }

            .site-footer-social a {
                margin: 0 8px;
            }

        .site-footer-copy {
            text-align: center;
        }
    }

    /* =========================================================
   ADMINISTRAÇÃO
   ========================================================= */

    .admin-body {
        margin: 0;
        background: #f4f6f8;
        font-family: 'Montserrat', sans-serif;
        color: #263238;
    }


    /* HEADER */

    .admin-header {
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30px;
        background: #062b57;
        color: #fff;
    }


    .admin-header-brand {
        display: flex;
        align-items: center;
        gap: 18px;
        font-size: 16px;
        font-weight: 600;
    }


    .admin-logo {
        max-width: 110px;
        max-height: 48px;
        object-fit: contain;
    }


    .admin-site-link {
        color: #fff;
        text-decoration: none;
    }

        .admin-site-link:hover {
            color: #fff;
            text-decoration: none;
        }


    /* WRAPPER */

    .admin-wrapper {
        display: flex;
        min-height: calc(100vh - 70px);
    }


    /* SIDEBAR */

    .admin-sidebar {
        width: 240px;
        flex-shrink: 0;
        background: #fff;
        border-right: 1px solid #e2e6e9;
    }


    .admin-menu {
        list-style: none;
        margin: 0;
        padding: 20px 0;
    }


        .admin-menu li a {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 25px;
            color: #52616b;
            font-size: 13px;
            text-decoration: none;
        }


            .admin-menu li a:hover {
                background: #eef6f9;
                color: #08627d;
            }


            .admin-menu li a i {
                width: 20px;
                text-align: center;
            }


    .admin-menu-title {
        padding: 20px 25px 8px;
        color: #9aa5ad;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1px;
    }


    /* CONTEÚDO */

    .admin-content {
        flex: 1;
        padding: 35px;
    }


    /* TÍTULO */

    .admin-page-label {
        color: #287bc1;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
    }


    .admin-page-header h1 {
        margin: 5px 0;
        color: #062b57;
        font-size: 30px;
        font-weight: 700;
    }


    .admin-page-header p {
        color: #7b858c;
    }


    /* KPI */

    .admin-kpis {
        margin-top: 30px;
    }


    .admin-kpi-card {
        min-height: 110px;
        margin-bottom: 20px;
        padding: 22px;
        display: flex;
        align-items: center;
        gap: 18px;
        background: #fff;
        border: 1px solid #e4e8eb;
        border-radius: 10px;
    }


    .admin-kpi-icon {
        width: 52px;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 10px;
        background: #eaf5f8;
        color: #08627d;
        font-size: 21px;
    }


    .admin-kpi-card span {
        display: block;
        color: #7b858c;
        font-size: 12px;
    }


    .admin-kpi-card strong {
        display: block;
        margin-top: 4px;
        color: #062b57;
        font-size: 25px;
    }


    /* ACESSO RÁPIDO */

    .admin-dashboard-section {
        margin-top: 25px;
    }


        .admin-dashboard-section h2 {
            margin-bottom: 20px;
            color: #062b57;
            font-size: 20px;
        }


    /* ACTION CARD */

    .admin-action-card {
        min-height: 150px;
        margin-bottom: 20px;
        padding: 22px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: #fff;
        border: 1px solid #e4e8eb;
        border-radius: 10px;
        text-decoration: none !important;
        transition: all .2s ease;
    }


        .admin-action-card:hover {
            transform: translateY(-3px);
            border-color: #cbdde5;
            box-shadow: 0 8px 22px rgba(0,0,0,.06);
        }


        .admin-action-card i {
            margin-bottom: 15px;
            color: #08627d;
            font-size: 24px;
        }


        .admin-action-card strong {
            color: #062b57;
            font-size: 14px;
        }


        .admin-action-card span {
            margin-top: 6px;
            color: #7b858c;
            font-size: 12px;
            line-height: 1.5;
        }


    /* RESPONSIVO */

    @media (max-width: 767px) {

        .admin-header {
            padding: 0 15px;
        }

        .admin-sidebar {
            display: none;
        }

        .admin-content {
            padding: 20px 15px;
        }
    }


    /** PROFESSOR DO CURSO */

.professor-card {
    background: #fff;
    border-radius: 18px;
    padding: 25px;
    text-align: center;
    margin-bottom: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.professor-foto {
    width: 130px;
    height: 130px;
    object-fit: cover;
    margin-bottom: 15px;
}

.professor-card h4 {
    color: #0f5570;
    font-size: 20px;
    font-weight: 700;
    margin: 10px 0;
}

.professor-card p {
    color: #666;
    margin-bottom: 15px;
}

.professor-curriculo {
    color: #555;
    line-height: 1.6;
    text-align: left;
}


/** MERCADO DE TRABALHO PAGINA CURSOS*/

.mercado-trabalho-conteudo {
    font-size: 16px;
    line-height: 1.7;
}

    .mercado-trabalho-conteudo h2,
    .mercado-trabalho-conteudo h3,
    .mercado-trabalho-conteudo h4 {
        margin-top: 25px;
        margin-bottom: 15px;
    }

    .mercado-trabalho-conteudo p {
        margin-bottom: 15px;
    }

    .mercado-trabalho-conteudo ul,
    .mercado-trabalho-conteudo ol {
        margin-bottom: 20px;
        padding-left: 30px;
    }

    .mercado-trabalho-conteudo li {
        margin-bottom: 8px;
    }

    .mercado-trabalho-conteudo a {
        text-decoration: underline;
    }

/*==========================================================
    SELEÇÃO VISUAL DA POSIÇÃO DO BANNER
==========================================================*/

.banner-posicoes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 650px;
    margin-top: 15px;
}

.banner-posicao {
    min-height: 90px;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 8px;
    background: #fff;
    color: #555;
    cursor: pointer;
    transition: all .2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .banner-posicao span {
        display: block;
        font-size: 28px;
        line-height: 1;
        margin-bottom: 8px;
    }

    .banner-posicao small {
        font-size: 12px;
        text-align: center;
    }

    .banner-posicao:hover {
        border-color: #0f5570;
        background: #f5f9fb;
        transform: translateY(-2px);
    }

    .banner-posicao.selecionada {
        border-color: #0f5570;
        background: #0f5570;
        color: #fff;
        box-shadow: 0 3px 10px rgba(0, 0, 0, .15);
    }

        .banner-posicao.selecionada:hover {
            background: #0f5570;
            color: #fff;
        }