/* =============================================================
   HEALTH MERCANTIL — institucional.css
   ============================================================= */

/* ─── Hero ───────────────────────────────────────────────── */
/* ANTERIOR (até 01/10): fundo liso #0D3A42, sem imagem, texto centralizado (text-align:center,
   margin-inline:auto no desc/support). Trocado a pedido do Sandro ("queria uma imagem do lado
   esquerdo ou uma imagem de fundo... tipo o banner 2 da home, letra de um lado pessoa do outro")
   — mesmo tratamento do Banner 2 da Home: foto de fundo + gradiente escuro cobrindo o lado do
   texto, pessoa aparecendo do outro lado, conteúdo alinhado à esquerda em vez de centralizado. */
.inst-hero {
  position: relative;
  padding-top: calc(var(--nav-height) + var(--announce-height) + var(--space-10));
  background: #0D3A42 url('/blog/artigos/img/institucional-quemsomos-v2.jpg') center / cover no-repeat;
  padding-bottom: var(--space-20);
  text-align: left;
  overflow: hidden;
}

.inst-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(13,58,66,0.96) 0%,
    rgba(13,58,66,0.90) 30%,
    rgba(13,58,66,0.55) 55%,
    rgba(13,58,66,0.25) 80%,
    rgba(13,58,66,0.12) 100%
  );
}

.inst-hero__inner {
  position: relative;
  z-index: 2;
}

.inst-hero__content {
  max-width: 640px;
}

.inst-hero__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: var(--weight-bold);
  color: var(--color-white);
  margin-top: var(--space-4);
  letter-spacing: -0.02em;
}

.inst-hero__desc {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.75);
  max-width: 60ch;
  margin-top: var(--space-4);
  line-height: var(--leading-relaxed);
}

.inst-hero .eyebrow {
  font-size: 20px;
  letter-spacing: 2.4px;
}

.inst-hero__support {
  font-size: var(--text-md);
  color: rgba(255,255,255,0.6);
  max-width: 60ch;
  margin-top: var(--space-3);
  line-height: var(--leading-relaxed);
}

.inst-hero__tagline {
  font-style: italic;
  color: var(--color-accent);
  margin-top: var(--space-4);
}

.inst-hero__cta {
  margin-top: var(--space-6);
}

@media (max-width: 768px) {
  /* Em telas pequenas a foto de fundo compete demais com o texto — volta a cobrir tudo com o
     gradiente (quase sólido) e centraliza o conteúdo, mantendo o layout anterior ao ajuste. */
  .inst-hero::before {
    background: rgba(13,58,66,0.94);
  }
  .inst-hero {
    text-align: center;
  }
  .inst-hero__content {
    max-width: 100%;
  }
  .inst-hero__desc,
  .inst-hero__support {
    margin-inline: auto;
  }
}

/* ─── Split ──────────────────────────────────────────────── */
.inst-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  align-items: center;
}

.inst-split--reverse {
  direction: rtl;
}

.inst-split--reverse > * {
  direction: ltr;
}

.inst-split__content h2 {
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-4);
}

.inst-split__image img {
  /* ANTERIOR (até 29/09): border-radius: var(--radius-2xl) (24px); box-shadow: var(--shadow-xl).
     Reduzido (direção BTG Pactual em todo o site). */
  width: 100%;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

/* ─── Cards missão/visão/valores ─────────────────────────── */
.inst-card {
  /* ANTERIOR (até 29/09): border-radius: var(--radius-xl) (16px); hover só com box-shadow:
     var(--shadow-lg), sem mudança de borda. Trocado (direção BTG Pactual em todo o site). */
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: var(--space-8);
  transition: box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base);
}

.inst-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
  border-color: var(--color-accent);
}

.inst-card__icon {
  /* ANTERIOR (até 29/09): width/height 56px; border-radius: var(--radius-lg) (12px);
     background: #F5EDD9 (círculo dourado claro preenchido). Trocado (direção BTG Pactual em
     todo o site) — ícone de linha fina sem fundo colorido, mesmo padrão já aplicado nos
     ícones dos cards de Soluções da Home. */
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #B28349;
  margin-bottom: var(--space-5);
}

.inst-card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  margin-bottom: var(--space-3);
  color: var(--color-text-primary);
}

.inst-card__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: none;
}

/* ─── Stats ──────────────────────────────────────────────── */
.inst-stats {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.inst-stat {}

.inst-stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
  font-weight: var(--weight-bold);
  color: #B28349;
  line-height: 1;
}

.inst-stat__label {
  display: block;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.6);
  margin-top: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ─── Vídeo ──────────────────────────────────────────────── */
.inst-video {
  /* ANTERIOR (até 29/09): border-radius: var(--radius-2xl) (24px); box-shadow: var(--shadow-xl).
     Reduzido (direção BTG Pactual em todo o site). */
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--color-brand-dark);
  box-shadow: var(--shadow-sm);
}

.inst-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── Compliance ─────────────────────────────────────────── */
.inst-compliance {
  /* ANTERIOR (até 29/09): border-radius: var(--radius-xl) (16px). Reduzido (direção BTG
     Pactual em todo o site). */
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 4px solid #B28349;
  border-radius: 6px;
  padding: var(--space-8);
}

.inst-compliance__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.inst-compliance__cnpj {
  font-size: var(--text-xs);
  color: #B28349;
  font-weight: var(--weight-semi);
  margin-bottom: var(--space-4);
  font-family: var(--font-mono, monospace);
}

.inst-compliance__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: none;
}

/* ─── Responsivo ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .inst-split,
  .inst-split--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .inst-split--reverse > * { direction: ltr; }
}

@media (max-width: 640px) {
  .inst-stats { gap: var(--space-6); }
  .inst-hero__title { font-size: var(--text-3xl); }
}