/* Página Responsabilidade social e sustentabilidade (Figma: frame 85:2485).
   Base em css/base.css; topo e abas em css/institucional.css. */
.rs-colunas{margin-top:calc(22 * var(--u));display:grid;grid-template-columns:minmax(0,596fr) minmax(0,571fr);column-gap:calc(85 * var(--u));max-width:calc(1252 * var(--u))}

/* Faixa com a árvore */
.rs-faixa{margin-top:calc(100 * var(--u));height:max(220px, calc(363 * var(--u)));overflow:hidden;position:relative}
.rs-faixa img{width:100%;height:100%;object-fit:cover;object-position:50% 18.7%}

/* Programa de Integridade: painel grafite + foto do prédio */
.rs-programa{display:grid;grid-template-columns:calc(840 * var(--u)) minmax(0,1fr);min-height:calc(847 * var(--u))}
.rs-programa-texto{position:relative;z-index:1;background:var(--grafite);padding:calc(183 * var(--u)) 40px calc(120 * var(--u)) var(--esq)}
.rs-programa .qs-frase{color:var(--pessego)}
.rs-programa .texto-lead{color:var(--areia);max-width:calc(596 * var(--u));min-width:260px}
.rs-programa .qs-frase + .texto-lead{margin-top:calc(45 * var(--u))}
.rs-programa .texto-lead + .texto-lead{margin-top:1.64em}
.rs-programa-foto{position:relative;overflow:hidden;margin-left:calc(-17 * var(--u))}
.rs-programa-foto img{width:100%;height:100%;object-fit:cover;object-position:67.5% 50%}

/* Social */
.rs-social{position:relative;padding-top:calc(65 * var(--u));padding-bottom:calc(90 * var(--u))}
.rs-social-grafismo{position:absolute;left:calc(1240 * var(--u));top:calc(44 * var(--u));width:calc(671 * var(--u));max-width:none;height:auto;pointer-events:none}
.rs-social .texto-lead{position:relative;margin-top:calc(22 * var(--u));max-width:calc(952 * var(--u))}
.rs-logos{position:relative;margin-top:calc(37 * var(--u));display:flex;flex-wrap:wrap;gap:calc(34 * var(--u))}
.rs-logo{
  width:max(240px, calc(323 * var(--u)));height:max(152px, calc(204 * var(--u)));border-radius:16px;background:#fff;
  box-shadow:0 16px 32px -24px rgba(59,58,60,.4);display:flex;align-items:center;justify-content:center;
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease;
}
.rs-logo:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(59,58,60,.5)}
.rs-logo img{width:62%;height:auto;max-height:96%;object-fit:contain}

/* Floresta: painéis de ações + Envira + números */
.rs-floresta{position:relative;overflow:hidden;color:var(--areia)}
.rs-floresta-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}

/* Painéis que abrem no hover (o Sopão começa aberto) */
.rs-paineis{position:relative;display:flex;height:max(420px, calc(496 * var(--u)))}
.rs-painel{
  --fundo:.8;
  position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 max(20px, calc(44 * var(--u))) max(40px, calc(62 * var(--u)));
  background:rgba(59,58,60,var(--fundo));cursor:pointer;outline:none;
  transition:flex-grow .7s cubic-bezier(.76,0,.24,1), background-color .6s ease;
}
.rs-painel:nth-child(1){--fundo:.9}
.rs-painel:nth-child(2){--fundo:.8}
.rs-painel:nth-child(3){--fundo:.7}
.rs-painel:nth-child(4){--fundo:.5}
.rs-painel:nth-child(5){--fundo:.3}
.rs-painel.aberto{flex-grow:2.025;background:rgb(59,58,60)}
.rs-painel h3{font-family:var(--titulo);font-weight:var(--peso-titulo);font-size:max(17px, calc(20 * var(--u)));line-height:1.52;color:var(--areia);max-width:calc(420 * var(--u))}
.rs-painel-texto{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .7s cubic-bezier(.76,0,.24,1), opacity .4s ease}
.rs-painel-texto > p{overflow:hidden;min-height:0;max-width:360px;font-size:max(15px, calc(18.5 * var(--u)));line-height:1.64;color:var(--areia)}
.rs-painel.aberto .rs-painel-texto{grid-template-rows:1fr;opacity:1;transition-delay:0s, .25s}
.rs-painel.aberto h3{margin-bottom:calc(28 * var(--u))}
.rs-painel h3{transition:margin .7s cubic-bezier(.76,0,.24,1)}

.rs-envira{position:relative;padding-top:calc(84 * var(--u));padding-bottom:calc(100 * var(--u))}
.rs-envira .qs-frase{color:#fff}
.rs-envira-grade{margin-top:calc(55 * var(--u));display:grid;grid-template-columns:minmax(0,594px) calc(323 * var(--u));justify-content:space-between;align-items:start;column-gap:40px;padding-right:calc(125 * var(--u))}
.rs-envira .texto-lead{color:#fff}
.rs-envira-texto .texto-lead + .texto-lead{margin-top:1.64em}
.rs-selos{display:flex;flex-direction:column;gap:calc(69 * var(--u));padding-top:9px}
.rs-selo{width:max(240px, calc(323 * var(--u)));height:max(152px, calc(204 * var(--u)));border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center}
.rs-selo img{max-width:74%;height:auto}
.rs-numeros{margin-top:calc(140 * var(--u));padding-left:calc(86 * var(--u));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px}
.rs-numero strong{display:block;font-family:var(--titulo);font-weight:var(--peso-titulo);font-size:max(34px, calc(48 * var(--u)));line-height:1;color:var(--pessego);white-space:nowrap}
.rs-numero span{display:block;margin-top:calc(22 * var(--u));max-width:210px;font-size:max(15px, calc(18.5 * var(--u)));line-height:1.64}

/* Impactos sociais na região */
.rs-impactos{padding-top:calc(127 * var(--u))}
.rs-impactos-grade{margin-top:calc(70 * var(--u));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px calc(36 * var(--u))}
.rs-impacto{
  min-height:max(220px, calc(252 * var(--u)));padding:22px 28px 28px;border-radius:16px;background:#fff;
  box-shadow:0 16px 32px -24px rgba(59,58,60,.4);display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease;
}
.rs-impacto:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(59,58,60,.5)}
.rs-impacto-num{
  font-family:var(--titulo);font-size:18.5px;line-height:1.64;
  background:linear-gradient(180deg,#FDCF9D,#3B3A3C);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content;
}
.rs-impacto p{font-size:max(16px, calc(18.5 * var(--u)));line-height:1.64;color:#000}

/* Certificado de Carbono Neutro */
.rs-certificado{position:relative;padding-top:calc(73 * var(--u));padding-bottom:calc(120 * var(--u))}
.rs-certificado-grafismo{position:absolute;left:calc(-318 * var(--u));top:calc(247 * var(--u));width:calc(794 * var(--u));max-width:none;height:auto;pointer-events:none}
.rs-certificado-grade{position:relative;display:grid;grid-template-columns:calc(683 * var(--u)) minmax(0,511px)}
.rs-certificado .qs-frase{padding-left:4px}
.rs-certificado-selo{margin:calc(86 * var(--u)) 0 0 calc(124 * var(--u));width:max(200px, calc(309 * var(--u)));height:auto}
.rs-certificado .texto-lead + .texto-lead{margin-top:1.64em}

@media (max-width:1024px){
  .rs-colunas,.rs-programa,.rs-envira-grade,.rs-certificado-grade{grid-template-columns:1fr;row-gap:24px}
  .rs-programa-texto{padding:64px 20px}
  .rs-programa-foto{margin-left:0;height:320px}
  .rs-social-grafismo,.rs-certificado-grafismo{display:none}
  .rs-social,.rs-impactos,.rs-certificado{padding-top:72px}
  .rs-paineis{flex-direction:column;height:auto}
  .rs-painel{flex:none;min-height:120px;padding:28px 20px}
  .rs-painel .rs-painel-texto{grid-template-rows:1fr;opacity:1}
  .rs-painel h3{margin-bottom:12px;max-width:none}
  .rs-envira{padding-top:64px;padding-bottom:64px} /* mantém a margem lateral do site (.conteudo) */
  .rs-envira-grade{padding-right:0}
  .rs-selos{flex-direction:row;flex-wrap:wrap;gap:16px}
  .rs-numeros{padding-left:0;flex-wrap:wrap;margin-top:56px}
  .rs-numeros{grid-template-columns:1fr 1fr;row-gap:32px}
  .rs-impactos-grade{grid-template-columns:1fr;margin-top:32px}
  .rs-certificado-selo{margin:24px 0 0}
}

/* Celular: logos das instituições e selos viram carrossel (com o dedo e sozinho) */
@media (max-width:767px){
  .rs-logos,.rs-selos{
    flex-direction:row;flex-wrap:nowrap;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    overscroll-behavior-x:contain;margin-right:calc(var(--dir) * -1);padding-right:var(--dir);padding-bottom:6px;
  }
  .rs-logos::-webkit-scrollbar,.rs-selos::-webkit-scrollbar{display:none}
  .rs-logo,.rs-selo{flex:none;width:min(62vw, 260px);scroll-snap-align:start}
  .rs-numeros{grid-template-columns:1fr 1fr;column-gap:20px}
}