/* ========================================================================== INSTITUTO SAPIENS — EMPRESAS / B2B Tema âmbar (substitui o vinho institucional nesta página) + componentes específicos: painel do hero, banner de piloto, subnav, blocos de segmento. Escopo: . Depende de tokens.css + style.css + pages.css. ========================================================================== */ /* ---------------------------------- Tema âmbar (sobrescreve o vinho) ---------------------------------- */ body.b2b .hero, body.b2b .rede-callout { background: var(--b2b-gradient); } body.b2b .cta-final { background: var(--b2b-900); } body.b2b section.section-dark { background: var(--b2b-900); } body.b2b .glow-tr { background: radial-gradient(circle, rgba(239,159,39,0.18) 0%, rgba(239,159,39,0) 70%); } body.b2b .glow-bl { background: radial-gradient(circle, rgba(239,159,39,0.12) 0%, rgba(239,159,39,0) 70%); } body.b2b .eyebrow { color: var(--b2b-600); background: var(--b2b-50); border-color: var(--b2b-100); } body.b2b .eyebrow .dot { background: var(--b2b-500); } body.b2b .section-dark .eyebrow, body.b2b .hero .eyebrow { color: var(--b2b-100); background: var(--on-dark-surface); border-color: var(--on-dark-border); } body.b2b .section-dark .eyebrow .dot, body.b2b .hero .eyebrow .dot { background: var(--b2b-400); } body.b2b .highlight { background: var(--b2b-gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; } body.b2b .btn-primary { background: var(--b2b-500); box-shadow: 0 14px 30px rgba(186,117,23,.3); } body.b2b .btn-primary:hover { background: var(--b2b-600); box-shadow: 0 18px 38px rgba(186,117,23,.38); } body.b2b .btn-secondary:hover { border-color: var(--b2b-400); } body.b2b .card-link, body.b2b .num-item a, body.b2b .founder-bio { color: var(--b2b-600); } body.b2b .founder-bio { border-left-color: var(--b2b-500); } body.b2b .proof-num { color: var(--b2b-600); } body.b2b .flow-num { background: var(--b2b-50); color: var(--b2b-600); } body.b2b .service-row .icon-wrap, body.b2b .icon-wrap { background: var(--b2b-50); color: var(--b2b-600); } body.b2b .tag { background: var(--b2b-50); color: var(--b2b-700); } body.b2b .nav-link:hover, body.b2b .nav-link.active { color: var(--white); } body.b2b .nav-link.active { color: var(--b2b-100); } /* ---------------------------------- Painel do hero (indicadores) ---------------------------------- */ .b2b-panel { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-6); transform: rotate(-2deg); position: relative; z-index: 1; } .b2b-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--neutral-100); } .b2b-panel-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--b2b-500); } .b2b-panel-head span { font-size: var(--fs-xs); font-weight: 700; color: var(--neutral-500); letter-spacing: 0.02em; } .b2b-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); } .b2b-stat { text-align: center; background: var(--b2b-50); border-radius: var(--radius-sm); padding: 14px 8px; } .b2b-stat b { display: block; font-size: var(--fs-lg); font-weight: 800; color: var(--b2b-700); line-height: 1; margin-bottom: 4px; } .b2b-stat span { font-size: 10.5px; color: var(--b2b-600); font-weight: 600; } .b2b-chips { display: flex; gap: 6px; margin-bottom: var(--space-5); } .b2b-chip { flex: 1; height: 26px; border-radius: 7px; background: var(--neutral-100); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: var(--neutral-500); } .b2b-chip.active { background: var(--b2b-500); color: var(--white); } /* ---------------------------------- Banner de piloto gratuito ---------------------------------- */ .pilot-banner { background: var(--b2b-pilot-bg); border: 1px solid #F0997B; border-radius: var(--radius-md); padding: var(--space-6) var(--space-8); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; } .pilot-banner-icon { width: 52px; height: 52px; border-radius: 15px; background: var(--white); color: var(--b2b-pilot-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pilot-banner-icon .icon { width: 24px; height: 24px; } .pilot-banner h3 { font-size: var(--fs-lg); font-weight: 800; color: var(--b2b-pilot-text); margin-bottom: 4px; } .pilot-banner p { font-size: var(--fs-base); color: #993C1D; line-height: var(--lh-normal); max-width: 480px; } .pilot-banner-text { flex: 1; min-width: 260px; display: flex; align-items: center; gap: var(--space-4); } /* ---------------------------------- Subnav de segmentos ---------------------------------- */ .seg-subnav { display: flex; gap: 10px; flex-wrap: wrap; padding: var(--space-5) 0; border-bottom: 1px solid var(--neutral-100); margin-bottom: var(--space-8); position: sticky; top: 108px; background: var(--neutral-bg); z-index: 20; } .seg-pill { font-size: var(--fs-sm); font-weight: 600; color: var(--neutral-700); padding: 8px 16px; border: 1px solid var(--neutral-200); border-radius: var(--radius-pill); } .seg-pill:hover, .seg-pill.active { color: var(--b2b-700); border-color: var(--b2b-400); background: var(--b2b-50); } /* ---------------------------------- Blocos de segmento ---------------------------------- */ .seg-block { background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-6); box-shadow: var(--shadow-sm); scroll-margin-top: 170px; } .seg-header { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-6); border-bottom: 1px solid var(--neutral-100); flex-wrap: wrap; } .seg-icon { width: 52px; height: 52px; border-radius: 15px; background: var(--b2b-50); color: var(--b2b-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .seg-icon .icon { width: 24px; height: 24px; } .seg-name-wrap { flex: 1; min-width: 200px; } .seg-name { font-size: var(--fs-lg); font-weight: 800; color: var(--neutral-900); } .seg-sub-text { font-size: var(--fs-sm); color: var(--neutral-500); margin-top: 2px; } .seg-ticket { font-size: var(--fs-xs); font-weight: 800; color: var(--b2b-700); background: var(--b2b-50); padding: 8px 14px; border-radius: var(--radius-pill); white-space: nowrap; } .seg-body { display: grid; grid-template-columns: 1fr 1fr; } .seg-col { padding: var(--space-6); } .seg-col:first-child { border-right: 1px solid var(--neutral-100); } .seg-col-title { font-size: 11px; font-weight: 800; color: var(--neutral-500); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-3); } .seg-li { font-size: var(--fs-base); color: var(--neutral-700); padding: 5px 0 5px 16px; position: relative; line-height: var(--lh-normal); } .seg-li::before { content: "—"; position: absolute; left: 0; color: var(--neutral-300); } .seg-footer { padding: var(--space-5) var(--space-6); border-top: 1px solid var(--neutral-100); background: var(--neutral-50); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } /* ---------------------------------- Responsivo ---------------------------------- */ @media (max-width: 980px) { .b2b-stat-row { grid-template-columns: 1fr; } .seg-body { grid-template-columns: 1fr; } .seg-col:first-child { border-right: none; border-bottom: 1px solid var(--neutral-100); } .seg-subnav { position: static; overflow-x: auto; flex-wrap: nowrap; } .pilot-banner { padding: var(--space-5); } }