/* ==========================================================================
   HOME — medidas do frame "Home" (node 1:2), canvas 1440x5585.
   Header e rodape ficam em layout.css, que vale para o site inteiro.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO                     Figma: 0 -> 757 | h1 x105 y441 | btn y580
   -------------------------------------------------------------------------- */
.rg-hero { position: relative; height: var(--rg-h-hero); overflow: hidden; }
.rg-hero__midia { position: absolute; inset: 0; }
.rg-hero__midia::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(1,1,1,.35) 0%, rgba(1,1,1,0) 38%, rgba(1,1,1,.45) 100%);
}

/* --- Slider: as imagens se cruzam e cada uma faz um ken burns lento --------
   O movimento alterna o ponto de origem entre uma imagem e outra, para nao
   parecer que e sempre o mesmo zoom. */
.rg-hero__slides { position: absolute; inset: 0; }
.rg-hero__slide {
  position: absolute; inset: 0; overflow: hidden;
  opacity: 0; transition: opacity var(--rg-hero-fade) ease-in-out;
}
.rg-hero__slide.esta-ativo { opacity: 1; }
.rg-hero__img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 60%;
  transform: scale(1.01); will-change: transform;
}
.rg-hero__slide.esta-ativo .rg-hero__img {
  animation: rg-ken-burns var(--rg-hero-ken) ease-out both;
}
.rg-hero__slide:nth-child(odd)  .rg-hero__img { transform-origin: 32% 42%; }
.rg-hero__slide:nth-child(even) .rg-hero__img { transform-origin: 68% 58%; }

@keyframes rg-ken-burns {
  from { transform: scale(1.01); }
  to   { transform: scale(var(--rg-hero-zoom)); }
}

/* Uma imagem só: sem cruzamento, mas o ken burns continua. */
.rg-hero__slides--unica .rg-hero__slide { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rg-hero__slide.esta-ativo .rg-hero__img { animation: none; transform: none; }
  .rg-hero__texto.esta-ativo > * { transition-delay: 0ms; transform: none; }
}
/* Os blocos de texto ficam empilhados na mesma celula da grade: o container
   assume a altura do maior e nada salta na troca. */
.rg-hero__conteudo {
  position: relative; z-index: 3; display: grid;
  padding-top: 441px; padding-left: 105px;
}
.rg-hero__texto {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity var(--rg-dur-rapida) ease, visibility var(--rg-dur-media);
}
.rg-hero__texto.esta-ativo { opacity: 1; visibility: visible; }

.rg-hero .rg-h1 { max-width: 700px; }
.rg-hero__sub { margin: 8px 0 0; max-width: 860px; }   /* y 509 */
.rg-hero .rg-btn { margin-top: var(--rg-gap-cta-hero, 28px); }  /* Figma 21px */

/* Entrada em cascata: titulo, linha de apoio, botao. O atraso só existe na
   entrada — ao sair, tudo some junto. */
.rg-hero__texto > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--rg-dur-rapida) ease,
              transform var(--rg-dur-media) var(--rg-ease);
}
.rg-hero__texto.esta-ativo > * { opacity: 1; transform: none; }
.rg-hero__texto.esta-ativo > *:nth-child(1) { transition-delay: 200ms; }
.rg-hero__texto.esta-ativo > *:nth-child(2) { transition-delay: 320ms; }
.rg-hero__texto.esta-ativo > *:nth-child(3) { transition-delay: 440ms; }

/* --- Bolinhas ------------------------------------------------------------
   A ativa vira uma pílula e o preenchimento bronze corre no tempo do banner,
   funcionando como barra de progresso. */
.rg-hero__navegacao {
  position: absolute; z-index: 4; inset: auto 0 56px 0;
  display: flex; justify-content: flex-end;
  padding-right: 105px; pointer-events: none;
}
.rg-hero__pontos { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.rg-hero__ponto {
  position: relative; width: 10px; height: 10px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .42);
  transition: width var(--rg-dur-media) var(--rg-ease),
              background-color var(--rg-dur-rapida) ease;
  overflow: hidden;
}
.rg-hero__ponto:hover { background: rgba(255, 255, 255, .68); }
.rg-hero__ponto:focus-visible { outline: 2px solid var(--rg-bronze); outline-offset: 3px; }
.rg-hero__ponto.esta-ativo { width: 46px; background: rgba(255, 255, 255, .30); }
.rg-hero__ponto.esta-ativo::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  background: var(--rg-bronze);
  animation: rg-progresso var(--rg-hero-intervalo) linear forwards;
}
.rg-hero.esta-pausado .rg-hero__ponto.esta-ativo::after { animation-play-state: paused; }

@keyframes rg-progresso { from { width: 0; } to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .rg-hero__ponto.esta-ativo::after { animation: none; width: 100%; }
}

/* Um texto só para todos os banners: fica parado, sem reanimar o mesmo texto. */
.rg-hero__texto:only-child,
.rg-hero__texto:only-child > * {
  opacity: 1; visibility: visible; transform: none; transition: none;
}

/* --------------------------------------------------------------------------
   CONHECA A RG IMPACT      Figma: "Welcome" 36:6, 757 -> 1529, fundo #f7f4eb
   texto x167 w586 | imagem x845 y907 511x489
   -------------------------------------------------------------------------- */
.rg-sobre { background: var(--rg-cream); }
.rg-sobre__inner {
  display: flex; align-items: flex-start;
  padding: var(--rg-secao-y) 84px var(--rg-secao-y) 167px; gap: 92px;
}
.rg-sobre__texto { width: 586px; flex: 0 0 auto; }
.rg-sobre__lead  { margin-top: 45px; max-width: 470px; }   /* y 951 */
.rg-sobre__corpo { margin-top: 28px; }                     /* y 1023 */
.rg-sobre__acao  { margin-top: var(--rg-gap-cta); }        /* Figma 44px */
.rg-sobre__figura { width: 511px; flex: 0 0 auto; margin: 45px 0 0; }
.rg-sobre__img { width: 511px; height: 489px; object-fit: cover; border-radius: var(--rg-foto-radius); }

/* --------------------------------------------------------------------------
   CTA COM A CEO            Figma: 1529 -> 2288 | painel de imagem 0..638
   texto x782 y1715
   -------------------------------------------------------------------------- */
.rg-ceo__inner { display: flex; align-items: stretch; min-height: 759px; }
.rg-ceo__midia { width: 638px; flex: 0 0 auto; background: var(--rg-brown); overflow: hidden; }
.rg-ceo__img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.rg-ceo__texto {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
  padding: var(--rg-secao-y) 198px var(--rg-secao-y) 144px;
}
.rg-ceo .rg-h2 { max-width: 437px; }
.rg-ceo__sub { margin-top: 42px; max-width: 460px; }  /* y 1898 */
.rg-ceo .rg-btn { margin-top: var(--rg-gap-cta); }     /* Figma 62px */

/* --------------------------------------------------------------------------
   EIXOS DE ATUACAO         Figma: 2288 -> 2852, fundo #f7f4eb
   titulo y2369 | sub y2456 w718 | rotulos y2691
   -------------------------------------------------------------------------- */
.rg-eixos { background: var(--rg-cream); }
.rg-eixos__inner { padding: var(--rg-secao-y) var(--rg-gutter); }
.rg-eixos__sub { margin: 43px auto 0; max-width: 718px; }
.rg-eixos__lista {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0 47px; margin: 23px 0 0; padding: 0; list-style: none;
}
.rg-eixo { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* Faixa dos icones: altura do maior (166px, Figma y 2537 -> 2703).
   O recuo negativo devolve o rotulo para y 2691, como no layout.
   --ico-escala reduz os tres proporcionalmente nos breakpoints. */
.rg-eixo__icone {
  position: relative; display: block; width: 100%;
  height:        calc(166px * var(--ico-escala, 1));
  margin-bottom: calc(-12px * var(--ico-escala, 1));
}
.rg-eixo__img {
  position: absolute; left: 50%; transform: translateX(-50%);
  object-fit: contain;
}
/* Tamanho e topo de cada icone, exatamente como no Figma */
.rg-eixo--1 .rg-eixo__img {                                  /* node 209:171 */
  width:  calc(74px * var(--ico-escala, 1));
  height: calc(74px * var(--ico-escala, 1));
  top:    calc(44px * var(--ico-escala, 1));
}
.rg-eixo--2 .rg-eixo__img {                                  /* node 344:24  */
  width:  calc(166px * var(--ico-escala, 1));
  height: calc(166px * var(--ico-escala, 1));
  top: 0;
}
.rg-eixo--3 .rg-eixo__img {                                  /* node 209:108 */
  width:  calc(139px * var(--ico-escala, 1));
  height: calc(139px * var(--ico-escala, 1));
  top:    calc(7px * var(--ico-escala, 1));
}
.rg-eixo__rotulo { max-width: 280px; }

/* --------------------------------------------------------------------------
   NOSSOS SERVICOS          Figma: 3104 -> 3856 | cards 378x441 em x106/531/956
   -------------------------------------------------------------------------- */
.rg-servicos { background: var(--rg-white); }
.rg-servicos__inner { padding: var(--rg-secao-y) var(--rg-gutter); }
.rg-servicos__grade {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 47px; margin: 60px 0 0; padding: 0; list-style: none;
}
/* Card que vira no hover: frente com o titulo, verso com o texto (#19393c). */
.rg-card { perspective: 1600px; }
.rg-card__link { display: block; height: 441px; }
.rg-card__inner {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .6s cubic-bezier(.4,.2,.2,1);
}
.rg-card__link:hover .rg-card__inner,
.rg-card__link:focus-visible .rg-card__inner { transform: rotateY(180deg); }

.rg-card__face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px; border-radius: var(--rg-card-radius);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  text-align: center;
}
.rg-card__face--frente { background: var(--rg-cream); }
.rg-card__face--verso  {
  background: var(--rg-teal); transform: rotateY(180deg);
  justify-content: flex-start; align-items: flex-start; text-align: left;
  padding: 56px 48px;
}
.rg-card__titulo { max-width: 280px; }
.rg-card__titulo-verso {
  display: block; margin-bottom: 16px;
  font-size: var(--rg-fs-h5); font-weight: 500; line-height: var(--rg-lh-h3);
  color: var(--rg-white);
}
.rg-card__texto {
  display: block; color: var(--rg-white);
  font-size: var(--rg-fs-sm); line-height: 25px; letter-spacing: var(--rg-ls-body);
}

/* --------------------------------------------------------------------------
   QUEM ESTA POR TRAS       Figma: 3856 -> 4630, fundo #e8dacc
   retrato x154 y3965 340x516 | texto x589 y4024 w694
   -------------------------------------------------------------------------- */
.rg-fundadora { background: var(--rg-sand); }
.rg-fundadora__inner {
  display: flex; align-items: flex-start; gap: 95px;
  padding: var(--rg-secao-y) 157px var(--rg-secao-y) 154px;
}
.rg-fundadora__figura { width: 340px; flex: 0 0 auto; margin: 0; }
.rg-fundadora__img { width: 340px; height: 516px; object-fit: cover; border-radius: var(--rg-foto-radius); }
.rg-fundadora__legenda { margin-top: 12px; font-size: var(--rg-fs-tiny); line-height: 1.6; color: var(--rg-brown); }
.rg-fundadora__legenda strong { font-size: var(--rg-fs-xs); letter-spacing: .06em; }
.rg-fundadora__texto { width: 694px; flex: 0 0 auto; margin-top: 59px; }
.rg-fundadora__corpo { margin-top: 39px; max-width: 665px; }
.rg-fundadora .rg-btn { margin-top: var(--rg-gap-cta); }   /* Figma 74px */

/* --------------------------------------------------------------------------
   COM QUEM TRABALHAMOS     Figma: 4630 -> 4992 | logos y4795, x195..1283
   -------------------------------------------------------------------------- */
.rg-parceiros__inner { padding: var(--rg-secao-y) 157px var(--rg-secao-y) 195px; }
.rg-parceiros__lista {
  display: flex; align-items: center; justify-content: space-between;
  margin: 20px 0 0; padding: 0; list-style: none; min-height: 138px;
}
.rg-parceiros__logo { max-height: 60px; width: auto; object-fit: contain; }