/* ============================================================
   SmartProcess — identidade visual
   Paleta centralizada em variáveis CSS.
   ============================================================ */
:root {
    --smart-primary: #005DAA;        /* azul principal (logo) */
    --smart-primary-dark: #0A4A80;   /* azul escuro */
    --smart-primary-darker: #083A63; /* azul mais profundo (fundos) */
    --smart-primary-light: #4AA9F7;  /* azul claro (destaques) */
    --smart-primary-pale: #EEF5FB;   /* azul quase branco (fundos suaves) */
    --smart-accent: #8CCBFF;         /* destaque discreto */
    --smart-ia: #00A8C0;             /* ciano da interface do Dealbert (IA) */
    --smart-background: #FFFFFF;
    --smart-background-muted: #F5F8FB;
    --smart-text: #2B3440;           /* cinza escuro para textos */
    --smart-text-muted: #5A6675;
    --smart-border: #DDE7F0;

    /* Sobrescreve os tokens do Bootstrap para alinhar à identidade */
    --bs-primary: #005DAA;
    --bs-primary-rgb: 0, 93, 170;
    --bs-link-color: #005DAA;
    --bs-link-hover-color: #0A4A80;
    --bs-body-color: #2B3440;
    --bs-body-font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    font-family: var(--bs-body-font-family);
    color: var(--smart-text);
    background: var(--smart-background);
    line-height: 1.6;
}

/* Evita barra de rolagem horizontal causada pelos deslocamentos
   iniciais das animações AOS (fade-left/right). */
html,
body {
    overflow-x: clip;
}

/* Botões primários do Bootstrap na cor da marca */
.btn-primary {
    --bs-btn-bg: var(--smart-primary);
    --bs-btn-border-color: var(--smart-primary);
    --bs-btn-hover-bg: var(--smart-primary-dark);
    --bs-btn-hover-border-color: var(--smart-primary-dark);
    --bs-btn-active-bg: var(--smart-primary-darker);
    --bs-btn-active-border-color: var(--smart-primary-darker);
    --bs-btn-focus-shadow-rgb: 0, 93, 170;
}

.btn-outline-primary {
    --bs-btn-color: var(--smart-primary);
    --bs-btn-border-color: var(--smart-primary);
    --bs-btn-hover-bg: var(--smart-primary);
    --bs-btn-hover-border-color: var(--smart-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--smart-primary-dark);
    --bs-btn-active-border-color: var(--smart-primary-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 0, 93, 170;
}

.text-primary { color: var(--smart-primary) !important; }

.btn-cta {
    padding: 0.65rem 1.5rem;
    font-weight: 600;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 93, 170, 0.25);
}

.btn-cta:active {
    transform: translateY(0);
    box-shadow: none;
}

.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
    background: var(--smart-primary);
    color: #fff;
    padding: 0.5rem 1rem;
}

/* ============================================================
   Barra superior
   ============================================================ */
.topbar {
    background: var(--smart-primary-darker);
    color: #fff;
}

.topbar-link {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.topbar-link:hover,
.topbar-link:focus {
    color: #fff;
    text-decoration: underline;
}

/* ============================================================
   Cabeçalho / navegação
   ============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--smart-border);
    transition: box-shadow 0.25s ease;
}

.site-header.scrolled {
    box-shadow: 0 4px 18px rgba(8, 58, 99, 0.10);
}

.site-header .navbar {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.site-header .navbar-brand img {
    height: 38px;
    width: auto;
}

.site-header .nav-link {
    color: var(--smart-text);
    font-weight: 500;
    padding: 0.5rem 0.9rem;
    border-radius: 6px;
    position: relative;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus {
    color: var(--smart-primary);
}

.site-header .nav-link.active {
    color: var(--smart-primary);
}

@media (min-width: 992px) {
    .site-header .nav-link.active::after {
        content: "";
        position: absolute;
        left: 0.9rem;
        right: 0.9rem;
        bottom: 0.15rem;
        height: 2px;
        border-radius: 2px;
        background: var(--smart-primary);
    }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(1200px 500px at 85% -10%, rgba(74, 169, 247, 0.35), transparent 60%),
        linear-gradient(135deg, var(--smart-primary-darker) 0%, var(--smart-primary) 55%, #0A6DC4 100%);
    padding: 5.5rem 0 6rem;
}

.hero-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.12;
    background: #fff;
}

.hero-shape-1 {
    width: 420px;
    height: 420px;
    left: -160px;
    bottom: -220px;
}

.hero-shape-2 {
    width: 260px;
    height: 260px;
    right: -80px;
    top: -120px;
}

.hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
}

.hero-title {
    font-size: clamp(1.9rem, 4.2vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    color: rgba(255, 255, 255, 0.88);
    max-width: 560px;
}

.hero .btn-light {
    color: var(--smart-primary-dark);
}

.hero-points li {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
}

.hero-points i {
    color: var(--smart-accent);
}

/* Print do sistema no topo. A borda clara separa a tela branca do fundo
   azul do hero; sem ela o print parece sangrar para fora da moldura. */
.hero-shot {
    width: 100%;
    height: auto;
    max-width: 620px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 24px 46px rgba(4, 32, 56, 0.4);
}

/* ============================================================
   Seções — bases
   ============================================================ */
.section-padding {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}

.section-light { background: var(--smart-background); }
.section-muted { background: var(--smart-background-muted); }

.section-dark {
    background:
        radial-gradient(900px 400px at 15% 110%, rgba(74, 169, 247, 0.25), transparent 60%),
        linear-gradient(160deg, var(--smart-primary-darker), var(--smart-primary-dark));
    color: #fff;
}

.section-header {
    max-width: 820px;
    margin: 0 auto;
}

.section-title {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    color: var(--smart-text);
}

.section-title::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    border-radius: 2px;
    background: var(--smart-primary-light);
    margin: 0.9rem auto 0;
}

.section-lead {
    color: var(--smart-text-muted);
    max-width: 640px;
    margin-top: 1rem;
}

.section-lead-light {
    color: rgba(255, 255, 255, 0.85);
}

/* ============================================================
   Cards de destaque (sobre)
   ============================================================ */
.feature-card {
    background: #fff;
    border: 1px solid var(--smart-border);
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--smart-primary-light);
    box-shadow: 0 14px 30px rgba(8, 58, 99, 0.10);
}

.feature-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--smart-primary-pale);
    color: var(--smart-primary);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.feature-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.feature-text {
    color: var(--smart-text-muted);
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* ============================================================
   Soluções — abas
   ============================================================ */
/* Seção Soluções ocupa a altura da tela DISPONÍVEL abaixo do menu fixo
   (100vh menos os 96px do scroll-padding), para caber inteira ao navegar */
.section-solucoes {
    min-height: calc(100vh - 96px);
    display: flex;
    align-items: center;
}

/* Paddings mais enxutos para a seção caber inteira na tela */
.section-solucoes .section-padding {
    padding-top: 1.25rem;
    padding-bottom: 1rem;
}

.section-solucoes > .container {
    width: 100%;
}

/* Enxugamento para a seção inteira caber na área visível de uma tela 1080p
   (~880px abaixo do cabeçalho), que é onde o menu a centraliza. Nada de
   conteúdo sai: os textos de abertura passam a caber numa linha e os
   respiros entre faixa, card e listas ficam mais curtos. */
.section-solucoes .section-lead {
    max-width: 820px;
    margin-top: 0.5rem;
}

.section-solucoes .solutions-content {
    margin-top: 0.5rem !important;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.section-solucoes .product-intro {
    max-width: 980px;
    margin-bottom: 1rem;
}

.section-solucoes .module-tabs .nav-link {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.section-solucoes .check-list {
    row-gap: 0.4rem;
}

.product-intro {
    text-align: center;
    color: var(--smart-text-muted);
    max-width: 720px;
    margin: 0 auto 1.75rem;
}

/* ------------------------------------------------------------------
   Aba de solução com o lockup da marca
   Reproduz o cartão da Central de documentação: símbolo à esquerda e,
   à direita, o wordmark com o nome do produto em caixa alta embaixo.
   Símbolo e wordmark são background-image (não <img>) para a troca das
   versões clara/escura na aba ativa custar uma linha de CSS cada.
   ------------------------------------------------------------------ */
.solution-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    /* Os satélites têm uma linha só e o SmartProcess tem duas (wordmark +
       plataforma). A altura mínima iguala as pílulas da fila. */
    min-height: 48px;
}

.solution-tab-mark {
    flex: none;
    /* "Logo fundo claro.svg": 263,13 x 310 */
    width: 21px;
    height: 25px;
    background: url("../Images/logos/simbolo.svg") center / contain no-repeat;
}

/* Os satélites têm glifo próprio em vez do "S" — nove "S" seguidos na mesma
   fila saturam a marca. Os glifos são quadrados (100x100) e, como têm duas
   formas encaixadas, pedem um pouco mais de área que o símbolo, que é alto e
   estreito. */
.solution-tab-mark-glifo {
    width: 27px;
    height: 27px;
}

.solution-tab-mark-rh { background-image: url("../Images/logos/glifo-rh.svg"); }
.solution-tab-mark-crm { background-image: url("../Images/logos/glifo-crm.svg"); }
.solution-tab-mark-pay { background-image: url("../Images/logos/glifo-pay.svg"); }
.solution-tab-mark-repair { background-image: url("../Images/logos/glifo-repair.svg"); }
.solution-tab-mark-ecommerce { background-image: url("../Images/logos/glifo-ecommerce.svg"); }
.solution-tab-mark-yms { background-image: url("../Images/logos/glifo-yms.svg"); }

.solution-tab-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.solution-tab-word {
    display: block;
    /* "Texto fundo claro.svg": 8,289 : 1 (inclui o respiro da marca) */
    width: 124px;
    height: 15px;
    background: url("../Images/logos/wordmark.svg") left center / contain no-repeat;
}

/* Satélites: cada um tem wordmark próprio ("SmartRH", "SmartPay", ...),
   composto na mesma Gotham Bold do SmartProcess — "Smart" em azul e a segunda
   palavra no grafite, como o "Process". Não levam linha de sufixo.

   A caixa desses arquivos tem 156,59 de altura contra 131,08 do
   "SmartProcess", porque reserva o descendente do "y" (Pay) e do "p"
   (Repair). Os seis compartilham a mesma caixa e a mesma linha de base, então
   basta crescer a altura em CSS na mesma proporção (15 → 17.92px) para a
   letra sair do mesmo tamanho do SmartProcess. */
.solution-tab-word-produto {
    height: 17.92px;
}

.solution-tab-word-rh { width: 80px; background-image: url("../Images/logos/wordmark-rh.svg"); }
.solution-tab-word-crm { width: 96px; background-image: url("../Images/logos/wordmark-crm.svg"); }
.solution-tab-word-pay { width: 88px; background-image: url("../Images/logos/wordmark-pay.svg"); }
.solution-tab-word-repair { width: 114px; background-image: url("../Images/logos/wordmark-repair.svg"); }
.solution-tab-word-ecommerce { width: 161px; background-image: url("../Images/logos/wordmark-ecommerce.svg"); }
.solution-tab-word-yms { width: 94px; background-image: url("../Images/logos/wordmark-yms.svg"); }

/* As versões de fundo escuro ficam mais abaixo, DEPOIS da regra genérica da
   aba ativa: as duas têm a mesma especificidade, então quem vem por último
   vence. Invertida, a aba ativa de um satélite voltava a exibir o wordmark
   "SmartProcess". */

.solution-tab-suffix {
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--smart-text-muted);
    transition: color 0.2s ease;
}

.solutions-tabs .nav-link.active .solution-tab-mark {
    background-image: url("../Images/logos/simbolo-branco.svg");
}

/* Precisam vir depois da regra acima (mesma especificidade). */
.solutions-tabs .nav-link.active .solution-tab-mark-rh { background-image: url("../Images/logos/glifo-rh-branco.svg"); }
.solutions-tabs .nav-link.active .solution-tab-mark-crm { background-image: url("../Images/logos/glifo-crm-branco.svg"); }
.solutions-tabs .nav-link.active .solution-tab-mark-pay { background-image: url("../Images/logos/glifo-pay-branco.svg"); }
.solutions-tabs .nav-link.active .solution-tab-mark-repair { background-image: url("../Images/logos/glifo-repair-branco.svg"); }
.solutions-tabs .nav-link.active .solution-tab-mark-ecommerce { background-image: url("../Images/logos/glifo-ecommerce-branco.svg"); }
.solutions-tabs .nav-link.active .solution-tab-mark-yms { background-image: url("../Images/logos/glifo-yms-branco.svg"); }

.solutions-tabs .nav-link.active .solution-tab-word {
    background-image: url("../Images/logos/wordmark-branco.svg");
}

/* Precisam vir depois da regra acima (mesma especificidade). */
.solutions-tabs .nav-link.active .solution-tab-word-rh { background-image: url("../Images/logos/wordmark-rh-branco.svg"); }
.solutions-tabs .nav-link.active .solution-tab-word-crm { background-image: url("../Images/logos/wordmark-crm-branco.svg"); }
.solutions-tabs .nav-link.active .solution-tab-word-pay { background-image: url("../Images/logos/wordmark-pay-branco.svg"); }
.solutions-tabs .nav-link.active .solution-tab-word-repair { background-image: url("../Images/logos/wordmark-repair-branco.svg"); }
.solutions-tabs .nav-link.active .solution-tab-word-ecommerce { background-image: url("../Images/logos/wordmark-ecommerce-branco.svg"); }
.solutions-tabs .nav-link.active .solution-tab-word-yms { background-image: url("../Images/logos/wordmark-yms-branco.svg"); }

.solutions-tabs .nav-link.active .solution-tab-suffix {
    color: rgba(255, 255, 255, 0.9);
}

.solutions-tabs .nav-link:hover .solution-tab-suffix,
.solutions-tabs .nav-link:focus .solution-tab-suffix {
    color: var(--smart-primary);
}

.solutions-tabs .nav-link.active:hover .solution-tab-suffix,
.solutions-tabs .nav-link.active:focus .solution-tab-suffix {
    color: rgba(255, 255, 255, 0.9);
}

/* ------------------------------------------------------------------
   Faixa de produtos — cartões lado a lado, na linha da TOTVS
   ------------------------------------------------------------------
   Nove cartões só cabem numa linha a partir de ~1400px de tela. Para isso a
   faixa sai da largura do .container (até 1560px) e cada cartão se ajusta
   entre 140 e 172px. Abaixo disso ela rola na horizontal: setas nas pontas e
   um esmaecimento na borda mostram que há mais produtos.

   O nome de cada produto é imagem (wordmark). O tamanho dele acompanha a
   largura do cartão por container query: o maior nome, "SmartEcommerce",
   tem proporção 9:1, então a altura da letra é a largura útil dividida por 9,
   com teto de 16px. Todos os nomes usam a mesma altura, então a letra sai do
   mesmo tamanho em todos os cartões. */
.solutions-tabs-breakout {
    --largura-faixa: min(calc(100vw - 32px), 1560px);
    position: relative;
    margin-left: calc((100% - var(--largura-faixa)) / 2);
    margin-right: calc((100% - var(--largura-faixa)) / 2);
}

.solutions-tabs {
    position: relative;
    flex-wrap: nowrap;
    gap: 14px;
    margin: 0;
    /* respiro para o cartão subir no hover e para o chevron do ativo */
    padding: 4px 6px 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.solutions-tabs::-webkit-scrollbar {
    display: none;
}

.solutions-tabs > li {
    flex: 1 1 0;
    min-width: 140px;
    max-width: 172px;
    scroll-snap-align: center;
}

/* centraliza a fila quando sobra espaço, sem cortar o primeiro cartão quando
   falta (justify-content: center cortaria) */
.solutions-tabs > li:first-child {
    margin-left: auto;
}

.solutions-tabs > li:last-child {
    margin-right: auto;
}

.solutions-tabs .solution-tab {
    --letra: min(16px, calc((100cqi - 4px) / 9));
    container-type: inline-size;
    position: relative;
    width: 100%;
    height: 98px;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    /* a base fica reservada para o chevron do cartão ativo, que entra 13px
       no cartão; sem isso ele cobria a linha DESKTOP / WEB / MOBILE. Vale para
       todos os cartões, para o conteúdo não pular de posição ao ser escolhido. */
    padding: 8px 10px 18px;
    color: var(--smart-text);
    background: #fff;
    border: 1px solid var(--smart-border);
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(8, 58, 99, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.solutions-tabs .solution-tab:hover,
.solutions-tabs .solution-tab:focus-visible {
    border-color: var(--smart-primary-light);
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(8, 58, 99, 0.1);
}

.solutions-tabs .solution-tab.active {
    background: var(--smart-primary);
    border-color: var(--smart-primary);
    color: #fff;
    transform: none;
    box-shadow: 0 12px 26px rgba(0, 93, 170, 0.28);
}

/* chevron do cartão ativo, apontando para o conteúdo logo abaixo */
.solutions-tabs .solution-tab.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -13px;
    width: 26px;
    height: 26px;
    margin-left: -13px;
    border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23005DAA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
    box-shadow: 0 4px 10px rgba(8, 58, 99, 0.18);
}

/* símbolo e glifos maiores que na pílula antiga */
.solutions-tabs .solution-tab-mark {
    width: 31px;
    height: 36px;
}

.solutions-tabs .solution-tab-mark-glifo {
    width: 36px;
    height: 36px;
}

.solutions-tabs .solution-tab-name {
    align-items: center;
}

/* SmartProcess: a caixa dele é mais baixa (131 contra 157 dos satélites),
   então 0.837 da altura dá a mesma letra */
.solutions-tabs .solution-tab-word {
    width: auto;
    height: calc(var(--letra) * 0.837);
    aspect-ratio: 124 / 15;
    background-position: center;
}

.solutions-tabs .solution-tab-word-produto { height: var(--letra); }
.solutions-tabs .solution-tab-word-rh { aspect-ratio: 80 / 17.92; }
.solutions-tabs .solution-tab-word-crm { aspect-ratio: 96 / 17.92; }
.solutions-tabs .solution-tab-word-pay { aspect-ratio: 88 / 17.92; }
.solutions-tabs .solution-tab-word-repair { aspect-ratio: 114 / 17.92; }
.solutions-tabs .solution-tab-word-ecommerce { aspect-ratio: 161 / 17.92; }
.solutions-tabs .solution-tab-word-yms { aspect-ratio: 94 / 17.92; }

.solutions-tabs .solution-tab-suffix {
    font-size: 0.6rem;
}

/* setas de rolagem: só aparecem quando há cartão escondido daquele lado */
.solutions-tabs-arrow {
    position: absolute;
    top: 34px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--smart-border);
    border-radius: 50%;
    background: #fff;
    color: var(--smart-primary);
    box-shadow: 0 4px 12px rgba(8, 58, 99, 0.15);
}

.solutions-tabs-arrow[hidden] {
    display: none;
}

.solutions-tabs-arrow-prev { left: 0; }
.solutions-tabs-arrow-next { right: 0; }

.solutions-tabs-breakout.rola-direita .solutions-tabs {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent);
}

.solutions-tabs-breakout.rola-esquerda .solutions-tabs {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 64px);
    mask-image: linear-gradient(to right, transparent, #000 64px);
}

.solutions-tabs-breakout.rola-esquerda.rola-direita .solutions-tabs {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
}

/* no celular a faixa vai de borda a borda e rola com o dedo, sem setas */
@media (max-width: 767.98px) {
    .solutions-tabs-breakout {
        --largura-faixa: 100vw;
    }

    .solutions-tabs {
        padding-left: 16px;
        padding-right: 16px;
    }

    .solutions-tabs > li {
        min-width: 132px;
    }

    .solutions-tabs-arrow {
        display: none;
    }
}

.solutions-content {
    background: #fff;
    border: 1px solid var(--smart-border);
    border-radius: 14px;
    padding: 2rem;
}

/* Altura do card de Soluções: a do maior conteúdo entre todos os produtos e
   módulos, medida pelo site.js na largura atual da tela e publicada em
   --solutions-content-height. É o que impede o card de crescer e encolher a
   cada clique. O valor padrão (585px) só vale até o script rodar.

   Antes havia também um piso fixo ligado à altura da janela; ele deixava o card
   mais alto que o necessário e empurrava a seção para fora da tela. A seção já
   ocupa a altura da tela e centraliza o conteúdo (.section-solucoes), então o
   piso saiu. */
@media (min-width: 992px) {
    .solutions-content {
        min-height: var(--solutions-content-height, 585px);
    }
}

/* Passe de medição: empilha todos os painéis — produtos e módulos — numa
   célula só de grid, para ler de uma vez a altura do mais alto. Dura um único
   quadro: o script adiciona e remove a classe na mesma tarefa, o browser não
   chega a pintar. */
.solutions-measuring .solutions-content {
    min-height: 0;
}

.solutions-measuring .tab-content {
    display: grid;
}

.solutions-measuring .tab-content > .tab-pane {
    display: block;
    grid-area: 1 / 1;
}

.module-tabs .nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    color: var(--smart-text);
    background: var(--smart-background-muted);
    border: 1px solid var(--smart-border);
    border-radius: 10px;
    font-weight: 600;
    padding: 0.8rem 1rem;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.module-tabs .nav-link i {
    font-size: 1.25rem;
    color: var(--smart-primary);
    transition: color 0.2s ease;
}

.module-tabs .nav-link:hover,
.module-tabs .nav-link:focus {
    border-color: var(--smart-primary-light);
    color: var(--smart-primary);
}

.module-tabs .nav-link.active {
    background: var(--smart-primary);
    border-color: var(--smart-primary);
    color: #fff;
}

.module-tabs .nav-link.active i {
    color: #fff;
}
/* Dealbert / IA — ao contrário dos outros módulos, este item fica SEMPRE no
   degradê: é o destaque pedido para a inteligência artificial. O ciano vem
   da própria interface do Dealbert e só aparece misturado ao azul da marca.

   Consequência: o fundo não pode mais sinalizar seleção, porque já está
   preenchido. Quem sinaliza passa a ser o anel + a sombra do .active. */
.module-tabs .nav-link.module-link-ia {
    background: linear-gradient(135deg, var(--smart-primary), var(--smart-ia));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 128, 160, 0.25);
}

/* .module-tabs .nav-link i fixa a cor do icone no azul da marca; aqui o
   botao ja e azul, entao o tucano precisa do branco de volta. */
.module-tabs .nav-link.module-link-ia i {
    color: #fff;
}

.module-tabs .nav-link.module-link-ia:hover,
.module-tabs .nav-link.module-link-ia:focus {
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 128, 160, 0.35);
}

.module-tabs .nav-link.module-link-ia.active {
    box-shadow: 0 0 0 3px rgba(0, 168, 192, 0.4), 0 6px 16px rgba(0, 128, 160, 0.35);
}

/* Tucano do Dealbert. Entra por mask para herdar a cor do texto do botão —
   com <img> ele ficaria azul fixo sobre o degradê azul. */
.module-icon-dealbert {
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    background-color: currentColor;
    -webkit-mask: url("../Images/logos/toucan.svg") center / contain no-repeat;
    mask: url("../Images/logos/toucan.svg") center / contain no-repeat;
}

/* etiqueta IA encostada na direita do item */
.module-tag-ia {
    margin-left: auto;
    flex: none;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--smart-primary-dark);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.5;
}

/* selo no topo do painel do Dealbert */
.module-badge-ia {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--smart-primary), var(--smart-ia));
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 991.98px) {
    .module-tabs {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .module-tabs .nav-link {
        width: auto;
        flex: 1 1 auto;
        justify-content: center;
        padding: 0.6rem 0.9rem;
    }
}

.module-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--smart-primary-dark);
}

.module-lead {
    color: var(--smart-text-muted);
    margin-bottom: 1.25rem;
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.6rem 1.5rem;
}

.check-list li {
    position: relative;
    padding-left: 1.8rem;
}

.check-list li::before {
    content: "\F26B"; /* bi-check-circle-fill */
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 0.05rem;
    color: var(--smart-primary);
}

.footnote {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--smart-text-muted);
}

.footnote-mark {
    color: var(--smart-primary-light);
    font-weight: 700;
}

/* Lista em coluna única (painéis com imagem ao lado) */
.check-list-single {
    grid-template-columns: 1fr;
}

.solution-shot {
    max-height: 420px;
    width: auto;
    max-width: 100%;
    border-radius: 10px;
}

/* Placeholder e screenshots com moldura discreta */
.module-content .solution-shot {
    border: 1px solid var(--smart-border);
    box-shadow: 0 10px 26px rgba(8, 58, 99, 0.08);
}

/* Altura mínima para os painéis não "pularem" ao trocar de aba */
.module-content {
    min-height: 340px;
}

/* ============================================================
   Implantação (seção escura)
   ============================================================ */
.pillar-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
    text-align: center;
    transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.pillar-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.10);
    border-color: var(--smart-primary-light);
}

.pillar-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(74, 169, 247, 0.18);
    color: var(--smart-accent);
    font-size: 1.6rem;
}

.pillar-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.pillar-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.92rem;
    margin-bottom: 0;
}

/* O pillar-card nasceu para a seção escura (Implantação), onde ele é um véu
   branco translúcido. Em fundo claro isso vira um retângulo quase invisível,
   então a variante repinta fundo, borda e textos. */
.pillar-card-light {
    display: flex;
    flex-direction: column;
    background: var(--smart-background);
    border-color: var(--smart-border);
}

.pillar-card-light:hover {
    background: var(--smart-background);
    border-color: var(--smart-primary-light);
}

.pillar-card-light .pillar-title {
    color: var(--smart-text);
}

.pillar-card-light .pillar-text {
    color: var(--smart-text-muted);
}

/* empurra o link para a base para que os cards da fila terminem alinhados,
   mesmo com textos de tamanhos diferentes */
.pillar-link {
    margin-top: auto;
    padding-top: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--smart-primary);
    text-decoration: none;
}

.pillar-link:hover,
.pillar-link:focus {
    text-decoration: underline;
}

.pillar-link i {
    font-size: 0.8rem;
}

/* ============================================================
   Depoimentos
   ============================================================ */
/* Altura fixa do carrossel: por padrão o Bootstrap só renderiza o slide
   ativo, então a seção encolhe/estica conforme o depoimento. Aqui todos os
   slides ficam na MESMA célula de grid (sobrepostos), de modo que o
   contêiner sempre reserva a altura do slide mais alto. Os inativos ficam
   com visibility:hidden para não serem lidos por leitores de tela nem
   receberem foco. */
.testimonials-carousel .carousel-inner {
    display: grid;
}

.testimonials-carousel .carousel-item {
    display: block;
    grid-area: 1 / 1;
    visibility: hidden;
    /* O Bootstrap empilha os slides com float + margin-right:-100%. Em um
       contêiner grid o float é ignorado e a margem negativa desalinharia os
       slides durante a transição (um apareceria por cima do outro). O
       empilhamento aqui é feito pelo grid-area acima. */
    float: none;
    margin-right: 0;
}

.testimonials-carousel .carousel-item.active,
.testimonials-carousel .carousel-item-next,
.testimonials-carousel .carousel-item-prev {
    visibility: visible;
}

/* Como só o slide que entra é animado (ver abaixo), 600ms de esmaecimento
   deixariam a área quase vazia no começo. 250ms cobrem a troca sem isso. */
.testimonials-carousel .carousel-item {
    transition-duration: 0.25s;
}

/* O slide que sai some na hora, em vez do atraso de 600ms que o
   .carousel-fade usa para mantê-lo por baixo do que entra: empilhados na
   mesma célula do grid, os dois textos apareceriam sobrepostos. */
.testimonials-carousel .active.carousel-item-start,
.testimonials-carousel .active.carousel-item-end {
    transition: opacity 0s;
}

/* Slide com um depoimento só (cinco depoimentos em pares deixam o último
   sozinho): o cartão ganha a largura de dois, em vez de ficar estreito e
   solto no meio. Por :only-child, vale para qualquer quantidade futura. */
@media (min-width: 768px) {
    .testimonials-carousel .row > :only-child {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (min-width: 992px) {
    .testimonials-carousel .row > :only-child {
        width: 83.33333333%;
    }
}

.testimonial-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--smart-border);
    border-radius: 12px;
    padding: 2rem 1.75rem;
    margin: 0;
    box-shadow: 0 8px 24px rgba(8, 58, 99, 0.06);
}

.testimonial-quote {
    font-size: 2rem;
    color: var(--smart-primary-light);
    line-height: 1;
}

.testimonial-card blockquote {
    color: var(--smart-text-muted);
    font-size: 0.98rem;
    margin: 0.5rem 0 1.25rem;
}

/* Nome, cargo e empresa na mesma linha: empilhados em três, a assinatura
   pesava mais que a própria citação. Quem separa os três é a diferença de cor e
   peso, não um caractere: um ponto separador fica pendurado no começo da linha
   quando o cartão é estreito e o texto quebra. */
.testimonial-card figcaption {
    /* empurra a assinatura para a base: os cartões já têm a mesma altura (h-100),
       então as duas assinaturas passam a cair na mesma linha mesmo com citações
       de tamanhos diferentes */
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.85rem;
    row-gap: 0.1rem;
}

.testimonial-card figcaption strong {
    color: var(--smart-text);
}

.testimonial-card figcaption span {
    color: var(--smart-primary);
    font-size: 0.88rem;
    font-weight: 600;
}

/* A empresa fica depois do cargo, em tom neutro: o azul é do cargo, e dois
   azuis seguidos competem entre si. */
.testimonial-card figcaption .testimonial-empresa {
    color: var(--smart-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.carousel-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--smart-border);
    background: #fff;
    color: var(--smart-primary);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.carousel-nav-btn:hover,
.carousel-nav-btn:focus-visible {
    background: var(--smart-primary);
    color: #fff;
}

/* Indicadores (bolinhas) do carrossel de depoimentos */
.carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--smart-border);
    opacity: 1;
    border: 0;
    transition: background-color 0.2s ease;
}

.carousel-indicators .active {
    background: var(--smart-primary);
}

/* ============================================================
   Contato
   ============================================================ */
.contact-info {
    background: #fff;
    border: 1px solid var(--smart-border);
    border-radius: 12px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-info-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.contact-info-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--smart-primary-pale);
    color: var(--smart-primary);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-info-item h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.contact-info-item p {
    margin: 0;
    color: var(--smart-text-muted);
}

.contact-info-item a {
    color: var(--smart-text-muted);
    text-decoration: none;
}

.contact-info-item a:hover,
.contact-info-item a:focus {
    color: var(--smart-primary);
    text-decoration: underline;
}

.contact-form {
    background: #fff;
    border: 1px solid var(--smart-border);
    border-radius: 12px;
    padding: 1.75rem;
}

.contact-form .form-control,
.contact-form .form-select {
    border-color: var(--smart-border);
    padding: 0.65rem 0.9rem;
}

/* O select precisa de folga à direita para a seta não encostar no texto —
   sem isto ele também fica mais baixo que os inputs, porque herdaria só o
   padding padrão do Bootstrap. */
.contact-form .form-select {
    padding-right: 2.25rem;
}

.contact-form .form-control:focus,
.contact-form .form-select:focus {
    border-color: var(--smart-primary-light);
    box-shadow: 0 0 0 0.2rem rgba(0, 93, 170, 0.12);
}

.contact-form .form-label {
    font-weight: 600;
    font-size: 0.9rem;
}

/* Honeypot: fora da tela, invisível para pessoas */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.toast-container { z-index: 2000; }

/* ============================================================
   Rodapé
   ============================================================ */
.site-footer {
    background: var(--smart-primary-darker);
    color: rgba(255, 255, 255, 0.85);
}

/* Usa a versão da marca para fundo escuro (não precisa de filtro) */
.footer-logo {
    height: 37px;
    width: auto;
}

.footer-text { color: rgba(255, 255, 255, 0.7); }

.footer-nav .nav-link {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.footer-nav .nav-link:hover,
.footer-nav .nav-link:focus {
    color: #fff;
    text-decoration: underline;
}

.footer-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.footer-link:hover,
.footer-link:focus {
    color: #fff;
    text-decoration: underline;
}

.footer-copyright {
    background: rgba(0, 0, 0, 0.25);
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   Voltar ao topo
   ============================================================ */
/* Aviso de cookies. Fica no rodapé da janela, acima do botão de WhatsApp e do
   voltar-ao-topo, e some assim que a pessoa escolhe — não volta a aparecer. */
.cookie-aviso {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
    background: var(--smart-primary-darker);
    color: #fff;
    box-shadow: 0 -4px 18px rgba(4, 32, 56, 0.25);
}

.cookie-aviso[hidden] {
    display: none;
}

.cookie-aviso-texto {
    font-size: 0.9rem;
    max-width: 60ch;
}

.cookie-aviso-texto a {
    color: #fff;
    text-decoration: underline;
}

.cookie-aviso-acoes {
    display: flex;
    gap: 0.5rem;
    flex: none;
}

/* Enquanto o aviso está na tela, os botões flutuantes sobem para não ficarem
   escondidos atrás dele. */
body:has(.cookie-aviso:not([hidden])) .whatsapp-float,
body:has(.cookie-aviso:not([hidden])) .back-to-top {
    bottom: 90px;
}

/* Páginas de texto corrido (política de privacidade). A largura curta é
   deliberada: linha longa demais cansa a leitura. */
.pagina-texto h1 {
    font-size: clamp(1.8rem, 1.2rem + 2vw, 2.4rem);
    font-weight: 700;
    color: var(--smart-primary-dark);
}

.pagina-texto h2 {
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--smart-primary-dark);
}

.pagina-texto h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.pagina-texto p,
.pagina-texto li {
    line-height: 1.75;
}

.pagina-texto ul {
    margin-bottom: 1rem;
    padding-left: 1.2rem;
}

.pagina-texto li {
    margin-bottom: 0.35rem;
}

/* Botão flutuante de WhatsApp. Fica à ESQUERDA porque o canto direito já é
   do voltar-ao-topo; sobrepor os dois esconderia um deles no celular.
   O rótulo só aparece a partir de 576px — num telefone o círculo sozinho já
   é reconhecido e ocupa menos da tela. */
.whatsapp-float {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 48px;
    min-height: 48px;
    padding: 0 0.9rem;
    border-radius: 999px;
    background: #25D366;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(13, 110, 60, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float i {
    font-size: 1.35rem;
    line-height: 1;
}

.whatsapp-float:hover,
.whatsapp-float:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(13, 110, 60, 0.38);
}

@media (max-width: 575.98px) {
    .whatsapp-float {
        padding: 0;
        justify-content: center;
        width: 48px;
    }

    .whatsapp-float-texto {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-float {
        transition: none;
    }

    .whatsapp-float:hover,
    .whatsapp-float:focus {
        transform: none;
    }
}

.back-to-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1040;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 10px;
    background: var(--smart-primary);
    color: #fff;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(8, 58, 99, 0.30);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
    background: var(--smart-primary-dark);
    color: #fff;
}

/* ============================================================
   Acessibilidade — reduz animações quando solicitado
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================
   Responsividade fina
   ============================================================ */
@media (max-width: 991.98px) {
    .site-header .navbar-nav {
        padding: 0.75rem 0 0.5rem;
    }

    .hero {
        padding: 4rem 0 4.5rem;
    }
}

@media (max-width: 575.98px) {
    .section-padding {
        padding-top: 3.25rem;
        padding-bottom: 3.25rem;
    }

    .solutions-content {
        padding: 1.25rem;
    }

    .check-list {
        grid-template-columns: 1fr;
    }
}