/* ==========================================================================
   Site BluAnt — direção "Laboratório"

   Hierarquia por peso leve em corpo grande e por espaço, não por ênfase.
   Sem itálico, sem caixa alta (exceto micro-rótulos), sem sombra. A estrutura
   fica aparente: fios de 1px mostram onde as colunas começam e terminam.

   Escopo: tudo dentro de .bl-page. Header, rodapé, carrinho e checkout
   seguem com a tipografia e o CSS do tema da loja.

   Sobre os !important em font-size/line-height: o style_custom.css do
   backoffice é carregado na loja e, dentro de media queries, faz
   `p { font-size: .9rem !important }` (e .85rem/.8rem em telas menores),
   além de h2/h3/h4. Sem !important, toda a tipografia desta página é
   esmagada no mobile. Eles ficam restritos ao escopo .bl-*.
   ========================================================================== */

.bl-page {
    /* Azul da marca vem do tema (Aparência > Tema). O âmbar é o laranja da
       marca dessaturado: nesta direção a cor é marcação, não preenchimento,
       e um #FF6600 puro quebraria a leitura. */
    --bl-blue: var(--primary, #1E63AC);
    --bl-navy: #12325C;
    --bl-accent: #A8571A;

    --bl-ink: #1B2530;
    --bl-soft: #5C6773;
    --bl-faint: #8A95A1;

    --bl-line: #E4E9F0;
    --bl-line-strong: #C7D2DF;
    --bl-tint: #F4F7FA;

    --bl-radius: 2px;
    --bl-space-section: clamp(68px, 7.6vw, 132px);
    --bl-ease: cubic-bezier(.22, .61, .36, 1);

    font-family: Karla, "Helvetica Neue", Arial, sans-serif;
    color: var(--bl-ink);
}

.bl-page *,
.bl-page *::before,
.bl-page *::after { box-sizing: border-box; }

.bl-page :is(h1, h2, h3, h4, p, figure, blockquote) { font-family: inherit; }

/* --------------------------------------------------------------- layout -- */

/* Ritmo vertical: duas seções seguidas somam os dois paddings. Por isso a
   seção sem fundo próprio usa uma fração do respiro — assim o intervalo entre
   elas é um, não dois. Quem tem fundo próprio recebe o respiro interno cheio. */
.bl-section { padding: calc(var(--bl-space-section) * .55) 0; }
.bl-section--tight { padding: calc(var(--bl-space-section) * .45) 0; }

.bl-section[style*="background"],
.bl-section--beige,
.bl-section--blue,
.bl-section--blue-soft,
.bl-section--gray { padding-block: var(--bl-space-section); }

.bl-section--beige,
.bl-section--blue,
.bl-section--blue-soft,
.bl-section--gray { background: var(--bl-tint); }

.bl-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 44px);
}

.bl-grid { display: grid; gap: clamp(20px, 2.4vw, 34px); }
.bl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ------------------------------------------------------------ tipografia -- */

/* Caixa alta só aqui: micro-rótulo, o menor texto da página. */
.bl-eyebrow {
    margin: 0 0 20px;
    font-size: 10.5px !important;
    font-weight: 600;
    line-height: 1.4 !important;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bl-accent);
}

.bl-h1 {
    margin: 0;
    font-size: clamp(36px, 5vw, 62px) !important;
    font-weight: 300;
    line-height: 1.06 !important;
    letter-spacing: -.032em;
    text-wrap: balance;
    color: var(--bl-navy);
}

.bl-h2 {
    margin: 0;
    font-size: clamp(27px, 3.6vw, 46px) !important;
    font-weight: 300;
    line-height: 1.1 !important;
    letter-spacing: -.03em;
    text-wrap: balance;
    color: var(--bl-navy);
}

.bl-h3 {
    margin: 0;
    font-size: clamp(17px, 1.6vw, 20px) !important;
    font-weight: 500;
    line-height: 1.35 !important;
    letter-spacing: -.012em;
    color: var(--bl-navy);
}

.bl-subhead {
    margin: 16px 0 0;
    font-size: clamp(17px, 1.7vw, 22px) !important;
    font-weight: 400;
    line-height: 1.45 !important;
    letter-spacing: -.012em;
    color: var(--bl-soft);
}

/* Fio de 1px: marca o início do texto sem competir com o título. */
.bl-rule {
    width: 36px;
    height: 1px;
    margin: 24px 0 0;
    border: 0;
    background: var(--bl-accent);
    opacity: 1;
}

.bl-head--center .bl-rule,
.bl-pagehead .bl-rule { margin-inline: auto; }

.bl-lead {
    margin: 22px 0 0;
    max-width: 58ch;
    font-size: clamp(15px, 1.15vw, 16.5px) !important;
    line-height: 1.75 !important;
    color: var(--bl-soft);
}

.bl-lead p { margin: 0 0 1.15em; }
.bl-lead p:last-child { margin-bottom: 0; }

.bl-head { max-width: 780px; }
.bl-head--center { max-width: 700px; margin-inline: auto; text-align: center; }
.bl-head--center .bl-lead { margin-inline: auto; }

.bl-head + .bl-grid,
.bl-head + .bl-carousel-wrap { margin-top: clamp(40px, 4.6vw, 68px); }

/* --------------------------------------------------------------- botões -- */

/* Caixa baixa, retângulo de 2px, sem sombra. O preenchimento é do azul
   profundo; o âmbar aparece uma vez por tela, na ação principal. */
.bl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    border: 1px solid transparent;
    border-radius: var(--bl-radius);
    font-size: 13.5px !important;
    font-weight: 500;
    line-height: 1 !important;
    letter-spacing: .012em;
    text-align: center;
    cursor: pointer;
    transition: background-color .22s var(--bl-ease), border-color .22s var(--bl-ease), color .22s var(--bl-ease);
}

.bl-btn:hover { text-decoration: none; }

.bl-btn--navy { background: var(--bl-navy); border-color: var(--bl-navy); color: #fff; }
.bl-btn--navy:hover,
.bl-btn--navy:focus { color: #fff; background: #0D2547; border-color: #0D2547; }

.bl-btn--outline { background: transparent; border-color: var(--bl-line-strong); color: var(--bl-ink); }
.bl-btn--outline:hover,
.bl-btn--outline:focus { color: var(--bl-navy); border-color: var(--bl-navy); background: transparent; }

.bl-btn--accent { background: var(--bl-accent); border-color: var(--bl-accent); color: #fff; }
.bl-btn--accent:hover,
.bl-btn--accent:focus { color: #fff; background: #8E4915; border-color: #8E4915; }

.bl-btn:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 3px; }

/* ----------------------------------------------------------- superfícies -- */

.bl-card {
    background: #fff;
    border: 1px solid var(--bl-line);
    border-radius: var(--bl-radius);
    transition: border-color .22s var(--bl-ease);
}

.bl-card:hover { border-color: var(--bl-line-strong); }

/* Os ícones são glifos brancos: precisam de um fundo para existir. Fica um
   quadrado pequeno e chapado, sem gradiente nem sombra. */
.bl-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 2px;
    background: var(--bl-navy);
}

.bl-icon-badge img { width: 20px; height: 20px; object-fit: contain; }

/* ------------------------------------------------------------------ hero -- */

.bl-hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    min-height: clamp(480px, 72vh, 700px);
    background: #fff;
}

/* O enquadramento vem do admin em duas variáveis: no desktop cabe a largura
   inteira da foto, no mobile o recorte é estreito e precisa achar o produto. */
.bl-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--bl-hero-pos, center); }

/* No desktop a foto entra limpa: a área clara da imagem já fica atrás do
   texto. O véu existe só no mobile, onde o enquadramento é mais fechado. */
.bl-hero__veil { display: none; position: absolute; inset: 0; }

.bl-hero__inner { position: relative; width: 100%; }
.bl-hero__content { max-width: 580px; animation: bl-fade-up .9s var(--bl-ease) both; }
.bl-hero__content .bl-lead { max-width: 44ch; }

.bl-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(30px, 3.2vw, 42px);
}

/* Sem véu, o botão de contorno cairia sobre a foto e sumiria. */
.bl-hero .bl-btn--outline { background: rgba(255, 255, 255, .92); }
.bl-hero .bl-btn--outline:hover,
.bl-hero .bl-btn--outline:focus { background: #fff; }

@keyframes bl-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- números -- */

/* A assinatura da direção: grade com os fios à mostra, sem faixa de cor. */
.bl-stats { background: #fff; }

.bl-stats__title {
    margin: 0 0 clamp(30px, 3.4vw, 46px);
    text-align: center;
    font-size: clamp(17px, 1.8vw, 22px) !important;
    font-weight: 400;
    line-height: 1.4 !important;
    letter-spacing: -.012em;
    color: var(--bl-soft);
}

.bl-stats__grid { gap: 0; border-top: 1px solid var(--bl-navy); }

.bl-stat { padding: clamp(26px, 2.8vw, 38px) clamp(14px, 2vw, 28px) clamp(14px, 1.6vw, 20px); }
.bl-stat + .bl-stat { border-left: 1px solid var(--bl-line); }

.bl-stat__n {
    margin: 0;
    font-size: clamp(38px, 5.2vw, 66px) !important;
    font-weight: 300;
    line-height: 1 !important;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    color: var(--bl-navy);
}

.bl-stat__label {
    margin: 14px 0 0;
    font-size: 10.5px !important;
    font-weight: 600;
    line-height: 1.6 !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bl-faint);
}

.bl-fade-from-band { background: #fff; }

/* -------------------------------------------------------- trio de cards -- */

.bl-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }

.bl-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--bl-radius);
}

.bl-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bl-tile__veil { position: absolute; inset: 0; }

.bl-tile__body {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(26px, 2.4vw, 36px);
}

.bl-tile__eyebrow {
    margin: 0;
    font-size: 10.5px !important;
    font-weight: 600;
    line-height: 1.4 !important;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.bl-tile__spacer { flex: 1; min-height: 20px; }

.bl-tile__title {
    margin: 0;
    font-size: clamp(21px, 2.1vw, 30px) !important;
    font-weight: 300;
    line-height: 1.15 !important;
    letter-spacing: -.028em;
}

.bl-tile__text { margin: 20px 0 0; font-size: 14.5px !important; line-height: 1.7 !important; }
.bl-tile .bl-rule { margin-top: 20px; }

/* Foto de fundo, texto ancorado no rodapé */
.bl-tile--cover { min-height: 540px; }
.bl-tile--cover .bl-tile__body { justify-content: flex-end; }
.bl-tile--cover .bl-tile__eyebrow { position: absolute; top: clamp(26px, 2.4vw, 36px); left: clamp(26px, 2.4vw, 36px); color: rgba(255, 255, 255, .88); }
.bl-tile--cover .bl-tile__title { color: #fff; }
.bl-tile--cover .bl-tile__text { color: rgba(255, 255, 255, .9); max-width: 34ch; }

/* Foto no topo, texto embaixo */
.bl-tile--light { background: #fff; border: 1px solid var(--bl-line); }
.bl-tile--light .bl-tile__photo { width: 100%; aspect-ratio: 1 / 1; flex: none; object-fit: cover; }
.bl-tile--light .bl-tile__eyebrow { color: var(--bl-accent); }
.bl-tile--light .bl-tile__title { margin-top: 14px; font-size: clamp(19px, 1.9vw, 25px) !important; color: var(--bl-navy); }
.bl-tile--light .bl-tile__text { color: var(--bl-soft); }

/* Imagem sangrando no card inteiro; o eyebrow no topo e o botão no rodapé */
.bl-tile--framed { min-height: 540px; }
.bl-tile--framed .bl-tile__body { justify-content: flex-end; align-items: center; }
.bl-tile--framed .bl-tile__eyebrow { position: absolute; top: clamp(26px, 2.4vw, 36px); left: clamp(26px, 2.4vw, 36px); color: #fff; }
.bl-tile--framed .bl-btn { min-width: 190px; }

/* Botão sobre foto: contorno claro, sem bloco de cor tapando a imagem. */
.bl-btn--on-image { background: transparent; border-color: rgba(255, 255, 255, .9); color: #fff; }
.bl-btn--on-image:hover,
.bl-btn--on-image:focus { background: #fff; border-color: #fff; color: var(--bl-navy); }

/* ------------------------------------------------ cards com ícone/número -- */

.bl-diff {
    padding: clamp(26px, 2.4vw, 34px);
    background: #fff;
    border: 1px solid var(--bl-line);
    border-radius: var(--bl-radius);
    transition: border-color .22s var(--bl-ease);
}

.bl-diff:hover { border-color: var(--bl-line-strong); }

.bl-diff__title {
    margin: 20px 0 0;
    font-size: clamp(16.5px, 1.5vw, 19px) !important;
    font-weight: 500;
    line-height: 1.35 !important;
    letter-spacing: -.012em;
    color: var(--bl-navy);
}

.bl-diff__text { margin: 12px 0 0; font-size: 14.5px !important; line-height: 1.7 !important; color: var(--bl-soft); }

.bl-diff__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 22px !important;
    font-weight: 300;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums;
    color: var(--bl-accent);
}

/* ------------------------------------------------------------ quem somos -- */

.bl-about { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }

.bl-about__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--bl-space-section) clamp(24px, 4.6vw, 76px);
}

.bl-about__text .bl-lead { max-width: 40ch; }
.bl-about__cta { align-self: flex-start; margin-top: clamp(28px, 3vw, 40px); }

.bl-about__media { position: relative; min-height: 380px; }
.bl-about__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.bl-people { margin: clamp(30px, 3.2vw, 42px) 0 0; border-top: 1px solid var(--bl-line); }
.bl-person { display: flex; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--bl-line); }

.bl-person__photo {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bl-line);
}

.bl-person__name { margin: 0; font-size: 16.5px !important; font-weight: 600; line-height: 1.3 !important; letter-spacing: -.01em; color: var(--bl-navy); }
.bl-person__role { margin: 4px 0 0; font-size: 14px !important; line-height: 1.45 !important; color: var(--bl-soft); }
.bl-person__creds { margin: 2px 0 0; font-size: 13px !important; line-height: 1.45 !important; color: var(--bl-faint); }

/* -------------------------------------------------------- equipe completa -- */

.bl-member { display: flex; flex-direction: column; height: 100%; padding: clamp(28px, 2.6vw, 36px); }

.bl-member__photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; background: var(--bl-line); }
.bl-member .bl-person__name { margin-top: 24px; font-size: 18px !important; }
.bl-member__bio { margin: 18px 0 0; font-size: 14.5px !important; line-height: 1.75 !important; color: var(--bl-soft); }

/* ------------------------------------------------------------ depoimentos -- */

/* Sem card e sem sombra: o texto respira e a coluna se separa por um fio. */
.bl-quote { display: flex; flex-direction: column; height: 100%; margin: 0; padding: 26px clamp(6px, 1.4vw, 20px) 0; text-align: left; border-top: 1px solid var(--bl-line); }

.bl-quote__stars { margin: 0 0 20px; font-size: 13px !important; line-height: 1 !important; letter-spacing: .28em; color: var(--bl-accent); }
.bl-quote__text { flex: 1; margin: 0; font-size: 15px !important; line-height: 1.8 !important; color: var(--bl-soft); }
.bl-quote__name { margin: 24px 0 0; font-size: 10.5px !important; font-weight: 600; line-height: 1.4 !important; letter-spacing: .16em; text-transform: uppercase; color: var(--bl-navy); }

/* ------------------------------------------------------------ texto+imagem -- */

.bl-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 4.6vw, 72px); align-items: center; }
.bl-split__media img { width: 100%; border-radius: var(--bl-radius); }
.bl-split--media-left .bl-split__media { order: -1; }
.bl-split .bl-btn { margin-top: clamp(28px, 3vw, 38px); }

/* --------------------------------------------------- modelos de parceria -- */

.bl-partner { display: flex; flex-direction: column; height: 100%; padding: clamp(32px, 3.2vw, 46px); }
.bl-partner__title { margin: 0; font-size: clamp(19px, 1.9vw, 24px) !important; font-weight: 400; line-height: 1.25 !important; letter-spacing: -.02em; color: var(--bl-navy); }
.bl-partner__text { flex: 1; margin: 20px 0 32px; font-size: 15px !important; line-height: 1.75 !important; color: var(--bl-soft); }
.bl-partner .bl-btn { align-self: flex-start; }

/* ------------------------------------------------------- faixa de chamada -- */

/* O preenchimento é do azul profundo; o âmbar fica só no botão. */
.bl-band { padding: clamp(56px, 5.6vw, 92px) 0; background: var(--bl-navy); color: #fff; }

.bl-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(28px, 4vw, 64px); }
.bl-band__col { flex: 1 1 460px; }

.bl-band__title {
    margin: 0;
    font-size: clamp(24px, 3vw, 40px) !important;
    font-weight: 300;
    line-height: 1.14 !important;
    letter-spacing: -.03em;
    color: #fff;
}

.bl-band__text { margin: 22px 0 0; max-width: 54ch; font-size: 15px !important; line-height: 1.75 !important; color: rgba(255, 255, 255, .82); }
/* O âmbar escuro some sobre o azul profundo: aqui o fio clareia. */
.bl-band .bl-rule { background: #D18B4E; }
.bl-band .bl-btn { flex: none; min-width: 260px; background: var(--bl-accent); border-color: var(--bl-accent); color: #fff; }
.bl-band .bl-btn:hover,
.bl-band .bl-btn:focus { background: #C1682A; border-color: #C1682A; color: #fff; }

/* ------------------------------------------------------- faixa com imagem -- */

.bl-imageband { position: relative; overflow: hidden; min-height: clamp(320px, 40vw, 560px); display: flex; align-items: center; }
.bl-imageband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bl-imageband__veil { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(18, 50, 92, .62) 0%, rgba(18, 50, 92, .24) 48%, rgba(18, 50, 92, .04) 78%); }
.bl-imageband__inner { position: relative; width: 100%; }

.bl-imageband__title {
    margin: 0;
    max-width: 15ch;
    font-size: clamp(26px, 3.4vw, 48px) !important;
    font-weight: 300;
    line-height: 1.12 !important;
    letter-spacing: -.032em;
    color: #fff;
}

/* -------------------------------------------------------- título de página -- */

.bl-pagehead { padding: clamp(56px, 6vw, 104px) 0 clamp(10px, 1vw, 18px); text-align: center; }
.bl-pagehead .bl-subhead { max-width: 640px; margin-inline: auto; }

/* -------------------------------------------------------------------- FAQ -- */

.bl-faq { max-width: 860px; }
.bl-faq__list { margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--bl-navy); }
.bl-faq__item { border-bottom: 1px solid var(--bl-line); }

.bl-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 4px;
    font-size: clamp(16px, 1.4vw, 18px) !important;
    font-weight: 500;
    line-height: 1.45 !important;
    letter-spacing: -.012em;
    color: var(--bl-navy);
    cursor: pointer;
    list-style: none;
    transition: color .22s var(--bl-ease);
}

.bl-faq__q::-webkit-details-marker { display: none; }
.bl-faq__q::marker { content: ""; }
.bl-faq__q:hover { color: var(--bl-accent); }
.bl-faq__q:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: -2px; }

.bl-faq__sign { position: relative; flex: none; width: 16px; height: 16px; }

.bl-faq__sign::before,
.bl-faq__sign::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 1px;
    background: var(--bl-accent);
    transform: translate(-50%, -50%);
    transition: transform .28s var(--bl-ease);
}

.bl-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.bl-faq__item[open] .bl-faq__sign::after { transform: translate(-50%, -50%) rotate(180deg); }

.bl-faq__a { padding: 0 4px 28px; font-size: 15px !important; line-height: 1.8 !important; color: var(--bl-soft); white-space: pre-line; }

/* ---------------------------------------------------------------- contato -- */

.bl-contact { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(36px, 4.6vw, 72px); align-items: start; }
.bl-contact__form { margin-top: clamp(28px, 3vw, 38px); }
.bl-contact__aside > * + * { margin-top: clamp(28px, 3vw, 40px); }

.bl-contact__label {
    display: block;
    margin-bottom: 8px;
    font-size: 10.5px !important;
    font-weight: 600;
    line-height: 1.4 !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bl-faint);
}

.bl-contact .form-control {
    height: auto;
    padding: 13px 0;
    border: 0;
    border-bottom: 1px solid var(--bl-line);
    border-radius: 0;
    background: transparent;
    font-size: 15px !important;
    color: var(--bl-ink);
    transition: border-color .22s var(--bl-ease);
}

.bl-contact .form-control:focus { border-color: var(--bl-navy); box-shadow: none; background: transparent; }
.bl-contact .form-control.is-invalid { border-color: #C0392B; background-image: none; }
.bl-contact select.form-control { padding-left: 0; }
.bl-contact address { font-style: normal; }

/* ---------------------------------------------------------------- vitrine -- */

.bl-showcase__card { display: flex; flex-direction: column; height: 100%; overflow: hidden; padding-bottom: clamp(28px, 2.6vw, 36px); }

.bl-showcase__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    padding: clamp(20px, 2.4vw, 32px);
    background: var(--bl-tint);
}

.bl-showcase__body { display: flex; flex: 1; flex-direction: column; padding: 0 clamp(24px, 2.6vw, 34px); text-align: left; }

.bl-showcase__cat {
    margin: 24px 0 10px;
    font-size: 10.5px !important;
    font-weight: 600;
    line-height: 1.4 !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bl-accent);
}

.bl-showcase__text { flex: 1; margin: 14px 0 28px; font-size: 14.5px !important; line-height: 1.75 !important; color: var(--bl-soft); }
.bl-showcase__card .bl-btn { align-self: flex-start; }

/* ---------------------------------------------- card de produto do tema -- */

/* A imagem do card do tema é inline e limitada pela altura: numa coluna larga
   ela sobra à esquerda. Centralizada por text-align porque o `d-block` do
   Bootstrap no próprio link é !important e anularia um flex. */
.bl-page .product-card .card-img-top { text-align: center; }

/* --------------------------------------------- carrossel (tiny-slider) --- */

.bl-carousel-wrap .tns-nav { margin-top: clamp(30px, 3.2vw, 44px); text-align: center; }

.bl-carousel-wrap .tns-nav button {
    width: 26px;
    height: 2px;
    margin: 0 5px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--bl-line-strong);
    transition: background-color .25s var(--bl-ease);
}

.bl-carousel-wrap .tns-nav button.tns-nav-active { background: var(--bl-navy); }
.bl-carousel-wrap .tns-inner { margin-inline: -10px !important; padding-inline: 10px; }

.bl-banner-slide { width: 100%; height: clamp(200px, 32vw, 480px); object-fit: cover; border-radius: var(--bl-radius); }

/* ----------------------------------------------------------- responsivo --- */

@media (max-width: 991.98px) {
    .bl-grid--3,
    .bl-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .bl-stat:nth-child(3) { border-left: 0; }
    .bl-stat:nth-child(3),
    .bl-stat:nth-child(4) { border-top: 1px solid var(--bl-line); }

    .bl-trio { grid-template-columns: 1fr; }
    /* A imagem é absoluta nos dois: sem altura no corpo, o card colapsa. */
    .bl-tile--cover,
    .bl-tile--framed { min-height: 0; }
    .bl-tile--cover .bl-tile__body { padding-top: 104px; min-height: 400px; }
    .bl-tile--framed .bl-tile__body { padding-top: 104px; min-height: 460px; }

    .bl-about { grid-template-columns: 1fr; }
    .bl-about__media { min-height: 0; aspect-ratio: 16 / 10; }
    .bl-about__media img { position: static; height: 100%; }

    .bl-split,
    .bl-contact { grid-template-columns: 1fr; }
    .bl-split--media-left .bl-split__media,
    .bl-split__media { order: -1; }

    .bl-band__inner { flex-direction: column; align-items: stretch; }
    /* Empilhado, o flex-basis viraria altura e abriria um vão antes do botão. */
    .bl-band__col { flex: 0 0 auto; }
    .bl-band .bl-btn { width: 100%; min-width: 0; }
}

@media (max-width: 767.98px) {
    /* A foto é o fundo, sem véu: o enquadramento deixa a área clara da imagem
       atrás do texto e o produto aparece na parte de baixo. */
    .bl-hero {
        align-items: flex-start;
        min-height: clamp(620px, 168vw, 720px);
        padding: 40px 0;
    }

    .bl-hero__img { object-position: var(--bl-hero-pos-mobile, 76% center); }

    /* Cor e intensidade do véu vêm do admin (Banner principal). O valor abaixo
       é só a rede de segurança, caso a variável não chegue. */
    .bl-hero__veil {
        display: block;
        background: var(--bl-hero-veil, linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .97) 42%, rgba(255, 255, 255, .68) 58%, rgba(255, 255, 255, .12) 76%, rgba(255, 255, 255, 0) 88%));
    }

    .bl-hero__content { max-width: none; }
    .bl-hero__actions .bl-btn { flex: 1 1 100%; }

    .bl-imageband__veil { background: linear-gradient(180deg, rgba(18, 50, 92, .66) 0%, rgba(18, 50, 92, .3) 62%, rgba(18, 50, 92, .1) 100%); }
}

@media (max-width: 575.98px) {
    .bl-grid--2,
    .bl-grid--3,
    .bl-grid--4 { grid-template-columns: 1fr; }

    /* Números seguem em 2 colunas: uma só deixaria a seção comprida demais. */
    .bl-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .bl-person { align-items: flex-start; }

    /* Ações de largura total no celular: alvo de toque maior. */
    .bl-contact__form .bl-btn,
    .bl-partner .bl-btn,
    .bl-showcase__card .bl-btn,
    .bl-tile--framed .bl-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .bl-page *,
    .bl-page *::before,
    .bl-page *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}