/* ==========================================================================
   Buildbox · Design System Build2026
   Folha única compartilhada por todas as páginas do site.

   Ordem das camadas (não reordenar):
   01. Reset
   02. Tokens
   03. Base tipográfica
   04. Grid e utilitários
   05. Header e navegação
   06. Botões
   07. Hero
   08. Clientes (marquee)
   09. Cards
   10. Seções de acento
   11. Parceiros
   12. Vídeo
   13. Footer
   14. Ícones
   15. Blocos de conteúdo (páginas internas)
   16. Utilitários adicionais

   Regra de marca: roxo #3B009D é assinatura, não filtro.
   Um único elemento de acento por composição. Sem gradientes,
   sem transparências decorativas, sem sombras.
   ========================================================================== */


/* ==========================================================================
   01. Reset
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    outline: none;
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
img,
ul,
li,
header,
footer,
section,
article,
nav,
video,
iframe {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}

article,
aside,
footer,
header,
nav,
section {
    display: block;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    outline: none;
}

strong {
    font-weight: bold;
}

img {
    max-width: 100%;
}

svg {
    max-width: 100% !important;
}


/* ==========================================================================
   02. Tokens
   ========================================================================== */

:root {
    --bx-indigo: #3B009D;
    --bx-indigo-light: #9351ff;
    --bx-indigo-glow: #590daa;
    --bx-white: #ffffff;
    --bx-black: #000000;
    --bx-gray: #888888;
    --bx-gray-light: #f1f1f1;

    /* Linhas de separação, uma por fundo */
    --bx-line: #dcdcdc;
    /* sobre fundo claro  */
    --bx-line-dark: #222222;
    /* sobre fundo preto  */
    --bx-line-indigo: #5a2bb8;
    /* sobre fundo roxo   */

    --bx-radius: 4px;
    --bx-gap: 28px;
    --bx-pad: 28px;

    --bs-gutter-x: 3rem;
    --bs-gutter-y: 0;
}


/* ==========================================================================
   03. Base tipográfica
   ========================================================================== */

body {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--bx-gray);
    background-color: var(--bx-gray-light);
}

body>section {
    margin-bottom: 100px;
}

body>header,
body>footer,
section {
    position: relative;
    width: 100%;
}

section[id] {
    scroll-margin-top: 80px;
}

section>.container {
    position: relative;
    z-index: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    line-height: 1;
    color: var(--bx-black);
}

h1,
h2,
h3 {
    font-size: 44px;
}

code,
pre {
    font-family: "IBM Plex Mono", monospace;
}

/* Eyebrow / label. Sempre IBM Plex Mono bold uppercase. */
.bx-st-mono {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* ==========================================================================
   04. Grid e utilitários
   ========================================================================== */

.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

.row {
    --bs-gutter-x: 28px;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

.row>* {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    margin-top: var(--bs-gutter-y);
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}

.col {
    flex: 1 0 0;
}

.col-6 {
    flex: 0 0 auto;
    width: 50%;
}

.col-12 {
    flex: 0 0 auto;
    width: 100%;
}

.gy-4 {
    --bs-gutter-y: 1.5rem;
}

.gy-5 {
    --bs-gutter-y: 3rem;
}

@media (min-width: 768px) {
    .col-md-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 992px) {
    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-lg-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-lg-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .offset-lg-1 {
        margin-left: 8.33333333%;
    }
}

@media (min-width: 1200px) {
    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%;
    }
}

.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-flex {
    display: flex !important;
}

@media (min-width: 768px) {
    .d-md-block {
        display: block !important;
    }

    .d-md-none {
        display: none !important;
    }

    .d-md-flex {
        display: flex !important;
    }
}

@media (min-width: 992px) {
    .d-lg-flex {
        display: flex !important;
    }

    .d-lg-none {
        display: none !important;
    }
}

.align-items-center {
    align-items: center !important;
}

.justify-content-center {
    justify-content: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.ms-auto {
    margin-left: auto !important;
}

@media (min-width: 992px) {
    .align-items-lg-start {
        align-items: flex-start !important;
    }

    .justify-content-lg-end {
        justify-content: flex-end !important;
    }
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

@media (min-width: 992px) {
    .mb-lg-0 {
        margin-bottom: 0 !important;
    }

    .mb-lg-5 {
        margin-bottom: 3rem !important;
    }
}

.cl-indigo {
    color: var(--bx-indigo);
}

.cl-white {
    color: var(--bx-white);
}

.br-4 {
    border-radius: var(--bx-radius);
}


/* ==========================================================================
   05. Header e navegação
   ========================================================================== */

/* Superfície índigo do topo.
   Header e hero dividem UM fundo só. Se o gradiente ficasse apenas no hero,
   o brilho do canto começaria no meio do bloco índigo e deixaria uma emenda
   visível justamente onde a cor é mais clara.

   Gradiente radial ancorado no canto superior esquerdo, recriado a partir da
   medição do slide da apresentação comercial: pico #6200b1 no canto, caindo
   para o índigo sólido por volta de 60% do raio. Fundo sólido fica como
   fallback: navegador sem suporte a radial-gradient exibe só o índigo. */
.bx-topo {
    background-color: var(--bx-indigo);
    background-image: radial-gradient(75% 130% at 0% 0%,
            var(--bx-indigo-glow) 0%,
            var(--bx-indigo) 62%);
}

.bx-topo #bx-header.bx-header--solid,
.bx-topo .bx-hero:not(.bx-hero--light) {
    background-color: transparent;
    background-image: none;
}

/* Variante com foto. A imagem substitui o gradiente na mesma superfície:
   header e hero continuam dividindo um fundo só, pelo mesmo motivo de sempre,
   que é não deixar emenda visível entre os dois.

   A foto entra como <img> e não como background-image por três razões: o
   verificador confere se o arquivo existe, o <picture> deixa o navegador
   baixar só a versão que vai exibir, e o preload do <head> consegue priorizar
   o arquivo certo.

   O isolation cria o contexto de empilhamento e garante a ordem de pintura:
   índigo sólido, depois a foto, depois header e hero. Sem ele a foto de
   z-index negativo escapa para o contexto raiz e some atrás do índigo.
   O índigo continua embaixo como fallback: se a foto não carregar, o texto
   branco cai sobre #3B009D, que dá 12,55:1.

   Só usar com foto escura. Sobre a do Buildcast, medido pixel a pixel: o
   ponto mais claro da imagem inteira dá 6,44:1 para o branco, acima do
   mínimo de 4,5:1. Foto clara exigiria overlay preto, como o hero de vídeo
   da home, nunca overlay roxo. */
.bx-topo--media {
    position: relative;
    isolation: isolate;
    background-image: none;
}

.bx-topo__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Respiro entre o header e o texto, para a foto aparecer sozinha antes de
   qualquer palavra entrar por cima dela. Vale só na variante com foto: no
   topo índigo esse espaço seria roxo vazio, sem nada para ver.

   O ganho é duplo. O texto desce, e o bloco fica mais alto, o que reduz o
   corte vertical do object-fit: cover. Em 1440px a foto entra escalada em
   803px de altura, então quanto mais alto o bloco, menos sobra de fora.

   clamp em vez de valor fixo porque em 375px o mesmo respiro de desktop
   empurraria o botão para fora da primeira dobra. */
.bx-topo--media .bx-hero {
    padding-top: clamp(120px, 18vw, 260px);
}

/* Padrão A: header transparente sobreposto a hero escuro full-bleed (home). */
#bx-header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    padding: 16px 0;
    color: var(--bx-white);
}

#bx-logo-header,
#bx-logo-footer {
    display: block;
    width: auto;
    height: 50px;
}

#bx-header ul a {
    display: block;
    padding: 12px 18px;
}

#bx-header ul a:hover {
    text-decoration: underline;
}

/* Padrão B: header sólido no fluxo, para páginas internas sem hero de vídeo. */
#bx-header.bx-header--solid {
    position: relative;
    background-color: var(--bx-indigo);
}


/* ==========================================================================
   06. Botões
   ========================================================================== */

.bx-btn {
    display: inline-block;
    padding: 20px 56px;
    border: 2px solid;
    border-radius: var(--bx-radius);
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

button.bx-btn {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.bx-btn-indigo {
    background-color: var(--bx-indigo);
    border-color: var(--bx-indigo);
    color: var(--bx-white);
}

.bx-btn-indigo:hover {
    background-color: var(--bx-black);
    border-color: var(--bx-black);
}

.bx-btn-white-outline {
    background-color: transparent;
    border-color: var(--bx-white);
    color: var(--bx-white);
}

.bx-btn-white-outline:hover {
    background-color: var(--bx-white);
    color: var(--bx-indigo);
}

/* Outline escuro, para uso sobre fundo claro. */
.bx-btn-black-outline {
    background-color: transparent;
    border-color: var(--bx-black);
    color: var(--bx-black);
}

.bx-btn-black-outline:hover {
    background-color: var(--bx-black);
    color: var(--bx-white);
}


/* ==========================================================================
   07. Hero
   ========================================================================== */

/* Hero com vídeo full-bleed. Usado na home. */
#bx-cover {
    position: relative;
    width: 100%;
    height: 100svh;
    overflow: hidden;
    color: var(--bx-white);
}

#bx-cover h1 {
    color: var(--bx-white);
}

#bx-herovideo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.6s ease;
}

#bx-herovideo-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.7);
    pointer-events: none;
}

#bx-herovideo-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 80px;
}

#bx-herovideo-content>.container {
    height: 100%;
}

/* Hero de página interna. Sem vídeo, sem altura de viewport.
   Fundo índigo, texto branco. Sobre #3B009D o branco dá 12,55:1 e o roxo
   claro dá 2,91:1, então branco é a única opção que passa em texto. */
.bx-hero {
    padding: 80px 0 100px;
    margin-bottom: 100px;
    background-color: var(--bx-indigo);
    color: var(--bx-white);
}

.bx-hero h1,
.bx-hero h2,
.bx-hero p {
    color: var(--bx-white);
}

.bx-hero--light {
    background-color: var(--bx-gray-light);
    color: var(--bx-gray);
}

.bx-hero--light h1,
.bx-hero--light h2 {
    color: var(--bx-black);
}

.bx-hero--light p {
    color: var(--bx-gray);
}

/* Headline de display, para heros de página interna. */
.bx-display {
    font-size: clamp(36px, 6vw, 64px);
    text-wrap: balance;
}

/* Parágrafo de abertura. */
.bx-lead {
    font-size: 20px;
    line-height: 1.4;
}

/* Link de retorno / breadcrumb simples. */
.bx-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bx-back:hover {
    text-decoration: underline;
}

.bx-back .material-symbols-sharp {
    font-size: 16px;
}


/* ==========================================================================
   08. Clientes (marquee)
   ========================================================================== */

.bx-clients {
    --clients-gap: 28px;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.bx-clients-track {
    display: flex;
    width: max-content;
    animation: bx-marquee 55s linear infinite;
}

.bx-clients-group {
    display: flex;
    align-items: center;
    gap: var(--clients-gap);
    padding-right: var(--clients-gap);
}

.bx-clients-group img {
    width: auto;
    height: 150px;
    object-fit: contain;
}

.bx-client {
    background-color: var(--bx-white);
    border-radius: var(--bx-radius);
    pointer-events: none;
}

@keyframes bx-marquee {
    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bx-clients-track {
        animation: none;
        justify-content: center;
    }
}


/* ==========================================================================
   09. Cards
   ========================================================================== */

.card {
    width: 100%;
    height: 100%;
    margin-bottom: 28px;
    background: var(--bx-white);
    border-radius: var(--bx-radius);
    overflow: hidden;
}

.card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 6;
}

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

.card .bx-ic {
    position: absolute;
    bottom: var(--bx-pad);
    left: var(--bx-pad);
    background-color: var(--bx-indigo);
    color: var(--bx-white);
}

.card .card__media__noimage {
    aspect-ratio: unset;
    height: 80px;
}

.card .card__media__noimage .bx-ic {
    top: var(--bx-pad);
    right: var(--bx-pad);
    bottom: unset;
    left: unset;
    background-color: var(--bx-gray-light);
    color: var(--bx-indigo);
}

.card__body {
    padding: var(--bx-pad);
    padding-bottom: 0;
}

.card__title {
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    text-wrap: balance;
}

.card__text {
    color: var(--bx-gray);
}

.card__light .card__title {
    color: var(--bx-indigo);
}

/* Rodapé de card, para meta informações (data, duração, autor). */
.card__meta {
    padding: 0 var(--bx-pad) var(--bx-pad);
    color: var(--bx-gray);
}

/* Card de pessoa. Foto quadrada, sem ícone. */
.card--person .card__media {
    aspect-ratio: 1 / 1;
}

/* Card clicável inteiro. */
a.card {
    display: block;
    transition: transform 0.3s ease;
}

a.card:hover {
    transform: translateY(-4px);
}


/* ==========================================================================
   10. Seções de acento
   ========================================================================== */

.bx-section-indigo {
    padding: 100px 0;
    background-color: var(--bx-indigo);
    color: var(--bx-indigo-light);
}

.bx-section-indigo p {
    color: var(--bx-white);
}

#bx-ai-fused-workforce h2 {
    color: var(--bx-white);
}

#bx-ai-fused-workforce h3 {
    color: var(--bx-indigo-light);
}


/* ==========================================================================
   11. Parceiros
   ========================================================================== */

.partners {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

@media (min-width: 992px) {
    .partners {
        grid-template-columns: repeat(6, 1fr);
    }
}

.partners__item {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    padding: 16%;
    background: var(--bx-white);
    border-radius: var(--bx-radius);
}

.partners__item img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


/* ==========================================================================
   12. Vídeo
   ========================================================================== */

.video-embed {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--bx-radius);
}

.video-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ==========================================================================
   13. Footer
   ========================================================================== */

#bx-footer {
    width: 100%;
    padding: 80px 0;
    background-color: var(--bx-black);
    color: var(--bx-gray);
    font-size: 14px;
}

#bx-footer .copyright {
    display: block;
    width: 100%;
    margin-top: 28px;
    padding: 16px 0;
    border-top: 1px solid var(--bx-line-dark);
}


/* ==========================================================================
   14. Ícones
   ========================================================================== */

.material-symbols-sharp {
    display: inline-block;
    font-family: "Material Symbols Sharp";
    font-size: 24px;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 200, "opsz" 24;
}

.bx-ic {
    padding: 16px;
    border-radius: var(--bx-radius);
    background-color: var(--bx-gray-light);
    pointer-events: none;
}

/* Número de etapa no lugar do ícone, dentro da mesma caixa .bx-ic.
   56x56 é exatamente a medida do ícone que ele substitui (24px de glifo
   mais 16px de padding dos dois lados), então o card não muda de proporção.
   A cor vem do contexto: dentro de .card__media__noimage a caixa já é índigo.
   Uso: <span class="bx-ic bx-num">01</span> */
.bx-num {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    padding: 0;
    font-family: "IBM Plex Mono", monospace;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
}


/* ==========================================================================
   15. Blocos de conteúdo (páginas internas)
   ========================================================================== */

/* --- Citação em destaque -------------------------------------------------
   Um único acento roxo por composição: a régua lateral.
   Não combinar com outro elemento roxo na mesma seção. */

.bx-quote {
    padding-left: 28px;
    border-left: 2px solid var(--bx-indigo);
}

.bx-quote p {
    font-family: "DM Sans", sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bx-black);
    text-wrap: balance;
}

.bx-quote cite {
    display: block;
    margin-top: 16px;
    font-style: normal;
    color: var(--bx-gray);
}


/* --- Métrica -------------------------------------------------------------
   Número grande para prova quantitativa de case. */

.bx-stat__value {
    display: block;
    font-family: "DM Sans", sans-serif;
    font-size: 64px;
    font-weight: 500;
    line-height: 1;
    color: var(--bx-indigo);
}

.bx-stat__label {
    display: block;
    margin-top: 12px;
    color: var(--bx-gray);
}


/* --- Lista com marcador ---------------------------------------------------
   O primeiro filho do <li> é o marcador: ícone Material Symbols ou número
   em mono. Nos dois casos ele não encolhe. */

.bx-list li {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--bx-line);
}

.bx-list li:first-child {
    border-top: 0;
}

.bx-list li>*:first-child {
    flex-shrink: 0;
    color: var(--bx-indigo);
}

/* --- Programação, agenda e etapas de processo -----------------------------
   Mesma mecânica para os dois usos: rótulo curto à esquerda, conteúdo à
   direita. O container fecha a lista com a linha inferior. */

.bx-agenda,
.bx-faq {
    display: block;
    border-bottom: 1px solid var(--bx-line);
}

.bx-agenda__item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 28px 0;
    border-top: 1px solid var(--bx-line);
}

@media (min-width: 768px) {
    .bx-agenda__item {
        grid-template-columns: 140px 1fr;
        gap: 28px;
    }
}

.bx-agenda__time {
    color: var(--bx-indigo);
}

.bx-agenda__title {
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}


/* --- FAQ (details/summary nativo, sem JS) --------------------------------- */

.bx-faq__item {
    border-top: 1px solid var(--bx-line);
}

.bx-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 24px 0;
    cursor: pointer;
    font-family: "DM Sans", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bx-black);
    list-style: none;
}

.bx-faq__item summary::-webkit-details-marker {
    display: none;
}

.bx-faq__item summary::after {
    content: "add";
    flex-shrink: 0;
    font-family: "Material Symbols Sharp";
    font-size: 24px;
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 200, "opsz" 24;
    color: var(--bx-indigo);
}

.bx-faq__item[open] summary::after {
    content: "remove";
}

.bx-faq__item p {
    padding-bottom: 24px;
}


/* --- Contextos índigo ----------------------------------------------------
   Sobre o índigo, o #3B009D some e as linhas claras berram. Este bloco
   resolve os dois de uma vez, para todos os componentes.
   Regra única: sobre índigo, o acento é branco.
   Toda regra nova de fundo índigo entra AQUI, não espalhada pelo arquivo. */

/* Linhas divisórias */
.bx-hero .bx-list li,
.bx-hero .bx-agenda,
.bx-hero .bx-agenda__item,
.bx-hero .bx-faq,
.bx-hero .bx-faq__item,
.bx-section-indigo .bx-list li,
.bx-section-indigo .bx-agenda,
.bx-section-indigo .bx-agenda__item,
.bx-section-indigo .bx-faq,
.bx-section-indigo .bx-faq__item,
.bx-cta .bx-list li {
    border-color: var(--bx-line-indigo);
}

/* Acento: branco, porque o fundo já é o acento */
.bx-hero .bx-list li>*:first-child,
.bx-hero .bx-agenda__time,
.bx-hero .bx-faq__item summary::after,
.bx-section-indigo .bx-list li>*:first-child,
.bx-section-indigo .bx-agenda__time,
.bx-section-indigo .bx-faq__item summary::after,
.bx-section-indigo .bx-quote,
.bx-hero .bx-quote,
.bx-cta .bx-list li>*:first-child {
    color: var(--bx-white);
    border-left-color: var(--bx-white);
}

/* Texto sobre índigo. Hierarquia se faz por tipografia, não por cor,
   porque nenhum tom intermediário passa em contraste sobre #3B009D. */
.bx-hero .bx-list li,
.bx-hero .bx-quote p,
.bx-hero .bx-quote cite,
.bx-hero .bx-stat__value,
.bx-hero .bx-agenda__title,
.bx-hero .bx-faq__item summary,
.bx-section-indigo .bx-quote p,
.bx-section-indigo .bx-quote cite,
.bx-section-indigo .bx-stat__value,
.bx-section-indigo .bx-faq__item summary {
    color: var(--bx-white);
}

/* --- Bloco de CTA final --------------------------------------------------- */

.bx-cta {
    padding: 100px 0;
    background-color: var(--bx-indigo);
    color: var(--bx-white);
}

.bx-cta h2 {
    color: var(--bx-white);
    text-wrap: balance;
}



/* --- Formulário -----------------------------------------------------------
   Desenhado para viver dentro do .bx-cta índigo. Campo branco sólido sobre
   índigo, sem transparência, seguindo a regra de solidez geométrica.
   O site não tem CMS: o POST vai para enviar.php e volta em /obrigado/. */

.bx-form .bx-label {
    display: block;
    margin-bottom: 8px;
}

.bx-form .bx-input {
    display: block;
    width: 100%;
    padding: 16px;
    border: 2px solid var(--bx-white);
    border-radius: var(--bx-radius);
    background-color: var(--bx-white);
    color: var(--bx-black);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.bx-form .bx-input::placeholder {
    color: var(--bx-gray);
}

.bx-form .bx-input:focus-visible {
    outline: 2px solid var(--bx-white);
    outline-offset: 3px;
}

/* Campo inválido só depois que a pessoa tentou enviar, nunca enquanto digita. */
.bx-form .bx-input:user-invalid {
    border-color: var(--bx-black);
}

.bx-form .bx-nota {
    font-size: 14px;
}

/* Armadilha para robô. Fica fora da tela, sem foco e escondida de leitor de
   tela. Não usar display:none: robô que interpreta CSS pula o campo. */
.bx-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==========================================================================
   16. Utilitários adicionais
   ========================================================================== */

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

.w-100 {
    width: 100% !important;
}

.gap-3 {
    gap: 1rem !important;
}

.text-center {
    text-align: center !important;
}

.text-balance {
    text-wrap: balance;
}

.cl-black {
    color: var(--bx-black);
}

.cl-gray {
    color: var(--bx-gray);
}

/* Acessibilidade: rótulo visível apenas para leitores de tela. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Foco visível em navegação por teclado. */
a:focus-visible,
summary:focus-visible,
button:focus-visible {
    outline: 2px solid var(--bx-indigo);
    outline-offset: 3px;
}

.bx-hero a:focus-visible,
#bx-footer a:focus-visible,
.bx-cta a:focus-visible,
.bx-section-indigo a:focus-visible {
    outline-color: var(--bx-white);
}