/* ==========================================================================
   PÁGINAS DE SERVIÇO — Figma 217:5443, 330:10 e 330:239 (1440x3706 / 3642).
   Mesma estrutura nas três; muda a cor dos cards de abordagem.
   O bloco de vídeo usa as regras de .rg-video, aqui repetidas para valer
   também nesta página (em quem-somos.css elas só carregam lá).
   ========================================================================== */

/* --------------------------------------------------------------------------
   INTRO                    Figma: 16 -> 619, fundo #f7f4eb (segue o header)
   titulo x179 | colunas x181 (544) e x816 (516)
   -------------------------------------------------------------------------- */
.rg-servico-intro { background: var(--rg-cream); }
.rg-servico-intro__inner { padding: var(--rg-secao-y) 108px var(--rg-secao-y) 179px; }
.rg-servico-intro__titulo { color: var(--rg-brown-alt); }   /* Figma #43211c */
.rg-servico-intro__colunas {
  display: grid; grid-template-columns: 544px 516px;
  gap: 0 109px; margin-top: 58px;                            /* 260+44 -> 362 */
}

/* --------------------------------------------------------------------------
   VÍDEO                    Figma: 619 -> 1526, fundo #19393c
   vídeo 1216x683 (16:9) centralizado
   -------------------------------------------------------------------------- */
.rg-video { background: var(--rg-teal); }
.rg-video__inner { padding: var(--rg-secao-y) 112px; }
.rg-video__titulo { color: var(--rg-bronze); }
.rg-video__moldura {
  margin: 0 auto; width: 100%; max-width: 1216px;
  border-radius: var(--rg-foto-radius); overflow: hidden;
  box-shadow: 0 24px 60px rgba(1, 1, 1, .32);
}
.rg-video__capa { width: 100%; height: auto; aspect-ratio: 1216 / 683; object-fit: cover; }
.rg-video__player { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; background: #000; }
.rg-video__embed { position: relative; aspect-ratio: 16 / 9; }
.rg-video__embed iframe,
.rg-video__embed video,
.rg-video__embed > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------------------
   NOSSA ABORDAGEM          Figma: 1518 -> 2233, fundo #f7f4eb
   cards 349x427, raio 47, em x 151 / 544 / 940
   -------------------------------------------------------------------------- */
.rg-abordagem { background: var(--rg-cream); }
.rg-abordagem__inner { padding: var(--rg-secao-y) 151px; }
.rg-abordagem__lista {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 45px; margin: 50px 0 0; padding: 0; list-style: none;
}
.rg-abordagem__card {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  min-height: 427px; padding: 61px 32px 40px;                /* titulo em y 1744 */
  border-radius: 47px; text-align: center;
}
.rg-abordagem__titulo {
  margin: 0; font-size: 32px; font-weight: 700; line-height: 1.3;
}
.rg-abordagem__texto {
  margin: 42px 0 0; color: var(--rg-white);
  font-size: 22px; font-weight: 500; line-height: 1.32;
}
/* Verde-escuro com título bronze — Políticas Públicas e Atração de Investimentos */
.rg-abordagem--escuro .rg-abordagem__card   { background: var(--rg-teal); }
.rg-abordagem--escuro .rg-abordagem__titulo { color: var(--rg-bronze); }
/* Bronze com título verde-escuro — Apoio a Empresas */
.rg-abordagem--bronze .rg-abordagem__card   { background: var(--rg-bronze); }
.rg-abordagem--bronze .rg-abordagem__titulo { color: var(--rg-teal); }

/* --------------------------------------------------------------------------
   CASES / PROJETOS         Figma: imagens 349x333 em x 110 / 535 / 960
   -------------------------------------------------------------------------- */
.rg-cases { background: var(--rg-white); }
.rg-cases__inner { padding: var(--rg-secao-y) 110px; }
.rg-cases__lista {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 76px; margin: 72px 0 0; padding: 0; list-style: none;
}
.rg-case__figura { margin: 0 0 26px; }
.rg-case__img {
  width: 100%; height: auto; aspect-ratio: 349 / 333; object-fit: cover;
  border-radius: var(--rg-foto-radius);
  transition: transform var(--rg-dur-media) var(--rg-ease);
}
.rg-case__categoria {
  margin: 0 0 8px; font-size: var(--rg-fs-xs); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--rg-bronze);
}
.rg-case__titulo {
  margin: 0; font-size: var(--rg-fs-sm); font-weight: 600; line-height: 1.35;
  color: var(--rg-heading);
}
.rg-case__texto {
  margin: 8px 0 0; font-size: var(--rg-fs-nav); line-height: 1.5; color: var(--rg-text);
}
.rg-case__mais {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-size: var(--rg-fs-nav); font-weight: 500; color: var(--rg-heading);
}
.rg-case__mais::after {
  content: ""; width: 18px; height: 1px; background: currentColor;
  transition: width var(--rg-dur-rapida) var(--rg-ease);
}
.rg-case__link { display: block; }
.rg-case__link:hover .rg-case__img { transform: scale(1.03); }
.rg-case__link:hover .rg-case__mais { color: var(--rg-bronze); }
.rg-case__link:hover .rg-case__mais::after { width: 28px; }
.rg-case__figura { overflow: hidden; border-radius: var(--rg-foto-radius); }

/* --------------------------------------------------------------------------
   CASES em cartão — "Apoio a Empresas" e "Atração de Investimentos"
   Figma: cartão 408x552 (#f7f4eb, raio 29) com faixa de imagem 407x184 no topo
   -------------------------------------------------------------------------- */
.rg-cases--cartao .rg-cases__inner { padding-left: 76px; padding-right: 76px; }
.rg-cases--cartao .rg-cases__lista { gap: 32px; }
.rg-cases--cartao .rg-case {
  display: flex; flex-direction: column;
  min-height: 552px; border-radius: 29px; overflow: hidden;
  background: var(--rg-cream);
}
.rg-cases--cartao .rg-case__link { display: flex; flex-direction: column; height: 100%; }
.rg-cases--cartao .rg-case__figura { margin: 0; border-radius: 0; }
.rg-cases--cartao .rg-case__img { aspect-ratio: 407 / 184; border-radius: 0; }
.rg-cases--cartao .rg-case__categoria,
.rg-cases--cartao .rg-case__titulo,
.rg-cases--cartao .rg-case__texto,
.rg-cases--cartao .rg-case__mais { margin-left: 32px; margin-right: 32px; }
.rg-cases--cartao .rg-case__categoria { margin-top: 26px; }
.rg-cases--cartao .rg-case__titulo    { font-size: var(--rg-fs-body); }
.rg-cases--cartao .rg-case__texto     { flex: 1 1 auto; }
.rg-cases--cartao .rg-case__mais      { margin-bottom: 32px; }