/* ================================
   RESET & BASE
================================ */

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

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    font-family:'Rawline', sans-serif;
    background:#ffffff;
    color:#1f1f1f;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Força a mesma fonte em todos os elementos */
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6,
p, span, a, li, label{
    font-family:'Rawline', sans-serif;
}

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

.container{
    width:1200px;
    max-width:92%;
    margin:auto;
}

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

.topo{
    padding:20px 0;
}

.topo .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{
    height:35px;
}

.acoes{
    display:flex;
    align-items:center;
    gap:20px;
}

.acoes a{
    text-decoration:none;
    color:#0057c8;
    font-weight:600;
}

.acoes button{
    background:#0057c8;
    color:#fff;
    border:none;
    border-radius:50px;
    padding:10px 24px;
    cursor:pointer;
    font-weight:600;
    font-size:14px;
    transition:.3s;
    white-space:nowrap;
}

.acoes button:hover{ opacity:.9; }

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

.hero{
    margin-bottom:40px;
}

.hero-box{
    display:grid;
    grid-template-columns:1fr 260px;
}

.hero-center{
    overflow:hidden;
    border-radius:20px;
    margin:16px 0;
}

.hero-center img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.hero-right{
    background:#fafafa;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding:40px 30px;
}

.hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:#0057c8;
    background:#e8f0fe;
    padding:6px 14px;
    border-radius:50px;
    margin-bottom:16px;
}

.hero-eyebrow::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:#0057c8;
    flex-shrink:0;
}

.hero-right h2{
    color:#061f52;
    font-size:18px;
    font-weight:500;
    line-height:1.4;
    margin-bottom:16px;
}

.hero-right strong{
    display:block;
    font-weight:700;
}

.hero-sub{
    font-size:14px;
    color:#555;
    line-height:1.6;
    margin-bottom:28px;
}

/* ================================
   INDICADORES — CARDS
================================ */

.indicadores{
    padding:10px 0 70px;
}

.indicadores-box{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.indicadores .item{
    display:flex;
    align-items:center;
    gap:16px;
    background:#fff;
    border-radius:16px;
    padding:20px 28px;
    box-shadow:0 2px 12px rgba(0,0,0,.07);
    border:1px solid #edf0f7;
    flex:1;
    min-width:220px;
    max-width:320px;
}

.indicadores .item img{
    width:52px;
    height:52px;
    object-fit:contain;
    flex-shrink:0;
}

.indicadores .item p{
    font-size:13px;
    font-weight:600;
    line-height:1.3;
    color:#333;
}

/* ================================
   PROCESSO / TIMELINE
================================ */

.processo{
    padding:70px 0 80px;
    background:#ffffff;
}

.processo h2{
    text-align:center;
    color:#051f55;
    font-size:28px;
    font-weight:800;
    margin-bottom:60px;
    line-height:1.2;
}

.timeline{
    position:relative;
    max-width:900px;
    margin:0 auto;
    min-height:680px;
}

.timeline::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    width:4px;
    height:100%;
    background:#052b75;
    transform:translateX(-50%);
}

.ponto{
    position:absolute;
    width:12px;
    height:12px;
    background:#052b75;
    border-radius:50%;
    left:50%;
    transform:translateX(-50%);
}

.timeline .item{
    position:absolute;
    font-size:15px;
    line-height:1.4;
    width:320px;
}

.passo-label{
    display:block;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#0057c8;
    opacity:.7;
    margin-bottom:4px;
}

.timeline .item h3{
    font-size:16px;
    font-weight:800;
    color:#051f55;
    margin-bottom:8px;
    line-height:1.2;
}

.timeline .item p{
    color:#444;
    font-size:14px;
    line-height:1.6;
}

.esquerda{ text-align:right; padding-right:5px; }
.direita { text-align:left;  padding-left:5px;  }

.timeline .item:nth-child(1){ top:0;    left:0;  text-align:right; }
.timeline .ponto:nth-child(2){ top:30px; }
.timeline .item:nth-child(3){ top:160px; right:0; text-align:left; }
.timeline .ponto:nth-child(4){ top:190px; }
.timeline .item:nth-child(5){ top:340px; left:0; text-align:right; }
.timeline .ponto:nth-child(6){ top:370px; }
.timeline .item:nth-child(7){ top:500px; right:0; text-align:left; }

/* ================================
   SOBRE — BENEFÍCIOS
================================ */

.sobre{
    padding:70px 0;
    background:#fbfcfe;
    border-top:1px solid #f0f4fb;
    border-bottom:1px solid #f0f4fb;
}

.sobre-logos{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:28px;
    margin-bottom:32px;
    flex-wrap:wrap;
}

.sobre-logos img{
    height:28px;
    object-fit:contain;
}

.sobre-logos-divider{
    width:1px;
    height:38px;
    background:#ccc;
}

.sobre h2{
    text-align:center;
    color:#051f55;
    font-size:28px;
    font-weight:800;
    margin-bottom:36px;
    line-height:1.3;
}

.sobre-body{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:20px;
    align-items:stretch;
}

.sobre-foto{
    position:relative;
    border-radius:18px;
    overflow:hidden;
    min-height:320px;
}

.sobre-foto img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    position:absolute;
    top:0; left:0;
}

.sobre-cidade{
    position:absolute;
    bottom:14px;
    left:50%;
    transform:translateX(-50%);
    background:rgba(255,255,255,0.93);
    padding:6px 16px;
    border-radius:20px;
    font-size:13px;
    font-weight:700;
    color:#051f55;
    white-space:nowrap;
    z-index:2;
}

.sobre-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(2,1fr);
    gap:12px;
}

.sobre-card{
    border-radius:14px;
    padding:20px 18px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.sobre-card h4{
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.4px;
    line-height:1.3;
    margin:0;
}

.sobre-card p{
    font-size:13px;
    line-height:1.6;
    color:#444;
    margin:0;
}

/* Cores bandeira do Brasil — degradê do mais escuro ao mais claro */

/* Verde: escuro → médio → claro */
.card-verde   { background:#b8dfc7; } .card-verde h4   { color:#145c2e; }
.card-azul    { background:#c8dff5; } .card-azul h4    { color:#003580; }
.card-amarelo { background:#faeea0; } .card-amarelo h4 { color:#7a5c00; }
.card-cinza   { background:#d0eedd; } .card-cinza h4   { color:#1a6e38; }
.card-rosa    { background:#fdf6c8; } .card-rosa h4    { color:#7a5c00; }
.card-lilas   { background:#e0eff9; } .card-lilas h4   { color:#003580; }

/* ================================
   CTA FINAL
================================ */

.cta-final{
    padding:70px 0;
    text-align:center;
    background:#f0f5ff;
}

.cta-final h2{
    font-size:28px;
    color:#051f55;
    margin-bottom:16px;
    font-weight:800;
}

.cta-final p{
    font-size:18px;
    color:#666;
    margin-bottom:36px;
}

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

footer{
    background:#051f55;
    padding:28px 0;
}

footer p{
    color:rgba(255,255,255,0.8);
    text-align:center;
    font-size:13px;
    line-height:1.7;
}

/* ================================
   BTN PADRÃO
================================ */

.btn-cadastro{
    background:#0057c8;
    color:#fff;
    text-decoration:none;
    border-radius:50px;
    padding:14px 36px;
    font-weight:700;
    display:inline-block;
    transition:.3s;
    font-size:15px;
}

.btn-cadastro:hover{
    opacity:.9;
}

.acoes a.btn-login{
    background:#0057c8;
    color:#ffffff !important;
    text-decoration:none;
    border-radius:50px;
    padding:9px 22px 9px 16px;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:.2s;
    font-size:14px;
}

.btn-login:hover{
    opacity:.9;
}

.btn-login-icone{
    flex-shrink:0;
}

/* ================================
   TABLET (até 900px)
================================ */

@media(max-width:900px){

    .hero-box{
        grid-template-columns:1fr;
    }

    .hero-center{
        border-radius:14px;
        margin:12px 0;
    }

    .hero-center img{ max-height:280px; }

    .hero-right{
        padding:32px 24px;
        min-height:unset;
    }

    .hero-right h2{ font-size:20px; }

    .timeline{
        position:relative;
        display:flex;
        flex-direction:column;
        min-height:unset;
    }

    .timeline::before{
        position:absolute;
        left:16px;
        width:3px;
        top:0;
        height:100%;
    }

    .ponto{ display:none; }

    .timeline .item:nth-child(1),
    .timeline .item:nth-child(3),
    .timeline .item:nth-child(5),
    .timeline .item:nth-child(7){
        position:relative !important;
        top:auto !important;
        left:auto !important;
        right:auto !important;
        width:100% !important;
        text-align:left !important;
        padding:0 0 36px 48px !important;
        padding-right:0 !important;
    }

    .timeline .item::before{
        content:"";
        position:absolute;
        left:10px;
        top:5px;
        width:12px;
        height:12px;
        background:#052b75;
        border-radius:50%;
    }

    .passo-label{ text-align:left; }

    .processo h2,
    .sobre h2,
    .cta-final h2{ font-size:22px; }

    .indicadores-box{ gap:14px; }
    .indicadores .item{ max-width:100%; }

    .sobre-body{ grid-template-columns:1fr; }

    .sobre-foto{
        min-height:220px;
        height:220px;
    }

    .sobre-cards{
        grid-template-columns:repeat(3,1fr);
        grid-template-rows:auto;
    }

}

/* ================================
   MOBILE VERTICAL (até 480px)
================================ */

@media(max-width:480px){

    .container{ max-width:94%; }

    .topo{ padding:14px 0; }
    .logo{ height:28px; }
    .acoes{ gap:10px; }
    .acoes a{ display:none; }
    .acoes button{
        padding:9px 16px;
        font-size:12px;
    }

    .hero{ margin-bottom:0; }

    .hero-center{
        border-radius:0;
        margin:0;
    }

    .hero-center img{
        max-height:200px;
        width:100%;
        object-fit:cover;
    }

    .hero-right{
        padding:24px 16px 28px;
        align-items:center;
        text-align:center;
    }

    .hero-right h2{
        font-size:18px;
        text-align:center;
        margin-bottom:10px;
    }

    .hero-right strong{ display:inline; }

    .hero-sub{
        font-size:13px;
        text-align:center;
        margin-bottom:20px;
    }

    .btn-cadastro{
        width:100%;
        text-align:center;
        padding:15px 20px;
        font-size:15px;
        border-radius:50px;
    }

    .indicadores{ padding:32px 0 40px; }

    .indicadores-box{
        flex-direction:column;
        align-items:stretch;
        gap:12px;
    }

    .indicadores .item{
        max-width:100%;
        padding:16px 20px;
    }

    .indicadores .item img{
        width:40px;
        height:40px;
    }

    .indicadores .item p{ font-size:12px; }

    .processo{ padding:40px 0 50px; }

    .processo h2{
        font-size:19px;
        margin-bottom:36px;
    }

    .timeline::before{ left:13px; width:2px; }

    .timeline .item:nth-child(1),
    .timeline .item:nth-child(3),
    .timeline .item:nth-child(5),
    .timeline .item:nth-child(7){
        padding:0 0 28px 36px !important;
    }

    .timeline .item::before{
        left:7px;
        top:4px;
        width:10px;
        height:10px;
    }

    .timeline .item h3{ font-size:15px; }
    .timeline .item p { font-size:13px; }
    .passo-label{ font-size:10px; }

    .sobre{ padding:44px 0; }

    .sobre-logos{ gap:12px; margin-bottom:24px; }
    .sobre-logos img{ height:22px; }
    .sobre-logos-divider{ height:22px; }

    .sobre h2{ font-size:19px; margin-bottom:22px; }

    .sobre-foto{
        display:block;
        min-height:200px;
        height:200px;
    }

    .sobre-cards{
        grid-template-columns:repeat(2,1fr);
        grid-template-rows:auto;
        gap:10px;
    }

    .sobre-card{
        padding:16px 14px;
        gap:8px;
        border-radius:12px;
    }

    .sobre-card h4{ font-size:11px; letter-spacing:.3px; }
    .sobre-card p{ font-size:12px; line-height:1.5; }

    .cta-final{ padding:48px 0; }
    .cta-final h2{ font-size:19px; margin-bottom:12px; }
    .cta-final p{ font-size:14px; margin-bottom:24px; }

    .cta-final .btn-cadastro{
        width:100%;
        max-width:320px;
        border-radius:14px;
        padding:15px 20px;
    }

    footer{ padding:20px 0; }
    footer p{ font-size:11px; padding:0 12px; line-height:1.6; }

}

/* ================================
   FAQ
================================ */

.faq{
    padding:70px 0;
    background:#f4f7fb;
}

.faq h2{
    text-align:center;
    color:#051f55;
    font-size:28px;
    font-weight:800;
    margin-bottom:12px;
}

.faq-sub{
    text-align:center;
    color:#666;
    font-size:16px;
    margin-bottom:40px;
    line-height:1.6;
}

.faq-sub strong{ color:#0057c8; }

.faq-lista{
    max-width:800px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.faq-item{
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 1px 6px rgba(0,0,0,.06);
    border:2px solid transparent;
    transition:border-color .2s;
}

.faq-item.aberto{ border-color:#0057c8; }

.faq-pergunta{
    width:100%;
    background:transparent;
    border:none;
    padding:20px 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    cursor:pointer;
    text-align:left;
    font-size:15px;
    font-weight:700;
    color:#051f55;
    transition:color .2s;
}

.faq-pergunta:hover{ color:#0057c8; }

.faq-icone{
    font-size:22px;
    font-weight:400;
    color:#0057c8;
    flex-shrink:0;
    transition:transform .3s;
    line-height:1;
}

.faq-item.aberto .faq-icone{ transform:rotate(45deg); }

.faq-resposta{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease, padding .35s ease;
    padding:0 24px;
}

.faq-resposta p{
    color:#555;
    font-size:14px;
    line-height:1.7;
    padding-bottom:20px;
    margin:0;
    text-align:left;
    max-width:none;
}

.faq-item.aberto .faq-resposta{
    max-height:300px;
    padding:0 24px;
}

@media(max-width:480px){

    .faq{ padding:44px 0; }
    .faq h2{ font-size:20px; }
    .faq-sub{ font-size:14px; margin-bottom:28px; }
    .faq-pergunta{ padding:16px 18px; font-size:14px; }
    .faq-resposta{ padding:0 18px; }
    .faq-item.aberto .faq-resposta{ padding:0 18px; }
    .faq-resposta p{ font-size:13px; }

}

/* ================================
   FAQ — BOTÃO CTA
================================ */

.faq-cta{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:40px;
    width:100%;
}

.faq-cta .btn-cadastro{
    width:auto !important;
    max-width:320px;
    text-align:center;
}

/* ================================
   CTA FINAL — botão centralizado
================================ */

.cta-btn-wrap{
    display:flex;
    justify-content:center;
}

.cta-btn-wrap .btn-cadastro{
    width:auto !important;
    border-radius:50px !important;
    padding:15px 48px !important;
}

/* ================================
   POLIMENTO VISUAL GERAL
================================ */

/* Eyebrow reutilizável para títulos de seção */
.section-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:#0057c8;
    margin-bottom:12px;
}

.section-eyebrow::before,
.section-eyebrow::after{
    content:"";
    height:1px;
    width:20px;
    background:#0057c8;
    opacity:.4;
}

/* Scroll reveal sutil */
.reveal{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .6s ease, transform .6s ease;
}

.reveal.visivel{
    opacity:1;
    transform:translateY(0);
}

@media(prefers-reduced-motion: reduce){
    .reveal{
        opacity:1;
        transform:none;
        transition:none;
    }
}