/* ==========================================================================
   RESPONSIVO — PROPOSTA
   O Figma só tem desktop 1440. As regras abaixo são decisão minha e precisam
   da sua aprovação antes de eu aplicar nas outras 9 páginas.

   Breakpoints:
     1440  layout do Figma (referência exata)
    <1280  reduz respiros laterais, mantém a estrutura de 2 colunas
    <1024  tablet — colunas encolhem, cards viram 1 coluna abaixo de 900
     <768  mobile — tudo empilha, menu vira hambúrguer
     <420  ajuste fino de tipografia
   ========================================================================== */

/* --------------------------------------------------------------- < 1280px */
@media (max-width: 1279px) {
  :root { --rg-secao-y: 84px; }
  .rg-sobre__inner      { padding: var(--rg-secao-y) 6vw; gap: 6vw; }
  .rg-sobre__texto      { width: 52%; }
  .rg-sobre__figura     { width: 42%; }
  .rg-sobre__img        { width: 100%; height: auto; aspect-ratio: 511 / 489; }

  .rg-ceo__midia        { width: 44%; }
  .rg-ceo__texto        { padding: var(--rg-secao-y) 6vw; }

  .rg-eixos__inner      { padding: var(--rg-secao-y) 6vw; }
  .rg-servicos__inner   { padding: var(--rg-secao-y) 6vw; }
  .rg-fundadora__inner  { padding: var(--rg-secao-y) 6vw; gap: 6vw; }
  .rg-fundadora__texto  { width: auto; flex: 1 1 auto; }
  .rg-parceiros__inner  { padding: var(--rg-secao-y) 6vw; }

  .rg-contato__inner     { padding: 80px 6vw 96px; gap: 8vw; }
  .rg-listagem__inner    { padding: var(--rg-secao-y) 6vw; }
  .rg-listagem-topo__inner { padding: 56px 6vw 72px; }
  .rg-interna-topo__inner  { padding: 56px 6vw 72px; }
  .rg-interna-corpo__inner { grid-template-columns: 1fr 40%; gap: 5vw; padding: var(--rg-secao-y) 6vw; }
  .rg-interna-abordagem__inner { padding: 0 6vw var(--rg-secao-y); }
  .rg-outras__inner      { padding: var(--rg-secao-y) 6vw; }

  .rg-servico-intro__inner  { padding: var(--rg-secao-y) 6vw; }
  .rg-servico-intro__colunas { grid-template-columns: 1fr 1fr; gap: 0 5vw; }
  .rg-abordagem__inner  { padding: var(--rg-secao-y) 6vw; }
  .rg-cases__inner      { padding: var(--rg-secao-y) 6vw; }
  .rg-cases__lista      { gap: 40px; }
  .rg-abordagem__lista  { gap: 28px; }
  .rg-abordagem__card   { padding: 44px 24px 32px; min-height: 0; }
  .rg-abordagem__titulo { font-size: 26px; }
  .rg-abordagem__texto  { font-size: 18px; margin-top: 28px; }

  .rg-historia__inner   { padding: var(--rg-secao-y) 6vw; gap: 5vw; }
  .rg-historia__texto   { width: 55%; }
  .rg-historia__figura  { width: 40%; }
  .rg-historia__img     { width: 100%; height: auto; aspect-ratio: 473 / 452; }
  .rg-video__inner      { padding: var(--rg-secao-y) 6vw; }
  .rg-valores__inner    { padding: var(--rg-secao-y) 6vw; }
  .rg-visao__inner      { padding: var(--rg-secao-y-compacta) 6vw; }
  .rg-equipe__inner     { padding: var(--rg-secao-y) 6vw; }
  .rg-cta__inner        { padding: var(--rg-secao-y) 6vw; }
  .rg-pessoa            { gap: 5vw; }

  .rg-header__logo      { left: 6vw; }
  .rg-nav, .rg-lang     { right: 6vw; }
  .rg-hero__conteudo    { padding-left: 6vw; }
  .rg-hero__navegacao   { padding-right: 6vw; }
  .rg-footer__inner     { padding-left: 6vw; }
}

/* --------------------------------------------------------------- < 1024px */
@media (max-width: 1023px) {
  :root {
    --rg-secao-y-compacta: 52px;
    --rg-fs-h1: 40px; --rg-fs-h2: 36px; --rg-fs-h3: 28px;
    --rg-fs-h4: 26px; --rg-fs-h5: 22px; --rg-fs-lead: 20px;
    --rg-fs-lead-sm: 18px; --rg-fs-body: 17px;
    --rg-lh-body: 26px; --rg-h-hero: 620px; --rg-h-faixa: 200px;
    --rg-secao-y: 72px;
  }
  .rg-nav__list, .rg-nav { gap: 28px; }
  .rg-nav .sub-menu { min-width: 240px; }
  .rg-hero__conteudo { padding-top: 340px; }
  .rg-hero__navegacao { padding-right: 6vw; }

  /* Eixos: 3 colunas -> 3 linhas centralizadas. Os icones encolhem juntos,
     preservando a proporcao entre eles. */
  :root { --ico-escala: .8; }
  .rg-eixos__lista { grid-template-columns: 1fr; gap: 32px 0; }
  /* Valores: 3 colunas -> 2 */
  .rg-valores__lista { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
}

/* ---------------------------------------------------------------- < 900px */
@media (max-width: 899px) {
  /* Serviços: cards empilham. Não existe hover no toque — em vez de virar,
     título e texto aparecem juntos no card claro. */
  .rg-servicos__grade { grid-template-columns: 1fr; gap: 24px; }
  .rg-abordagem__lista { grid-template-columns: 1fr; }
  /* Listagem: 2 colunas -> 1 */
  .rg-listagem__grade { grid-template-columns: 1fr; gap: 32px; }
  /* Interna: texto e imagem empilham */
  .rg-interna-corpo__inner { grid-template-columns: 1fr; gap: 32px; }
  .rg-interna-corpo__figura { order: -1; }
  .rg-interna-abordagem__colunas { columns: 1; }
  .rg-cases__lista     { grid-template-columns: 1fr; gap: 48px; }
  /* Equipe: foto em cima, texto embaixo — a alternancia de lado nao faz
     sentido em coluna unica. */
  .rg-pessoa { flex-direction: column; gap: 28px; }
  .rg-pessoa--foto-direita .rg-pessoa__figura,
  .rg-pessoa--foto-esquerda .rg-pessoa__figura { order: 0; }
  .rg-pessoa__figura { width: 100%; max-width: 355px; }
  .rg-pessoa__img { width: 100%; height: auto; aspect-ratio: 355 / 505; }
  .rg-card { perspective: none; background: var(--rg-cream); border-radius: var(--rg-card-radius); }
  .rg-card__link  { height: auto; }
  .rg-card__inner { transform: none !important; transform-style: flat; height: auto; }
  .rg-card__face  {
    position: static; transform: none; backface-visibility: visible;
    background: transparent; align-items: center; text-align: center;
  }
  .rg-card__face--frente { padding: 40px 32px 0; }
  .rg-card__face--verso  { padding: 16px 32px 40px; }
  .rg-card__titulo-verso { display: none; }
  .rg-card__texto { color: var(--rg-text); }
}

/* ---------------------------------------------------------------- < 768px */
@media (max-width: 767px) {
  :root {
    --rg-fs-h1: 32px; --rg-fs-h2: 28px; --rg-fs-h3: 24px;
    --rg-fs-h4: 20px; --rg-fs-h5: 20px; --rg-fs-lead: 18px;
    --rg-fs-lead-sm: 17px; --rg-fs-body: 16px;
    --rg-lh-body: 25px; --rg-h-hero: 560px; --rg-h-faixa: 160px;
    --rg-gutter: 24px; --rg-btn-px: 26px; --rg-btn-h: 52px;
    --rg-gap-cta: 32px; --rg-foto-radius: 18px; --rg-secao-y: 56px;
  }

  /* --- Header: hambúrguer + painel sobreposto ---------------------------- */
  .rg-header__inner  { height: 88px; }
  .rg-header__logo   { left: 24px; top: 24px; }
  .rg-header__logo img { width: 168px; }

  .rg-header__toggle {
    display: block; position: absolute; right: 18px; top: 26px;
    width: 44px; height: 44px; background: none; border: 0; cursor: pointer;
  }
  .rg-header__bars, .rg-header__bars::before, .rg-header__bars::after {
    content: ""; position: absolute; left: 11px; width: 22px; height: 2px;
    background: var(--rg-teal); transition: transform .2s ease, opacity .2s ease;
  }
  .rg-header__bars        { top: 21px; }
  .rg-header__bars::before { top: -7px; left: 0; }
  .rg-header__bars::after  { top:  7px; left: 0; }
  .rg-header--sobreposto .rg-header__bars,
  .rg-header--sobreposto .rg-header__bars::before,
  .rg-header--sobreposto .rg-header__bars::after { background: var(--rg-white); }
  .is-open .rg-header__bars,
  .rg-header--sobreposto.is-open .rg-header__bars { background: transparent; }
  .is-open .rg-header__bars::before  { transform: translateY(7px) rotate(45deg); }
  .is-open .rg-header__bars::after   { transform: translateY(-7px) rotate(-45deg); }

  .rg-nav {
    position: fixed; inset: 0; right: 0; top: 0;
    display: none; flex-direction: column; justify-content: center; align-items: flex-start;
    gap: 0; padding: 0 40px; background: var(--rg-teal); z-index: 30;
  }
  .is-open .rg-nav { display: flex; }
  .rg-nav__list { flex-direction: column; align-items: flex-start; gap: 0; }
  .rg-nav__list > li { padding: 12px 0; width: 100%; }
  .rg-nav__list > li > a,
  .rg-header--sobreposto .rg-nav__list > li > a { font-size: 22px; color: var(--rg-white); }
  .rg-lang, .rg-header--sobreposto .rg-lang { color: var(--rg-white); }

  /* Sem hover no toque: o submenu já vem aberto, recuado sob o item pai. */
  .rg-nav__list > li.menu-item-has-children > a::after,
  .rg-nav__list > li.menu-item-has-children::after { display: none; content: none; }
  .rg-nav .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; margin: 10px 0 0; padding: 0 0 0 16px;
    background: none; box-shadow: none;
    border-left: 1px solid rgba(255, 255, 255, .22); border-radius: 0;
  }
  .rg-nav .sub-menu li { opacity: 1; transform: none; transition: none; }
  .rg-nav .sub-menu a { padding: 9px 0; font-size: 16px; opacity: .88; }
  .rg-nav .sub-menu a:hover { background: none; padding-left: 0; }
  .rg-nav .sub-menu a::before { content: none; }

  .rg-lang { position: static; margin-top: 40px; font-size: 15px; }

  /* --- Hero -------------------------------------------------------------- */
  .rg-hero__conteudo { padding: 0 24px 116px; position: absolute; inset: auto 0 0 0; display: grid; }
  .rg-hero__navegacao { inset: auto 0 40px 0; justify-content: flex-start; padding: 0 24px; }
  .rg-hero__ponto.esta-ativo { width: 38px; }
  .rg-hero__sub      { margin-top: 12px; }
  .rg-hero .rg-btn   { margin-top: 24px; }

  /* --- Conheça a RG Impact: texto e, abaixo, a imagem -------------------- */
  .rg-sobre__inner  { flex-direction: column; padding: var(--rg-secao-y) 24px; gap: 32px; }
  .rg-sobre__texto,
  .rg-sobre__figura { width: 100%; }
  .rg-sobre__figura { margin-top: 0; order: 2; }
  .rg-sobre__lead   { margin-top: 24px; max-width: none; }
  .rg-sobre__acao   { margin-top: var(--rg-gap-cta); }

  /* --- CEO: imagem em cima, texto embaixo -------------------------------- */
  .rg-ceo__inner  { flex-direction: column; min-height: 0; }
  .rg-ceo__midia  { width: 100%; height: 380px; }
  .rg-ceo__texto  { padding: var(--rg-secao-y) 24px; }
  .rg-ceo .rg-h2  { max-width: none; }
  .rg-ceo__sub    { margin-top: 20px; max-width: none; }
  .rg-ceo .rg-btn { margin-top: var(--rg-gap-cta); }

  /* --- Eixos ------------------------------------------------------------- */
  :root { --ico-escala: .62; }
  .rg-eixos__inner { padding: var(--rg-secao-y) 24px; }
  .rg-servico-intro__inner   { padding: var(--rg-secao-y) 24px; }
  .rg-listagem__inner        { padding: var(--rg-secao-y) 24px; }
  .rg-contato__inner         { grid-template-columns: 1fr; gap: 48px; padding: 56px 24px 64px; }
  .rg-contato__acoes         { gap: 20px; }
  .rg-contato__acoes .rg-btn { min-width: 0; width: 100%; }
  .rg-listagem-topo__inner   { padding: 40px 24px 48px; }
  .rg-interna-topo__inner    { padding: 40px 24px 48px; }
  .rg-interna-corpo__inner   { padding: var(--rg-secao-y) 24px; }
  .rg-interna-abordagem__inner { padding: 0 24px var(--rg-secao-y); }
  .rg-outras__inner          { padding: var(--rg-secao-y) 24px; }
  /* Card da listagem vira imagem em cima, texto embaixo */
  .rg-item, .rg-item__link   { grid-template-columns: 1fr; min-height: 0; }
  .rg-item__figura           { grid-column: 1; }
  .rg-item__painel           { grid-column: 1; padding: 28px 24px 32px; }
  .rg-item__img              { min-height: 0; aspect-ratio: 305 / 220; }
  .rg-servico-intro__colunas { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .rg-abordagem__inner { padding: var(--rg-secao-y) 24px; }
  .rg-abordagem__lista { margin-top: 32px; }
  .rg-cases__inner     { padding: var(--rg-secao-y) 24px; }
  .rg-cases__lista     { margin-top: 32px; }
  .rg-historia__inner { flex-direction: column; padding: var(--rg-secao-y) 24px; gap: 32px; }
  .rg-historia__texto, .rg-historia__figura { width: 100%; margin-top: 0; }
  .rg-video__inner    { padding: var(--rg-secao-y) 24px; }
  .rg-video__moldura  { margin-top: 32px; }
  .rg-visao__inner    { padding: var(--rg-secao-y-compacta) 24px; }
  .rg-visao__texto    { margin-top: 16px; }
  .rg-valores__inner  { padding: var(--rg-secao-y) 24px; }
  .rg-valores__lista  { grid-template-columns: 1fr; gap: 24px 0; margin-top: 32px; }
  .rg-equipe__inner   { padding: var(--rg-secao-y) 24px; }
  .rg-pessoa          { margin-top: 48px; }
  .rg-pessoa + .rg-pessoa { margin-top: 64px; }
  .rg-cta__inner      { padding: var(--rg-secao-y) 24px; }
  .rg-cta__texto      { margin-top: 24px; }
  .rg-eixos__sub   { margin-top: 20px; }
  .rg-eixos__lista { margin-top: 32px; gap: 28px 0; }

  /* --- Serviços ---------------------------------------------------------- */
  .rg-servicos__inner { padding: var(--rg-secao-y) 24px; }
  .rg-servicos__grade { margin-top: 32px; }

  /* --- Fundadora: retrato em cima ---------------------------------------- */
  .rg-fundadora__inner  { flex-direction: column; padding: var(--rg-secao-y) 24px; gap: 32px; }
  .rg-fundadora__figura { width: 100%; }
  .rg-fundadora__img    { width: 100%; height: auto; aspect-ratio: 340 / 516; max-height: 460px; object-position: center top; }
  .rg-fundadora__texto  { margin-top: 0; width: 100%; }
  .rg-fundadora__corpo  { margin-top: 24px; max-width: none; }
  .rg-fundadora .rg-btn { margin-top: var(--rg-gap-cta); }

  /* --- Parceiros: 2 colunas ---------------------------------------------- */
  .rg-parceiros__inner { padding: var(--rg-secao-y) 24px; }
  .rg-parceiros__lista {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px; margin-top: 32px; min-height: 0; justify-items: center;
  }

  /* --- Rodapé ------------------------------------------------------------ */
  .rg-footer__inner { display: flex; flex-direction: column; padding: var(--rg-secao-y) 24px 0; gap: 32px; }
  .rg-footer__brand,
  .rg-footer__nav,
  .rg-footer__col   { width: 100%; margin: 0; }
  .rg-footer__base  { flex-direction: column; align-items: flex-start; gap: 8px; padding: 40px 24px var(--rg-secao-y); }
}

/* ---------------------------------------------------------------- < 420px */
@media (max-width: 419px) {
  :root { --rg-fs-h1: 28px; --rg-fs-h2: 25px; --rg-h-hero: 500px; --rg-secao-y-compacta: 44px; }
  .rg-parceiros__lista { grid-template-columns: 1fr; }
  .rg-btn { width: 100%; }
}

/* ------------------------------------------------------ acessibilidade --- */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
