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

    .themeV2 .title-container .text-upper-title {
        font-family: var(--font-tpSans-medium);
        padding: 4px 8px;
        font-weight: 400;
        text-transform: uppercase;
    }

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

    .themeV2 .title-container .text-description-title,
    .themeV2 .title-container .text-description-title p {
        font-family: var(--font-tpSans-light);
        font-weight: 300;
    }

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


/* ---------- 1. Container ---------- */

.title-containerV2,
.row.twoColumns {
    --space-itens-title: 2.14rem;
}

.title-containerV2 {
    display: flex;
    flex-direction: column;
    gap: var(--space-itens-title);
}


    /* ---------- 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);
        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) .txt-title) > .col-lg-6:nth-child(2):has(.title-containerV2.align-content-start) {
    padding-top: var(--space-itens-title) !important;
}

@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) .txt-title) > .col-lg-6:nth-child(2):has(.title-containerV2.align-content-start) {
        padding-top: 10px !important;
    }

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

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

    .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 !important; /* 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;
    }
}

@media (max-width:991px) {
    .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: var(--space-itens-title) !important;
    }
}