/* =============================================================================
   Refino visual do site

   Camada de acabamento que aproxima as páginas antigas (home, produtos e as
   institucionais) da linguagem visual já adotada nas landings de segmento
   (css/landing-segmentos.css): mesma paleta, mesmo tratamento de ícone, mesmo
   peso de cartão e mesma escala tipográfica.

   O que este arquivo NÃO faz: mover blocos, trocar texto ou mexer em markup.
   Só fonte, cor, tamanho, raio, sombra e espaçamento.

   Ordem de carregamento (app/layout/head.php): bootstrap → css da página →
   tokens.css → styles.css → site-footer.css → ESTE ARQUIVO. Sendo o último,
   ele vence empates de especificidade contra o CSS de página; onde o alvo é
   uma utilitária do Bootstrap (que já vem com !important) o !important é
   obrigatório e está marcado caso a caso.
   ========================================================================== */

:root {
  /* Paleta espelhada de .pc em css/landing-segmentos.css */
  --oz-navy: #00384a;
  --oz-laranja: #ff5811;
  --oz-laranja-ink: #e0490c;
  --oz-laranja-suave: #ffe7db;
  --oz-tinta: #0f2027;
  --oz-mudo: #5b6b73;
  --oz-linha: #e7ebf0;

  --oz-raio: 18px;
  --oz-raio-ico: 13px;
  --oz-sombra: 0 10px 30px rgba(15, 32, 39, .05);
  --oz-sombra-alta: 0 18px 40px rgba(15, 32, 39, .10);

  /* O azul padrão do Bootstrap (#0d6efd) aparecia em número de indicador,
     ícone e olho-de-seção nas páginas institucionais — cor que não existe na
     marca. `primary` passa a ser a navy da Otimizer, o que corrige de uma vez
     .text-primary, .bg-primary e .border-primary em todo o site. */
  --bs-primary: #00384a;
  --bs-primary-rgb: 0, 56, 74;

  /* .text-muted / .text-body-secondary: #6c757d rendia 4,7:1 no branco. A
     mesma cor das landings de segmento rende 5,6:1 e resolve a reclamação de
     "pouco contraste" sem mudar o tamanho do texto. */
  --bs-secondary-color: #5b6b73;
  --color-text-muted: #5b6b73;

  /* Escala de título alinhada à das landings (.pc h2 vai a 2.6rem; o token
     antigo parava em 2.25rem, deixando as seções sem hierarquia). */
  --fs-h2: clamp(1.65rem, 1.1rem + 1.9vw, 2.6rem);
}

/* ---- tipografia de seção -------------------------------------------------
   .pc h2 usa peso 800, entrelinha 1.15 e -0.6px de tracking; sem isso o mesmo
   corpo de texto parece maior e mais solto nas páginas antigas. */
.section-heading h2 {
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.6px;
  text-wrap: balance;
}

.section-heading p {
  color: var(--oz-mudo);
  line-height: 1.6;
}

.section-heading .lead {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--oz-mudo);
}

/* ---- cartões -------------------------------------------------------------
   .pc-card: fundo branco, 1px de linha fria, raio 18 e sombra baixa. As
   páginas antigas usavam .shadow-sm sem borda (cartão que "some" no fundo
   claro) ou .shadow-lg sem borda (peso demais). `border-0`, `rounded-*` e
   `shadow-*` são utilitárias com !important, daí o !important aqui. */
.hover-card,
.contact-card,
.card.border-0,
.page .bg-white.rounded-4,
.page .bg-white.rounded-3 {
  border: 1px solid var(--oz-linha) !important;
  border-radius: var(--oz-raio) !important;
  box-shadow: var(--oz-sombra) !important;
}

.hover-card:hover,
.contact-card:hover {
  box-shadow: var(--oz-sombra-alta) !important;
}

/* O realce de 1.03 no hover borrava a tipografia do cartão; o padrão das
   landings é só o deslocamento vertical. */
.hover-card:hover {
  transform: translateY(-4px);
}

.rounded-4 {
  border-radius: var(--oz-raio) !important;
}

/* Texto de cartão: .93rem/1.6 como em .pc-card p — as páginas com `.page`
   usavam .small (0.875rem), pequeno demais para parágrafo de apoio. */
.page .card p,
.page .contact-card p,
.page .hover-card p {
  font-size: .93rem;
  line-height: 1.6;
}

/* ---- ícones --------------------------------------------------------------
   Em .pc o ícone é uma placa arredondada (46px, raio 13) com fundo em tinta
   suave. Aqui os mesmos elementos eram círculos: ou cinza com tinta azul do
   Bootstrap, ou gradiente saturado com ícone branco. */
.contact-icon-wrapper {
  width: 46px;
  height: 46px;
  border-radius: var(--oz-raio-ico);
  background: var(--oz-laranja-suave);
  color: var(--oz-laranja-ink);
  font-size: 1.25rem;
}

.contact-icon-wrapper i,
.contact-icon-wrapper .text-primary {
  color: var(--oz-laranja-ink) !important;
}

.contact-card:hover .contact-icon-wrapper,
.contact-icon-wrapper:hover {
  box-shadow: 0 0 20px rgba(255, 88, 17, .25);
}

@media (max-width: 575.98px) {
  .contact-icon-wrapper { width: 40px; height: 40px; font-size: 1.05rem }
}

/* .icon.<cor> nas páginas de produto (erp-completo, pdv-completo, financeiro,
   estoque, NFS-e, app, e-commerce, filiais). Vira a mesma placa das landings,
   com as tintas de .pc-icone-*. */
.icon {
  border-radius: var(--oz-raio-ico) !important;
}

.icon.light   { background: var(--oz-laranja-suave) !important; color: var(--oz-laranja-ink) !important }
.icon.orange  { background: var(--oz-laranja-suave) !important; color: var(--oz-laranja-ink) !important }
.icon.blue    { background: #e5efff !important; color: #2563eb !important }
.icon.green   { background: #e4f7ec !important; color: #15a05a !important }
.icon.cyan    { background: #ddf2f7 !important; color: #0e7490 !important }
.icon.purple  { background: #eee9ff !important; color: #7c3aed !important }
.icon.indigo  { background: #e7e9ff !important; color: #4f46e5 !important }
.icon.pink    { background: #ffe4ec !important; color: #d81b60 !important }

/* ---- marcadores de lista -------------------------------------------------
   O ponto das listas de cartão era azul (#2563eb); em .pc-card-escuro é
   laranja. */
.feature-card ul li::before,
.segment-card ul li::before,
.modulo-card ul li::before,
.recurso-card ul li::before {
  background: var(--oz-laranja) !important;
}

/* Link "Saiba mais" dentro dos cartões de produto: mesmo laranja de
   .pc-card-link. */
.feature-card a,
.feature-card span,
.segment-card a {
  color: var(--oz-laranja);
}

/* ---- números de indicador ------------------------------------------------
   "Desde 2016", "+32", "+55%"… saíam no azul #1d4ed8. Em .pc-numero o número
   é navy; é a cor que dá peso sem competir com o laranja dos botões. */
.stat-card h3 {
  color: var(--oz-navy);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.5px;
}

.hover-text-primary:hover {
  color: var(--oz-laranja) !important;
}

/* ---- acordeão ------------------------------------------------------------
   As páginas com `.page` caíam no acordeão cru do Bootstrap (cabeçalho azul
   claro, seta azul). Aqui ele recebe o mesmo tratamento do .pc-accordion.
   As landings de segmento (.pc-accordion) e o menu mobile já têm folha
   própria e ficam de fora, para não mudarem de aparência. */
.accordion:not(.mobile-menu-accordion):not(.pc-accordion) {
  --bs-accordion-color: var(--oz-tinta);
  --bs-accordion-border-color: var(--oz-linha);
  --bs-accordion-border-radius: 14px;
  --bs-accordion-inner-border-radius: 13px;
  --bs-accordion-active-color: var(--oz-laranja);
  --bs-accordion-active-bg: #fff5ef;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(255, 88, 17, .18);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235b6b73'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff5811'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.page .accordion-button {
  font-weight: 600;
  font-size: .98rem;
}

.page .accordion-body {
  color: var(--oz-mudo);
  font-size: .95rem;
  line-height: 1.65;
}

/* ---- banners de topo -----------------------------------------------------
   A capa das institucionais é uma foto com véu preto a 55%: o texto branco
   disputava com o miolo claro da imagem. Troca por um véu navy em degradê,
   que escurece mais onde o título cai — mesmo recurso do hero das landings.
   O véu vem em style inline no HTML, então precisa de !important. */
.header-banner .overlay {
  background: linear-gradient(180deg, rgba(1, 34, 46, .68) 0%, rgba(0, 56, 74, .84) 100%) !important;
}

.header-banner h1 {
  letter-spacing: -.5px;
  line-height: 1.12;
  text-wrap: balance;
}

.header-banner .lead,
.header-banner p {
  color: rgba(255, 255, 255, .9);
  line-height: 1.6;
}

/* ---- destaque de título em /sobrenos/ ------------------------------------
   O ciano #00d4ff das duas seções escuras e o marcador ✦ da lista não existem
   na marca; em todo o resto do site o realce dentro do título é o laranja. */
.sobrenosequipe-title .highlight,
.section-realidade .section-title .highlight {
  color: var(--oz-laranja);
}

.realidade-list li::before {
  color: var(--oz-laranja);
}

/* Os cartões de valores eram os únicos textos em itálico do site — em corpo
   pequeno o itálico custa legibilidade sem marcar hierarquia nenhuma. */
.valor-card p {
  font-style: normal;
  color: var(--oz-mudo);
}

.realidade-text.highlight {
  background: linear-gradient(transparent 60%, rgba(255, 88, 17, .16) 60%);
}

.sobrenosequipe-image-wrapper::before {
  border-color: rgba(255, 88, 17, .32);
}

/* ---- respiro entre seções ------------------------------------------------
   .pc-secao usa 84px; .py-5 do Bootstrap dá 48px, que apertava as seções das
   institucionais no desktop. No mobile o valor do Bootstrap continua valendo. */
@media (min-width: 992px) {
  .page > section.py-5 {
    padding-top: 76px !important;
    padding-bottom: 76px !important;
  }
}

/* ---- correção de estouro horizontal --------------------------------------
   `g-5` define --bs-gutter-x:3rem, o que dá à .row margem lateral de -24px —
   maior que os 20px de padding do .container do site, que é fluido até
   1200px. Resultado: 4px de rolagem horizontal em /sobrenos/,
   /automacao-com-ia/, /reforma-tributaria/ e dois posts do blog, de 360px a
   1024px de largura. 2.5rem é a maior calha que cabe nesses 20px.
   Só a calha horizontal cai; --bs-gutter-y segue 3rem, então o espaçamento
   vertical entre as colunas empilhadas no celular não muda. */
.row.g-5,
.row.gx-5 {
  --bs-gutter-x: 2.5rem;
}

/* `g-4 g-md-5` só chega a 3rem a partir de 768px; abaixo disso quem manda é o
   g-4, e o teto não pode subir a calha do celular. */
@media (min-width: 768px) {
  .row.g-md-5 {
    --bs-gutter-x: 2.5rem;
  }
}

/* Sete imagens (posts do blog, /erp-completo/, /pdv-completo/, /software-app/,
   /sobrenos/) trazem `style="max-width: NNNpx"` no próprio elemento. Style
   inline vence o max-width:100% do .img-fluid, então elas ultrapassavam a
   largura da tela no celular — 130px de rolagem horizontal em
   /blog/reforma-tributaria-ibs-cbs-2026/. O teto em pixels segue valendo no
   desktop; abaixo de 768px a largura da tela passa a mandar. */
@media (max-width: 767.98px) {
  img.img-fluid {
    max-width: 100% !important;
    height: auto;
  }
}