body{
    font-family:Arial,sans-serif;
    margin:0;
    background:#f4f7fb;
    color:#333;
}

/* TOPBAR */

.topbar{

    position:sticky;
    top:0;
    z-index:999;

    background:
        rgba(255,255,255,0.92);

    backdrop-filter:blur(14px);

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

    padding:16px 34px;

    box-shadow:
        0 4px 24px rgba(0,0,0,0.08);

    border-bottom:
        1px solid rgba(255,255,255,0.4);
}

.topbar-logo{

    display:flex;
    align-items:center;
}

.topbar-logo img{

    height:54px;

    width:auto;

    display:block;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.topbar-logo img:hover{

    transform:scale(1.03);

    opacity:0.96;
}

.topbar-links{

    display:flex;
    gap:26px;
    flex-wrap:wrap;
}

.topbar-links a{

    text-decoration:none;

    color:#2b2b2b;

    font-weight:700;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}

.topbar-links a:hover{

    color:#1f3c88;
}

.locked-link{
    opacity:0.7;
}

/* HERO */

.hero{

    background:
    radial-gradient(
        circle at top right,
        rgba(59,130,246,0.25),
        transparent 30%
    ),
    radial-gradient(
        circle at bottom left,
        rgba(255,255,255,0.08),
        transparent 30%
    ),
    linear-gradient(
        135deg,
        #162c63 0%,
        #1f3c88 45%,
        #2952b3 100%
    );

    color:white;

    padding:
        130px
        20px
        110px
        20px;

    text-align:center;

    position:relative;

    overflow:hidden;
}

.hero::before{

    content:'';

    position:absolute;

    width:520px;
    height:520px;

    background:
        rgba(255,255,255,0.05);

    border-radius:50%;

    top:-180px;
    right:-120px;

    filter:blur(10px);
}

.hero-content{

    position:relative;
    z-index:2;
    max-width:980px;
    margin:auto;
}

.hero-badge{

    display:inline-block;

    background:
        rgba(255,255,255,0.12);

    border:
        1px solid rgba(255,255,255,0.2);

    padding:11px 20px;

    border-radius:40px;

    margin-bottom:34px;

    font-size:14px;
    font-weight:700;

    letter-spacing:0.5px;

    backdrop-filter:blur(8px);

    box-shadow:
        0 8px 22px rgba(0,0,0,0.12);
}

.hero h1{

    margin:0;

    font-size:68px;

    font-weight:800;

    letter-spacing:-2px;

    line-height:1.05;

    text-shadow:
        0 8px 24px rgba(0,0,0,0.18);
}

.hero h2{

    font-size:30px;

    font-weight:400;

    margin-top:24px;

    line-height:1.5;

    opacity:0.96;

    max-width:920px;

    margin-left:auto;

    margin-right:auto;
}

.subtitulo-header{

    margin-top:24px;

    opacity:0.92;

    font-size:18px;

    line-height:1.9;

    max-width:760px;

    margin-left:auto;
    margin-right:auto;
}

.hero-buttons{

    margin-top:46px;

    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
}

.hero-btn{

    text-decoration:none;

    padding:18px 30px;

    border-radius:16px;

    font-weight:700;

    transition:
        transform 0.2s ease,
        box-shadow 0.25s ease,
        background 0.2s ease;

    box-shadow:
        0 10px 28px rgba(0,0,0,0.15);
}

.hero-primary{

    background:white;

    color:#1f3c88;

    border:
        2px solid rgba(255,255,255,0.4);
}

.hero-secondary{

    background:
        rgba(255,255,255,0.12);

    color:white;

    border:
        1px solid rgba(255,255,255,0.22);

    backdrop-filter:blur(10px);
}

.hero-btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 16px 36px rgba(0,0,0,0.18);
}

/* ESTATÍSTICAS */

.stats-section{

    margin-top:-50px;

    position:relative;
    z-index:3;

    padding:0 20px;
}

.stats-grid{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap:22px;
}

.stat-card{

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f9fbff 100%
        );

    border:
        1px solid #e6ecfa;

    border-radius:22px;

    padding:34px;

    text-align:center;

    box-shadow:
        0 12px 35px rgba(0,0,0,0.07);

    transition:
        transform 0.2s ease,
        box-shadow 0.25s ease;
}

.stat-card:hover{

    transform:translateY(-5px);

    box-shadow:
        0 18px 40px rgba(0,0,0,0.12);
}

.stat-card h3{

    font-size:36px;

    margin-top:0;

    margin-bottom:14px;
}

/* DASHBOARD */

.dashboard-section{

    padding:85px 20px;

    max-width:1200px;

    margin:auto;
}

.dashboard-section h2{

    text-align:center;

    color:#1f3c88;

    font-size:40px;

    margin-bottom:18px;
}

.dashboard-subtitle{

    text-align:center;

    color:#555;

    line-height:1.9;

    max-width:860px;

    margin:auto auto 55px auto;

    font-size:17px;
}

.dashboard-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(250px,1fr));

    gap:26px;
}

.dashboard-card{

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f9fbff 100%
        );

    border-radius:22px;

    padding:34px;

    box-shadow:
        0 10px 28px rgba(0,0,0,0.06);

    transition:0.25s;

    border:
        1px solid #e6ecfa;

    position:relative;

    overflow:hidden;
}

.dashboard-card::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:
        linear-gradient(
            90deg,
            #1f3c88,
            #3b82f6
        );
}

.dashboard-card:hover{

    transform:translateY(-6px);

    box-shadow:
        0 16px 36px rgba(0,0,0,0.1);
}

.dashboard-icon{

    font-size:44px;

    margin-bottom:20px;
}

.dashboard-card h3{

    color:#1f3c88;

    margin-top:0;

    margin-bottom:14px;
}

.dashboard-card p{

    color:#555;

    line-height:1.8;
}
/* PLANOS */

.planos-section{

    padding:
        90px
        20px;

    background:
        linear-gradient(
            180deg,
            #f7faff 0%,
            #eef4ff 100%
        );
}

.planos-section h2{

    text-align:center;

    color:#1f3c88;

    font-size:42px;

    margin-bottom:18px;
}

.planos-subtitle{

    text-align:center;

    max-width:760px;

    margin:
        0 auto
        60px auto;

    color:#555;

    line-height:1.9;

    font-size:17px;
}

.planos-grid{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(290px,1fr));

    gap:34px;

    align-items:stretch;
}

.plano-card{

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcff 100%
        );

    border-radius:28px;

    padding:42px;

    position:relative;

    box-shadow:
        0 18px 45px rgba(0,0,0,0.08);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border 0.25s ease;

    border:
        1px solid #e5ebfa;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    overflow:hidden;
}

.plano-card::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:
        linear-gradient(
            90deg,
            #1f3c88,
            #3b82f6
        );
}

.plano-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 24px 52px rgba(0,0,0,0.12);
}

.plano-topo{

    margin-bottom:30px;
}

.plano-badge{

    display:inline-block;

    background:#edf3ff;

    color:#1f3c88;

    padding:
        9px 15px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    letter-spacing:0.5px;

    margin-bottom:22px;
}

.plano-card h3{

    margin-top:0;

    font-size:32px;

    color:#1f3c88;

    margin-bottom:20px;
}

.plano-preco{

    font-size:52px;

    font-weight:800;

    color:#111;

    margin-bottom:12px;
}

.plano-card ul{

    list-style:none;

    padding:0;

    margin:
        0 0 38px 0;
}

.plano-card li{

    margin-bottom:16px;

    line-height:1.8;

    color:#444;
}

.plano-btn{

    width:100%;

    border:none;

    background:
        linear-gradient(
            135deg,
            #1f3c88,
            #2952b3
        );

    color:white;

    padding:
        18px
        20px;

    border-radius:16px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;

    box-shadow:
        0 10px 28px rgba(31,60,136,0.22);
}

.plano-btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 16px 34px rgba(31,60,136,0.28);

    opacity:0.96;
}

.plano-destaque{

    border:
        2px solid #1f3c88;

    transform:scale(1.03);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbff 100%
        );
}

.plano-destaque:hover{

    transform:
        scale(1.03)
        translateY(-8px);
}

.plano-recomendado{

    position:absolute;

    top:-14px;

    right:24px;

    background:
        linear-gradient(
            90deg,
            #1f3c88,
            #3b82f6
        );

    color:white;

    padding:
        10px 16px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    letter-spacing:0.5px;

    box-shadow:
        0 8px 22px rgba(31,60,136,0.25);
}

/* CONTATO */

.contato-section{

    padding:
        100px
        20px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f4f8ff 100%
        );
}

.contato-container{

    max-width:920px;

    margin:auto;

    text-align:center;
}

.contato-badge{

    display:inline-block;

    background:#edf3ff;

    color:#1f3c88;

    padding:
        10px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

    letter-spacing:0.5px;

    margin-bottom:30px;
}

.contato-section h2{

    color:#1f3c88;

    font-size:44px;

    margin-top:0;

    margin-bottom:24px;
}

.contato-texto{

    max-width:760px;

    margin:
        0 auto
        38px auto;

    line-height:1.9;

    font-size:18px;

    color:#555;
}

.contato-email{

    display:inline-block;

    background:
        linear-gradient(
            135deg,
            #1f3c88,
            #2952b3
        );

    color:white;

    text-decoration:none;

    padding:
        18px
        32px;

    border-radius:18px;

    font-size:20px;

    font-weight:700;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.contato-email:hover{

    transform:translateY(-3px);

    box-shadow:
        0 14px 30px rgba(31,60,136,0.25);
}

.contato-info{

    margin-top:30px;

    color:#666;

    line-height:1.9;

    font-size:15px;
}

/* PROGRESSO */

.progresso-container{

    background:white;

    margin:30px 20px;

    padding:28px;

    border-radius:20px;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.06);

    border:
        1px solid #e6ecfa;
}

.progresso-info{

    display:flex;

    justify-content:space-between;

    margin-bottom:16px;

    font-weight:700;

    flex-wrap:wrap;

    gap:12px;
}

.barra-progresso{

    width:100%;

    height:18px;

    background:#dfe6f3;

    border-radius:30px;

    overflow:hidden;
}

#barraPreenchimento{

    height:100%;

    width:0%;

    background:
        linear-gradient(
            90deg,
            #1f3c88,
            #3b82f6
        );

    transition:0.3s;
}
/* QUESTIONÁRIO */

.section{

    background:white;

    margin:24px 22px;

    border-radius:20px;

    overflow:hidden;

    box-shadow:
        0 10px 28px rgba(0,0,0,0.05);

    transition:
        transform 0.2s ease,
        box-shadow 0.25s ease,
        border 0.25s ease;

    border:
        1px solid #e7edf9;
}

.section:hover{

    transform:translateY(-2px);

    box-shadow:
        0 16px 34px rgba(0,0,0,0.08);
}

.section-header{

    background:
        linear-gradient(
            135deg,
            #1f3c88,
            #2952b3
        );

    color:white;

    padding:22px;

    cursor:pointer;

    font-weight:700;

    position:relative;

    transition:0.25s;

    user-select:none;
}

.section-header:hover{

    filter:brightness(1.03);
}

.section-content{

    display:none;

    padding:28px;
}

/* BOTÕES CHECKLIST */

.buttons{

    display:flex;

    gap:12px;

    margin-top:16px;

    flex-wrap:wrap;
}

.answer-btn{

    border:none;

    padding:
        13px
        24px;

    cursor:pointer;

    border-radius:12px;

    font-weight:700;

    min-width:115px;

    transition:
        transform 0.15s ease,
        opacity 0.2s ease,
        box-shadow 0.2s ease;

    opacity:0.78;
}

.answer-btn:hover{

    opacity:1;

    transform:translateY(-2px);
}

.answer-btn.selected{

    opacity:1;

    transform:scale(1.05);

    box-shadow:
        0 10px 24px rgba(0,0,0,0.16);
}

.sim{

    background:#2ecc71;

    color:white;
}

.nao{

    background:#e74c3c;

    color:white;
}

.question{

    margin-bottom:26px;

    background:
        linear-gradient(
            180deg,
            #fbfcff 0%,
            #f7faff 100%
        );

    border:
        1px solid #e2e8f7;

    padding:22px;

    border-radius:18px;

    transition:0.25s;
}

.question:hover{

    border-color:#c7d5ff;

    background:#f7faff;
}

.question-answered{

    border-color:#b7f0cb;

    background:#f5fff8;
}

/* RESULTADOS */

.resultado{

    text-align:center;

    padding:55px 20px;
}

#reportButton,
#modalFechar{

    background:
        linear-gradient(
            135deg,
            #1f3c88,
            #2952b3
        );

    color:white;

    border:none;

    padding:18px 32px;

    border-radius:14px;

    cursor:pointer;

    font-size:16px;

    font-weight:700;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

    box-shadow:
        0 10px 24px rgba(31,60,136,0.22);
}

#reportButton:hover,
#modalFechar:hover{

    transform:translateY(-2px);

    box-shadow:
        0 16px 34px rgba(31,60,136,0.26);
}

/* INDICADORES */

.indicadores{

    display:flex;

    justify-content:center;

    gap:16px;

    margin:
        28px 0;
}

.bola{

    width:22px;

    height:22px;

    border-radius:50%;

    opacity:0.2;

    transition:0.3s;
}

.vermelho{
    background:#e74c3c;
}

.amarelo{
    background:#f1c40f;
}

.verde{
    background:#2ecc71;
}

/* PREMIUM AREA */

#premiumArea{

    background:
        linear-gradient(
            135deg,
            #162c63,
            #2952b3
        );

    color:white;

    margin:35px 20px;

    padding:45px;

    border-radius:28px;

    text-align:center;

    box-shadow:
        0 18px 40px rgba(0,0,0,0.12);
}

.premium-access-btn{

    display:inline-block;

    margin-top:26px;

    background:white;

    color:#1f3c88;

    padding:
        16px
        30px;

    border-radius:16px;

    text-decoration:none;

    font-weight:700;

    transition:0.2s;
}

.premium-access-btn:hover{

    transform:translateY(-2px);
}

/* MODAL */

#modalSistema{

    display:none;

    position:fixed;

    inset:0;

    z-index:99999;
}

.modal-overlay{

    width:100%;
    height:100%;

    background:
        rgba(0,0,0,0.55);

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    backdrop-filter:blur(5px);
}

.modal-box{

    background:white;

    border-radius:24px;

    padding:36px;

    width:100%;

    max-width:420px;

    text-align:center;

    box-shadow:
        0 25px 60px rgba(0,0,0,0.22);

    animation:modalEntrada 0.25s ease;
}

.modal-icon{

    font-size:44px;

    margin-bottom:16px;
}

.modal-box h2{

    margin-top:0;

    color:#1f3c88;
}

.modal-box p{

    color:#555;

    line-height:1.8;

    margin-bottom:28px;
}

@keyframes modalEntrada{

    from{

        opacity:0;

        transform:
            translateY(10px)
            scale(0.96);
    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }
}

/* FOOTER */

.footer{

    background:
        linear-gradient(
            135deg,
            #162c63,
            #1f3c88
        );

    color:white;

    margin-top:70px;

    padding:
        80px
        20px
        35px
        20px;
}

.footer-container{

    max-width:1200px;

    margin:auto;
}

.footer-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(240px,1fr));

    gap:42px;

    margin-bottom:55px;
}

.footer-col h3{

    margin-top:0;

    font-size:30px;

    margin-bottom:20px;
}

.footer-col h4{

    margin-top:0;

    margin-bottom:20px;

    font-size:18px;
}

.footer-col p{

    line-height:1.9;

    color:
        rgba(255,255,255,0.82);
}

.footer-col ul{

    list-style:none;

    padding:0;

    margin:0;
}

.footer-col li{

    margin-bottom:14px;

    color:
        rgba(255,255,255,0.82);

    line-height:1.8;
}

.footer-col a{

    text-decoration:none;

    color:
        rgba(255,255,255,0.82);

    transition:0.2s;
}

.footer-col a:hover{

    color:white;
}

.footer-bottom{

    border-top:
        1px solid rgba(255,255,255,0.15);

    padding-top:28px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;
}

.footer-bottom p{

    margin:0;

    color:
        rgba(255,255,255,0.75);
}

.footer-bottom span{

    background:
        rgba(255,255,255,0.12);

    padding:
        8px 14px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;
}

/* MICRO ANIMAÇÕES */

html{

    scroll-behavior:smooth;
}

button,
a{

    -webkit-tap-highlight-color:transparent;
}

.section,
.dashboard-card,
.stat-card,
.plano-card{

    will-change:transform;
}

/* RESPONSIVO */

@media (max-width:768px){

    .topbar{

        flex-direction:column;

        gap:14px;

        padding:16px 20px;
    }

    .topbar-links{

        justify-content:center;
    }

    .hero{

        padding:
            110px
            20px
            90px
            20px;
    }

    .hero h1{

        font-size:44px;
    }

    .hero h2{

        font-size:22px;
    }

    .subtitulo-header{

        font-size:16px;
    }

    .dashboard-section h2,
    .planos-section h2,
    .contato-section h2{

        font-size:34px;
    }

    .plano-card{

        padding:34px 26px;
    }

    .plano-preco{

        font-size:44px;
    }

    .contato-texto{

        font-size:16px;
    }

    .contato-email{

        font-size:17px;

        padding:
            16px
            24px;
    }

    .footer{

        text-align:center;
    }

    .footer-bottom{

        flex-direction:column;
    }

    .section{

        margin:18px 14px;
    }

    .section-content{

        padding:22px;
    }

    .progresso-container{

        margin:24px 14px;
    }

    #premiumArea{

        padding:34px 22px;
    }
}
/* =========================================
AVISOS INSTITUCIONAIS
========================================= */

.card-aviso{

    background:white;

    border-radius:14px;

    padding:18px 22px;

    margin-bottom:18px;

    box-shadow:0 2px 10px rgba(0,0,0,0.06);

    border-left:5px solid #1d3557;
}

.card-aviso summary{

    font-weight:700;

    cursor:pointer;

    color:#1d3557;

    font-size:18px;

    list-style:none;
}

.card-aviso summary::-webkit-details-marker{

    display:none;
}

.card-aviso p{

    margin-top:18px;

    color:#444;

    line-height:1.9;

    font-size:15px;

    text-align:justify;
}
/* AVISO PIX */

.aviso-pix{

    max-width:900px;

    margin:
        0 auto
        40px auto;

    background:#fff8e1;

    border:
        1px solid #f4d03f;

    color:#7d6608;

    padding:
        16px
        22px;

    border-radius:12px;

    text-align:center;

    line-height:1.7;

    font-size:15px;

    box-shadow:
        0 2px 8px rgba(0,0,0,0.05);
}
/* =========================================
MÓDULOS HUB / CEUA
========================================= */

.dashboard-card .hero-btn{

    display:inline-block;

    margin-top:22px;

    width:100%;

    text-align:center;

    box-sizing:border-box;
}

.dashboard-card .hero-primary{

    background:
        linear-gradient(
            135deg,
            #1f3c88,
            #2952b3
        );

    color:white;

    border:none;
}

.dashboard-card .hero-secondary{

    background:
        rgba(31,60,136,0.08);

    color:#1f3c88;

    border:
        1px solid rgba(31,60,136,0.18);

    backdrop-filter:none;
}

.dashboard-card .hero-secondary:hover{

    background:
        rgba(31,60,136,0.14);
}

.dashboard-card{

    display:flex;

    flex-direction:column;

    justify-content:space-between;
}

.dashboard-card p{

    flex-grow:1;
}

/* CEUA */

.ceua-badge{

    background:#edf7ee;

    color:#1d6b2f;

    border:
        1px solid #cfead4;
}
/* =========================
PREMIUM LOCK CEUA
========================= */

.premium-lock-card{
    max-width: 900px;
    margin: 40px auto;
    padding: 36px;
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #f7f9ff 100%
    );
    border: 1px solid #d9e3ff;
    border-radius: 24px;
    box-shadow: 0 14px 40px rgba(31,60,136,0.10);
    text-align: center;
    animation: fadeInUp 0.35s ease;
}

.premium-lock-card h3{
    font-size: 28px;
    color: #1f3c88;
    margin-bottom: 16px;
    font-weight: 800;
}

.premium-lock-card p{
    max-width: 700px;
    margin: 0 auto 24px auto;
    font-size: 17px;
    line-height: 1.7;
    color: #44506a;
}

.premium-lock-card .hero-btn{
    display: inline-block;
    padding: 14px 28px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
}

.premium-lock-card .hero-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(31,60,136,0.18);
}

#reportButton,
#resetChecklistButton{
    margin: 12px 8px;
    padding: 14px 24px;
    border: none;
    border-radius: 14px;
    background: #1f3c88;
    color: white;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 8px 18px rgba(31,60,136,0.14);
}

#reportButton:hover,
#resetChecklistButton:hover{
    transform: translateY(-2px);
    opacity: 0.95;
}

@keyframes fadeInUp{
    from{
        opacity: 0;
        transform: translateY(18px);
    }

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

@media (max-width: 768px){

    .premium-lock-card{
        margin: 24px 16px;
        padding: 24px;
    }

    .premium-lock-card h3{
        font-size: 22px;
    }

    .premium-lock-card p{
        font-size: 15px;
    }

    #reportButton,
    #resetChecklistButton{
        width: 100%;
        max-width: 320px;
    }
}