a {
    text-decoration: none;
}

a.text-primary:hover {
    text-decoration: underline;
}


.bg-image h1{
    color: #FFF;
    font-size: 50px;
    font-style: normal;
    font-weight: 300;
    padding-left: 5rem;
}

.textos{
    gap: 24px;
    padding: 30px 30px 54px 30px;
}
.separator{
    width: 30px;
    height: 1px;
    border-top: 1px solid #01001C;
}

.banner-topo{
    height: 460px;
}
.banner-topo small{
    color: #000;
    font-size: 12.6px;
    font-style: normal;
    font-weight: 700;
}
.banner-topo h1{
    color: #000;
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    padding-left: 0;
}
.banner-topo .sub-banner{
    color: #000;
    font-size: 19.6px;
    font-style: normal;
    font-weight: 700;
}

.banner-politica{
    height: 300px;
}

.title{
    color: #1F1F20;
    text-align: center;
    font-size: 3.125rem;
    font-style: normal;
    font-weight: 300;
    margin-left: auto;
    margin-right: auto;
}

.sub{
    color: #1F1F20;
    text-align: center;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 300;
    max-width: 779px;
    margin-left: auto;
    margin-right: auto;
}
.text{
    color: #01001C;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
}

#missao .container{
    padding: 70px 20px;
    background: #0072CA;
}

#missao h2{
    color: #FFF;
    text-align: center;
    font-size: 50px;
    font-style: normal;
    font-weight: 300;
}

#missao p{
    color: #FFF;
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

#splide-historia .splide__slide {
    height: 670px;
    border-radius: 0;
    overflow: hidden;
}

#splide-historia .splide__slide:hover {
    transform: translateY(-4px);
}

#splide-historia .dot {
    width: 10px;
    height: 10px;
    background-color: #fff;
    display: inline-block;
}

#splide-historia .arrow {
    font-weight: bold;
}

.splide__pagination {
    bottom: -1.8em;
}

/* Remove o estilo padrão de bolinhas */
/* Centraliza os bullets */
.splide__pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 1rem;
    top: 100%
}

/* Ponto inativo = barra clara */
.splide__pagination__page {
    background: #e5e5e5;
    width: 32px;
    height: 3px;
    border-radius: 2px;
    transition: background 0.3s ease;
}

.textos-historia {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.textos-historia h4 {
    font-size: 2rem;
    line-height: 1.2;
}

.textos-historia p {
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.textos-historia a {
    font-weight: bold;
}

/* Ponto ativo = barra preta */
.splide__pagination__page.is-active {
    background: #000;
}

.card-historia{
    border-radius: 0;
}

input, select, .select2-container--default .select2-selection--single {
    width: 100%;
    min-height: 38px;
    font-size: 0.9rem;
    border-radius: 0;
    align-content: center;
}


.input-group-text {
    background-color: #f8f8f8;
    border-color: #ced4da;
    padding: 5px;
}
.input-group{
    flex-wrap: inherit;
}

#texto-condicao-compra h2{
    color: #00AEEF;
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
}

#texto-condicao-venda h2{
    color: #00AEEF;
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
}

.container-politica{
    padding: 1rem 10rem;
}

@media (max-width: 768px) {
    #splide-historia .splide__slide {
        height: 500px;
    }
    .container-politica{
        padding: 1rem 2rem;
    }
    .bg-image h1 {
        font-size: 37px;
        padding-left: 0;
        text-align: center;
    }
}

.title-page{
    color: #000;
    text-align: center;
    font-size: 36.5px;
    font-style: normal;
    font-weight: 700;
}

.sub-page{
    color: #000;
    text-align: center;
    font-size: 16.5px;
    font-style: normal;
    font-weight: 400;
}

/* card */
.sust-card{
    position:relative;
    margin-top:18px;
    border-radius:20px;
    min-height:560px;
    background-image:var(--bg);
    background-size:cover;
    background-position:center;
    overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,.35);
}

/* filtro gradiente (verde -> azul) */
.sust-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(0,230,118,.55) 0%, rgba(0,230,118,.36) 30%, rgba(59,169,255,.40) 70%, rgba(59,169,255,.60) 100%);
}
.sust-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(1200px 400px at 20% 20%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 60%);
}

/* conteúdo do card */
.sust-content{
    position: relative;
    z-index: 1;
    padding: 45px 59px;
    color: #fff;
    max-width: 941px;
}
.sust-hero{
    color: #FFF;
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: 45.6px; /* 120% */
    margin-bottom: 30px;
}
.sust-p{
    color: #FFF;
    font-size: 16.3px;
    font-style: normal;
    font-weight: 400;
    line-height: 23.94px; /* 146.871% */
}

/* botão principal */
.sust-cta{
    display:inline-block;
    padding:12px 22px;
    border-radius:999px;
    background:#ffffff;
    color:#0b76d1;
    font-weight:600;
    font-size:14px;
    text-decoration:none;
    box-shadow:0 8px 18px rgba(0,0,0,.20);
    border:1px solid rgba(0,0,0,.08);
}
.sust-cta:hover{
    filter:brightness(0.96);
}

/* botão flutuante (+) */
.sust-fab{
    position:absolute;
    right:22px;
    bottom:18px;
    width:44px;
    height:44px;
    border-radius:999px;
    background:#ffffff;
    color:#111827;
    font-size:28px;
    line-height:44px;
    text-align:center;
    text-decoration:none;
    box-shadow:0 10px 22px rgba(0,0,0,.25);
    z-index:2;
}
.sust-fab:hover{
    filter:brightness(0.96);
}

/* responsividade */
@media (max-width:992px){
    .sust-title{ font-size:36px; }
    .sust-content{ padding:36px 32px; }
    .sust-hero{ font-size:40px; }
}
@media (max-width:576px){
    .sust-title{ font-size:28px; }
    .sust-sub{ font-size:13px; }
    .sust-card{ min-height:523px; }
    .sust-content{ padding:28px 20px; }
    .sust-hero{ font-size:28px; }
}


.sust-card.card-inst::before{
    background: transparent;
}
/* ===========================
   CABEÇALHO DO HISTÓRICO
   =========================== */

.history-header{
    margin-top:72px;
    margin-bottom:40px;
    text-align:center;
}

.history-title{
    color: #000;
    text-align: center;
    font-size: 36.5px;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 30px;
}

/* ===========================
   TABS (PERÍODOS)
   =========================== */

.history-period-nav{
    justify-content:center;
    gap:40px;
    margin-bottom:24px;
}

.history-period-nav .nav-link{
    border-radius:0;
    background:transparent !important;
    border:none;
    padding:0 0 4px 0;
    color: #000!important;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 700!important;
}

.history-period-nav .nav-link:hover{
    color:#000000;
}

.history-period-nav .nav-link.active{
    background:transparent !important;
    color:#000000;
    font-weight:600;
    border-bottom:2px solid #000000;   /* sublinhado apenas no ativo */
}

/* ===========================
   SUBTÍTULO E TEXTO
   =========================== */

.history-subtitle{
    color: #000;
    text-align: center;
    font-size: 19.6px;
    font-style: normal;
    font-weight: 700;
    margin-bottom:8px;
    margin-top: 80px;
}

.history-description{
    text-align: center;
    font-size: 16.5px;
    font-style: normal;
    font-weight: 400;
    max-width:875px;
    margin: 25px auto 90px auto;
    line-height:1.5;
}

/* ===========================
   CAIXA CINZA DO HISTÓRICO
   =========================== */

.history-box{
    background-color:#f7f7f7;
    border-radius:24px;
    padding:48px 80px 56px 80px;
    box-shadow:0 18px 40px rgba(0,0,0,0.06);
}

/* ===========================
   TIMELINE HORIZONTAL
   =========================== */
.history-timeline-scroll{
    position:relative;
    overflow-x:auto;
    padding:40px 40px 16px 40px;  /* margem lateral da linha, igual ao Figma */
    cursor:grab;
    user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
}

.history-timeline-cards::before{
    content:"";
    position:absolute;
    left:0;      /* agora a linha começa no 0 dentro do scroll (já com padding) */
    right:0;
    top:0;
    height:2px;
    background-color:#dedede;
    z-index:1;
}

.history-timeline-scroll.is-grabbing{
    cursor:grabbing;
}

/* faixa com TODOS os anos (rola inteira) */
.history-timeline-cards{
    position:relative;
    display:flex;
    align-items:flex-start;
    min-width:max-content;   /* largura = soma dos cards, a linha acompanha tudo */
    padding-top:0;           /* a linha fica exatamente no topo desse container */
}

/* linha cinza contínua – igual ao Figma */
.history-timeline-cards::before{
    content:"";
    position:absolute;
    left:40px;               /* recuo lateral da linha dentro da caixa cinza */
    right:40px;
    top:0;                   /* linha colada no topo do bloco de anos */
    height:2px;
    background-color:#dedede;
    z-index:1;
}

/* cada ano (coluna) */
.history-year-card{
    position:relative;       /* necessário para posicionar o ponto */
    flex:0 0 320px;
    max-width:320px;
    margin-right:72px;       /* espaço entre anos */
    padding-top:32px;        /* espaço para o ponto + respiro antes do título */
}

/* ponto azul centralizado EXATAMENTE na linha */
.history-year-marker{
    position:absolute;
    top:-5px;                      /* ajusta para não cortar a bolinha */
    left:11%;
    transform:translateX(-50%);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:2;
}

.history-year-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background-color:#00a0ff;
    border:3px solid #ffffff;
    box-shadow:0 0 0 2px #00a0ff;
}

/* conteúdo abaixo do ponto */
.history-year-content{
    margin-top:8px;
}

.history-year-title{
    font-size:1.5rem;
    font-weight:700;
    margin-bottom:0.75rem;
    color:#222222;
}

.history-year-list{
    font-size:0.95rem;
    line-height:1.5;
    color:#555555;
    padding-left:1.2rem;
}

/* RESPONSIVO */
@media (max-width:992px){
    .history-box{
        padding:32px 20px 32px 20px;
    }

    .history-year-card{
        flex:0 0 260px;
        max-width:260px;
        margin-right:40px;
    }
}



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

@media (max-width:992px){
    .history-box{
        padding:32px 20px 32px 20px;
    }

    .history-year-card{
        flex:0 0 260px;
        max-width:260px;
        margin-right:40px;
    }
}


/* bolinha azul totalmente cheia */
.history-year-dot{
    width:12px;                    /* um pouco maior para ficar mais bonito */
    height:12px;
    border-radius:50%;
    background-color:#00a0ff;      /* preenchimento sólido */
    border:none;
    box-shadow:none;
}

.sust-content{
    position:absolute;
    inset:0;
    z-index:1;
    padding:45px 59px;
    color:#fff;
    display:flex;
    flex-direction:column;
}

.sust-hero{
    margin-bottom:0;
}

.sust-p{
    margin-bottom:0;
}