:root {
    /* ==== PALETA ATUALIZADA � foco em confian�a, seguran�a, seriedade e honestidade ==== */
    /* Marca (navy) � mant�m o #0A3278 como cor principal */
    --brand-950: #04122E;
    --brand-900: #061E49;
    --brand-800: #082960;
    --brand-700: #0A3278; /* logo */
    --brand-600: #13408F;
    --brand-500: #1E4CA8;
    --brand-400: #3B6AC3;
    --brand-300: #6C90D8;
    --brand-200: #9EB5E8;
    --brand-100: #D2DEF6;
    --brand-50: #EDF3FF;
    /* Acento/Seguran�a (teal) � transmite honestidade e tecnologia segura */
    --teal-700: #0B5E64;
    --teal-600: #0E7C86;
    --teal-500: #1195A1;
    --teal-200: #C7EBEF;
    --teal-100: #DFF3F5;
    --teal-50: #ECF9FA;
    /* Sucesso/Confirma��o (verde s�brio) */
    --success-700: #146C43;
    --success-600: #1B8A5A;
    --success-200: #CFEBDD;
    --success-100: #DBF1E6;
    --success-50: #EEF8F3;
    /* Aviso (�mbar) */
    --warning-700: #8C5A05;
    --warning-600: #B58105;
    --warning-300: #ffc107;
    --warning-100: #FFF2CC;
    --warning-50: #FFF8E6;
    /* Erro (vermelho confi�vel, n�o agressivo) */
    --danger-700: #8F1E17;
    --danger-600: #B42318;
    --danger-100: #FBE1DE;
    --danger-50: #FDF1EF;
    /* Informa��o (azul-ciano) */
    --info-700: #0B4D6E;
    --info-600: #0F6FA3;
    --info-100: #D6EAF9;
    --info-50: #EFF7FE;
    /* Neutros (credibilidade e leitura confort�vel) */
    --ink-950: #0A0F1A;
    --ink-900: #0B1220; /* texto principal */
    --ink-800: #132034;
    --ink-700: #1F2A44; /* t�tulos */
    --ink-600: #2E3A59;
    --ink-500: #475569; /* texto secund�rio */
    --ink-400: #6B7280;
    --ink-300: #9CA3AF;
    --ink-200: #CBD5E1;
    --ink-100: #E5EAF2;
    --ink-50: #F3F6FA;
    /* Superf�cies (fundos) */
    --surface-50: #F8FAFE;
    --surface-100: #F3F7FD;
    --surface-200: #EAF1FB;
    --surface-300: #DFE8F7;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 10px 25px rgba(10,50,120,.15);
    --maxw: 1100px;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
    font-size: 0.8rem;
    color: var(--ink-900);
    background: #fff;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/*html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}*/

h3 {
    text-align: center;
}

pre {
    border: 1px dashed #8080a0;
    padding: 8px;
}

p {
    text-align: justify;
}

li {
    text-align: left
}

.paragraph1 {
    font-size: 20px;
    font-weight: bold;
}

.paragraph2 {
    font-size: 14px;
    font-weight: bold;
}

.paragraph3 {
    font-size: 12px;
}

.boxUploadNF {
    padding: 16px;
}

.button {
    border: 1px solid #a0c0a0;
    border-radius: 8px;
    cursor: pointer;
    background: #e0ffe0;
    padding: 0px 16px;
    width: fit-content;
    color: black;
    text-decoration: none;
}

.cnpjInfoBox {
    padding-bottom: 8px;
    border-bottom: 1px solid black;
}

.NFDoc {
    border: 1px solid black;
    padding: 16px;
    position: relative;
}

.value {
    font-size: 12px;
    text-align: center
}

.valueBold {
    font-size: 14px;
    font-weight: bold;
    text-align: center
}

.title {
    font-size: 12px;
    text-align: center;
}

.lineCenter {
    display: flex;
    justify-content: center; /* centraliza na horizontal */
}

.line {
    display: flex;
    justify-content: space-between; /* centraliza na horizontal */
    max-width: 300px;
    margin: auto
}

.file-hidden {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1; /* continua clic�vel via <label for> */
}

.goldMedal, .silverMedal, .bronzeMedal {
    position: absolute;
    right: -25px;
    top: -30px;
    background: url("../images/goldMedal.png") no-repeat center / contain;
    width: 75px;
    height: 75px;
}

.silverMedal {
    background: url("../images/silverMedal.png") no-repeat center / contain;
}

.bronzeMedal {
    background: url("../images/bronzeMedal.png") no-repeat center / contain;
}

/*------------------------*/
.main-container {
    background: var(--brand-50);
}

main {
    margin: auto;
}

.container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 16px;
}

/* Se��es */
.section {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 48px 16px;
}

.section--muted {
    background: var(--surface-50);
}

.section--alt {
    background: var(--surface-200);
}

.section--hero {
}

.section--solution {
    display: flex;
    background: #f9fafb;
}

.homeBoxV h2, .homeBoxV p {
    color: var(--brand-900);
}

.homeBoxVImage {
    display: flex;
    max-width: 300px;
    margin: auto;
}

.section--benefits {
}

    .section--benefits h2, .section--sectors h2 {
        text-align: center;
    }

.section--sectors {
}
/* T�tulos e texto */
h1 {
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 12px;
}

h2 {
    font-size: 1.5rem;
    line-height: 1.25;
    margin: 0 0 12px;
    color: var(--ink-700);
}

h3 {
    font-size: 1.125rem;
    margin: 0 0 8px;
    color: var(--ink-700);
}

p {
    line-height: 1.6;
    margin: 8px 0;
    color: var(--ink-900);
}

.muted {
    color: var(--ink-500);
}

/* Layouts */
.homeBoxGrid-2 {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

    .homeBoxGrid-2 > div {
        flex: 1 1 420px;
    }

/* HERO espec�fico (homeTop) */
.homeTopBox {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.homeTopBoxLeft {
    flex: 1 1 460px;
}

.homeTopBoxRight {
    flex: 1 1 420px;
}

.homeTopBoxRight_Title {
    background: var(--warning-300);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 8px 16px;
    color: var(--ink-700);
    font-weight: 600;
}

.homeTopBoxRightForm {
    background: #fff;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 8px 16px;
}

.homeTopTitle {
    font-size: 12px;
    margin: 4px 0 2px;
    color: var(--ink-700);
}

.homeTopInput input {
    width: 100%;
    height: 24px;
    border: 1px solid var(--surface-300);
    border-radius: 4px;
    padding: 0 12px;
    outline: none;
}

    .homeTopInput input:focus {
        border-color: var(--brand-500);
        box-shadow: 0 0 0 3px rgba(30,76,168,.18);
    }

/* Blocos padr�o home */
.homeCustomers .customersTitle {
    text-align: center;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--ink-700);
}

.customersText {
    text-align: center;
    margin-top: 24px;
}

.customersLogos {
    display: flex;
    gap: 32px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    opacity: .9;
}

    .customersLogos img {
        height: 40px;
        filter: grayscale(100%);
    }

.homeWarningButton {
    background: var(--warning-300);
    cursor: pointer;
    border: 1px solid var(--warning-600);
    border-radius: 8px;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--warning-700);
    font-weight: bold;
}

    .homeWarningButton:hover {
        color: black;
        font-weight: bold
    }

.homeFormPopup {
    display: none;
    position: absolute;
    width: 100%;
}

.homeFormPopupContent {
    margin: auto;
    max-width: 400px;
}

.homeBox {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    align-items: center;
    border-radius: 16px;
    background: var(--brand-200);
    padding: 16px;
}

.homeBoxContent {
    background: var(--brand-200);
    padding: 16px;
    border-radius: 16px;
    flex: 0 0 calc(66.666% - 16px);
}

.homeBoxImage {
    flex: 0 0 calc(33.333% - 16px);
    background: #fff;
}

    .homeBoxImage img {
        width: 100%;
        max-width: 560px;
        box-shadow: var(--shadow-sm);
    }

.homeBoxContentTitle {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink-700);
    margin-bottom: 8px;
}

.homeBoxBenefits, .homeBoxIntegrations, .homeBoxSectors {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

.homeBoxBenefit, .homeBoxIntegration, .homeBoxSector {
    flex: 1 1 140px;
    border: 1px solid var(--surface-300);
    border-radius: 12px;
    background: var(--brand-200);
}

    .homeBoxBenefit:hover, .homeBoxIntegration, .homeBoxSector:hover {
        box-shadow: 0 6px 18px rgba(6,30,73,.08);
        border-color: var(--brand-200);
    }

        .homeBoxBenefit h3, .homeBoxIntegration h3, .homeBoxSector h3 {
            padding: 8px 8px 0 8px;
            background: #fff;
            border-radius: 12px 12px 0 0;
            height: 56px;
        }

        .homeBoxBenefit p, .homeBoxIntegration p, .homeBoxSector p {
            padding: 16px;
        }

.homeBoxSector {
    flex: 1 1 210px;
}

.homeBoxIntegrationContent, .homeBoxIntegrationContent p {
    text-align: center;
}
/* Bot�es */
.button {
    display: inline-block;
    padding: 8px 24px;
    background: var(--success-600);
    color: var(--success-200);
    text-decoration: none;
    border-radius: 12px;
    margin-top: 12px;
    box-shadow: var( --shadow-sm);
    margin-bottom: 8px;
}

    .button:hover {
        color: var(--success-50);
    }

.button--secondary {
    background: var(--teal-600);
}

    .button--secondary:hover {
        background: var(--teal-700);
    }
/* Login */
.LoginBox {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.LoginBoxLeft {
    flex: 1 1;
}

.LoginBoxRight {
    margin-top: 16px;
    flex: 1 1;
}

.LoginBoxRight_Title {
    background: var(--warning-300);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 8px 16px;
    color: var(--ink-700);
    font-weight: 600;
}

.LoginBoxRightForm {
    background: #fff;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 8px 16px;
}

.LoginTitle {
    font-size: 12px;
    margin: 4px 0 2px;
    color: var(--ink-700);
}

.LoginInput input {
    width: 100%;
    height: 24px;
    border: 1px solid var(--surface-300);
    border-radius: 4px;
    padding: 0 12px;
    outline: none;
}

    .LoginInput input:focus {
        border-color: var(--brand-500);
        box-shadow: 0 0 0 3px rgba(30,76,168,.18);
    }

.header {
    position: relative;
    height: 65px;
}

.header-menu-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 8px;
    cursor: pointer;
}

    .header-menu-button img {
        width: 32px;
        height: 32px;
    }

.header-logo {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
}

.header-tagline {
    position: absolute;
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
}

.header-user {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 8px;
    max-width: 100px;
}

.header-menu {
    display: none;
    margin-top: 8px;
    height: 18px;
}

    .header-menu ul {
        padding-left: 0px;
        display: flex;
        height: 100%
    }

        .header-menu ul li {
            height: 100%;
            list-style: none;
            padding: 0px 8px;
            background: #ccc;
            border-radius: 6px 6px 0 0;
            margin-left: 4px;
            text-decoration: none;
        }

.nfUploadBoxContainer {
    padding: 16px;
}

.nfUploadBox {
    max-width: 500px;
    margin: 16px auto;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.nfUploadTitle {
    background: var(--warning-300);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 8px 16px;
    color: var(--ink-700);
    font-weight: 600;
}

.nfUploadText {
    padding:4px 16px 12px 16px;
}
.nfProgressBox{
    display:none;
}
    .nfProgressBox progress {
        margin-left: 50%;
        transform: translateX(-50%)
    }
    .nfProgressBox div {
        width: fit-content;
        margin-left: 50%;
        transform: translateX(-50%)
    }
.section--faq h2{
    text-align: center;
    
}
.section--faq summary {
    background: var(--brand-100);
    border: 1px solid var(--brand-500);
    margin: 2px;
    border-radius: 4px;
    padding-left: 8px;
}
@media (max-width: 768px) {
    .homeBox {
        flex-direction: column;
    }
}