/* ============================================================
   empresa.html — estilos específicos desta página.
   Reaproveita tokens.css/header.css/hero.css/sections.css para tudo que
   já existe (botões, cards de diferenciais, cat-grid, cta-final). Aqui
   só o que é realmente novo: hero institucional em vídeo (mais simples
   que o hero 3D da Home, de propósito — não duplicar a experiência),
   pilares de marca, cards de aplicação com texto, e FAQ.
   ============================================================ */

/* ---- Hero institucional (vídeo de fundo, sem rolamento 3D) ---- */
.page-hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 140px 0 80px;
  background: linear-gradient(180deg, #060F1C 0%, #051425 60%, #071E33 100%);
}
.page-hero-media { position: absolute; inset: 0; z-index: 0; }
.page-hero-media video, .page-hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.9) brightness(0.55);
}
.page-hero-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(5,15,28,0.95) 0%, rgba(5,15,28,0.75) 45%, rgba(5,15,28,0.55) 100%);
}
.page-hero-content { position: relative; z-index: 1; max-width: 720px; }
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.1;
  color: #EAF2FA;
  margin: 18px 0 20px;
}
.page-hero h1 .accent {
  background: linear-gradient(100deg, #2E86DE, #6FC1FF 45%, #2E86DE);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-hero p { font-size: 17px; line-height: 1.65; color: var(--text-light-muted); margin: 0 0 32px; max-width: 560px; }
.page-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.page-hero-ctas .btn { height: 52px; padding: 0 26px; }

/* ---- Quem somos: texto + imagem ---- */
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.about-copy p { font-size: 15.5px; line-height: 1.75; color: var(--text-dark-muted); margin: 0 0 18px; }
.about-copy p:last-child { margin-bottom: 0; }
.about-media { position: relative; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-soft); aspect-ratio: 4/5; }
.about-media img { width: 100%; height: 100%; object-fit: cover; }
.about-media-badge {
  position: absolute; left: 20px; bottom: 20px;
  background: rgba(5, 20, 37, 0.82);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 14px 18px;
  color: #fff;
  max-width: 240px;
}
.about-media-badge strong { display: block; font-family: var(--font-display); font-size: 13px; letter-spacing: 0.04em; color: #7EB6EF; margin-bottom: 4px; }
.about-media-badge span { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.85); }

/* ---- Pilares de marca ---- */
.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.pillar-card { text-align: center; padding: 8px; }
.pillar-icon {
  width: 60px; height: 60px; margin: 0 auto 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(46, 134, 222, 0.14);
  border: 1px solid rgba(126, 182, 239, 0.3);
  color: #7EB6EF;
  font-size: 22px;
}
.pillar-card h3 { font-size: 16px; color: #fff; margin: 0 0 10px; font-family: var(--font-display); letter-spacing: 0.01em; }
.pillar-card p { font-size: 13.5px; line-height: 1.65; color: var(--text-light-muted); margin: 0; }

/* ---- Aplicações com texto (segmento + benefício) ---- */
.app-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.app-detail-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4/5;
  cursor: default;
}
.app-detail-card video, .app-detail-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.4) brightness(.6);
  transform: scale(1.04);
  transition: transform .8s var(--ease-industrial), filter .5s ease;
}
.app-detail-card:hover video, .app-detail-card:hover img { filter: grayscale(0) brightness(.72); transform: scale(1.1); }
.app-detail-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,8,16,.95) 0%, rgba(0,8,16,.5) 55%, rgba(0,8,16,.15) 100%); }
.app-detail-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; z-index: 2; }
.app-detail-body span.tag {
  display: inline-block; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: #7EB6EF; margin-bottom: 8px;
}
.app-detail-body h3 { font-size: 17px; color: #fff; margin: 0 0 8px; font-family: var(--font-body); font-weight: 700; }
.app-detail-body p { font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,0.78); margin: 0; }

/* ---- Faixa "Menos paradas" ---- */
.impact-band { position: relative; overflow: hidden; padding: calc(var(--section-pad) * 0.85) 0; text-align: center; }
.impact-band-media { position: absolute; inset: 0; z-index: 0; }
.impact-band-media video, .impact-band-media img { width: 100%; height: 100%; object-fit: cover; }
.impact-band-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,12,23,.92) 0%, rgba(3,12,23,.8) 60%, rgba(3,12,23,.94) 100%); }
.impact-band-content { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.impact-band h2 { font-size: clamp(26px, 4vw, 40px); color: #fff; margin: 16px 0 18px; line-height: 1.2; }
.impact-band p { color: var(--text-light-muted); font-size: 15.5px; line-height: 1.7; margin: 0 auto 14px; max-width: 620px; }
.impact-band .fine-print { font-size: 12.5px; color: rgba(156,179,199,.65); font-style: italic; margin-top: 8px; }

/* FAQ: movido para sections.css (compartilhado com a Home). */

@media (max-width: 1100px) {
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-media { max-width: 480px; margin: 0 auto; }
  .pillars-grid { grid-template-columns: 1fr; gap: 22px; }
  .app-detail-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .page-hero { padding: 120px 0 56px; min-height: auto; }
  .page-hero-ctas { flex-direction: column; }
  .page-hero-ctas .btn { width: 100%; }
  .app-detail-grid { grid-template-columns: 1fr; }
}