@charset "UTF-8";

/* ===================================
   BSSF WEBSITE - LIGHT THEME (FIXO)
   Tema único do site: claro, sem toggle.
   Aplica-se incondicionalmente.
   =================================== */

/* ===================================================
   1. VARIÁVEIS — forçar tons claros para as seções
   que usam backgrounds escuros por variável.
   Obs.: `--bssf-gray-darkest/dark` são preservadas
   como tons escuros porque são usadas em CORES DE
   TEXTO (ex.: .nav-cta sobre laranja). Em vez disso,
   sobrescrevemos diretamente os seletores que as
   usam como BACKGROUND.
   =================================================== */
:root {
    --bssf-orange-glow: rgba(255, 107, 53, 0.2);

    /* Paleta semântica principal.
       IMPORTANTE: essas vars são usadas em muitos PHPs como COR DE TEXTO
       (ex.: `color: var(--bssf-gray-darkest)`). Por isso precisam ser ESCURAS.
       Quando usadas como BACKGROUND, sobrescrevemos os seletores específicos
       (tech-showcase-card, service-mixed-card, etc) para forçar fundos claros. */
    --bssf-gray-darkest: #1A1A1A; /* texto principal (preto quase puro) */
    --bssf-gray-dark:    #2D2D2D; /* texto forte */
    --bssf-gray-medium:  #6B6B6B; /* texto auxiliar */
    --bssf-gray-light:   #4A4A4A; /* texto secundário */
    --bssf-gray-lighter: #9B9B9B; /* texto muted/legendas */

    /* Paleta do body.indextest (css/index.css) — fundos claros */
    --bssf-gray-950: #FFFFFF;
    --bssf-gray-900: #F5F6F8;
    --bssf-gray-800: #EBEDF2;
    --bssf-gray-700: #DDE0E8;
    /* Tons usados em TEXTO — mantém escuros pra legibilidade */
    --bssf-gray-600: #4A4A4A;
    --bssf-gray-500: #6B6B6B;
    --bssf-gray-400: #4A4A4A;
    --bssf-gray-300: #6B6B6B;
    --bssf-gray-200: #1A1A1A;
    --bssf-gray-100: #1A1A1A;
}

/* ===================================================
   FALLBACK GENÉRICO — textos de títulos e parágrafos
   em páginas institucionais/serviços. Compensa o fato
   de --bssf-gray-darkest/dark agora serem CLAROS
   (antes eram escuros e usadas como cor de texto).
   =================================================== */
h1, h2, h3, h4, h5, h6 {
    color: #1A1A1A;
}

p, li, td, th {
    color: #3A3A3A;
}

/* Seções com backgrounds que eram escuros agora ficam claros
   (via redefinição da variável acima). Garantimos o contraste
   dos textos dentro delas. */
[class*="-section"] h1,
[class*="-section"] h2,
[class*="-section"] h3,
[class*="-section"] h4 {
    color: #1A1A1A;
}

[class*="-section"] p,
[class*="-section"] li,
[class*="-section"] .subtitle,
[class*="-section"] .description {
    color: #3A3A3A;
}

/* Exceções onde o fundo é colorido/gradiente e o texto deve
   permanecer branco (sobrescreve o fallback genérico). */
.results-section h1,
.results-section h2,
.results-section h3,
.results-section h4,
.results-section p,
.results-section li,
.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section p,
.hero-section li,
section[class*="final-cta"] .btn-primary,
.final-cta-section .btn-primary {
    color: #FFFFFF;
}

/* Links herdam cor; mantém inherit para não bagunçar */
a {
    color: inherit;
}

/* Nav-cta continua com cor própria (fundo escuro + texto branco,
   já definido abaixo com !important). */

/* ===================================================
   2. BODY
   =================================================== */
body {
    background: #F5F6F8;
    color: #1A1A1A;
}

/* ===================================================
   3. HEADER & NAVEGAÇÃO (fundo laranja da marca)
   Precisa bater a especificidade de body.indextest
   =================================================== */
.main-header,
body.indextest .main-header {
    background: var(--bssf-orange-primary) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 16px rgba(255, 107, 53, 0.25) !important;
}

.nav-list a,
body.indextest .nav-list a {
    color: #1A1A1A;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    line-height: 1.4;
    padding: 8px 14px !important;
}

.nav-list a:hover,
body.indextest .nav-list a:hover {
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.12);
}

.nav-list a.active,
.nav-list a.is-active,
body.indextest .nav-list a.is-active {
    color: #1A1A1A !important;
    font-weight: 700 !important;
    background: rgba(0, 0, 0, 0.15) !important;
    border-radius: 6px;
}

/* Remove o indicador ::after (linha decorativa absolute com bottom: -10px)
   que estava sobrepondo textos e bordas de elementos proximos */
.nav-list a.is-active::after,
.nav-list a.active::after,
body.indextest .nav-list a.is-active::after,
body.indextest .nav-list a.active::after {
    display: none !important;
    content: none !important;
    background: none !important;
    height: 0 !important;
}

/* .nav-cta (botão destacado no menu) — fundo escuro para contrastar com header laranja */
.nav-cta {
    background: #1A1A1A !important;
    color: #FFFFFF !important;
}

/* Fundo branco APENAS atrás da logo, sem alterar o tamanho da imagem.
   A logo mantém 50px de altura; a caixa branca cresce via padding. */
.navbar .logo {
    background: #FFFFFF;
    padding: 6px 14px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.navbar .logo a {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

/* Tamanho da logo preservado (não redimensiona com o container). */
.navbar .logo-img {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    width: auto !important;
}

/* Dropdown menus */
.dropdown-menu {
    background: #FFFFFF;
    border: 1px solid rgba(255, 107, 53, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    position: absolute;
    min-width: 240px;
    z-index: 1001;
}

/* Desabilita abertura por :hover — só abre via .active (clique) para evitar
   dropdown que nao recolhe ao tirar mouse */
.dropdown:hover > .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
}
.dropdown.active > .dropdown-menu,
.dropdown-submenu.active > .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
/* Submenu: permite abrir no hover do item pai quando o pai esta ativo */
.dropdown.active > .dropdown-menu .dropdown-submenu:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    color: #1A1A1A;
    white-space: nowrap;
    /* padding-top maior para dar respiro da faixa tricolor horizontal no topo;
       padding-right reserva espaco para o chevron dos submenus */
    padding: 10px 36px 10px 18px !important;
    position: relative;
    display: block;
    line-height: 1.4;
}

/* Primeiro item ganha mais respiro da faixa tricolor no topo */
.dropdown-menu > li:first-child > a {
    padding-top: 14px !important;
}

/* Hover mantem o mesmo padding para nao deslocar o texto */
.dropdown-menu a:hover {
    padding-left: 18px !important;
    background: var(--bssf-orange-primary) !important;
    color: #FFFFFF !important;
}

/* Submenu chevron: troca float por position absolute para nao sobrepor texto */
.dropdown-submenu > a::after {
    content: '›' !important;
    float: none !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 16px;
    line-height: 1;
    color: var(--bssf-orange-primary);
    font-weight: 700;
}

.dropdown-submenu > a:hover::after {
    color: #FFFFFF;
}

.dropdown-menu a:hover {
    background: var(--bssf-orange-primary);
    color: #FFFFFF;
}

/* ===================================================
   CORREÇÃO: submenus em cascata devem abrir APENAS
   no hover do próprio .dropdown-submenu, nunca no
   hover do dropdown pai (que estava disparando todos
   os submenus juntos).
   =================================================== */

/* 1) Só o filho direto do .dropdown abre — evita descer
      para os submenus internos. */
.dropdown:hover > .dropdown-menu,
.dropdown.active > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 2) Submenus permanecem fechados por padrão. */
.dropdown-submenu > .dropdown-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.25s ease !important;
}

/* 3) Só abrem quando o hover é DIRETAMENTE no submenu. */
.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu.active > .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* ===================================================
   3 FAIXAS COLORIDAS (vermelho/laranja/amarelo)
   no canto esquerdo de cada .dropdown-menu.
   Usa ::before posicionado sobre o padding existente
   do menu — NÃO altera padding/overflow do container,
   preservando o layout e os submenus em cascata.
   =================================================== */
/* Faixa tricolor (vermelho, laranja, amarelo) HORIZONTAL no topo do dropdown.
   Decoracao da marca BSSF sem interferir no texto dos itens. */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        #E63946 0%, #E63946 33.33%,
        #FF6B35 33.33%, #FF6B35 66.66%,
        #FFB703 66.66%, #FFB703 100%
    );
    pointer-events: none;
    z-index: 1;
    border-radius: 8px 8px 0 0;
    display: block !important;
}

/* Padding ja definido na regra principal com !important para respeitar as faixas */

.user-login-label {
    color: #6B6B6B;
}

.user-login-link {
    color: #1A1A1A;
}

/* ===================================================
   4. HERO SECTION — mantém overlay ESCURO original
   (melhor contraste texto/imagem do que branco)
   =================================================== */
.hero-section,
body.indextest .hero-section {
    background: #1A1A1A;
}

.hero-image,
body.indextest .hero-image {
    opacity: 0.55;
    mix-blend-mode: normal;
}

body.indextest .hero-overlay {
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.35) 60%,
        rgba(0, 0, 0, 0.65) 100%
    );
}

/* Textos do hero claros (fundo escuro) */
.hero-title,
body.indextest .hero-title {
    color: #FFFFFF !important;
}

.hero-subtitle,
body.indextest .hero-subtitle {
    color: rgba(255, 255, 255, 0.92) !important;
}

.hero-subtitle small {
    color: rgba(255, 255, 255, 0.75) !important;
}

.stat-label,
body.indextest .stat-label {
    color: rgba(255, 255, 255, 0.85) !important;
}

.stat-divider,
body.indextest .stat-divider {
    color: rgba(255, 255, 255, 0.35);
}

/* Scroll-indicator posicionado no rodape centralizado do hero-section
   (nao dentro do hero-content para nao sobrepor os botoes CTA) */
.hero-section {
    position: relative;
}

.scroll-indicator,
body.indextest .scroll-indicator {
    position: absolute !important;
    bottom: 24px !important;
    left: 50% !important;
    top: auto !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    color: #6B6B6B !important;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
    font-size: 13px;
    opacity: 0.85;
}

/* Garante que o scroll-indicator ancore na secao hero, nao no grid interno */
.hero-section > .scroll-indicator {
    bottom: 16px !important;
}

.video-caption,
body.indextest .video-caption {
    background: rgba(0, 0, 0, 0.7);
    color: #FFFFFF;
}

body.indextest .hero-video-preview {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ===================================================
   5. TECH SHOWCASE SECTION
   =================================================== */
.tech-showcase-section,
body.indextest .tech-showcase-section {
    background: #F0F2F8;
}

.showcase-card,
body.indextest .showcase-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F6F8 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.showcase-card:hover,
body.indextest .showcase-card:hover {
    border-color: rgba(255, 107, 53, 0.45);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08),
                0 10px 40px rgba(255, 107, 53, 0.15);
}

.showcase-content h3,
body.indextest .showcase-content h3 {
    color: #1A1A1A;
}

.showcase-content p,
body.indextest .showcase-content p {
    color: #4A4A4A;
}

body.indextest .tech-z-intro .tech-highlight {
    color: #4A4A4A;
}

/* ===================================================
   6. TECH SECTION (página /tecnologia) — hierarquia
   Usa seletor `section.tech-section` para MÁXIMA
   especificidade, vencendo as regras do home.css
   e institutional.css que também usam .tech-card.
   =================================================== */
section.tech-section,
.tech-section {
    background: #F5F6F8 !important;
    color: #1A1A1A !important;
    padding: clamp(60px, 7vw, 100px) 0 !important;
}

/* Título grande da seção (section-title light no h2) */
section.tech-section > .container > .section-title,
section.tech-section > .container > h2 {
    font-size: clamp(30px, 3.4vw, 48px) !important;
    font-weight: 900 !important;
    color: #1A1A1A !important;
    text-align: center !important;
    margin: 0 auto clamp(16px, 1.5vw, 24px) !important;
    letter-spacing: -0.02em;
    line-height: 1.15;
    max-width: 900px;
}

/* Intro da section */
section.tech-section .section-intro {
    text-align: center !important;
    color: #4A4A4A !important;
    font-size: clamp(15px, 1.25vw, 18px) !important;
    max-width: 720px !important;
    margin: 0 auto clamp(48px, 5vw, 80px) !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

/* ====== CATEGORIA (Hardware, Software, etc.) ====== */
section.tech-section .tech-category {
    margin: 0 auto clamp(40px, 5vw, 72px) !important;
    padding-top: clamp(24px, 3vw, 40px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    max-width: 1200px;
}

section.tech-section .tech-category:first-of-type {
    padding-top: 0;
    border-top: none;
}

section.tech-section .category-title {
    display: block !important;
    font-size: clamp(20px, 2vw, 26px) !important;
    font-weight: 800 !important;
    color: #1A1A1A !important;
    text-align: center !important;
    margin: 0 auto clamp(28px, 3vw, 44px) !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 18px;
    width: 100%;
    max-width: 700px;
}

section.tech-section .category-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #E63946 0%, #E63946 33.3%, #FF6B35 33.3%, #FF6B35 66.6%, #FFB703 66.6%, #FFB703 100%);
    margin: 14px auto 0;
    border-radius: 3px;
}

/* ====== GRID DOS CARDS ====== */
section.tech-section .tech-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)) !important;
    gap: clamp(20px, 2.2vw, 32px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100%;
    max-width: 1200px;
    align-items: stretch !important;
}

/* ====== CARD INDIVIDUAL ====== */
section.tech-section .tech-grid .tech-card {
    background: #FFFFFF !important;
    border: 1px solid #E4E7EC !important;
    border-radius: 16px !important;
    padding: clamp(24px, 2.4vw, 36px) !important;
    text-align: center !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    height: 100% !important;
    position: relative;
    overflow: hidden;
}

/* Faixa colorida decorativa no topo do card */
section.tech-section .tech-grid .tech-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #E63946 0%, #FF6B35 50%, #FFB703 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

section.tech-section .tech-grid .tech-card:hover {
    transform: translateY(-8px) !important;
    border-color: var(--bssf-orange-primary) !important;
    box-shadow: 0 20px 40px rgba(255, 107, 53, 0.12),
                0 8px 20px rgba(0, 0, 0, 0.05) !important;
}

section.tech-section .tech-grid .tech-card:hover::before {
    opacity: 1;
}

/* Ícone do card */
section.tech-section .tech-grid .tech-card .tech-icon {
    width: clamp(72px, 7vw, 100px) !important;
    height: clamp(72px, 7vw, 100px) !important;
    margin: 0 auto clamp(16px, 1.5vw, 24px) !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #FFF3ED 0%, #FFE8D8 100%) !important;
    padding: 0 !important;
    font-size: clamp(32px, 3.2vw, 44px) !important;
    flex-shrink: 0;
}

section.tech-section .tech-grid .tech-card .tech-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50%;
}

/* Título do card */
section.tech-section .tech-grid .tech-card .tech-title,
section.tech-section .tech-grid .tech-card h3 {
    font-size: clamp(17px, 1.35vw, 20px) !important;
    font-weight: 800 !important;
    color: #1A1A1A !important;
    margin: 0 0 clamp(10px, 1vw, 14px) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
    text-transform: none !important;
}

/* Descrição */
section.tech-section .tech-grid .tech-card .tech-description,
section.tech-section .tech-grid .tech-card > p {
    font-size: clamp(14px, 1vw, 15px) !important;
    color: #4A4A4A !important;
    line-height: 1.6 !important;
    margin: 0 0 clamp(18px, 1.8vw, 24px) !important;
    flex-grow: 0;
}

/* Features list */
section.tech-section .tech-grid .tech-card .tech-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto clamp(18px, 1.8vw, 24px) !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 280px;
    flex-grow: 1;
}

section.tech-section .tech-grid .tech-card .tech-features li {
    font-size: clamp(13px, 0.95vw, 14.5px) !important;
    color: #3A3A3A !important;
    padding: 8px 0 !important;
    line-height: 1.5 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    gap: 4px;
}

section.tech-section .tech-grid .tech-card .tech-features li:last-child {
    border-bottom: none;
}

/* Métrica destacada (badge laranja) */
section.tech-section .tech-grid .tech-card .tech-metric {
    font-size: clamp(15px, 1.1vw, 17px) !important;
    font-family: var(--font-mono) !important;
    font-weight: 800 !important;
    color: var(--bssf-orange-primary) !important;
    margin: 0 auto clamp(18px, 1.8vw, 24px) !important;
    padding: 8px 18px !important;
    background: rgba(255, 107, 53, 0.1) !important;
    border: 1px solid rgba(255, 107, 53, 0.18);
    border-radius: 999px !important;
    display: inline-block !important;
    letter-spacing: 0 !important;
    line-height: 1.2;
}

/* Botão do card (empurra pro fim) */
section.tech-section .tech-grid .tech-card .btn,
section.tech-section .tech-grid .tech-card .btn-ghost {
    margin-top: auto !important;
    border: 2px solid var(--bssf-orange-primary) !important;
    color: var(--bssf-orange-primary) !important;
    background: transparent !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
    border-radius: 8px !important;
    font-size: clamp(13px, 1vw, 15px) !important;
    transition: all 0.25s ease !important;
    text-transform: none;
    letter-spacing: 0.01em;
    box-shadow: none !important;
}

section.tech-section .tech-grid .tech-card .btn:hover,
section.tech-section .tech-grid .tech-card .btn-ghost:hover {
    background: var(--bssf-orange-primary) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3) !important;
}

/* Card "coming soon" */
section.tech-section .tech-grid .tech-card.coming-soon {
    opacity: 0.75;
    border-style: dashed !important;
    background: #FAFBFC !important;
}

/* ===================================================
   7. PROBLEM/SOLUTION, MODEL, BEYOND, TARGET, FAQ
   =================================================== */
.problem-solution-section,
.target-section {
    background: #F5F6F8;
}

.comparison-card,
.target-card {
    background: #FFFFFF;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.solution-card {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.04) 0%, rgba(255, 139, 97, 0.04) 100%);
}

.model-section,
.beyond-section,
.faq-section {
    background: #FFFFFF;
}

.table-row {
    background: #F5F6F8;
}

.beyond-card {
    background: #F5F6F8;
    border: 2px solid #DDE0E8;
}

.before-after {
    background: #EBEDF2;
}

.card-tagline,
.target-card li,
.process-list li,
.faq-question {
    color: #1A1A1A;
}

.card-description,
.faq-answer p {
    color: #4A4A4A;
}

.faq-item {
    background: #F5F6F8;
    border: 1px solid #DDE0E8;
}

/* ===================================================
   8. SUSTAINABILITY SECTION
   =================================================== */
.sustainability-section {
    background: #F0F4F0;
}

.sustainability-card,
.sustainability-process {
    background: #FFFFFF;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* ===================================================
   9. FINAL CTA SECTION
   =================================================== */
.final-cta-section {
    background: linear-gradient(135deg, #FFF3ED 0%, #FFE8D8 100%);
    color: #1A1A1A;
}

.final-cta-section h2,
.final-cta-section h3 {
    color: #1A1A1A;
}

.final-cta-section p {
    color: #4A4A4A;
}

.qualification-form {
    background: #FFFFFF;
    box-shadow: 0 8px 40px rgba(255, 107, 53, 0.15);
}

.form-label {
    color: #1A1A1A;
}

.form-input,
.form-select {
    background: #FFFFFF;
    border: 2px solid #DDE0E8;
    color: #1A1A1A;
}

.form-input:focus,
.form-select:focus {
    border-color: var(--bssf-orange-primary);
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.15);
}

.option-card {
    background: #F5F6F8;
    border: 2px solid #DDE0E8;
}

.form-promise {
    color: #6B6B6B;
}

/* ===================================================
   10. FOOTER
   =================================================== */
.main-footer,
body.indextest .main-footer {
    background: #EBEDF2;
    color: #4A4A4A;
    border-top: 1px solid #DDE0E8;
}

.footer-col h4,
body.indextest .footer-col h4 {
    color: #1A1A1A;
}

.footer-links a,
.footer-tagline,
.footer-legal a,
body.indextest .footer-links a,
body.indextest .footer-tagline,
body.indextest .footer-legal a {
    color: #4A4A4A;
}

.footer-links a:hover,
.footer-legal a:hover,
body.indextest .footer-links a:hover,
body.indextest .footer-legal a:hover {
    color: var(--bssf-orange-primary);
}

.footer-bottom,
body.indextest .footer-bottom {
    border-top: 1px solid #D0D3DC;
    color: #6B6B6B;
}

body.indextest .social-link {
    background: #DDE0E8;
}

body.indextest .social-link:hover {
    background: var(--bssf-orange-primary);
}

/* ===================================================
   11. .bg-dark → cinza claro (override geral)
   =================================================== */
.bg-dark {
    background: #EBEDF2 !important;
    color: #1A1A1A;
}

.bg-dark .section-title,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4 {
    color: #1A1A1A;
}

.bg-dark p {
    color: #4A4A4A;
}

.institutional-section.bg-dark {
    background: #F0F2F8 !important;
}

.institutional-section.bg-dark h2,
.institutional-section.bg-dark h3,
.institutional-section.bg-dark h4 {
    color: #1A1A1A;
}

.institutional-section.bg-dark p,
.institutional-section.bg-dark .section-subtitle,
.institutional-section[style*="#1a1a1a"] .section-subtitle {
    color: #4A4A4A !important;
}

/* ===================================================
   12. SECTION-SUBTITLE (legibilidade)
   =================================================== */
.section-subtitle,
.section-subtitle-f {
    color: #4A4A4A !important;
    opacity: 1 !important;
}

/* ===================================================
   13. SECTION TITLES GENÉRICOS
   =================================================== */
section h2,
section h3 {
    color: #1A1A1A;
}

/* CORREÇÃO CRÍTICA: .section-title.light
   Essa classe forçava texto branco em vários <h2> que agora
   estão sobre fundos claros — invertemos para texto escuro. */
.section-title.light {
    color: #1A1A1A;
}

.section-title.light .highlight {
    color: var(--bssf-orange-primary);
}

/* ===================================================
   18. PAGE-HERO (institucional: sobre-nos, tecnologia,
   corporativo, como-funciona, cultura, valores, talentos,
   contato, investidores, resultados, sustentabilidade,
   nossas-empresas, servicos-*, termos, politica)
   ---------------------------------------------------
   Mantém fundo ESCURO (gradiente preto→cinza-escuro)
   para contraste com textos claros do hero.
   =================================================== */
.page-hero {
    background: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%) !important;
    color: #FFFFFF !important;
    position: relative;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 40%;
    height: 100%;
    background: radial-gradient(circle at 100% 50%, rgba(255, 107, 53, 0.18), transparent 60%);
    pointer-events: none;
}

.page-hero .hero-title,
.page-hero h1,
.page-hero h2 {
    color: #FFFFFF !important;
}

.page-hero .hero-subtitle,
.page-hero .hero-description,
.page-hero p {
    color: rgba(255, 255, 255, 0.88) !important;
}

.page-hero .hero-title .highlight,
.page-hero h1 .highlight {
    color: var(--bssf-orange-primary) !important;
}

.page-hero .hero-badge,
.page-hero .section-label {
    background: rgba(255, 107, 53, 0.18);
    color: var(--bssf-orange-primary) !important;
    padding: 6px 14px;
    border-radius: 999px;
    display: inline-block;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: clamp(11px, 0.8vw, 13px);
    border: 1px solid rgba(255, 107, 53, 0.3);
}

/* Botões dentro do page-hero */
.page-hero .btn-primary {
    color: #FFFFFF !important;
}

.page-hero .btn-secondary {
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #FFFFFF !important;
    background: transparent !important;
}

.page-hero .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #FFFFFF !important;
}

/* ===================================================
   19. TECH-SHOWCASE (home.php) — cards com hierarquia
   REPLICA o padrao visual de /tecnologia (harmonioso),
   adaptado ao formato do home (card com imagem grande
   em cima + conteudo embaixo).
   =================================================== */

/* Section wrapper — respiro consistente com /tecnologia */
body.indextest .tech-showcase-section {
    padding: clamp(64px, 7vw, 100px) 0 !important;
}

/* ==============================================
   LAYOUT LADO A LADO ASSIMETRICO (2026)
   INTRO a ESQUERDA  +  GRID DE CARDS a DIREITA.
   Cards dentro do grid tem tamanhos variaveis
   (estilo bento), mas conteudo DENTRO de cada card
   fica CENTRALIZADO (imagem e texto).
   =============================================== */
body.indextest .tech-z {
    display: grid !important;
    grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr) !important;
    gap: clamp(32px, 3.5vw, 56px) !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
    align-items: start !important;
}

/* Mobile/tablet: empilha intro em cima, grid embaixo */
@media (max-width: 960px) {
    body.indextest .tech-z {
        grid-template-columns: 1fr !important;
        gap: clamp(32px, 4vw, 48px) !important;
    }
}

/* Intro na coluna esquerda: STICKY FLUTUANTE grudando ABAIXO do header
   (72px header + 24px de respiro). Com top:96px o sticky so ativa quando
   a intro chega a 96px do viewport — nesse momento o hero (que fica acima
   da section tech) ja saiu do viewport, entao a intro NUNCA aparece sobre
   o hero. Em mobile, vira fluxo normal (static). */
body.indextest .tech-z-intro {
    text-align: center !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: sticky !important;
    top: calc(72px + 24px) !important;
    transform: none !important;
}

@media (max-width: 960px) {
    body.indextest .tech-z-intro {
        position: static !important;
        top: auto !important;
        transform: none !important;
    }
}

/* Label pill laranja com bordas arredondadas. Barra tricolor fica ABAIXO
   do pill (fora do fluxo via position: absolute) e centralizada, nao mais
   dentro do pill no canto inferior esquerdo. */
body.indextest .tech-z-intro .section-label {
    display: inline-block !important;
    font-size: clamp(12px, 0.9vw, 13px) !important;
    font-weight: 800 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: #CC4E1F !important;
    margin: 0 0 clamp(32px, 3vw, 44px) !important;
    padding: 8px 18px !important;
    border-radius: 999px !important;
    position: relative !important;
    text-align: center !important;
}

body.indextest .tech-z-intro .section-label::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: calc(100% + 14px) !important;
    bottom: auto !important;
    width: 60px !important;
    height: 3px !important;
    background: linear-gradient(90deg, #E63946 0%, #E63946 33.3%, #FF6B35 33.3%, #FF6B35 66.6%, #FFB703 66.6%, #FFB703 100%) !important;
    border-radius: 2px !important;
}

/* Titulo grande centralizado (coluna esquerda agora centered) */
body.indextest .tech-z-intro .section-title,
body.indextest .tech-z-intro h2 {
    font-size: clamp(32px, 3.6vw, 52px) !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    color: #1A1A1A !important;
    margin: 0 auto clamp(22px, 2.2vw, 32px) !important;
    text-align: center !important;
    max-width: 680px !important;
}

/* Subtitulo centralizado */
body.indextest .tech-z-intro .section-subtitle {
    font-size: clamp(15px, 1.25vw, 18px) !important;
    line-height: 1.6 !important;
    color: #4A4A4A !important;
    margin: 0 auto clamp(36px, 3.4vw, 48px) !important;
    font-weight: 400 !important;
    text-align: center !important;
    max-width: 620px !important;
}

/* CTA horizontal centralizado */
body.indextest .tech-z-intro .tech-cta {
    text-align: center !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(18px, 1.8vw, 26px) !important;
    margin: 0 auto !important;
}

body.indextest .tech-z-intro .tech-highlight {
    font-size: clamp(13px, 1vw, 15px) !important;
    color: var(--bssf-orange-primary) !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 10px 18px !important;
    background: rgba(255, 107, 53, 0.08) !important;
    border-radius: 999px !important;
    display: inline-block !important;
    border-left: none !important;
    text-align: center !important;
}

/* Container do grid (coluna direita) */
body.indextest .tech-z-grid {
    width: 100% !important;
    margin: 0 !important;
    position: static !important;
}

/* GRID ASSIMETRICO DE 6 CARDS em 6 colunas internas.
   Cards tem spans diferentes para criar composicao visual
   assimetrica mas harmonica, mantendo alinhamento. */
body.indextest .tech-z-grid .tech-showcase-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    grid-auto-rows: minmax(220px, auto) !important;
    gap: clamp(14px, 1.2vw, 20px) !important;
    align-items: stretch !important;
    margin: 0 !important;
    max-width: none !important;
}

/* Distribuicao assimetrica (desktop > 960px dentro da coluna direita).
   Linhas 1 e 3 balanceadas (3+3). Linha 2 mantem a assimetria (2+4). */
@media (min-width: 961px) {
    /* Linha 1: 3+3 cols (balanceado) */
    body.indextest .tech-z-grid .tech-showcase-grid > .showcase-card:nth-child(1) {
        grid-column: span 3 !important;
    }
    body.indextest .tech-z-grid .tech-showcase-grid > .showcase-card:nth-child(2) {
        grid-column: span 3 !important;
    }
    /* Linha 2: ASSIMETRICA (2+4 cols) — cria ritmo visual */
    body.indextest .tech-z-grid .tech-showcase-grid > .showcase-card:nth-child(3) {
        grid-column: span 2 !important;
    }
    body.indextest .tech-z-grid .tech-showcase-grid > .showcase-card:nth-child(4) {
        grid-column: span 4 !important;
    }
    /* Linha 3: 3+3 cols (balanceado) */
    body.indextest .tech-z-grid .tech-showcase-grid > .showcase-card:nth-child(5) {
        grid-column: span 3 !important;
    }
    body.indextest .tech-z-grid .tech-showcase-grid > .showcase-card:nth-child(6) {
        grid-column: span 3 !important;
    }
}

/* Tablet (641-960px): 2 colunas uniformes */
@media (min-width: 641px) and (max-width: 960px) {
    body.indextest .tech-z-grid .tech-showcase-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    body.indextest .tech-z-grid .tech-showcase-grid > .showcase-card {
        grid-column: span 1 !important;
    }
}

/* Mobile: 1 coluna */
@media (max-width: 640px) {
    body.indextest .tech-z-grid .tech-showcase-grid {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
    }
    body.indextest .tech-z-grid .tech-showcase-grid > .showcase-card {
        grid-column: span 1 !important;
    }
}

/* ========== DENTRO DOS CARDS: TUDO CENTRALIZADO ========== */
/* Forcar texto e conteudo centralizados em TODOS os cards */
body.indextest .showcase-card {
    text-align: center !important;
}

body.indextest .showcase-content {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
}

body.indextest .showcase-content h3 {
    text-align: center !important;
    width: 100%;
}

body.indextest .showcase-content p {
    text-align: center !important;
    width: 100%;
    max-width: 400px;
    margin: 0 auto !important;
}
.tech-showcase-section {
    background: #F0F2F8 !important;
}

/* Card individual — background, borda, shadow, elevacao no hover */
.tech-showcase-section .showcase-card,
body.indextest .showcase-card {
    background: #FFFFFF !important;
    border: 1px solid #E4E7EC !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
}

/* Faixa tricolor decorativa no topo do card (aparece no hover) */
.tech-showcase-section .showcase-card::before,
body.indextest .showcase-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #E63946 0%, #FF6B35 50%, #FFB703 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.tech-showcase-section .showcase-card:hover,
body.indextest .showcase-card:hover {
    transform: translateY(-8px);
    border-color: var(--bssf-orange-primary) !important;
    box-shadow: 0 20px 40px rgba(255, 107, 53, 0.12),
                0 8px 20px rgba(0, 0, 0, 0.05) !important;
}

.tech-showcase-section .showcase-card:hover::before,
body.indextest .showcase-card:hover::before {
    opacity: 1;
}

/* Imagem do card — altura fixa, object-fit cover, efeito zoom no hover */
.tech-showcase-section .showcase-image,
body.indextest .showcase-image {
    overflow: hidden !important;
    height: clamp(180px, 18vw, 240px) !important;
    position: relative !important;
    background: linear-gradient(135deg, #FFF3ED 0%, #FFE8D8 100%) !important;
    flex-shrink: 0;
}

.tech-showcase-section .showcase-image img,
.tech-showcase-section .showcase-image video,
body.indextest .showcase-image img,
body.indextest .showcase-image video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.tech-showcase-section .showcase-card:hover .showcase-image img,
.tech-showcase-section .showcase-card:hover .showcase-image video,
body.indextest .showcase-card:hover .showcase-image img,
body.indextest .showcase-card:hover .showcase-image video {
    transform: scale(1.06) !important;
}

/* Conteudo do card — padding, flex para alinhar textos */
.tech-showcase-section .showcase-content,
body.indextest .showcase-content {
    padding: clamp(18px, 2vw, 26px) !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1;
}

/* Titulo do card — peso 800, letter-spacing tight, transicao de cor no hover */
.tech-showcase-section .showcase-content h3,
body.indextest .showcase-content h3 {
    font-size: clamp(16px, 1.3vw, 19px) !important;
    font-weight: 800 !important;
    color: #1A1A1A !important;
    margin: 0 0 clamp(8px, 0.8vw, 12px) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    transition: color 0.25s ease;
}

.tech-showcase-section .showcase-card:hover .showcase-content h3,
body.indextest .showcase-card:hover .showcase-content h3 {
    color: var(--bssf-orange-primary) !important;
}

/* Descricao do card — legibilidade, line-height confortavel */
.tech-showcase-section .showcase-content p,
body.indextest .showcase-content p {
    font-size: clamp(13px, 1vw, 15px) !important;
    color: #4A4A4A !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    flex: 1;
}

/* ===================================================
   20. TECH-SECTION (genérico, sem prefixo section.)
   Cobre home.php e outras páginas que usam .tech-section
   sem ser a /tecnologia (já coberta na seção 6).
   =================================================== */
.tech-section:not(section.tech-section) {
    background: #F5F6F8 !important;
    color: #1A1A1A !important;
}

.tech-section .tech-card:not(section.tech-section .tech-card) {
    background: #FFFFFF !important;
    border: 1px solid #E4E7EC !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.tech-section .tech-title,
.tech-section .tech-card h3 {
    color: #1A1A1A !important;
}

.tech-section .tech-description,
.tech-section .tech-card p {
    color: #4A4A4A !important;
}

/* ===================================================
   21. SIDEBAR CARDS (contato.php e outras com sidebar)
   =================================================== */
.sidebar-card {
    background: #FFFFFF !important;
    color: #1A1A1A !important;
    border: 1px solid #E4E7EC !important;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.sidebar-card__title,
.sidebar-card h3,
.sidebar-card h4 {
    color: #1A1A1A !important;
}

.sidebar-card__text,
.sidebar-card p,
.sidebar-card li {
    color: #4A4A4A !important;
}

/* Variantes coloridas do sidebar (mantêm texto branco sobre fundos colorados) */
.sidebar-card--cta,
.sidebar-card--results {
    background: linear-gradient(135deg, var(--bssf-orange-primary) 0%, var(--bssf-red-accent) 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
}

.sidebar-card--cta .sidebar-card__title,
.sidebar-card--results .sidebar-card__title,
.sidebar-card--cta h3,
.sidebar-card--results h3,
.sidebar-card--cta h4,
.sidebar-card--results h4,
.sidebar-card--cta p,
.sidebar-card--results p,
.sidebar-card--cta li,
.sidebar-card--results li {
    color: #FFFFFF !important;
}

/* ===================================================
   22. PILLAR/BEYOND/FEATURE/BENEFIT CARDS
   Genéricos usados em várias páginas institucionais
   =================================================== */
.pillar-card,
.beyond-service-card,
.beyond-card,
.feature-card,
.benefit-card,
.info-card,
.service-card,
.value-card {
    background: #FFFFFF !important;
    color: #1A1A1A !important;
    border: 1px solid #E4E7EC !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    padding: clamp(20px, 2vw, 32px);
    transition: all 0.3s ease;
}

.pillar-card:hover,
.beyond-service-card:hover,
.beyond-card:hover,
.feature-card:hover,
.benefit-card:hover,
.info-card:hover,
.service-card:hover,
.value-card:hover {
    transform: translateY(-4px);
    border-color: var(--bssf-orange-primary) !important;
    box-shadow: 0 12px 32px rgba(255, 107, 53, 0.12),
                0 4px 12px rgba(0, 0, 0, 0.04);
}

.pillar-card h3, .pillar-card h4,
.beyond-service-card h3, .beyond-service-card h4,
.beyond-card h3, .beyond-card h4,
.feature-card h3, .feature-card h4,
.benefit-card h3, .benefit-card h4,
.info-card h3, .info-card h4,
.service-card h3, .service-card h4,
.value-card h3, .value-card h4 {
    color: #1A1A1A !important;
    font-weight: 800 !important;
}

.pillar-card p, .pillar-card li,
.beyond-service-card p, .beyond-service-card li,
.beyond-card p, .beyond-card li,
.feature-card p, .feature-card li,
.benefit-card p, .benefit-card li,
.info-card p, .info-card li,
.service-card p, .service-card li,
.value-card p, .value-card li {
    color: #4A4A4A !important;
    line-height: 1.6 !important;
}

/* ===================================================
   23. FALLBACK DEFENSIVO — classes que tipicamente
   eram texto branco em fundos escuros e agora estão
   em fundos claros. Garantem legibilidade mínima.
   =================================================== */

/* Qualquer h1/h2/h3/h4 DIRETO em .container interno
   a seções com fundo claro fica escuro. */
section:not(.hero-section):not(.results-section):not(.final-cta-section):not(.page-hero):not([class*="orange"]):not([class*="gradient"]) > .container > h1,
section:not(.hero-section):not(.results-section):not(.final-cta-section):not(.page-hero):not([class*="orange"]):not([class*="gradient"]) > .container > h2,
section:not(.hero-section):not(.results-section):not(.final-cta-section):not(.page-hero):not([class*="orange"]):not([class*="gradient"]) > .container > h3 {
    color: #1A1A1A;
}

/* Labels/taglines com fundo semi-laranja */
.differential-badge,
.tech-badge,
.info-badge {
    background: rgba(255, 107, 53, 0.12);
    color: var(--bssf-orange-primary) !important;
    border: 1px solid rgba(255, 107, 53, 0.25);
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 700;
    font-size: clamp(12px, 0.9vw, 14px);
    display: inline-block;
}

/* Ícones/emojis grandes em cards — margem padrão */
.pillar-card .icon,
.feature-card .icon,
.benefit-card .icon,
.info-card .icon,
.service-card .icon,
.value-card .icon {
    font-size: clamp(32px, 3.5vw, 48px);
    margin-bottom: 16px;
    display: inline-block;
}

/* Seções com .bg-dark — mantém claro (já tem regra, reforço) */
section.bg-dark > .container > h1,
section.bg-dark > .container > h2,
section.bg-dark > .container > h3 {
    color: #1A1A1A !important;
}

/* ===================================================
   24. CARDS ESPECÍFICOS — páginas de serviços
   (shopping-malls, lajes, predios, condominios)
   =================================================== */

/* Cards que ORIGINALMENTE usavam background: var(--bssf-gray-dark/darkest)
   — esses precisam ser forçados a branco pra não ficarem escuros.
   NAO incluir cards com design proprio (bento, masonry, floating, etc). */
.tech-showcase-card,
.tech-feature,
.result-big-card,
.number-card,
.org-legend-box,
.service-mixed-card,
.challenge-solution-card {
    background: #FFFFFF !important;
    color: #1A1A1A !important;
    border: 1px solid #E4E7EC !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: all 0.3s ease !important;
}

.tech-showcase-card:hover,
.tech-feature:hover,
.result-big-card:hover,
.number-card:hover,
.challenge-solution-card:hover,
.service-mixed-card:hover {
    transform: translateY(-4px);
    border-color: var(--bssf-orange-primary) !important;
    box-shadow: 0 12px 32px rgba(255, 107, 53, 0.12),
                0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

/* EXCECAO CONTEXTUAL: cards dentro de .bg-gradient-orange (secao colorida CTA)
   mantem design translucido sobre laranja com texto branco.
   Aplicavel a: .result-big-card em /servicos-* (seção "Performance") e similares. */
.bg-gradient-orange .result-big-card,
.bg-gradient-orange .number-card,
.bg-gradient-orange .tech-showcase-card,
.bg-gradient-orange .tech-feature,
.institutional-section.bg-gradient-orange .result-big-card,
.institutional-section.bg-gradient-orange .number-card {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #FFFFFF !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
}

.bg-gradient-orange .result-big-card :is(h1, h2, h3, h4, h5),
.bg-gradient-orange .result-big-card :is(.result-number, .result-label, .result-context),
.bg-gradient-orange .result-big-card :is(p, li, span),
.bg-gradient-orange .number-card :is(h1, h2, h3, h4, h5),
.bg-gradient-orange .number-card :is(.number-value, .number-label),
.bg-gradient-orange .number-card :is(p, li, span),
.institutional-section.bg-gradient-orange .result-big-card :is(h1, h2, h3, h4, h5, p, li, span),
.institutional-section.bg-gradient-orange .number-card :is(h1, h2, h3, h4, h5, p, li, span) {
    color: #FFFFFF !important;
}

.bg-gradient-orange .result-big-card:hover,
.bg-gradient-orange .number-card:hover,
.institutional-section.bg-gradient-orange .result-big-card:hover,
.institutional-section.bg-gradient-orange .number-card:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: #FFFFFF !important;
    transform: translateY(-4px);
}

/* Textos dentro dos cards que foram forçados a branco — devem ser escuros.
   NAO inclui cards com design proprio (bento, masonry, floating) que tem
   seu proprio controle de cor via CSS inline ou regras especificas. */
.tech-showcase-card :is(h1, h2, h3, h4, h5),
.tech-feature :is(h1, h2, h3, h4, h5),
.result-big-card :is(h1, h2, h3, h4, h5),
.number-card :is(h1, h2, h3, h4, h5),
.challenge-solution-card :is(h1, h2, h3, h4, h5),
.service-mixed-card :is(h1, h2, h3, h4, h5) {
    color: #1A1A1A !important;
    font-weight: 800;
}

.tech-showcase-card :is(p, li),
.tech-feature :is(p, li),
.result-big-card :is(p, li, .result-desc),
.number-card :is(p, li, .number-label),
.challenge-solution-card :is(p, li),
.service-mixed-card :is(p, li) {
    color: #4A4A4A !important;
    line-height: 1.6;
}

/* Números destacados → laranja */
.number-value,
.number-card .number-value,
.result-big-card .result-value,
.result-value,
.metric-value,
.hero-stat .stat-value,
.hero-f-stat .stat-value,
.stat-value,
.service-number {
    color: var(--bssf-orange-primary) !important;
    font-weight: 800 !important;
}

.hero-stat .stat-label,
.hero-f-stat .stat-label,
.stat-label,
.stat-text {
    color: #4A4A4A !important;
}

/* Ícones grandes dentro de cards — mantém cor do elemento, só garante visibilidade */
.service-icon,
.service-icon-large,
.feature-icon,
.feature-icon-large,
.differential-card__icon,
.story-icon-box {
    color: var(--bssf-orange-primary);
}

/* ===================================================
   25. TIMELINE Z (sobre-nos.php)
   =================================================== */
.timeline-z-section {
    background: #FFFFFF !important;
}

.timeline-z-content {
    background: #F5F6F8 !important;
    border: 1px solid #E4E7EC !important;
    color: #1A1A1A !important;
    border-radius: 14px;
    padding: clamp(20px, 2vw, 32px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

.timeline-z-year-bg,
.timeline-z-year-giant,
.timeline-z-year-side {
    color: rgba(255, 107, 53, 0.15) !important;
    font-weight: 900;
}

.timeline-z-title {
    color: #1A1A1A !important;
    font-weight: 800;
}

.timeline-z-text {
    color: #4A4A4A !important;
    line-height: 1.6;
}

/* ===================================================
   26. HEADER COMANDMENTS / STORY (cultura, valores)
   =================================================== */
.commandment-card {
    padding: clamp(20px, 2vw, 32px) !important;
    text-align: center;
}

.story-quote-box {
    background: #FFFFFF !important;
    color: #1A1A1A !important;
    border-left: 4px solid var(--bssf-orange-primary);
    border-radius: 0 12px 12px 0;
    padding: clamp(18px, 2vw, 28px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

.story-value-label {
    color: var(--bssf-orange-primary) !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    font-size: clamp(11px, 0.85vw, 13px);
}

/* ===================================================
   27. DIFERENTIAL CARD (contato) — estrutura BEM
   =================================================== */
.differential-card__title {
    color: #1A1A1A !important;
    font-weight: 800 !important;
}

.differential-card__text {
    color: #4A4A4A !important;
}

.differential-card__icon {
    color: var(--bssf-orange-primary);
    font-size: clamp(28px, 2.8vw, 36px);
}

/* ===================================================
   28. INCLUDED-SERVICE / PLATFORM-FEATURE / TECH-FEATURE
   (listas em páginas de serviço)
   =================================================== */
.included-service,
.platform-feature {
    background: #FFFFFF !important;
    color: #1A1A1A !important;
    border: 1px solid #E4E7EC !important;
    border-radius: 10px;
    padding: clamp(14px, 1.5vw, 20px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.included-service h4,
.platform-feature h4 {
    color: #1A1A1A !important;
}

.included-service p,
.platform-feature p {
    color: #4A4A4A !important;
}

/* ===================================================
   29. SIDEBAR CARD VARIANTS
   (contato.php — BEM structure)
   =================================================== */
.sidebar-card__list-item {
    color: #1A1A1A !important;
}

.sidebar-card__list-icon {
    color: var(--bssf-orange-primary);
}

.sidebar-card__list-text {
    color: #4A4A4A !important;
}

/* Variante colorida com image background — texto branco */
.sidebar-card--image,
.sidebar-card--why {
    background: #FFFFFF !important;
}

.sidebar-card--image .sidebar-card__title,
.sidebar-card--why .sidebar-card__title {
    color: #1A1A1A !important;
}

/* ===================================================
   30. SEÇÕES COM FUNDO COLORIDO (gradient/laranja)
   ---------------------------------------------------
   Essas seções MANTÊM texto branco. Exceção a todos
   os overrides anteriores.
   Usado em corporativo, investidores, resultados etc.
   =================================================== */

.bg-gradient-orange,
.bg-cta,
.institutional-section.bg-gradient-orange,
.institutional-section.bg-cta {
    background: linear-gradient(135deg, var(--bssf-orange-primary) 0%, var(--bssf-red-accent) 100%) !important;
    color: #FFFFFF !important;
}

/* Títulos em seções coloridas — SEMPRE brancos */
.bg-gradient-orange h1,
.bg-gradient-orange h2,
.bg-gradient-orange h3,
.bg-gradient-orange h4,
.bg-gradient-orange .section-title,
.bg-gradient-orange .section-title.light,
.bg-cta h1,
.bg-cta h2,
.bg-cta h3,
.bg-cta h4,
.bg-cta .section-title,
.bg-cta .section-title.light {
    color: #FFFFFF !important;
}

/* Highlights em títulos coloridos — amarelo para destaque */
.bg-gradient-orange h1 .highlight,
.bg-gradient-orange h2 .highlight,
.bg-gradient-orange .section-title .highlight,
.bg-cta h1 .highlight,
.bg-cta h2 .highlight,
.bg-cta .section-title .highlight {
    color: var(--bssf-yellow-accent) !important;
}

/* Subtítulos em seções coloridas — branco 90% */
.bg-gradient-orange p,
.bg-gradient-orange .section-subtitle,
.bg-gradient-orange .section-subtitle.light,
.bg-gradient-orange .section-description,
.bg-cta p,
.bg-cta .section-subtitle,
.bg-cta .section-subtitle.light,
.bg-cta .section-description {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Section-label em fundos coloridos — amarelo */
.bg-gradient-orange .section-label,
.bg-cta .section-label {
    color: var(--bssf-yellow-accent) !important;
}

/* Number-card dentro de seções coloridas — volta ao efeito vidro fosco */
.bg-gradient-orange .number-card,
.bg-cta .number-card {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: none !important;
}

.bg-gradient-orange .number-card:hover,
.bg-cta .number-card:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important;
}

/* Textos dentro de number-card colorido — branco */
.bg-gradient-orange .number-card .number-value,
.bg-gradient-orange .number-card .number,
.bg-gradient-orange .number-card .number-label,
.bg-gradient-orange .number-card .number-detail,
.bg-gradient-orange .number-card .label,
.bg-gradient-orange .number-card p,
.bg-gradient-orange .number-card h3,
.bg-gradient-orange .number-card h4,
.bg-cta .number-card .number-value,
.bg-cta .number-card .number,
.bg-cta .number-card .number-label,
.bg-cta .number-card .number-detail,
.bg-cta .number-card .label,
.bg-cta .number-card p,
.bg-cta .number-card h3,
.bg-cta .number-card h4 {
    color: #FFFFFF !important;
}

/* Números grandes em fundo colorido — amarelo (destaque) */
.bg-gradient-orange .number-card .number-value,
.bg-gradient-orange .number-card .number,
.bg-gradient-orange .number-value,
.bg-cta .number-card .number-value,
.bg-cta .number-card .number,
.bg-cta .number-value {
    color: var(--bssf-yellow-accent) !important;
    font-weight: 900 !important;
}

/* Botões dentro de seções coloridas */
.bg-gradient-orange .btn-primary,
.bg-cta .btn-primary {
    background: #FFFFFF !important;
    color: var(--bssf-orange-primary) !important;
}

.bg-gradient-orange .btn-primary:hover,
.bg-cta .btn-primary:hover {
    background: var(--bssf-yellow-accent) !important;
    color: #1A1A1A !important;
}

.bg-gradient-orange .btn-secondary,
.bg-cta .btn-secondary {
    background: transparent !important;
    color: #FFFFFF !important;
    border: 2px solid rgba(255, 255, 255, 0.7) !important;
}

.bg-gradient-orange .btn-secondary:hover,
.bg-cta .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #FFFFFF !important;
}

/* Results section (já tinha regra, reforça coerência) */
.results-section h1,
.results-section h2,
.results-section h3,
.results-section h4,
.results-section .section-title,
.results-section .section-title.light,
.results-section p,
.results-section .section-subtitle {
    color: #FFFFFF !important;
}

.results-section .highlight,
.results-section .highlight-yellow {
    color: var(--bssf-yellow-accent) !important;
}

/* ===================================================
   31. ONBOARDING TIMELINE (como-funciona.php)
   Linha conectora cinza → laranja com gradient quente
   =================================================== */
.onboarding-step::before {
    background: linear-gradient(
        180deg,
        var(--bssf-orange-primary) 0%,
        var(--bssf-orange-primary) 50%,
        var(--bssf-yellow-accent) 100%
    ) !important;
    opacity: 0.7;
}

/* ===================================================
   32. CORREÇÕES AUTOMÁTICAS DE CONTRASTE (auditor)
   Classes identificadas com ratio < 3.0 pelo
   scripts/audit_contrast.py
   =================================================== */

/* Badges/tags em fundos claros — texto escuro legível */
.value-card .value-examples span,
.product-card .feature-tag,
.leader-highlights span,
.step-deliverables li {
    color: #1A1A1A !important;
    background: rgba(255, 107, 53, 0.1) !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    font-weight: 600;
    font-size: clamp(12px, 0.9vw, 14px);
}

/* Modal close — ícone escuro visível sobre fundo claro */
.modal-close {
    color: #1A1A1A !important;
    background: transparent !important;
}

.modal-close:hover {
    color: var(--bssf-orange-primary) !important;
}

/* Quick-nav-btn — texto escuro em fundo transparente claro */
.quick-nav-btn {
    color: #1A1A1A !important;
    background: rgba(255, 107, 53, 0.1) !important;
    border: 1px solid rgba(255, 107, 53, 0.2);
}

.quick-nav-btn:hover {
    background: var(--bssf-orange-primary) !important;
    color: #FFFFFF !important;
}

/* .table-col.aspect (comparação de serviços) */
.table-col.aspect,
.table-row .table-col.aspect {
    color: #1A1A1A !important;
    background: transparent !important;
    font-weight: 600;
}

/* Case highlights (páginas de serviço) em fundo claro */
.case-highlights li {
    color: #1A1A1A !important;
}

/* Service mixed card badge — laranja sólido */
.service-mixed-card .service-badge {
    color: #FFFFFF !important;
    background: var(--bssf-orange-primary) !important;
}

/* Tech-section (home e outras) — texto default escuro */
.tech-section,
.tech-section:not(section.tech-section) {
    color: #1A1A1A !important;
}

/* Before/after comparison — texto escuro */
.before-after,
.before-after .before,
.before-after .after {
    color: #1A1A1A !important;
}

/* Occupant need (serviços de lajes) */
.occupant-card .occupant-need {
    color: #1A1A1A !important;
    font-weight: 600;
}

/* ===================================================
   33. ORG LEGEND (corporativo.php) - classes órfãs
   Sem CSS definido no original → estilos aqui
   =================================================== */
.org-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: #FFFFFF;
    border: 1px solid #E4E7EC;
    border-radius: 999px;
    margin: 4px;
    font-size: clamp(13px, 0.95vw, 14.5px);
    color: #1A1A1A !important;
    font-weight: 600;
}

.org-legend-box {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    flex-shrink: 0;
    display: inline-block;
}

.org-legend-box.legend-coordinator,
.legend-coordinator {
    background: var(--bssf-yellow-accent) !important;
}

.org-legend-box.legend-executive,
.legend-executive {
    background: var(--bssf-orange-primary) !important;
}

.org-legend-box.legend-manager,
.legend-manager {
    background: var(--bssf-red-accent) !important;
}

/* Ícones grandes do organograma */
.org-icon-large {
    font-size: clamp(28px, 2.8vw, 40px);
    display: block;
    margin-bottom: 6px;
}

/* Contador de profissionais */
.org-team-count {
    display: inline-block;
    color: var(--bssf-orange-primary) !important;
    font-weight: 700;
    font-size: clamp(12px, 0.9vw, 14px);
    margin-top: 4px;
}

/* Variantes dos org-cards pela legenda de cor */
.org-coord-card {
    border-top: 4px solid var(--bssf-yellow-accent) !important;
}

.org-manager-card {
    border-top: 4px solid var(--bssf-red-accent) !important;
}

.org-ceo-card {
    border-top: 4px solid var(--bssf-orange-primary) !important;
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF8F5 100%) !important;
}

/* ===================================================
   15. FAILSAFE — garantir contraste de texto em seções
   claras (as seções originais do home.css atribuíam
   `color: var(--bssf-white)` ou `var(--bssf-gray-light)`
   a elementos que agora estão em fundos claros).
   Exceção: seções com background realmente colorido
   (laranja, gradiente vermelho) continuam com texto
   branco — cobrimos mais abaixo.
   =================================================== */

/* Cards showcase (home tech-showcase-section) */
.showcase-content h3,
.showcase-content p,
body.indextest .showcase-content h3,
body.indextest .showcase-content p {
    color: #1A1A1A !important;
}

.showcase-content p,
body.indextest .showcase-content p {
    color: #4A4A4A !important;
}

body.indextest .showcase-card:hover .showcase-content h3 {
    color: var(--bssf-orange-dark) !important;
}

/* Tech section (outras páginas) */
.tech-section,
.tech-section * {
    color: #1A1A1A;
}

.tech-section h2,
.tech-section h3,
.tech-title {
    color: #1A1A1A !important;
}

.tech-description,
.tech-section p {
    color: #4A4A4A !important;
}

/* Final CTA section (fundo claro laranja) */
.final-cta-section,
.final-cta-section h1,
.final-cta-section h2,
.final-cta-section h3,
.final-cta-section h4 {
    color: #1A1A1A !important;
}

.final-cta-section p,
.final-cta-section span:not(.highlight),
.final-cta-section li {
    color: #4A4A4A !important;
}

/* Section-subtitle genérica — reforço */
section .section-subtitle,
section .section-subtitle-f,
body.indextest .section-subtitle {
    color: #4A4A4A !important;
}

/* ===================================================
   17. SISTEMA DE DESIGN — proporção, hierarquia, ritmo
   ---------------------------------------------------
   Objetivo: tipografia fluida, espaçamento proporcional
   e hierarquia de cores consistente em todas as páginas.
   =================================================== */

/* -- Escala tipográfica fluida (clamp: mínimo, preferido, máximo) -- */
h1:not(.hero-title),
.section-title,
section > .container > h2,
[class*="-section"] > .container > h2 {
    font-size: clamp(28px, 3.2vw, 44px) !important;
    line-height: 1.18;
    letter-spacing: -0.015em;
    font-weight: 800;
    color: #1A1A1A;
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.section-subtitle,
.section-subtitle-f,
section > .container > .subtitle,
[class*="-section"] > .container > .subtitle {
    font-size: clamp(16px, 1.4vw, 19px) !important;
    line-height: 1.6;
    font-weight: 400;
    color: #4A4A4A !important;
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    opacity: 1 !important;
}

/* Section labels (tagline acima do título) — padronizar */
.section-label,
body.indextest .section-label {
    display: block;
    font-size: clamp(12px, 0.85vw, 13px);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;
    color: var(--bssf-orange-primary);
    text-align: center;
    margin-bottom: 12px;
}

/* Títulos de cards — proporção mais contida */
.showcase-content h3,
.tech-card h3,
.tech-card .tech-title,
.card-title,
.feature-card h3,
.benefit-card h3 {
    font-size: clamp(18px, 1.3vw, 22px) !important;
    line-height: 1.3;
    font-weight: 700;
    color: #1A1A1A;
}

/* Parágrafos dentro de cards — legibilidade */
.showcase-content p,
.tech-card p,
.tech-description,
.card-description,
.feature-card p,
.benefit-card p {
    font-size: clamp(14px, 1vw, 16px) !important;
    line-height: 1.65;
    color: #4A4A4A;
}

/* -- Ritmo vertical das seções (respiro consistente) -- */
section {
    padding: clamp(56px, 7vw, 112px) 0;
}

section + section {
    padding-top: clamp(48px, 6vw, 96px);
}

/* -- Largura de leitura confortável para parágrafos corridos -- */
section p:not(.hero-subtitle):not(.btn):not(.tech-highlight):not(.stat-label) {
    max-width: 65ch;
}

section > .container > p:not(.hero-subtitle) {
    margin-left: auto;
    margin-right: auto;
}

/* -- Layouts especiais mantêm alinhamento à esquerda (grid Z) -- */
.hero-z .hero-content,
.hero-z .hero-content .hero-title,
.hero-z .hero-content .hero-subtitle,
.tech-z .tech-z-intro,
.tech-z .tech-z-intro .section-label,
.tech-z .tech-z-intro .section-title,
.tech-z .tech-z-intro .section-subtitle {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
}

/* -- Hierarquia de cores BSSF (referência de uso) --
   PRIMÁRIA    : #FF6B35  laranja (CTAs, destaques, header)
   SECUNDÁRIA  : #E63946  vermelho (alertas, hover intenso)
   TERCIÁRIA   : #FFB703  amarelo (acentos, badges)
   TEXTO FORTE : #1A1A1A  títulos
   TEXTO BASE  : #3A3A3A  parágrafos
   TEXTO MUTED : #6B6B6B  legendas, auxiliares
   FUNDO 1     : #FFFFFF  cards
   FUNDO 2     : #F5F6F8  fundo principal
   FUNDO 3     : #EBEDF2  seções alternativas
*/

/* -- Highlights dentro de títulos ganham cor primária -- */
.section-title .highlight,
.section-title.light .highlight,
.hero-title .highlight {
    color: var(--bssf-orange-primary) !important;
    font-weight: inherit;
}

.highlight-yellow {
    color: var(--bssf-yellow-accent) !important;
    font-weight: inherit;
}

.highlight-red {
    color: var(--bssf-red-accent) !important;
}

/* -- Botões: proporção padronizada -- */
.btn {
    font-size: clamp(14px, 1vw, 16px);
    padding: clamp(10px, 1vw, 14px) clamp(18px, 2vw, 28px);
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.btn-large {
    font-size: clamp(15px, 1.1vw, 17px);
    padding: clamp(12px, 1.2vw, 16px) clamp(24px, 2.5vw, 36px);
}

/* -- Números/estatísticas grandes (hero, resultados) -- */
.stat-number,
.result-number {
    font-size: clamp(40px, 5vw, 78px) !important;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--bssf-orange-primary);
}

/* -- Grids de cards: gap proporcional -- */
.showcase-grid,
.tech-grid,
.features-grid,
.benefits-grid {
    gap: clamp(16px, 2vw, 32px);
}

/* -- Cards: padding proporcional e sombra sutil padrão -- */
.showcase-card,
.tech-card,
.feature-card,
.benefit-card,
.comparison-card {
    padding: clamp(20px, 2vw, 32px);
    border-radius: 12px;
}

/* ===================================================
   16. EXCEÇÕES — seções com fundo realmente colorido
   devem manter texto branco (bom contraste sobre
   gradientes laranja/vermelho).
   =================================================== */
.results-section,
.results-section h1,
.results-section h2,
.results-section h3,
.results-section h4,
.results-section p,
.results-section .result-number,
.results-section .portfolio-info h3 {
    color: #FFFFFF !important;
}

/* Badges/pílulas com fundo laranja — texto branco OK */
.tech-badge,
.esg-badge,
.revenue-sources span,
.badge-icon {
    color: #FFFFFF !important;
}

/* Botão primário (laranja) */
.btn-primary,
body.indextest .btn-primary {
    color: #FFFFFF !important;
}

/* ============================================================
   HIERARQUIA DE CABEÇALHO DE SEÇÃO (BSSF)
   - Pill laranja para o label
   - Título centralizado grande e em negrito
   - Barra tricolor decorativa (laranja → amarelo → vermelho)
   - Subtitle centralizado e legível
   Aplica-se a .section-header-center e .section-header-z
   ============================================================ */
.section-header-center,
.section-header-z {
    text-align: center !important;
    margin-bottom: 48px;
}

.section-header-center .section-label,
.section-header-z .section-label {
    display: inline-block !important;
    padding: 8px 22px !important;
    background: linear-gradient(135deg, #FF6B35 0%, #ff8f5a 100%) !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 14px rgba(255, 107, 53, 0.3);
    text-align: center;
}

.section-header-center h2,
.section-header-z h2 {
    font-size: clamp(28px, 3.2vw, 44px) !important;
    font-weight: 800 !important;
    color: #1A1A1A !important;
    line-height: 1.18 !important;
    letter-spacing: -0.015em;
    margin: 0 auto 20px !important;
    max-width: 900px !important;
    text-align: center !important;
}

/* Barra tricolor decorativa abaixo do título (identidade BSSF) */
.section-header-center h2::after,
.section-header-z h2::after {
    content: '';
    display: block;
    width: 88px;
    height: 4px;
    background: linear-gradient(90deg, #FF6B35 0%, #FFB703 50%, #E31E24 100%);
    border-radius: 2px;
    margin: 22px auto 0;
}

/* Títulos brancos em seções escuras/gradiente */
.section-header-center h2.light,
.section-header-z h2.light,
.institutional-section.bg-dark .section-header-center h2,
.institutional-section.bg-gradient-orange .section-header-center h2,
.institutional-section.bg-cta .section-header-center h2 {
    color: #ffffff !important;
}

/* Subtitle centralizado */
.section-header-center .section-subtitle,
.section-header-center .subtitle,
.section-header-z .section-subtitle,
.section-header-z .subtitle {
    font-size: clamp(16px, 1.4vw, 19px) !important;
    line-height: 1.6 !important;
    color: #4A4A4A !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    text-align: center !important;
    font-weight: 400 !important;
}

.section-header-center .section-subtitle.light,
.section-header-center .subtitle.light,
.section-header-z .section-subtitle.light,
.section-header-z .subtitle.light,
.institutional-section.bg-dark .section-header-center .section-subtitle,
.institutional-section.bg-gradient-orange .section-header-center .section-subtitle {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* Label sobre fundo escuro: mantém pill laranja (já tem contraste) */

/* Respiro acima do primeiro elemento após o header */
.section-header-center + * {
    margin-top: 48px;
}

/* ============================================================
   HIERARQUIA DENTRO DE CARDS (BSSF)
   Barra tricolor APENAS em cards "showcase" centralizados
   com layout ícone/badge + título + descrição, onde o título
   é o anchor visual principal.
   Cards com anchor próprio (número grande, imagem dominante,
   aspa, gradiente, border-left) NÃO recebem a barra.
   ============================================================ */

/* Reserva espaço abaixo do título e centraliza */
.diagonal-card,
.area-card-overlap,
.etica-card {
    text-align: center;
}

.diagonal-card h3,
.area-card-overlap h3,
.etica-card h4 {
    position: relative;
    margin: 0 auto 14px !important;
    font-weight: 700;
    line-height: 1.3;
}

/* Barra tricolor decorativa (identidade BSSF) */
.diagonal-card h3::after,
.area-card-overlap h3::after,
.etica-card h4::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, #FF6B35 0%, #FFB703 50%, #E31E24 100%);
    border-radius: 2px;
    margin: 14px auto 0;
}

/* Na seção escura (valores/etica), barra mantém cores originais (bom contraste) */

/* Garante que descrição fica centralizada embaixo da barra */
.diagonal-card p,
.area-card-overlap p,
.etica-card p {
    text-align: center;
    margin: 0 auto;
    max-width: 100%;
}

/* ============================================================
   REGRA GLOBAL DE CONTRASTE (BSSF)
   Apenas o HERO tem fundo ESCURO com texto BRANCO.
   Todo o restante da página tem fundo CLARO com texto ESCURO.
   Exceção: seções explicitamente coloridas (gradiente laranja /
   bg-cta) mantêm texto branco sobre cor vibrante.
   ============================================================ */

/* -------- HERO: fundo escuro + texto branco -------- */
.page-hero,
.page-hero-large,
.hero-section,
.hero-f-pattern,
.contact-hero,
.institutional-hero,
section.page-hero,
section.hero-section {
    background: linear-gradient(135deg, #0F0F1E 0%, #1A1A2E 100%) !important;
    color: #FFFFFF !important;
}

.page-hero :is(h1, h2, h3, h4, h5, h6),
.page-hero-large :is(h1, h2, h3, h4, h5, h6),
.hero-section :is(h1, h2, h3, h4, h5, h6),
.hero-f-pattern :is(h1, h2, h3, h4, h5, h6),
.contact-hero :is(h1, h2, h3, h4, h5, h6),
.institutional-hero :is(h1, h2, h3, h4, h5, h6) {
    color: #FFFFFF !important;
}

.page-hero :is(p, li, span.hero-description, span.stat-label, span.stat-text),
.page-hero-large :is(p, li),
.hero-section :is(p, li),
.hero-f-pattern :is(p, li),
.contact-hero :is(p, li),
.institutional-hero :is(p, li),
.hero-description,
.hero-subtitle,
.hero-f-description {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Badge laranja dentro do hero mantém bg colorido + texto original */
.page-hero .hero-badge,
.hero-section .hero-badge,
.page-hero .hero-f-badge,
.hero-f-pattern .hero-f-badge {
    color: #FF6B35 !important;
}

/* Stats dentro do hero: números em laranja, labels em branco */
.page-hero .stat-value,
.page-hero .hero-f-stat .value,
.hero-section .stat-number,
.hero-f-pattern .hero-f-stat .value {
    color: #FF6B35 !important;
}

/* -------- CORPO: fundo claro + texto escuro -------- */
/* Cards em services/ que antes eram escuros agora são CLAROS */
.tech-showcase-card,
.tech-feature,
.comparison-column,
.service-mixed-card,
.ethics-card,
.bg-dark .certification-card,
.showcase-card,
.tech-card,
.model-comparison-table {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.model-comparison-table .table-header-row {
    background: #F5F6F8 !important;
}

/* Seções que eram escuras agora são CLARAS */
.tech-showcase-section,
.tech-section,
.final-cta-section,
section.bg-dark,
.institutional-section.bg-dark {
    background: #F5F6F8 !important;
}

/* Título e texto dentro de cards/seções do corpo: ESCURO */
.tech-showcase-card :is(h1, h2, h3, h4, h5, h6),
.tech-feature :is(h1, h2, h3, h4, h5, h6),
.comparison-column :is(h1, h2, h3, h4, h5, h6),
.service-mixed-card :is(h1, h2, h3, h4, h5, h6),
.ethics-card :is(h1, h2, h3, h4, h5, h6),
.showcase-card :is(h1, h2, h3, h4, h5, h6),
.tech-card :is(h1, h2, h3, h4, h5, h6),
.tech-showcase-section :is(h1, h2, h3, h4, h5, h6),
.tech-section :is(h1, h2, h3, h4, h5, h6),
.final-cta-section :is(h1, h2, h3, h4, h5, h6),
.model-comparison-table :is(h1, h2, h3, h4, h5, h6),
section.bg-dark :is(h1, h2, h3, h4),
.institutional-section.bg-dark :is(h1, h2, h3, h4) {
    color: #1A1A1A !important;
}

.tech-showcase-card :is(p, li, td),
.tech-feature :is(p, li, td),
.comparison-column :is(p, li, td),
.service-mixed-card :is(p, li, td),
.ethics-card :is(p, li, td),
.showcase-card :is(p, li, td),
.tech-card :is(p, li, td),
.tech-showcase-section > .container :is(p, li),
.tech-section > .container :is(p, li),
.final-cta-section > .container :is(p, li),
.model-comparison-table :is(p, li, td),
section.bg-dark :is(p, li),
.institutional-section.bg-dark :is(p, li),
.institutional-section.bg-dark .section-subtitle {
    color: #3A3A3A !important;
}

/* Cores semânticas: vermelho (problem) e verde (solution) continuam */
.model-comparison-table .table-col-header.problem,
.model-comparison-table .table-col.problem,
.comparison-column .comparison-list.negative li::before {
    color: #E31E24 !important;
}

.model-comparison-table .table-col-header.solution,
.model-comparison-table .table-col.solution,
.comparison-column .comparison-list.positive li::before {
    color: #00A676 !important;
}

/* Separadores neutros claros */
.model-comparison-table .table-body-row {
    border-bottom-color: #E5E7EB !important;
}

.model-comparison-table .table-col.aspect {
    background: #F5F6F8 !important;
    color: #1A1A1A !important;
    font-weight: 600;
}

/* Listas comparison */
.comparison-column .comparison-list.negative li,
.comparison-column .comparison-list.positive li {
    color: #3A3A3A !important;
    border-bottom-color: #E5E7EB !important;
}

/* service-mixed-card: badge colorido + texto escuro */
.service-mixed-card .service-badge {
    background: rgba(255, 107, 53, 0.1) !important;
    color: #FF6B35 !important;
}

/* tech-feature: borda sutil */
.tech-feature {
    border: 1px solid #E5E7EB !important;
}

.tech-feature:hover {
    border-color: #FF6B35 !important;
}

/* Cards glassmorphism em institutional.bg-dark (nossas-empresas, mvp)
   agora ficam com fundo branco sólido e texto escuro */
.institutional-section.bg-dark [style*="rgba(255,255,255,0.05)"] {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
}

.institutional-section.bg-dark [style*="rgba(255,255,255,0.05)"] :is(h3, h4) {
    color: #FF6B35 !important;
}

.institutional-section.bg-dark [style*="rgba(255,255,255,0.05)"] :is(p, li) {
    color: #3A3A3A !important;
}

/* Seções com gradiente laranja ou bg-cta continuam com texto branco */
.institutional-section.bg-gradient-orange,
.institutional-section.bg-cta {
    /* fundo laranja vivo/colorido mantido pelo CSS original */
}

.institutional-section.bg-gradient-orange :is(h1, h2, h3, h4),
.institutional-section.bg-cta :is(h1, h2, h3, h4),
.institutional-section.bg-gradient-orange :is(p, li),
.institutional-section.bg-cta :is(p, li) {
    color: #FFFFFF !important;
}

/* Gradientes de imagem que eram escuros agora são neutros claros */
.product-card .product-image,
.leader-card .leader-image,
.video-placeholder {
    background: linear-gradient(135deg, #F5F6F8 0%, #EBEDF2 100%) !important;
}

/* sidebar-card--results em contato: claro */
.sidebar-card--results {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
}

.sidebar-card--results :is(h1, h2, h3, h4) {
    color: #1A1A1A !important;
}

.sidebar-card--results :is(p, li) {
    color: #3A3A3A !important;
}

/* Modal-close em seções claras */
.modal-close {
    background: #1A1A1A !important;
    color: #FFFFFF !important;
}

/* Building layer.parking (único visual "estrutural" escuro — mantém) */
.building-layer.parking {
    background: linear-gradient(135deg, #2D2D2D 0%, #4A4A4A 100%) !important;
    color: #FFFFFF !important;
}

/* === PATCH DE CONTRASTE AUTO — INICIO === */
/*
   Auditoria: audit_output/contraste_report.json
   Total de issues detectados: 579
   Top tags com problema: span(234), strong(118), a(80), p(48), h2(33)
   Top classes: .container(191), .section-header-center(124), .institutional-section(92), .legal-container(72), .section-label(66), .section-title(60), .highlight(43), .light(38), .legal-toc(32), .timeline-step(30)
   Violacoes inline-style vs CSS: 95
   Casos criticos (cor == bg): 216
*/

/* ============================================================================
   Regras curadas com base em padroes recorrentes do relatorio:

   PADRAO 1: Timeline ano (span.timeline-z-year-giant) sobre bg laranja
   PADRAO 2: hero-breadcrumb span em fundo escuro
   PADRAO 3: section-label laranja sobre bg laranja (bg-cta, bg-gradient-orange)
   PADRAO 4: paginas legais com layout quebrado (heredam bg escuro do hero)
   PADRAO 5: section-label/tech-highlight em bg claro com laranja fraco
   PADRAO 6: bento-card variantes (hero-cell laranja, accent-cell escuro)
   PADRAO 7: cookie-consent button em bg laranja
   PADRAO 8: diff-z-number translucido em bg branco
   ============================================================================ */

/* --- P1: Timeline ano gigante em bg laranja (ficava laranja sobre laranja) --- */
.timeline-z-year-side.bg-orange .timeline-z-year-giant,
.timeline-z-year-side.bg-orange span {
    color: rgba(255, 255, 255, 0.25) !important;
}
.timeline-z-year-side.bg-dark .timeline-z-year-giant,
.timeline-z-year-side.bg-dark span {
    color: rgba(255, 255, 255, 0.15) !important;
}

/* --- P2: Hero breadcrumb (texto cinza ficava invisivel em bg escuro) --- */
.hero-breadcrumb,
.hero-breadcrumb a,
.hero-breadcrumb span,
.page-hero .hero-breadcrumb,
.page-hero .hero-breadcrumb * {
    color: rgba(255, 255, 255, 0.9) !important;
}
.hero-breadcrumb a:hover { color: #FF6B35 !important; }

/* --- P3: section-label sobre fundos COLORIDOS (laranja/vermelho) — pill translucida branca --- */
/* Nao inclui .bg-dark porque agora .bg-dark virou CLARO (ver REGRA GLOBAL). */
.page-hero .section-label,
.page-hero-large .section-label,
.hero-section .section-label,
.hero-f-pattern .section-label,
.contact-hero .section-label,
.institutional-hero .section-label,
.bg-gradient-orange .section-header-center .section-label,
.bg-cta .section-header-center .section-label,
.institutional-section.bg-gradient-orange .section-label,
.institutional-section.bg-cta .section-label {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    backdrop-filter: blur(6px);
}

/* --- P4: Paginas legais (termos-de-uso, politica-de-privacidade) --- */
.legal-page,
main.legal-page {
    background: #FFFFFF !important;
}
.legal-page *,
main.legal-page * {
    background-color: transparent;
}
.legal-container,
.legal-page .legal-container {
    background: #FFFFFF !important;
    color: #1A1A1A !important;
}
.legal-page :is(h1, h2, h3, h4, h5) { color: #1A1A1A !important; }
.legal-page :is(p, li, td, th) { color: #3A3A3A !important; }
.legal-page a { color: #CC4E1F !important; }
.legal-page a:hover { color: #FF6B35 !important; }
.legal-page .legal-toc,
.legal-page .legal-toc ol,
.legal-page .legal-toc li {
    background: #F5F6F8 !important;
    color: #1A1A1A !important;
}

/* --- P5: Highlights laranja em bg claro precisam de laranja mais escuro --- */
.tech-z-intro .section-label,
.tech-z-intro .tech-highlight,
.tech-cta .tech-highlight,
.intro-content .section-label {
    color: #CC4E1F !important;
    font-weight: 700;
}

/* section-title .highlight (palavras destacadas em H2): laranja escuro em bg claro */
.section-title .highlight,
.section-header-center h2 .highlight,
.section-header-z h2 .highlight,
.section-intro h2 .highlight,
h2.section-title .highlight {
    color: #CC4E1F !important;
}
/* Em fundo escuro (hero), highlight mantem laranja vibrante */
.page-hero .section-title .highlight,
.hero-section .hero-title .highlight,
.hero-f-pattern h1 .highlight,
.hero-content h1 .highlight {
    color: #FF6B35 !important;
}

/* --- P6: Bento cards (variantes com bg diferentes) --- */
/* hero-cell tem bg gradient laranja CLARO -> texto ESCURO (conforme inline #1a1a1a)
   accent-cell tem bg gradient ESCURO -> texto BRANCO
   standard/wide/tall tem bg branco -> texto escuro */
.bento-card.hero-cell,
.bento-card.hero-cell :is(h3, h4, h5, h6),
.bento-card.hero-cell :is(p, li, span) {
    color: #1A1A1A !important;
}
.bento-card.accent-cell,
.bento-card.accent-cell :is(h3, h4, h5, h6),
.bento-card.accent-cell :is(p, li, span) {
    color: #FFFFFF !important;
}
.bento-card.standard :is(h3, h4, h5, h6),
.bento-card.wide-cell :is(h3, h4, h5, h6),
.bento-card.tall-cell :is(h3, h4, h5, h6) {
    color: #1A1A1A !important;
}
.bento-card.standard :is(p, li),
.bento-card.wide-cell :is(p, li),
.bento-card.tall-cell :is(p, li) {
    color: #3A3A3A !important;
}

/* --- P7: Botoes primarios (laranja) precisam de laranja mais escuro para WCAG AA --- */
.btn-primary,
.btn-primary:link,
.btn-primary:visited,
.cookie-btn-primary,
#cookie-accept {
    background: #CC4E1F !important;
    color: #FFFFFF !important;
}
.btn-primary:hover,
.cookie-btn-primary:hover,
#cookie-accept:hover {
    background: #B0431A !important;
    color: #FFFFFF !important;
}

/* --- P8: Numeros decorativos translucidos (diff-z, timeline year bg) --- */
.diff-z-number {
    color: rgba(255, 107, 53, 0.08) !important;
}
.timeline-z-year-bg {
    color: rgba(255, 107, 53, 0.08) !important;
}

/* --- Timeline conteudo em bg branco/claro --- */
.timeline-z-content.bg-light,
.timeline-z-content.bg-white {
    background: #FFFFFF !important;
}
.timeline-z-content .timeline-z-title { color: #1A1A1A !important; }
.timeline-z-content .timeline-z-text { color: #3A3A3A !important; }
.timeline-z-content .timeline-z-year { color: #CC4E1F !important; }

/* --- Diff-z content (sobre-nos diferenciais) em bg claro --- */
.diff-z-content.bg-light,
.diff-z-content.bg-white {
    background: #FFFFFF !important;
}
.diff-z-content .diff-z-title { color: #1A1A1A !important; }
.diff-z-content .diff-z-text { color: #3A3A3A !important; }
.diff-z-content .diff-z-link { color: #CC4E1F !important; }

/* --- NAO sobrescrever inline styles dos cards coloridos "Por que BSSF" em talentos --- */
/* Esses cards tem inline style deliberado com cor escura sobre gradient claro/laranja.
   Precisamos REMOVER qualquer !important que estivesse forcando branco. */
[style*="background: linear-gradient(135deg, #FF6B35"],
[style*="background: linear-gradient(135deg, #FF8E53"],
[style*="background: linear-gradient(135deg, #FFC933"] {
    /* Cards com gradient laranja/amarelo: deixa inline style reger */
}

/* --- Section-header em bg-dark --- */
/* ATENCAO: .bg-dark agora eh CLARO (ver REGRA GLOBAL). Entao texto aqui deve ser ESCURO. */
.institutional-section.bg-dark .section-header-center h2,
section.bg-dark .section-header-center h2,
.institutional-section.bg-dark .section-header-center h2[style*="color: white"],
.institutional-section.bg-dark .section-header-center h2[style*="color:white"],
.institutional-section.bg-dark h2[style*="color: white"],
.institutional-section.bg-dark h2[style*="color:white"],
section.bg-dark h2[style*="color: white"] {
    color: #1A1A1A !important;
}
.institutional-section.bg-dark .section-header-center .section-subtitle,
section.bg-dark .section-header-center .section-subtitle,
.institutional-section.bg-dark .section-subtitle[style*="rgba(255,255,255"],
.institutional-section.bg-dark p[style*="rgba(255,255,255"],
.institutional-section.bg-dark [style*="color: rgba(255,255,255"] {
    color: #3A3A3A !important;
}

/* Inline styles antigos "color: white" ou "color:#fff" dentro de bg-dark agora viram escuros */
.institutional-section.bg-dark [style*="color: white"],
.institutional-section.bg-dark [style*="color:white"],
.institutional-section.bg-dark [style*="color: #fff"],
.institutional-section.bg-dark [style*="color:#fff"],
section.bg-dark [style*="color: white"],
section.bg-dark [style*="color:white"] {
    color: #1A1A1A !important;
}

/* ============================================================
   FIX PINPOINT — problemas remanescentes do audit
   ============================================================ */

/* PROBLEMA: texto branco em bg laranja #FF6B35 (ratio 2.84) = 47 casos.
   FIX: escurecer o bg laranja para #CC4E1F (ratio 4.6 AA). */
.section-label,
.section-header-center .section-label,
.section-header-z .section-label,
.page-hero .section-label,
.hero-section .section-label,
.hero-f-pattern .section-label,
.institutional-section .section-label,
.bg-gradient-orange .section-label,
.bg-cta .section-label {
    background: linear-gradient(135deg, #CC4E1F 0%, #E85A25 100%) !important;
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* Tech-specs span, badge-text, light-text, badge-number, layer-icon, layer-percent em bg laranja */
.tech-specs span,
.badge-text,
.light-text,
.badge-number,
.layer-icon,
.layer-percent {
    /* Se o bg ancestor for laranja #FF6B35, preto como fallback */
}

/* Building-layer.retail (bg laranja gradient) — escurecer gradient */
.building-layer.retail {
    background: linear-gradient(135deg, #CC4E1F 0%, #E85A25 100%) !important;
    color: #FFFFFF !important;
}
.building-layer.retail :is(h4, p, span) {
    color: #FFFFFF !important;
}

/* Building-layer.residential (bg verde Material claro) — escurecer */
.building-layer.residential {
    background: linear-gradient(135deg, #2E7D32 0%, #388E3C 100%) !important;
    color: #FFFFFF !important;
}
.building-layer.residential :is(h4, p, span) {
    color: #FFFFFF !important;
}

/* Building-layer.amenities (roxo) — garantir texto branco */
.building-layer.amenities {
    background: linear-gradient(135deg, #6A1B9A 0%, #7B1FA2 100%) !important;
    color: #FFFFFF !important;
}
.building-layer.amenities :is(h4, p, span) {
    color: #FFFFFF !important;
}

/* Building-layer.office (azul) — texto branco ok se bg escurecer */
.building-layer.office {
    background: linear-gradient(135deg, #0D47A1 0%, #1565C0 100%) !important;
    color: #FFFFFF !important;
}

/* Building-layer.parking (cinza) — já escuro, garantir texto branco */
.building-layer.parking :is(h4, p, span) {
    color: #FFFFFF !important;
}

/* PROBLEMA: span.highlight, strong, format-size em laranja #FF6B35 sobre branco (ratio 2.84).
   FIX: usar #CC4E1F (ratio 4.6 AA). */
.format-size,
.format-card .format-size,
strong.strong,
.service-mixed-card strong,
.complex-type-card strong,
.occupant-card strong,
.format-card strong {
    color: #CC4E1F !important;
}

/* Highlights dentro de h1/h2/h3 de serviços, em fundo CLARO — laranja escuro */
.institutional-section.bg-white .section-title .highlight,
.institutional-section.bg-white h2 .highlight,
.institutional-section.bg-white h3 .highlight,
[class*="-section"]:not(.bg-dark):not(.bg-gradient-orange):not(.bg-cta):not(.page-hero):not(.hero-section) :is(h1, h2, h3, h4) .highlight {
    color: #CC4E1F !important;
}

/* PROBLEMA: amarelo #FFB703 em bg laranja #FF6B35 (ratio baixo) — 5 casos.
   FIX: amarelo mais claro e bold, ou branco bold. */
.highlight-yellow {
    color: #FFF3A0 !important;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* PROBLEMA: h2.light e btn-secondary-light em fundo cinza claro (bg-dark virou claro).
   FIX: se o pai eh .bg-dark (que virou claro), tornar h2 e botoes escuros. */
.institutional-section.bg-dark h2.light,
section.bg-dark h2.light {
    color: #1A1A1A !important;
}
.institutional-section.bg-dark .btn-secondary-light,
section.bg-dark .btn-secondary-light {
    color: #1A1A1A !important;
    border-color: #1A1A1A !important;
    background: transparent !important;
}
.institutional-section.bg-dark .btn-secondary-light:hover,
section.bg-dark .btn-secondary-light:hover {
    background: #1A1A1A !important;
    color: #FFFFFF !important;
}

/* PROBLEMA: strong/p/span com cor laranja puro sobre white — trocar por laranja escuro */
:where(.institutional-section.bg-white, .bg-white, section:not(.bg-dark):not(.bg-gradient-orange):not(.bg-cta):not(.hero-section):not(.page-hero)) :is(strong, .strong) {
    color: inherit;
}

/* Span laranja sem classe especifica em bg claro — laranja escuro */
section:not(.bg-dark):not(.bg-gradient-orange):not(.bg-cta):not(.hero-section):not(.page-hero):not(.hero-f-pattern) span[style*="color: #FF6B35"],
section:not(.bg-dark):not(.bg-gradient-orange):not(.bg-cta):not(.hero-section):not(.page-hero):not(.hero-f-pattern) span[style*="color:#FF6B35"],
section:not(.bg-dark):not(.bg-gradient-orange):not(.bg-cta):not(.hero-section):not(.page-hero):not(.hero-f-pattern) span[style*="color: var(--bssf-orange"] {
    color: #CC4E1F !important;
}

/* PINPOINT RODADA 2 — remanescentes */

/* .tech-specs span (badges laranja dentro de tech-showcase-card) */
.tech-specs span,
.tech-showcase-card .tech-specs span,
.tech-feature .tech-specs span {
    background: #CC4E1F !important;
    color: #FFFFFF !important;
}

/* .image-badge (hero badge laranja nas paginas de servico) */
.image-badge {
    background: #CC4E1F !important;
}
.image-badge .badge-text,
.image-badge .badge-number,
.image-badge span {
    color: #FFFFFF !important;
}

/* .bg-gradient-orange: escurecer o gradient para contraste AA com texto branco */
.bg-gradient-orange,
.institutional-section.bg-gradient-orange,
section.bg-gradient-orange {
    background: linear-gradient(135deg, #CC4E1F 0%, #B0431A 100%) !important;
}

/* Divisor circular com laranja em servicos (comparison divider) */
.divider-text,
.comparison-divider .divider-text {
    background: #CC4E1F !important;
    color: #FFFFFF !important;
}

/* Category class badge em category-card (laranja solido) */
.category-class {
    background: #CC4E1F !important;
    color: #FFFFFF !important;
}

/* Dashboard-preview overlay (laranja translucido) — manter legivel */
.dashboard-preview-card .preview-overlay {
    background: rgba(204, 78, 31, 0.92) !important;
}

/* Step-number em onboarding (laranja solido com numero branco) */
.step-marker .step-number {
    background: #CC4E1F !important;
    color: #FFFFFF !important;
}

/* Metric-item border-left laranja */
.metric-item {
    border-left-color: #CC4E1F !important;
}

/* PROBLEMA: building-layer.office fundo azul escuro + texto escuro herdado */
.building-layer.office :is(h4, p, span, .layer-info h4, .layer-info p) {
    color: #FFFFFF !important;
}

/* PROBLEMA: h2.light em bg-gradient-orange com ratio 2.84 (com novo gradient fica ~4.3 AA) */
/* Ja coberto pelo escurecer gradient acima */

/* .highlight-yellow em bg laranja — usar amarelo mais contrastante */
.highlight-yellow,
.bg-gradient-orange .highlight-yellow,
.bg-cta .highlight-yellow {
    color: #FFE066 !important;
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* --- FIM FIX PINPOINT --- */

/* --- Corrige h2 em secoes "why_bssf" que estavam invisiveis --- */
/* Problema: meu patch anterior criou regra .container{color:#1A1A1A!important}
   que sobrescrevia tudo. Aqui restauramos comportamento correto: */
.institutional-section h2 {
    color: inherit;
}
.institutional-section.bg-white h2,
.institutional-section:not(.bg-dark):not(.bg-gradient-orange):not(.bg-cta) h2 {
    color: #1A1A1A !important;
}
/* bg-dark virou CLARO (pelo LOCKED DS), h2 deve ser escuro (regra em ~894).
   Aqui mantemos apenas as secoes realmente coloridas (gradient-orange / cta). */
.institutional-section.bg-gradient-orange h2,
.institutional-section.bg-cta h2 {
    color: #FFFFFF !important;
}

/* CTA-section/content combinado com bg-dark (fundo claro agora) — texto escuro.
   Sobrescreve .cta-content h2 { color: var(--bssf-white) } de institutional/utilities.css
   e .cta-section h2 { color: var(--bssf-white) } de institutional/sections.css. */
.institutional-section.bg-dark .cta-content h2,
.institutional-section.bg-dark .cta-section h2,
.institutional-section.bg-dark.cta-section h2,
section.bg-dark .cta-content h2,
section.bg-dark.cta-section h2 {
    color: var(--color-text-primary, #1A1A1A) !important;
}

.institutional-section.bg-dark .cta-content p,
.institutional-section.bg-dark .cta-section p,
.institutional-section.bg-dark.cta-section p,
section.bg-dark .cta-content p,
section.bg-dark.cta-section p {
    color: var(--color-text-secondary, #3A3A3A) !important;
}

.institutional-section.bg-dark .cta-trust span,
.institutional-section.bg-dark.cta-section .cta-trust span,
section.bg-dark .cta-trust span {
    color: var(--color-hero-subtitle, #4A4A4A) !important;
}

/* Quando CTA esta em secao colorida (bg-gradient-orange ou bg-cta), mantem branco */
.institutional-section.bg-gradient-orange .cta-content h2,
.institutional-section.bg-gradient-orange .cta-section h2,
.institutional-section.bg-cta .cta-content h2,
.institutional-section.bg-cta .cta-section h2 {
    color: #FFFFFF !important;
}
.institutional-section.bg-gradient-orange .cta-content p,
.institutional-section.bg-cta .cta-content p,
.institutional-section.bg-gradient-orange .cta-trust span,
.institutional-section.bg-cta .cta-trust span {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* === PATCH DE CONTRASTE AUTO — FIM === */


/* ============================================================================
   REGRA GLOBAL LOCKED DS — CARDS ÓRFÃOS CENTRALIZADOS
   Quando a última linha de um grid de cards tem menos itens que colunas,
   os cards restantes ficam CENTRALIZADOS (não colados à esquerda).
   Aplicada via flex+wrap+center, mantém responsividade.
   ============================================================================ */

/* Grids com 3 colunas originalmente */
.tenant-profiles-grid,
.diagonal-grid,
.beyond-services-grid,
.challenges-solutions-grid,
.guarantees-grid,
.services-detailed-grid,
.occupant-profiles-grid,
.revenue-sources-grid,
.etica-grid,
.custom-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.tenant-profiles-grid > *,
.diagonal-grid > *,
.beyond-services-grid > *,
.challenges-solutions-grid > *,
.guarantees-grid > *,
.services-detailed-grid > *,
.occupant-profiles-grid > *,
.revenue-sources-grid > *,
.etica-grid > *,
.custom-grid > * {
    flex: 0 1 calc((100% - 48px) / 3);
    min-width: 260px;
    box-sizing: border-box;
}

/* Grids com 4 colunas originalmente */
.legal-points,
.why-pillars,
.how-steps,
.tech-features-grid,
.other-services-grid,
.included-services-grid,
.complex-types-grid,
.building-categories-grid,
.space-formats-grid,
.asset-types-grid,
.challenges-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.legal-points > *,
.why-pillars > *,
.how-steps > *,
.tech-features-grid > *,
.other-services-grid > *,
.included-services-grid > *,
.complex-types-grid > *,
.building-categories-grid > *,
.space-formats-grid > *,
.asset-types-grid > *,
.challenges-grid > * {
    flex: 0 1 calc((100% - 60px) / 4);
    min-width: 220px;
    box-sizing: border-box;
}

/* Responsivo — manter em 2 cols abaixo de 900px, 1 col abaixo de 560px */
@media (max-width: 900px) {
    .legal-points > *,
    .why-pillars > *,
    .how-steps > *,
    .tech-features-grid > *,
    .other-services-grid > *,
    .included-services-grid > *,
    .complex-types-grid > *,
    .building-categories-grid > *,
    .space-formats-grid > *,
    .asset-types-grid > *,
    .challenges-grid > *,
    .tenant-profiles-grid > *,
    .diagonal-grid > *,
    .beyond-services-grid > *,
    .challenges-solutions-grid > *,
    .guarantees-grid > *,
    .services-detailed-grid > *,
    .occupant-profiles-grid > *,
    .etica-grid > *,
    .custom-grid > * {
        flex-basis: calc((100% - 24px) / 2);
    }
}
@media (max-width: 560px) {
    .legal-points > *,
    .why-pillars > *,
    .how-steps > *,
    .tech-features-grid > *,
    .other-services-grid > *,
    .included-services-grid > *,
    .complex-types-grid > *,
    .building-categories-grid > *,
    .space-formats-grid > *,
    .asset-types-grid > *,
    .challenges-grid > *,
    .tenant-profiles-grid > *,
    .diagonal-grid > *,
    .beyond-services-grid > *,
    .challenges-solutions-grid > *,
    .guarantees-grid > *,
    .services-detailed-grid > *,
    .occupant-profiles-grid > *,
    .etica-grid > *,
    .custom-grid > * {
        flex-basis: 100%;
        min-width: 0;
    }
}

/* Exceções: grids que NÃO devem mudar (estrutura própria 2-col, comparativo, stats, tabela) */
.benefits-comparison,
.comparison-grid,
.metrics-grid,
.results-showcase,
.hero-stats-row,
.hero-stats,
.included-grid,
.catalog-grid-split,
.experience-grid,
.service-intro-grid,
.rent-hero-grid,
.calculator-inputs,
.calculator-results,
.other-services-grid-split,
.modules-tabs,
.module-tab-list,
.table-header-row,
.table-body-row {
    /* Estes mantêm o display original — não aplicam a regra flex de card centralization */
}