/*V1*/
.title-container {
    flex-direction: column;
    gap: .6rem;
    display: flex;
}

    .title-container .text-upper-title {
        padding: 4px 8px;
        /*font-size: 14px;
    font-family: var(--font-tpSans-medium);
    font-weight: var(--fw-medium);*/
        letter-spacing: -0.14px;
        text-transform: uppercase;
        /*border-radius: 4px;*/
        /*background: #ECE8FF;??????????*/
        /*color: #5318BF;??????????*/
    }

    .title-container .text-title {
        /*font-size: 86px;
    font-family: var(--font-tpSans-exLight);
    font-weight: 275;*/
        margin: 48px 0 40px;
        /*background: linear-gradient(91.59deg, #000 11.88%, #8051ff 57.91%, #000 88.02%); ??????????*/
        /*-webkit-background-clip: text;
    background-clip: text;*/
        /*color: transparent;*/
    }

    .title-container .text-description-title,
    .title-container .text-description-title p {
        /*font-size: 24px;
    font-family: var(--font-tpSans-light);
    font-weight: 300;*/
        /*color: #3E4854;*/
    }

    .title-container.titlevariation .text-title {
        font-family: var(--font-tpSans-exLight);
        margin: 0;
        line-height: 1;
    }

    .title-container.titlevariation .text-upper-title {
        font-family: var(--font-noto);
        font-weight: 400;
        font-size: 1rem;
    }

/*V2*/
/* ============================================================
   titleV2.css — Title Module V2 (.title-containerV2)
   ============================================================ */


/* ---------- 1. Container ---------- */
.title-containerV2 {
    display: flex;
    flex-direction: column;
    gap: 2.14rem;
}


    /* ---------- 2. Tipografia (Upper Title / Title / Description) ---------- */
    .title-containerV2 .txt-caption,
    .title-containerV2 .txt-title,
    .title-containerV2 .txt-body,
    .title-containerV2 .txt-body p {
        /* width:fit-content garante que gradientes de texto (background-clip: text) recortem
       exatamente o tamanho do conteúdo, não a largura total do container — sem isso, textos
       curtos "perdem" parte do degradê. */
        width: fit-content;
        max-width: 100%;
    }

    .title-containerV2 .txt-caption {
        padding: 4px 8px;
        font-family: var(--font-tpSans-medium);
        font-weight: var(--fw-medium);
        text-transform: uppercase;
        color: var(--title-default);
        background: var(--bg-default);
    }

    .title-containerV2 .uppt .txt-caption {
        /* <span> é inline por padrão — width não tem efeito sem isso */
        display: inline-block;
    }

    .title-containerV2 .txt-title {
        font-family: var(--font-tpSans-exLight);
        font-weight: 275;
        color: var(--title-default);
    }

    .title-containerV2 .txt-body,
    .title-containerV2 .txt-body p {
        font-family: var(--font-tpSans-light);
        font-weight: 300;
        color: var(--body-default);
    }


    /* ---------- 3. Alinhamento (compensa o fit-content acima) ----------
   Com width:fit-content, a caixa não ocupa mais 100% do container — então o text-align do
   Bootstrap (.text-center/.text-end) só centraliza o TEXTO dentro da própria caixa (sem efeito
   visual, já que caixa e texto têm o mesmo tamanho). Isso reforça a posição do BLOCO via margin. */
    .title-containerV2.text-center .txt-caption,
    .title-containerV2.text-center .txt-title,
    .title-containerV2.text-center .txt-body {
        margin-inline: auto;
    }

    .title-containerV2.text-end .txt-caption,
    .title-containerV2.text-end .txt-title,
    .title-containerV2.text-end .txt-body {
        margin-inline-start: auto;
    }

@media (min-width: 768px) {
    .title-containerV2.text-md-center .txt-caption,
    .title-containerV2.text-md-center .txt-title,
    .title-containerV2.text-md-center .txt-body {
        margin-inline: auto;
    }

    .title-containerV2.text-md-end .txt-caption,
    .title-containerV2.text-md-end .txt-title,
    .title-containerV2.text-md-end .txt-body {
        margin-inline-start: auto;
    }
}


/* ---------- 4. Barra retrátil (mesmo SVG do Collapsible Numbers) ---------- */
.fm__bar {
    position: relative;
    display: block;
    width: 200px;
    height: 17px; /* altura no fluxo (a sombra do SVG sangra abaixo) */
    padding-bottom: 40px;
    transform-origin: 0 50%; /* expande/retrai pela ESQUERDA (spec Figma) */
    transition: transform 1000ms var(--ease);
    will-change: transform;
}

    /* IntersectionObserver (JS): ao a SEÇÃO ENTRAR na viewport, expande L→R (scaleX 0→1); ao
       SAIR, retrai R→L. A barra e a sombra (mesmo <img>) escalam juntas. Repete a cada
       entrada/saída. */
    .fm__bar.bar-anim {
        transform: scaleX(0); /* colapsada até a seção entrar (JS habilita) */
    }

        .fm__bar.bar-anim.is-in {
            transform: scaleX(1); /* cheia enquanto a seção intersecta */
        }

    .fm__bar img {
        position: absolute;
        top: 0;
        left: -11px; /* o bar começa em x=11 no viewBox 284 → alinha à esquerda */
        display: block;
        width: 284px;
        height: 177px;
        max-width: none;
    }

/* sob reduced-motion o JS não roda → sem .bar-anim → barra cheia (scaleX 1) estática */
@media (prefers-reduced-motion: reduce) {
    .fm__bar {
        transition: none;
    }
}


/* ---------- 5. Espaçamento em layout de 2 colunas ----------
   Quando a coluna 1 tem fm__bar e/ou .uppt, a coluna 2 (com Title alinhado ao topo) recebe
   padding-top pra compensar a altura desses elementos e ficar visualmente alinhada. */

/* mobile/tablet: sempre 32px (independente de bar/uppt existirem na coluna 1) */
.row.twoColumns:has(> .col-lg-6:first-child:not(.fm__bar)) > .col-lg-6:nth-child(2):has(.title-containerV2.align-content-start) {
    padding-top: 32px;
}

@media (min-width: 992px) {
    /* desktop: valores diferenciados por combinação de bar/uppt na coluna 1 */
    .row.twoColumns:has(> .col-lg-6:first-child:not(.fm__bar)) > .col-lg-6:nth-child(2):has(.title-containerV2.align-content-start) {
        padding-top: 10px;
    }

    .row.twoColumns:has(> .col-lg-6:first-child .fm__bar) > .col-lg-6:nth-child(2):has(.title-containerV2.align-content-start) {
        padding-top: 50px;
    }

    .row.twoColumns:has(> .col-lg-6:first-child .uppt) > .col-lg-6:nth-child(2):has(.title-containerV2.align-content-start) {
        padding-top: 58px;
    }

    .row.twoColumns:has(> .col-lg-6:first-child .fm__bar):has(> .col-lg-6:first-child .uppt) > .col-lg-6:nth-child(2):has(.title-containerV2.align-content-start) {
        padding-top: 98px; /* fm__bar + uppt somados */
    }

    /* alinhamento vertical da coluna 2 (herda de .title-containerV2.align-content-*) */
    .row.twoColumns > .col-lg-6:nth-child(2):has(.title-containerV2.align-content-start) {
        align-content: start;
    }

    .row.twoColumns > .col-lg-6:nth-child(2):has(.title-containerV2.align-content-end) {
        align-content: end;
    }

    .row.twoColumns > .col-lg-6:nth-child(2):has(.title-containerV2.align-content-center) {
        align-content: center;
    }
}