/**
 * main.css — Portfólio Oceania Engenharia
 * Autor: Sandro Hermogenes | https://diginect.com
 * Data: 16/06/2026 | Versão: 3.6.10
 *
 * Usa EXCLUSIVAMENTE variáveis do design-system (tokens.css).
 * Estética: fundo escuro, clean, minimalista, referência Oblo Template.
 * v3.1.0: Home Page minimalista (Hero Slider, O Que Fazemos,
 *         Diferenciais, FAQ) — referência sum.com.br.
 * v3.2.0: Seções Obras Públicas (texto/imagem) e Vitrine de Portfólio.
 * v3.3.0: Hero em tela cheia (100svh) + blindagem de contraste no tema claro.
 * v3.4.0: Rodapé da home sobre o desenho de planta (z-index) + ícones sociais.
 * v3.4.1: Rodapé branco sem planta no modo escuro + hover dos ícones com contraste.
 * v3.4.2: Botão primário (Ver Portfólio) com texto branco também no tema claro.
 * v3.4.3: Botão Fale Conosco do rodapé (home) com hover igual ao botão primário.
 * v3.4.4: Comportamento do botão Fale Conosco replicado a TODOS os rodapés.
 * v3.4.5: Hero institucional (sobre/portfólio/contato) em tela cheia (100svh).
 * v3.4.6: Título do hero institucional maior e com sombra reforçada.
 * v3.5.0: Formulário de contato com 3 abas (Fale Conosco / Trabalhe Conosco /
 *         Fornecedor), inputs, file inputs e selects estilizados.
 * v3.5.1: Card do formulário reposicionado (clear nos floats), espaçamento
 *         entre seções e título/subtítulo do formulário.
 * v3.5.2: Anexo da apresentação comercial (Fornecedor) agora é opcional.
 * v3.5.3: Link "Termos de Uso" estilizado para abrir modal LGPD.
 * v3.5.4: Imagem da seção Obras Públicas substituída por imagem local
 *         com logotipo da Oceania (canteiro-oceania-1.jpg).
 * v3.5.5: Imagem da seção O que fazemos substituída por eng-oce-img-2.jpeg,
 *         cortada nas laterais para manter proporção 16:9 (940×529 px).
 * v3.5.6: Imagem de fundo do Hero da página de contato substituída
 *         por hero-oce-002.jpg (proporção 100% tela cheia mantida).
 * v3.5.7: Imagem de fundo do Hero da página Sobre Nós substituída
 *         por hero-oce-005.jpg (proporção 100% tela cheia mantida).
 * v3.5.8: Imagem de fundo do Hero da página de Portfólio substituída
 *         por hero-oce-008.jpg (proporção 100% tela cheia mantida).
 * v3.5.9: Campo de upload de currículo no form "Trabalhe Conosco" tornado
 *         estritamente opcional (removido required do HTML + label ajustada).
 * v3.6.0: Correção definitiva do envio sem anexo — JS não envia mais input
 *         file vazio ao webhook (ver js/main.js v2.5.2).
 * v3.6.1: Envio adaptativo dos formulários (JSON sem anexo / multipart com
 *         anexo) — ver js/main.js v2.5.3.
 * v3.6.2: Campo tem_anexo enviado ao n8n para o nó IF (ver js/main.js v2.5.4).
 * v3.6.3: tem_anexo correto por ramo de envio (ver js/main.js v2.5.5).
 * v3.6.4: tem_anexo='sim' via append direto no multipart (ver js/main.js v2.5.6).
 * v3.6.5: Correções de responsividade mobile — header do tema claro visível
 *         (logo/menu), padding do card .about-us e overflow da tabela das
 *         páginas de obra (Bradesco). responsive.css adicionado ao portfolio.
 * v3.6.6: Barreira global overflow-x:hidden no body + break-word nos parágrafos
 *         de obra (reforço contra overflow em páginas como Bradesco).
 * v3.6.7: Header da home no mobile invisível antes do scroll — o responsive.css
 *         define position:static em telas pequenas, anulando o z-index e deixando
 *         o overlay .ms-overlay cobrir o header. Força position:relative.
 * v3.6.8: Correção definitiva do header — position:absolute !important no mobile
 *         (comportamento original do desktop), garantindo que o header fique
 *         flutuante acima do overlay da home page em qualquer tema.
 * v3.6.9: Sticky header no mobile da home — position:absolute aplicado apenas
 *         no estado inicial (:not(.sticky)), permitindo que o JS altere para
 *         position:fixed ao rolar (comportamento sticky restaurado).
 * v3.6.10: Sticky definitivo no mobile — adicionada regra explicita
 *           header.pb.sticky {position: fixed !important} para vencer o
 *           position:static do responsive.css e garantir que o header fique
 *           grudado no topo ao rolar a home page.
 */

/* === RESET MÍNIMO === */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* === OVERRIDE BODY (fundo escuro estilo Oblo) === */

html {
  scroll-behavior: smooth;
}

html, body {
  background: var(--oc-azul-950);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .title-global {
  font-family: var(--font-display);
  color: var(--text-title);
  font-weight: 700;
}

/* Texto em peso leve com cor secundária */
.text-weight-light {
  font-weight: 300 !important;
  color: var(--text-muted) !important;
}

/* Subtítulo em capslock pequeno */
.subtitle-caps {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* === HEADER === */

.oc-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-5) 0;
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.oc-header--scrolled {
  background: rgba(3, 25, 42, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-2);
}

.oc-header__inner {
  width: 100%;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.oc-header__logo {
  display: flex;
  align-items: center;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.oc-header__logo:hover {
  opacity: 0.8;
}

.oc-header__logo img {
  height: 36px;
  width: auto;
}

.oc-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.oc-header__link {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--oc-branco);
  position: relative;
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}

.oc-header__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--oc-vermelho-eng);
  transition: width var(--dur-base) var(--ease-out);
}

.oc-header__link:hover,
.oc-header__link.active {
  color: var(--oc-vermelho-eng);
}

.oc-header__link:hover::after,
.oc-header__link.active::after {
  width: 100%;
}

.btn-cta-white {
  display: inline-block;
  background: var(--oc-vermelho-eng);
  color: var(--oc-branco);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-small);
  padding: 10px 24px;
  border-radius: var(--radius-md);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.btn-cta-white:hover {
  background: #a8181d;
  color: var(--oc-branco);
  text-decoration: none;
}

/* === MAIN === */

.oc-main {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  padding-top: 120px;
  padding-bottom: var(--space-32);
}

/* Anular float herdado do .wrapper do template para centralizar portfólio */
.wrapper .oc-main {
  float: none;
  margin-left: auto;
  margin-right: auto;
  padding-top: 200px;
}

/* Centralizar conteúdo das páginas de obra também */
.wrapper .oc-main--obra {
  float: none;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--container-max);
  padding: 0 var(--container-pad);
}

/* Remover linhas verticais de fundo (lines.png) do template */
.wrapper .oc-main::before {
  display: none;
}

/* === HERO (index) === */

.oc-hero-section {
  margin-bottom: var(--space-12);
}

.oc-hero-titulo {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(48px, 10vw, 120px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--oc-branco);
  text-transform: lowercase;
  margin-bottom: var(--space-6);
}

.oc-divider {
  border: 0;
  height: 2px;
  background: var(--oc-vermelho-eng);
  width: 64px;
}

/* === PÁGINA INSTITUCIONAL === */

.oc-main--institucional {
  max-width: 100%;
  padding: 0;
  padding-top: 80px;
}

/* Fallback para imagens ausentes */
.oc-inst-hero__img,
.oc-inst-sobre__img,
.oc-inst-lideranca__img {
  background: linear-gradient(135deg, #063048 0%, #0a4a6e 100%);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-2);
}

.oc-inst-hero__img img,
.oc-inst-sobre__img img,
.oc-inst-lideranca__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 320px;
}

/* Hero Institucional */
.oc-inst-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-20) var(--container-pad);
}

.oc-inst-hero__titulo {
  font-family: var(--font-display);
  font-weight: var(--fw-xbold);
  font-size: clamp(28px, 5vw, 52px);
  line-height: var(--lh-snug);
  color: var(--oc-branco);
  margin-bottom: var(--space-6);
}

.oc-inst-hero__texto {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--oc-grafite-300);
  margin-bottom: var(--space-8);
}

.oc-inst-hero__img {
  min-height: 420px;
}

.oc-inst-hero__img img {
  min-height: 420px;
}

/* Botão Primário */
.oc-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--oc-branco);
  background: var(--oc-vermelho-eng);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-1);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.oc-btn-primary:hover {
  background: #a01b20;
  transform: translateY(-1px);
}

/* Seção Sobre */
.oc-inst-sobre {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-20) var(--container-pad);
  background: #063048;
}

.oc-inst-sobre__titulo {
  font-family: var(--font-display);
  font-weight: var(--fw-xbold);
  font-size: clamp(24px, 4vw, 40px);
  line-height: var(--lh-snug);
  color: var(--oc-branco);
  margin-bottom: var(--space-6);
}

.oc-inst-sobre__conteudo p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--oc-grafite-300);
  margin-bottom: var(--space-4);
}

.oc-inst-sobre__conteudo strong {
  color: var(--oc-branco);
}

/* Seção Liderança */
.oc-inst-lideranca {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-20) var(--container-pad);
}

.oc-inst-lideranca__titulo {
  font-family: var(--font-display);
  font-weight: var(--fw-xbold);
  font-size: clamp(24px, 4vw, 40px);
  line-height: var(--lh-snug);
  color: var(--oc-branco);
  margin-bottom: var(--space-2);
}

.oc-inst-lideranca__cargo {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--oc-vermelho-eng);
  margin-bottom: var(--space-6);
}

.oc-inst-lideranca__conteudo p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--oc-grafite-300);
  margin-bottom: var(--space-4);
}

.oc-inst-lideranca__conteudo strong {
  color: var(--oc-branco);
}

/* CTA Final */
.oc-inst-cta {
  background: #063048;
  padding: var(--space-24) var(--container-pad);
  text-align: center;
}

.oc-inst-cta__inner {
  max-width: 640px;
  margin: 0 auto;
}

.oc-inst-cta__titulo {
  font-family: var(--font-display);
  font-weight: var(--fw-xbold);
  font-size: clamp(24px, 4vw, 40px);
  color: var(--oc-branco);
  margin-bottom: var(--space-4);
}

.oc-inst-cta__texto {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--oc-grafite-300);
  margin-bottom: var(--space-8);
}

/* Responsivo Institucional */
@media (max-width: 900px) {
  .oc-inst-hero,
  .oc-inst-sobre,
  .oc-inst-lideranca {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .oc-inst-sobre__img {
    order: -1;
  }

  .oc-inst-lideranca__img {
    order: -1;
  }
}

@media (max-width: 640px) {
  .oc-main--institucional {
    padding-top: 70px;
  }

  .oc-inst-hero,
  .oc-inst-sobre,
  .oc-inst-lideranca {
    padding: var(--space-12) var(--container-pad);
  }

  .oc-inst-cta {
    padding: var(--space-16) var(--container-pad);
  }

  .oc-inst-hero__img,
  .oc-inst-sobre__img,
  .oc-inst-lideranca__img {
    min-height: 220px;
  }

  .oc-inst-hero__img img,
  .oc-inst-sobre__img img,
  .oc-inst-lideranca__img img {
    min-height: 220px;
  }
}

/* === FILTROS HIERÁRQUICOS (2 níveis) === */

.oc-filtros-grupo {
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.oc-filtros-nivel1 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.oc-filtro-status {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--oc-grafite-400);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-1);
  border: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.oc-filtro-status:hover {
  color: var(--oc-branco);
  border-color: var(--oc-grafite-600);
}

.oc-filtro-status--ativo {
  color: var(--oc-branco);
  background: rgba(194, 32, 38, 0.12);
  border-color: var(--oc-vermelho-eng);
}

.oc-filtros-nivel2 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.oc-filtro-tipo {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  color: var(--oc-grafite-400);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-1);
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.oc-filtro-tipo:hover {
  color: var(--oc-branco);
}

.oc-filtro-tipo--ativo {
  color: var(--oc-branco);
  background: rgba(255, 255, 255, 0.08);
}

.oc-filtro-tipo--oculto {
  display: none;
}

/* Texto informativo acima do grid */

.oc-grid-dica {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--oc-grafite-500);
  margin-bottom: var(--space-6);
}

/* === GRID DE OBRAS (2 colunas) === */

.oc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-16);
}

/* === CARD === */

.oc-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

.oc-card.oc-visivel {
  opacity: 1;
  transform: translateY(0);
}

.oc-card.oc-oculto {
  display: none;
}

.oc-card__link {
  display: block;
  text-decoration: none;
}

.oc-card__img-wrapper {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-2);
  background: var(--oc-grafite-900);
}

.oc-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.oc-card__link:hover .oc-card__img,
.oc-card__link:focus-visible .oc-card__img {
  transform: scale(1.05);
}

.oc-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
  background: linear-gradient(
    180deg,
    rgba(3, 25, 42, 0) 40%,
    rgba(3, 25, 42, 0.85) 100%
  );
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.oc-card__link:hover .oc-card__overlay,
.oc-card__link:focus-visible .oc-card__overlay {
  opacity: 1;
}

.oc-card__icone {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 300;
  color: var(--oc-branco);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-pill);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.oc-card__link:hover .oc-card__icone,
.oc-card__link:focus-visible .oc-card__icone {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.oc-card__categoria {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--oc-vermelho-eng);
  margin-bottom: var(--space-1);
}

.oc-card__titulo {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--oc-branco);
}

.oc-card__info {
  padding: var(--space-4) 0 var(--space-2);
}

/* === PÁGINA DA OBRA === */

.oc-main--obra {
  max-width: 100%;
  padding: 0;
  padding-bottom: var(--space-24);
}

/* Botão voltar */

.oc-obra-nav {
  padding: var(--space-6) var(--container-pad);
  padding-top: 100px;
  max-width: var(--container-max);
  margin: 0 auto;
}

.oc-voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--oc-grafite-400);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--oc-grafite-700);
  border-radius: var(--radius-3);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.oc-voltar:hover {
  color: var(--oc-branco);
  border-color: var(--oc-vermelho-eng);
  background: rgba(194, 32, 38, 0.08);
}

.oc-voltar svg {
  flex-shrink: 0;
}

/* Botão voltar posicionado sobre a imagem hero */
.oc-obra-hero {
  position: relative;
}

.oc-obra-hero .oc-obra-nav {
  position: absolute;
  top: 140px;
  left: var(--container-pad);
  z-index: 10;
  padding: 0;
  max-width: none;
  margin: 0;
}

.oc-voltar--hero {
  color: var(--oc-branco);
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(3, 25, 42, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.oc-voltar--hero:hover {
  color: var(--oc-branco);
  border-color: var(--oc-vermelho-eng);
  background: rgba(194, 32, 38, 0.2);
}

/* Hero da obra (imersivo, full-width) */

.oc-obra-hero {
  width: 100%;
  margin-bottom: var(--space-16);
}

/* Estourar o container do .oc-main--obra para manter hero full-width */
.oc-main--obra .oc-obra-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}

.oc-obra-hero__img-wrapper {
  width: 100%;
  height: 70vh;
  min-height: 400px;
  max-height: 800px;
  overflow: hidden;
  background: var(--oc-grafite-900);
  position: relative;
}

.oc-obra-hero__img-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(3, 25, 42, 0.15) 0%,
    rgba(3, 25, 42, 0) 30%,
    rgba(3, 25, 42, 0) 70%,
    rgba(3, 25, 42, 0.4) 100%
  );
  pointer-events: none;
}

.oc-obra-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === HERO INSTITUCIONAL (About, Portfolio, Contato) === */

.wrapper > section.oc-obra-hero {
  height: 100vh !important;
  height: 100svh !important;
  min-height: 480px !important;
  width: 100% !important;
  float: none !important;
  clear: both !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin-top: 0;
  padding: 0;
}

.wrapper > section.oc-obra-hero::before,
.wrapper > section.oc-obra-hero::after {
  display: none !important;
  background: transparent !important;
}

.wrapper > section.oc-obra-hero .oc-obra-hero__img-wrapper {
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
  min-height: unset !important;
  max-height: unset !important;
  z-index: 1;
}

.wrapper > section.oc-obra-hero .oc-obra-hero__img-wrapper::after {
  display: none !important;
}

.wrapper > section.oc-obra-hero .oc-obra-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none !important;
}

/* Título do hero institucional: maior, mais vivo e com sombra reforçada.
   !important para sobrepor o text-shadow/tamanho definidos inline no HTML. */
.wrapper > section.oc-obra-hero .oc-inst-hero__titulo {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: var(--fw-xbold);
  font-size: clamp(44px, 9vw, 96px) !important;
  line-height: 1.05;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.78),
               0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

/* Info da obra */

.oc-obra-info {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  margin-bottom: var(--space-20);
}

.oc-obra-info__cabecalho {
  margin-bottom: var(--space-12);
}

.oc-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--oc-vermelho-eng);
  display: block;
  margin-bottom: var(--space-3);
}

.oc-obra-info__titulo {
  font-family: var(--font-display);
  font-weight: var(--fw-xbold);
  font-size: clamp(28px, 5vw, 48px);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--oc-branco);
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}

.oc-obra-info__conteudo {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-16);
  align-items: start;
}

.oc-obra-info__texto p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--oc-grafite-300);
  margin-bottom: var(--space-6);
}

/* Metadados */

.oc-meta-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.oc-meta-item {
  border-bottom: 1px solid var(--oc-grafite-700);
  padding-bottom: var(--space-4);
}

.oc-meta-item dt {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--oc-grafite-500);
  margin-bottom: var(--space-1);
}

.oc-meta-item dd {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  color: var(--oc-branco);
}

/* === CONTEÚDO ESPECIAL (Bradesco Corporate) === */

.oc-obra-info__conteudo--full {
  grid-template-columns: 1fr;
}

.oc-project-description h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-xbold);
  font-size: clamp(20px, 3vw, 28px);
  color: var(--oc-branco);
  margin-bottom: var(--space-6);
}

.oc-project-description h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h4, 18px);
  color: var(--oc-branco);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.oc-project-description p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--oc-grafite-300);
  margin-bottom: var(--space-6);
}

.oc-project-description ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.oc-project-description li {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--oc-grafite-300);
  padding-left: var(--space-5);
  position: relative;
}

.oc-project-description li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oc-vermelho-eng);
}

.oc-project-description li strong {
  color: var(--oc-branco);
}

.oc-table-header {
  margin-top: var(--space-16);
  margin-bottom: var(--space-6);
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.oc-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.oc-table thead {
  background: rgba(255, 255, 255, 0.06);
}

.oc-table th {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--oc-branco);
  text-align: left;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.oc-table td {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--oc-grafite-300);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: top;
}

.oc-table td strong {
  color: var(--oc-branco);
  font-weight: var(--fw-semi);
}

.oc-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.oc-table tbody tr:last-child td {
  border-bottom: none;
}

/* === GALERIA (fluida, full-width do container) === */

.oc-galeria {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  margin-bottom: var(--space-20);
}

.oc-galeria__titulo {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(32px, 6vw, 64px);
  line-height: 1;
  color: var(--oc-branco);
  margin-bottom: var(--space-10);
}

.oc-galeria__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.oc-galeria__item {
  overflow: hidden;
  border-radius: var(--radius-1);
  background: var(--oc-grafite-900);
  cursor: pointer;
}

.oc-galeria__item:nth-child(4n + 1) {
  grid-column: span 2;
}

.oc-galeria__item:nth-child(6n + 5) {
  grid-column: span 2;
}

.oc-galeria__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  min-height: 240px;
  transition: transform 0.6s var(--ease-out);
}

.oc-galeria__item:nth-child(4n + 1) .oc-galeria__img {
  aspect-ratio: 16 / 9;
  min-height: 320px;
}

.oc-galeria__item:hover .oc-galeria__img {
  transform: scale(1.04);
}

/* Fade-in da galeria */

.oc-galeria__item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

.oc-galeria__item.oc-visivel {
  opacity: 1;
  transform: translateY(0);
}

/* === LIGHTBOX === */

.oc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(3, 25, 42, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
              visibility var(--dur-base) var(--ease-out);
}

.oc-lightbox--aberto {
  opacity: 1;
  visibility: visible;
}

.oc-lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-2);
}

.oc-lightbox__fechar {
  position: absolute;
  top: 80px;
  right: var(--space-6);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--oc-branco);
  font-size: 24px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  transition: background var(--dur-fast) var(--ease-out);
}

.oc-lightbox__fechar:hover {
  background: rgba(194, 32, 38, 0.3);
}

.oc-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--oc-branco);
  font-size: 24px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  transition: background var(--dur-fast) var(--ease-out);
}

.oc-lightbox__nav:hover {
  background: rgba(194, 32, 38, 0.3);
}

.oc-lightbox__nav--prev {
  left: var(--space-6);
}

.oc-lightbox__nav--next {
  right: var(--space-6);
}

/* === FOOTER === */

.oc-footer {
  border-top: 1px solid var(--oc-grafite-800);
  padding: var(--space-10) 0;
}

.oc-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.oc-footer__texto {
  font-size: var(--fs-small);
  color: var(--oc-grafite-500);
}

.oc-footer__creditos {
  font-size: var(--fs-small);
  color: var(--oc-grafite-500);
}

.oc-footer__creditos a {
  color: var(--oc-vermelho-eng);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}

.oc-footer__creditos a:hover {
  color: var(--oc-vermelho-300);
}

/* === RESPONSIVO === */

/* Tablet */
@media (max-width: 1024px) {
  .oc-grid {
    grid-template-columns: 1fr;
  }

  .oc-galeria__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .oc-galeria__item:nth-child(4n + 1),
  .oc-galeria__item:nth-child(6n + 5) {
    grid-column: span 1;
  }

  .oc-galeria__img {
    min-height: 200px;
  }

  .oc-galeria__item:nth-child(4n + 1) .oc-galeria__img {
    min-height: 200px;
    aspect-ratio: 3 / 2;
  }

  .oc-obra-hero__img-wrapper {
    height: 50vh;
    min-height: 300px;
  }

  .oc-obra-info__conteudo {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

/* Mobile */
@media (max-width: 640px) {
  .oc-header__logo img {
    height: 28px;
  }

  .oc-main {
    padding-top: 90px;
  }

  .oc-obra-nav {
    padding-top: 80px;
  }

  .oc-hero-titulo {
    font-size: clamp(40px, 12vw, 72px);
  }

  .oc-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .oc-card__img-wrapper {
    aspect-ratio: 16 / 10;
  }

  .oc-card__overlay {
    opacity: 1;
  }

  .oc-card__icone {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .oc-filtros-grupo {
    gap: var(--space-2);
  }

  .oc-filtro-status {
    font-size: var(--fs-micro);
    padding: var(--space-2) var(--space-3);
  }

  .oc-filtro-tipo {
    font-size: var(--fs-micro);
    padding: var(--space-1) var(--space-3);
  }

  .oc-obra-hero .oc-obra-nav {
    top: 90px;
    left: var(--container-pad);
  }

  .oc-obra-hero__img-wrapper {
    height: 45vh;
    min-height: 260px;
    max-height: 500px;
  }

  .oc-galeria__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .oc-galeria__item:nth-child(4n + 1),
  .oc-galeria__item:nth-child(6n + 5) {
    grid-column: span 1;
  }

  .oc-galeria__img {
    min-height: 180px;
    aspect-ratio: 4 / 3;
  }

  .oc-galeria__item:nth-child(4n + 1) .oc-galeria__img {
    min-height: 180px;
    aspect-ratio: 4 / 3;
  }

  .oc-lightbox__nav {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .oc-lightbox__nav--prev {
    left: var(--space-3);
  }

  .oc-lightbox__nav--next {
    right: var(--space-3);
  }

  .oc-footer__inner {
    flex-direction: column;
    text-align: center;
  }
}

/* === ANIMAÇÃO DE ENTRADA (stagger) === */

.oc-card:nth-child(1) { transition-delay: 0ms; }
.oc-card:nth-child(2) { transition-delay: 80ms; }
.oc-card:nth-child(3) { transition-delay: 160ms; }
.oc-card:nth-child(4) { transition-delay: 60ms; }
.oc-card:nth-child(5) { transition-delay: 140ms; }
.oc-card:nth-child(6) { transition-delay: 220ms; }
.oc-card:nth-child(7) { transition-delay: 80ms; }
.oc-card:nth-child(8) { transition-delay: 160ms; }
.oc-card:nth-child(9) { transition-delay: 240ms; }

.oc-galeria__item:nth-child(1) { transition-delay: 0ms; }
.oc-galeria__item:nth-child(2) { transition-delay: 60ms; }
.oc-galeria__item:nth-child(3) { transition-delay: 120ms; }
.oc-galeria__item:nth-child(4) { transition-delay: 60ms; }
.oc-galeria__item:nth-child(5) { transition-delay: 120ms; }
.oc-galeria__item:nth-child(6) { transition-delay: 180ms; }

/* === ACESSIBILIDADE === */

*:focus-visible {
  outline: 2px solid var(--oc-vermelho-eng);
  outline-offset: 2px;
}

.oc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === SELEÇÃO DE TEXTO === */

::selection {
  background: var(--oc-vermelho-eng);
  color: var(--oc-branco);
}

/* ============================================================
   TEMA CLARO / LIGHT MODE
   Sandro Hermogenes | https://diginect.com
   Data: 28/05/2026
   ============================================================ */

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.theme-light {
  /* Redefinir tokens semanticos para tema claro */
  --fg-1: var(--oc-grafite-900);
  --fg-2: var(--oc-grafite-700);
  --fg-3: var(--oc-grafite-500);

  /* Text tokens — light mode */
  --text-title: #1A1D20;
  --text-muted: #6B7280;
  --text-body:  #4B5563;
  --fg-on-azul: var(--oc-branco);
  --fg-on-vermelho: var(--oc-branco);
  --fg-institutional: var(--oc-azul-oceano);

  --bg-1: var(--oc-branco);
  --bg-2: var(--oc-grafite-050);
  --bg-3: var(--oc-grafite-100);
  --bg-azul: var(--oc-azul-oceano);
  --bg-azul-deep: var(--oc-azul-050);
  --bg-grafite: var(--oc-grafite-100);

  --accent: var(--oc-vermelho-eng);
  --accent-hover: #a8181d;

  --border-1: var(--oc-grafite-200);
  --border-2: var(--oc-grafite-300);
  --border-strong: var(--oc-grafite-900);
  --divider-red: var(--oc-vermelho-eng);

  /* Shadows neutros para tema claro */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-4: 0 18px 48px rgba(0,0,0,0.16), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-inset: inset 0 0 0 1px rgba(0,0,0,0.08);
}

/* Header modo claro */
body.theme-light .oc-header {
  background-color: #E5E7EB !important;
  border-bottom: 1px solid #D1D5DB;
}
body.theme-light .oc-header--scrolled {
  background: rgba(229, 231, 235, 0.95) !important;
}
body.theme-light .oc-header__link {
  color: var(--oc-grafite-900);
}
body.theme-light .oc-header__link:hover,
body.theme-light .oc-header__link.active {
  color: var(--oc-vermelho-eng);
}
body.theme-light .btn-cta-white {
  background: var(--oc-vermelho-eng);
  color: var(--oc-branco);
}

/* Fundo global */
body.theme-light,
body.theme-light .wrapper,
body.theme-light .page-loading {
  background-color: var(--oc-branco);
  color: var(--oc-grafite-900);
}

/* Header */
body.theme-light .hd_bar,
body.theme-light .header-bar {
  background-color: #E5E7EB !important;
  border-bottom: 1px solid #D1D5DB;
}

/* Botão CTA Fale Conosco — mantém texto branco no modo claro */
body.theme-light .get-quote a,
body.theme-light .get-quote a:hover {
  color: var(--oc-branco) !important;
}

/* Navegacao */
body.theme-light nav ul li a,
body.theme-light .select-language ul li.active a {
  color: var(--oc-grafite-900);
}
body.theme-light nav ul ul li {
  background-color: var(--oc-branco);
  border-bottom: 1px solid var(--oc-grafite-200);
}
body.theme-light nav ul ul li a {
  color: var(--oc-grafite-900);
}
body.theme-light nav ul li a:hover,
body.theme-light nav ul li a.active {
  color: var(--oc-vermelho-eng);
}

/* Botao mobile */
body.theme-light .mobile-menu-btn a {
  color: var(--oc-grafite-900);
}

/* Menu mobile */
body.theme-light .responsive-mobile-menu {
  background-color: var(--oc-branco);
}
body.theme-light .responsive-mobile-menu > a {
  color: var(--oc-grafite-900);
}
body.theme-light .responsive-mobile-menu ul li a {
  color: var(--oc-grafite-900);
}
body.theme-light .responsive-mobile-menu ul li a:hover {
  color: var(--oc-vermelho-eng);
}

/* Textos globais */
body.theme-light p,
body.theme-light .oc-body {
  color: var(--text-body);
}
body.theme-light p strong,
body.theme-light p b {
  color: var(--text-title);
}

body.theme-light h1,
body.theme-light .oc-h1,
body.theme-light h2,
body.theme-light .oc-h2,
body.theme-light h3,
body.theme-light .oc-h3,
body.theme-light h4,
body.theme-light .oc-h4 {
  color: var(--text-title);
}

body.theme-light .oc-display,
body.theme-light .oc-eyebrow,
body.theme-light [data-oc="eyebrow"] {
  color: var(--oc-vermelho-eng);
}

/* Links */
body.theme-light a,
body.theme-light .oc-link {
  color: var(--oc-azul-600);
}
body.theme-light a:hover,
body.theme-light .oc-link:hover {
  color: var(--oc-vermelho-eng);
}

/* Seções e blocos do template */
body.theme-light .main-construct-sec,
body.theme-light .our-features,
body.theme-light .footer-style2,
body.theme-light .bottom-strip,
body.theme-light .tr-news,
body.theme-light .slick-prev,
body.theme-light .slick-next,
body.theme-light .main-section,
body.theme-light .listing-info,
body.theme-light .contact-form-sec,
body.theme-light .contact-section,
body.theme-light .cntct-details,
body.theme-light .house-info ul,
body.theme-light .pgr-controls,
body.theme-light .director-msg,
body.theme-light .alert-danger,
body.theme-light .post-sm-sec,
body.theme-light .construction-company,
body.theme-light .our-info,
body.theme-light .widget-categories ul ul li {
  background-color: var(--oc-grafite-050);
}

/* Títulos e textos principais do template */
body.theme-light .spec-hd h2,
body.theme-light .title-sm h3,
body.theme-light .kn-title h3,
body.theme-light .about-kons h4,
body.theme-light .kons-construct h2,
body.theme-light .heading-title,
body.theme-light .construct-details h2,
body.theme-light .srvc-icon > h3,
body.theme-light .trust-text h2,
body.theme-light .rating-star h2,
body.theme-light .post-title,
body.theme-light .gallery-tabs-head h4,
body.theme-light .locations-list ul li,
body.theme-light .house-info ul li strong,
body.theme-light .house-info span,
body.theme-light .info-about-house h3,
body.theme-light .director-msg p,
body.theme-light .director-msg h4,
body.theme-light .contact-address h2 strong,
body.theme-light .contact-address span b,
body.theme-light .contact-more-info h2,
body.theme-light .address h3,
body.theme-light .construction-company h2,
body.theme-light .mindfulness h3,
body.theme-light .author-comm h2,
body.theme-light .author-comm h4,
body.theme-light .user-comment-form h2,
body.theme-light .comment-time h4,
body.theme-light .related-posts h2,
body.theme-light .post-control-links a,
body.theme-light .widget-title,
body.theme-light .widget-categories ul li a,
body.theme-light .widget-categories > ul > li > a:before,
body.theme-light .widget-posts ul li a,
body.theme-light .post-details > h3 a,
body.theme-light .pagination li a,
body.theme-light .options ul li a,
body.theme-light .load-more-items a,
body.theme-light .item-info h3,
body.theme-light .item-info h3 > a,
body.theme-light .pager-details ul li a,
body.theme-light .pager-details ul li:before,
body.theme-light .review-comment p,
body.theme-light .review-comment h4,
body.theme-light .treding-new h3 a,
body.theme-light .treding-new span a,
body.theme-light .feature-info h3,
body.theme-light .our-info h2,
body.theme-light .sm-title,
body.theme-light .social-links ul li a,
body.theme-light .choosing-que h3,
body.theme-light .spec-text ul li a,
body.theme-light .spec-text a,
body.theme-light .spec-text h3 {
  color: var(--oc-grafite-900);
}

/* Textos secundários do template */
body.theme-light .spec-text p,
body.theme-light .choosing-que p,
body.theme-light .treding-new p,
body.theme-light .treding-new h5,
body.theme-light .treding-new span,
body.theme-light .review-comment span,
body.theme-light .kons-construct h4,
body.theme-light .post-info li a,
body.theme-light .post-info li span,
body.theme-light .customer-say span,
body.theme-light .location-details p,
body.theme-light .director-msg span,
body.theme-light .address ul li a,
body.theme-light .address span,
body.theme-light .contact-address span,
body.theme-light .construction-company h3,
body.theme-light .construction-company p,
body.theme-light .post-links li span,
body.theme-light .author-comm span,
body.theme-light .tags-list ul li a,
body.theme-light .tags-list ul li,
body.theme-light .comment-time span,
body.theme-light .user-say > a,
body.theme-light .widget-tags ul li a,
body.theme-light .post-details > a,
body.theme-light .widget-categories ul ul li a,
body.theme-light .listing-info ul li span,
body.theme-light .listing-info ul li a,
body.theme-light .gallery-tabs-head a,
body.theme-light .item-info span,
body.theme-light .testimonial-slider .slick-prev::before,
body.theme-light .testimonial-slider .slick-next::before,
body.theme-light .fp-tableCell {
  color: var(--oc-grafite-600);
}

/* Bordas */
body.theme-light .service-details {
  border: 1px solid var(--oc-grafite-200);
}
body.theme-light .cons-img img {
  border: 1px solid var(--oc-grafite-200);
}
body.theme-light .post-sm-sec {
  border-top: 1px solid var(--oc-grafite-200);
  border-right: 1px solid var(--oc-grafite-200);
  border-bottom: 1px solid var(--oc-grafite-200);
  border-left: 5px solid var(--oc-vermelho-eng);
}
body.theme-light .bd-top {
  border-top: 1px solid var(--oc-grafite-200);
}
body.theme-light .widget-categories > ul > li {
  border-bottom: 1px solid var(--oc-grafite-200);
}
body.theme-light .our-projects-counter {
  background-color: var(--oc-grafite-050);
}

/* Sobre nós — espaço entre texto e imagem */
.construct-details {
  padding-right: 32px;
}

/* Sobre nós — card .about-us mantém fundo azul escuro em light mode */
body.theme-light .about-us .heading-title,
body.theme-light .about-us p {
  color: var(--oc-branco);
}

/* Portfolio / Obras (main.css custom) */
body.theme-light .oc-main {
  background: var(--oc-branco);
}
body.theme-light .oc-card {
  background: var(--oc-branco);
}
body.theme-light .oc-card__titulo {
  color: var(--oc-grafite-900);
}
body.theme-light .oc-card__overlay {
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.6) 100%);
}
body.theme-light .oc-filtro-status {
  background: var(--oc-grafite-100);
  color: var(--oc-grafite-700);
}
body.theme-light .oc-filtro-status--ativo {
  background: var(--oc-vermelho-eng);
  color: var(--oc-branco);
}
body.theme-light .oc-filtro-tipo {
  color: var(--oc-grafite-600);
}
body.theme-light .oc-filtro-tipo--ativo {
  color: var(--oc-grafite-900);
}
body.theme-light .oc-obra-hero__img-wrapper::after {
  background: linear-gradient(180deg, rgba(3,25,42,0) 0%, rgba(3,25,42,0.85) 100%);
}
body.theme-light .oc-obra-content {
  background: var(--oc-branco);
}
body.theme-light .oc-voltar--hero {
  background: rgba(0,0,0,0.5);
  color: var(--oc-branco);
}
body.theme-light .oc-lightbox {
  background: rgba(255,255,255,0.95);
}
body.theme-light .oc-lightbox__nav,
body.theme-light .oc-lightbox__fechar {
  color: var(--oc-grafite-900);
  background: rgba(0, 0, 0, 0.08);
}
body.theme-light .oc-lightbox__nav:hover,
body.theme-light .oc-lightbox__fechar:hover {
  background: rgba(194, 32, 38, 0.2);
}

/* Metadados da obra (sidebar) */
body.theme-light .oc-meta-item {
  border-bottom-color: var(--oc-grafite-300);
}
body.theme-light .oc-meta-item dt {
  color: var(--oc-grafite-600);
}
body.theme-light .oc-meta-item dd {
  color: var(--oc-grafite-900);
}
body.theme-light .oc-obra-info__titulo {
  color: var(--oc-grafite-900);
}
body.theme-light .oc-obra-info__texto p {
  color: var(--oc-grafite-700);
}

/* Tabela (Bradesco Corporate) */
body.theme-light .table-responsive {
  border-color: var(--oc-grafite-300);
}
body.theme-light .oc-table thead {
  background: var(--oc-grafite-100);
}
body.theme-light .oc-table th {
  color: var(--oc-grafite-900);
  border-bottom-color: var(--oc-grafite-300);
}
body.theme-light .oc-table td {
  color: var(--oc-grafite-700);
  border-bottom-color: var(--oc-grafite-200);
}
body.theme-light .oc-table td strong {
  color: var(--oc-grafite-900);
}
body.theme-light .oc-table tbody tr:hover {
  background: var(--oc-grafite-050);
}
body.theme-light .oc-project-description h3,
body.theme-light .oc-project-description h4,
body.theme-light .oc-project-description li strong {
  color: var(--oc-grafite-900);
}
body.theme-light .oc-project-description p,
body.theme-light .oc-project-description li {
  color: var(--oc-grafite-700);
}
body.theme-light .oc-galeria__titulo {
  color: var(--oc-grafite-900);
}

/* ===== FOOTER — cores invertidas por tema ===== */

/* Dark mode (padrão): fundo branco, textos escuros */
.footer-data {
  background-color: var(--oc-branco);
}
.footer-data h1,
.footer-data h3,
.footer-data h6,
.footer-data p,
.footer-data a,
.cta-title-main {
  color: var(--oc-grafite-900);
}
.btn-cta-white {
  background-color: var(--oc-azul-950);
  color: var(--oc-branco) !important;
}
.footer-style2 {
  background: var(--oc-branco);
}
.footer-style2 h5,
.footer-style2 h2,
.footer-style2 span {
  color: var(--oc-grafite-900);
}
.bottom-strip {
  background: var(--oc-grafite-100);
}
.bottom-strip p,
.bottom-strip a {
  color: var(--oc-grafite-900);
}
.oc-footer {
  background: var(--oc-branco);
  border-top-color: var(--oc-grafite-200);
}
.oc-footer__texto,
.oc-footer__creditos {
  color: var(--oc-grafite-700);
}
.oc-footer__creditos a {
  color: var(--oc-azul-600);
}

/* Light mode: fundo azul profundo, textos brancos */
body.theme-light .footer-data {
  background-color: var(--oc-azul-950);
}
body.theme-light .footer-data h1,
body.theme-light .footer-data h3,
body.theme-light .footer-data h6,
body.theme-light .footer-data p,
body.theme-light .footer-data a,
body.theme-light .cta-title-main {
  color: var(--oc-branco);
}
/* Botão CTA — dark mode: vermelho, light mode: branco */
.btn-cta-white {
  background-color: var(--oc-vermelho-eng);
  color: var(--oc-branco) !important;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.btn-cta-white:hover {
  background-color: var(--oc-vermelho-300);
}
body.theme-light .btn-cta-white {
  background-color: var(--oc-vermelho-eng);
  color: var(--oc-branco) !important;
}
body.theme-light .btn-cta-white:hover {
  background-color: var(--oc-vermelho-300);
}

/* Logo do footer — background-image por tema */
.cta-logo-footer {
  width: 220px;
  height: 80px;
  margin: 0 auto 48px auto;
  background-image: url('../images/logo-oceania-escura.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
body.theme-light .cta-logo-footer {
  background-image: url('../images/logo-oceania.png');
}

/* Espaçamento do footer: logo mais próximo do topo, título+botão centralizados */
.footer-data {
  padding: 120px 0 70px 0;
}
.ft-contact-info {
  margin-bottom: 80px !important;
}
.cta-logo-footer {
  margin-bottom: 80px !important;
}
body.theme-light .footer-style2 {
  background: var(--oc-azul-950);
}
body.theme-light .footer-style2 h5,
body.theme-light .footer-style2 h2,
body.theme-light .footer-style2 span {
  color: var(--oc-branco);
}
body.theme-light .bottom-strip {
  background: var(--oc-azul-900);
}
body.theme-light .bottom-strip p,
body.theme-light .bottom-strip a {
  color: var(--oc-branco);
}
body.theme-light .oc-footer {
  background: var(--oc-azul-950);
  border-top-color: var(--oc-azul-700);
  color: var(--oc-branco);
}
body.theme-light .oc-footer__texto,
body.theme-light .oc-footer__creditos {
  color: var(--oc-grafite-300);
}
body.theme-light .oc-footer__creditos a {
  color: var(--oc-vermelho-300);
}

/* Botao de tema */
.theme-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  padding: 0;
  line-height: 1;
  vertical-align: middle;
  transition: transform 0.2s ease;
}
.theme-toggle-btn:hover {
  transform: scale(1.15);
}
body.theme-light .theme-toggle-btn {
  filter: grayscale(1) brightness(0.3);
}

/* Responsividade do botao de tema */
@media (max-width: 991px) {
  .theme-toggle-btn {
    font-size: 22px;
  }
}

/* Espacamento padrao entre hero institucional e conteudo (64px) */
.contact-info-sec {
  padding-top: 64px !important;
}
.oc-obra-hero + section .block {
  padding-top: 64px !important;
}

/* ============================================================
   HOME PAGE — Minimalista (referência sum.com.br)
   Sandro Hermogenes | https://diginect.com
   Data: 12/06/2026 | v3.1.0
   ============================================================ */

/* Variáveis locais theme-aware (modo escuro = padrão) */
.oc-home {
  --home-bg:        var(--oc-azul-950);
  --home-bg-alt:    var(--oc-azul-900);
  --home-surface:   var(--oc-azul-800);
  --home-title:     #ffffff;
  --home-body:      var(--oc-grafite-300);
  --home-muted:     #8a99a8;
  --home-border:    rgba(255, 255, 255, 0.08);
  --home-accent:    var(--oc-vermelho-eng);

  float: none;
  width: 100%;
  display: block;
  background: var(--home-bg);
}

body.theme-light .oc-home {
  --home-bg:        #ffffff;
  --home-bg-alt:    var(--oc-grafite-050);
  --home-surface:   #ffffff;
  --home-title:     #1a1d20;
  --home-body:      #4b5563;
  --home-muted:     #6b7280;
  --home-border:    var(--oc-grafite-200);
}

/* Remover linhas verticais herdadas do template */
.wrapper .oc-home::before {
  display: none;
}

.oc-home__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.oc-home__eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--home-accent);
  margin-bottom: var(--space-4);
}

.oc-home__titulo {
  font-family: var(--font-display);
  font-weight: var(--fw-xbold);
  font-size: clamp(28px, 4.5vw, 48px);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--home-title);
  margin: 0;
}

.oc-home__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-3);
  border: 1px solid transparent;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.oc-home__btn--primary {
  background: var(--home-accent);
  color: var(--oc-branco);
}

.oc-home__btn--primary:hover {
  background: #a8181d;
  color: var(--oc-branco);
  transform: translateY(-1px);
}

/* Texto branco no botão primário também no tema claro (sobrepõe body.theme-light a) */
body.theme-light .oc-home__btn--primary,
body.theme-light .oc-home__btn--primary:hover {
  color: var(--oc-branco);
}

.oc-home__btn--ghost {
  background: transparent;
  color: var(--oc-branco);
  border-color: rgba(255, 255, 255, 0.5);
}

.oc-home__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--oc-branco);
  border-color: var(--oc-branco);
}

/* ===== HERO SLIDER ===== */
.oc-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--oc-azul-950);
}

.oc-slider-container {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.oc-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.2s var(--ease-in-out);
  will-change: opacity;
}

.oc-slide--ativo {
  opacity: 1;
}

.oc-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    90deg,
    rgba(3, 25, 42, 0.85) 0%,
    rgba(3, 25, 42, 0.55) 50%,
    rgba(3, 25, 42, 0.35) 100%
  );
}

.oc-hero__inner {
  position: relative;
  z-index: 3;
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding: var(--space-32) var(--container-pad);
}

.oc-hero__inner .oc-home__eyebrow {
  color: var(--oc-vermelho-300);
}

.oc-hero__titulo {
  font-family: var(--font-display);
  font-weight: var(--fw-xbold);
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  color: var(--oc-branco);
  max-width: 16ch;
  margin: 0 0 var(--space-6);
}

.oc-hero__subtitulo {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: var(--lh-loose);
  color: var(--oc-grafite-200);
  max-width: 52ch;
  margin: 0 0 var(--space-10);
}

.oc-hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Hero sempre em alto contraste — independente do tema claro/escuro */
body.theme-light .oc-hero__titulo {
  color: var(--oc-branco);
}

body.theme-light .oc-hero__subtitulo {
  color: var(--oc-grafite-200);
}

body.theme-light .oc-hero__inner .oc-home__eyebrow {
  color: var(--oc-vermelho-300);
}

body.theme-light .oc-hero .oc-home__btn--primary {
  background: var(--oc-vermelho-eng);
  color: var(--oc-branco);
}

body.theme-light .oc-hero .oc-home__btn--primary:hover {
  background: #a8181d;
  color: var(--oc-branco);
}

body.theme-light .oc-hero .oc-home__btn--ghost {
  background: transparent;
  color: var(--oc-branco);
  border-color: rgba(255, 255, 255, 0.5);
}

body.theme-light .oc-hero .oc-home__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--oc-branco);
  border-color: var(--oc-branco);
}

/* ===== O QUE FAZEMOS (50/50) ===== */
.oc-fazemos {
  background: var(--home-bg);
  padding: 100px 0;
}

.oc-fazemos__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.oc-fazemos__lista {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.oc-fazemos__item {
  padding-left: var(--space-6);
  border-left: 2px solid var(--home-accent);
}

.oc-fazemos__item-titulo {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--home-title);
  margin: 0 0 var(--space-2);
}

.oc-fazemos__item-texto {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--home-body);
  margin: 0;
}

.oc-fazemos__media {
  overflow: hidden;
  border-radius: var(--radius-2);
  background: var(--home-surface);
}

.oc-fazemos__media img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

/* ===== NOSSOS DIFERENCIAIS (3 cards) ===== */
.oc-diferenciais {
  background: var(--home-bg-alt);
  padding: 100px 0;
}

.oc-diferenciais__cabecalho {
  margin-bottom: var(--space-16);
}

.oc-diferenciais__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.oc-card-dif {
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: var(--radius-3);
  padding: var(--space-10);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.oc-card-dif:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
}

.oc-card-dif__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-6);
  color: var(--home-accent);
}

.oc-card-dif__icone svg {
  width: 32px;
  height: 32px;
}

.oc-card-dif__titulo {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  color: var(--home-title);
  margin: 0 0 var(--space-3);
}

.oc-card-dif__texto {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--home-body);
  margin: 0;
}

/* ===== FAQ ===== */
.oc-faq {
  background: var(--home-bg);
  padding: 100px 0;
}

.oc-faq__inner {
  max-width: 820px;
}

.oc-faq__eyebrow,
.oc-faq__titulo {
  text-align: center;
}

.oc-faq__titulo {
  margin-bottom: var(--space-12);
}

.oc-faq__lista {
  display: flex;
  flex-direction: column;
}

.oc-faq__item {
  border-bottom: 1px solid var(--home-border);
}

.oc-faq__pergunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  text-align: left;
  padding: var(--space-6) 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: clamp(16px, 2vw, 19px);
  color: var(--home-title);
  transition: color var(--dur-fast) var(--ease-out);
}

.oc-faq__pergunta:hover {
  color: var(--home-accent);
}

.oc-faq__sinal {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.oc-faq__sinal::before,
.oc-faq__sinal::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}

.oc-faq__sinal::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.oc-faq__pergunta[aria-expanded="true"] .oc-faq__sinal::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

.oc-faq__resposta {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-slow) var(--ease-in-out);
}

.oc-faq__resposta p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--home-body);
  margin: 0;
  padding: 0 0 var(--space-6);
}

/* ===== FOCO EM PROJETOS PÚBLICOS (texto/imagem) ===== */
.oc-home-public-works {
  background: var(--home-bg);
  padding: 100px 0;
}

.oc-public__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.oc-public__media {
  order: -1;
  overflow: hidden;
  border-radius: var(--radius-2);
  background: var(--home-surface);
}

.oc-public__media img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

.oc-public__descricao {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--home-body);
  margin: var(--space-6) 0 0;
}

/* ===== VITRINE DE PORTFÓLIO ===== */
.oc-home-portfolio {
  background: var(--home-bg-alt);
  padding: 100px 0;
}

.oc-portfolio__inner {
  text-align: center;
}

.oc-portfolio__titulo {
  margin-bottom: var(--space-12);
}

.oc-portfolio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  text-align: left;
}

.oc-portfolio__item {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-3);
  background: var(--home-surface);
  aspect-ratio: 4 / 3;
}

.oc-portfolio__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.oc-portfolio__item:hover img,
.oc-portfolio__item:focus-visible img {
  transform: scale(1.05);
}

.oc-portfolio__cta {
  margin-top: var(--space-10);
}

/* ===== RESPONSIVO HOME ===== */
@media (max-width: 900px) {
  .oc-fazemos__grid,
  .oc-public__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .oc-fazemos__media,
  .oc-public__media {
    order: -1;
  }

  .oc-fazemos__media img,
  .oc-public__media img {
    min-height: 280px;
  }

  .oc-diferenciais__grid,
  .oc-portfolio__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .oc-portfolio__item {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 640px) {
  .oc-hero {
    min-height: 100vh;
    min-height: 100svh;
  }

  .oc-hero__inner {
    padding: 120px var(--container-pad) var(--space-16);
  }

  .oc-fazemos,
  .oc-diferenciais,
  .oc-home-public-works,
  .oc-home-portfolio,
  .oc-faq {
    padding: 64px 0;
  }

  .oc-hero__acoes {
    flex-direction: column;
    align-items: stretch;
  }

  .oc-card-dif {
    padding: var(--space-8);
  }
}

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

/* ============================================================
   RODAPÉ DA HOME — sobre o desenho de planta (.ms-overlay)
   Sandro Hermogenes | https://diginect.com | v3.4.0
   ============================================================ */

/* MODO ESCURO (padrão, sem .theme-light): rodapé BRANCO e SEM planta.
   Elevamos o .footer-data acima do pseudo-elemento da planta (z-index:0),
   fazendo o fundo branco cobri-la por completo. */
.ms-overlay footer .footer-data {
  position: relative;
  z-index: 1;
}

/* MODO CLARO: rodapé navy COM a planta visível atrás do conteúdo.
   O fundo do .footer-data volta ao fluxo (abaixo da planta) e apenas o
   conteúdo é elevado: fundo navy -> desenho de planta -> conteúdo. */
body.theme-light .ms-overlay footer .footer-data {
  position: static;
  z-index: auto;
}

body.theme-light .ms-overlay footer .ft-contact-info,
body.theme-light .ms-overlay footer .social-copyright {
  position: relative;
  z-index: 1;
}

/* Botão "Fale Conosco" do rodapé com o MESMO comportamento do botão
   primário do site (.oc-home__btn--primary): vermelho sólido, texto branco
   e hover em vermelho escuro com leve elevação (sem o rosa antigo).
   Aplicado a TODOS os rodapés do site (home, sobre, portfólio, contato e obras). */
footer .btn-cta-white {
  background-color: var(--oc-vermelho-eng);
  color: var(--oc-branco) !important;
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

footer .btn-cta-white:hover,
footer .btn-cta-white:focus-visible {
  background-color: #a8181d;
  color: var(--oc-branco) !important;
  transform: translateY(-1px);
}

/* ===== ÍCONES SOCIAIS DO RODAPÉ (LinkedIn / Instagram) ===== */
.footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-6);
}

.footer-social li {
  margin: 0;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  font-size: 20px;
  line-height: 1;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

/* Hover: círculo vermelho sólido com ícone branco — alto contraste
   garantido tanto no rodapé branco (escuro) quanto navy (claro). */
.footer-social a:hover,
.footer-social a:focus-visible {
  background: var(--oc-vermelho-eng);
  color: var(--oc-branco) !important;
  transform: translateY(-2px);
}

.footer-social .fa {
  display: block;
}

/* ============================================================
   FORMULÁRIO DE CONTATO COM ABAS (contact.html)
   Sandro Hermogenes | https://diginect.com
   ============================================================ */
.oc-form-card {
  clear: both;
  background: var(--oc-branco);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-4);
  padding: var(--space-10);
  max-width: 820px;
  margin: 0 auto;
}

.oc-form-head {
  text-align: center;
  margin-bottom: var(--space-8);
}

.oc-form-head .oc-eyebrow {
  display: block;
  margin-bottom: var(--space-3);
}

.oc-form-titulo {
  font-family: var(--font-display);
  font-weight: var(--fw-xbold);
  font-size: clamp(26px, 4vw, 38px);
  line-height: var(--lh-tight);
  color: var(--oc-azul-oceano);
  margin: 0 0 var(--space-3);
}

.oc-form-sub {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--oc-grafite-600);
  max-width: 560px;
  margin: 0 auto;
}

.oc-form-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--oc-grafite-200);
}

.oc-form-tab {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  color: var(--oc-azul-oceano);
  background: var(--oc-grafite-050);
  border: 1px solid var(--oc-grafite-200);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.oc-form-tab:hover {
  border-color: var(--oc-azul-600);
}

.oc-form-tab--ativa {
  background: var(--oc-azul-oceano);
  color: var(--oc-branco);
  border-color: var(--oc-azul-oceano);
}

.oc-form-panel {
  display: none;
  animation: oc-form-fade var(--dur-base) var(--ease-out);
}

.oc-form-panel--ativa {
  display: block;
}

@keyframes oc-form-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.oc-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.oc-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.oc-field--full {
  grid-column: 1 / -1;
}

.oc-field label {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--oc-grafite-700);
}

.oc-req {
  color: var(--oc-vermelho-eng);
}

.oc-opcional {
  color: var(--oc-grafite-400);
  font-weight: var(--fw-regular);
  font-size: var(--fs-micro);
}

.open-terms-link {
  color: var(--oc-vermelho-eng);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.open-terms-link:hover {
  color: var(--accent-hover);
}

.oc-field input,
.oc-field textarea,
.oc-select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--oc-grafite-900);
  background: var(--oc-grafite-050);
  border: 1px solid var(--oc-grafite-200);
  border-radius: var(--radius-2);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.oc-field textarea {
  resize: vertical;
  min-height: 110px;
}

.oc-field input:focus,
.oc-field textarea:focus,
.oc-select:focus {
  outline: none;
  border-color: var(--oc-azul-600);
  background: var(--oc-branco);
  box-shadow: 0 0 0 3px rgba(17, 93, 138, 0.15);
}

.oc-field input:invalid:not(:placeholder-shown),
.oc-field textarea:invalid:not(:placeholder-shown) {
  border-color: var(--oc-vermelho-500);
}

.oc-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23063048' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
  cursor: pointer;
}

.oc-file {
  padding: var(--space-2) var(--space-3) !important;
  cursor: pointer;
}

.oc-file::file-selector-button {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  color: var(--oc-branco);
  background: var(--oc-azul-oceano);
  border: 0;
  border-radius: var(--radius-2);
  padding: var(--space-2) var(--space-4);
  margin-right: var(--space-4);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.oc-file::file-selector-button:hover {
  background: var(--oc-azul-600);
}

.oc-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-small);
  color: var(--oc-grafite-700);
  cursor: pointer;
}

.oc-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--oc-azul-oceano);
  flex: 0 0 auto;
}

.oc-form-enviar {
  width: 100%;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--oc-branco);
  background: var(--oc-vermelho-eng);
  border: 0;
  border-radius: var(--radius-3);
  padding: var(--space-4);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.oc-form-enviar:hover,
.oc-form-enviar:focus-visible {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.oc-form-enviar:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

.oc-form-feedback {
  border-radius: var(--radius-2);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

.oc-form-feedback--ok {
  background: rgba(31, 122, 77, 0.12);
  color: var(--status-success);
}

.oc-form-feedback--erro {
  background: var(--oc-vermelho-100);
  color: var(--oc-vermelho-700);
}

@media (max-width: 640px) {
  .oc-form-card {
    padding: var(--space-5);
  }
  .oc-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================
   CORREÇÕES DE RESPONSIVIDADE (v3.6.5)
   Autor: Sandro Hermogenes | https://diginect.com
   =========================================================== */

/* Bug 1 — Header mobile no tema claro: o template aplica fundo navy
   (#021f36) ao header.pb no mobile, escondendo o logo e o ícone do menu
   (que são escuros no tema claro). Força fundo claro e contraste. */
@media (max-width: 991px) {
  body.theme-light header.pb,
  body.theme-light header.pb.stick,
  body.theme-light header.stick.sticky {
    background: #E5E7EB !important;
  }
  body.theme-light header.pb .mobile-menu-btn a,
  body.theme-light header.stick.sticky .mobile-menu-btn a {
    color: var(--oc-grafite-900) !important;
  }
}

/* Bug 4 — Card "Sobre nós" (.about-us): o responsive.css zera o padding
   no mobile, deixando o texto colado nas bordas do card azul. Restaura
   um respiro confortável em telas pequenas. */
@media (max-width: 991px) {
  section .about-us {
    padding: 32px 24px;
  }
}
@media (max-width: 576px) {
  section .about-us {
    padding: 28px 20px;
  }
}

/* Bug 5 — Página de obra (ex.: Bradesco): a tabela tem min-width de 640px;
   dentro de um grid (1fr) a coluna não encolhe e empurra a página inteira,
   cortando o texto. min-width:0 nos itens libera o scroll horizontal da
   tabela sem estourar o layout. */
.oc-obra-info__conteudo,
.oc-obra-info__texto,
.oc-project-description {
  min-width: 0;
}

.table-responsive {
  max-width: 100%;
}

/* Barreira global: impede que qualquer elemento estoure a viewport e
   cause scroll horizontal na página inteira (complemento à correção
   da tabela do Bradesco e proteção contra futuros overflows). */
body {
  overflow-x: hidden;
}

/* Quebra de palavras longas nos parágrafos de descrição de obra */
.oc-project-description p,
.oc-project-description li {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Bug 6 — Header na home page (mobile): o responsive.css define
   header.pb {position: static} em telas pequenas. Com position:static
   o z-index:99999 é ignorado, e o overlay .ms-overlay:before (z-index:0)
   dentro do .ms-overlay (z-index:99) cobre o header, escondendo-o
   antes do scroll.

   Solução em 3 partes:
   1. Estado inicial (sem .sticky): position:absolute para flutuar acima
      do overlay da home page.
   2. Estado rolado (.sticky presente): position:fixed !important para
      garantir que o header fique grudado no topo, vencendo o
      position:static do responsive.css.
   3. Fundo branco no tema claro em ambos os estados. */
@media (max-width: 576px) {
  header.pb:not(.sticky) {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999 !important;
  }
  header.pb.sticky,
  header.pb.stick.sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
  }
}