/* ============================================================
   HOME — Feedback 2.0 (2026-09-11)
   Referência: inves.finance
   Carrega SÓ na home, depois do style.css.
   ============================================================ */

:root {
  --creme:       #E3E7EC;
  --creme-2:     #D4D9E0;
  --creme-3:     #ECEEF3;
  --tinta:       #111314;
  --tinta-suave: #4E5555;
  /* Seções e cards chapados: nada de canto arredondado (pedido 23/09). */
  --r-lg: 0px;
  --r-md: 0px;
}

/* Fundo base da home agora é cinza-claro da marca */
body.home { background: var(--creme); color: var(--tinta); }

/* ---------- Header: mesmas regras das páginas internas ----------
   Sem override — o style.css já define: logo negativo, links
   rgba(255,255,255,.72), scrolled → fundo dark. */

/* ---------- Utilitários ---------- */
.ri-home .eyebrow { color: var(--red); }
.ri-sec-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.ri-sec-head .eyebrow { justify-content: center; }
.ri-sec-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--tinta);
  line-height: 1.18;
}
.ri-sec-head h2 span { color: var(--red); }
.ri-sec-cta { text-align: center; margin-top: 52px; }

/* ============================================================
   HERO — dark, igual às internas + canvas particles
   ============================================================ */
.ri-hero {
  position: relative;
  overflow: hidden;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background: var(--dark);
  padding: 140px 0 80px;
}
/* canvas particles */
.ri-hero #hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .28;
  z-index: 1;
  pointer-events: none;
}
.ri-hero-media {
  position: absolute;
  inset: -5%;
  z-index: 0;
  pointer-events: none;
}
.ri-hero-texture-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* Véu do hero. Aliviado em 23/09: as duas camadas somadas escureciam tanto
   que a foto nova quase não aparecia. Segue garantindo o texto branco legível. */
.ri-hero--dark .ri-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(17,19,20,.30) 0%, rgba(17,19,20,.64) 100%),
    linear-gradient(135deg, rgba(17,19,20,.74) 0%, rgba(17,19,20,.34) 60%, rgba(17,19,20,.66) 100%),
    radial-gradient(1100px 520px at 82% -10%, rgba(172,23,45,.22), transparent 60%),
    radial-gradient(900px 480px at 8% 110%, rgba(172,23,45,.12), transparent 55%);
}
.ri-hero .container { position: relative; z-index: 2; text-align: center; }
.ri-hero-frase {
  font-family: var(--ff-head);
  font-size: clamp(2.3rem, 5.6vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
  color: #fff;
  max-width: 1020px;
  margin: 0 auto 30px;
}
.ri-hero-frase em { font-style: normal; color: var(--red); }
.ri-hero-frase .ri-palavra {
  display: inline-block;
  opacity: 0;
  transform: translateY(26px) rotate(1.5deg);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay: var(--atraso, 0s);
}
.ri-hero-frase.pronta .ri-palavra { opacity: 1; transform: none; }
.ri-hero-sub {
  font-size: clamp(1.02rem, 1.6vw, 1.25rem);
  color: rgba(255,255,255,.72);
  max-width: 540px;
  margin: 0 auto 42px;
  line-height: 1.7;
}
.ri-hero-acoes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* ============================================================
   DECK — cartas empilhadas (passos)
   ============================================================ */
.ri-deck { position: relative; }
.ri-carta {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px var(--pad) 48px;
}
.ri-carta-inner {
  width: min(880px, 100%);
  border-radius: var(--r-lg);
  padding: clamp(44px, 7vw, 88px);
  text-align: center;
  /* sombra em camadas, suave — a anterior era um borrão único muito forte */
  box-shadow:
    0 1px 2px rgba(17,19,20,.05),
    0 6px 14px rgba(17,19,20,.05),
    0 18px 40px rgba(17,19,20,.06),
    0 40px 80px rgba(17,19,20,.05);
  transform-origin: center top;
  transition: transform .1s linear;
}
.ri-carta-inner .ri-carta-num {
  display: inline-block;
  font-family: var(--ff-head);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--red);
  margin-bottom: 26px;
}
.ri-carta-inner h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.2;
  margin-bottom: 20px;
}
.ri-carta-inner p {
  font-size: clamp(.98rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  max-width: 560px;
  margin: 0 auto;
}
.ri-carta-passo { background: var(--creme-2); color: var(--tinta); text-align: left; }
.ri-carta-passo p { margin: 0; color: var(--tinta-suave); }

/* Passos: cartas baixas e compactas. Em tela de 27" as cartas de 86vh
   tomavam mais de um monitor cada uma — agora a carta cabe sobrando espaço. */
/* O percurso de rolagem de cada passo agora vem do padding de baixo, não de
   uma altura fixa de tela: a carta fica do tamanho do texto e o vão entre
   uma carta e a seguinte encurta bastante. */
.ri-deck-passos .ri-carta {
  min-height: 0;
  top: 104px;
  padding: 0 var(--pad) 150px;
  align-items: flex-start;
}
/* a última não precisa de percurso — senão sobra um vazio antes do botão */
.ri-deck-passos .ri-carta:last-child { padding-bottom: 24px; }
.ri-deck-passos .ri-carta-inner {
  width: min(680px, 100%);
  padding: clamp(28px, 3.4vw, 44px) clamp(28px, 3.6vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ri-deck-passos .ri-carta-inner .ri-carta-num { margin-bottom: 14px; }
.ri-deck-passos h2 { font-size: clamp(1.32rem, 2.2vw, 1.72rem); margin-bottom: 12px; }
.ri-deck-passos .ri-carta-inner p { font-size: clamp(.94rem, 1.25vw, 1.02rem); line-height: 1.68; }

/* ============================================================
   NÚMEROS
   ============================================================ */
.ri-numeros { padding: 100px 0 90px; background: #fff; }
.ri-numeros-head {
  max-width: 760px;
  margin: 0 auto 80px;
  text-align: center;
}
.ri-numeros-head h2 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--tinta);
  line-height: 1.16;
  margin-bottom: 22px;
}
.ri-numeros-head h2 span { color: var(--red); }
.ri-numeros-sub {
  font-size: 1.05rem;
  color: var(--tinta-suave);
  line-height: 1.7;
}
.ri-numeros-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.ri-numero {
  flex: 0 0 calc(20% - 15px);
  min-width: 160px;
  max-width: 220px;
  background: var(--creme);
  border-radius: var(--r-md);
  padding: 38px 20px 32px;
  text-align: center;
  transform: translateY(var(--ry, 0px));
  transition: box-shadow var(--t) var(--ease);
}
.ri-numero:hover { transform: translateY(calc(var(--ry, 0px) - 6px)); box-shadow: 0 18px 48px rgba(17,19,20,.1); }
.ri-numero strong {
  display: block;
  font-family: var(--ff-head);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--red);
  margin-bottom: 8px;
}
.ri-numero > span {
  font-family: var(--ff-head);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ============================================================
   ECOSSISTEMA — textura + overlay dark
   ============================================================ */
.ri-metodo {
  position: relative;
  overflow: hidden;
  background: var(--dark);
}
/* Camada 1 — foto de fundo em parallax (inset negativo dá margem ao movimento) */
.ri-metodo-texture {
  position: absolute;
  inset: -8%;
  z-index: 0;
  pointer-events: none;
  background: url('../img/home/bg-ecossistema.jpg') center / cover no-repeat;
}
/* Camada 2 — véu escuro. A foto em meio-tom é clara: sem véu forte ela
   disputa atenção com o diagrama e atrapalha a leitura dos rótulos. */
.ri-metodo-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(17,19,20,.90) 0%, rgba(17,19,20,.94) 100%),
    radial-gradient(900px 500px at 80% 20%, rgba(172,23,45,.16), transparent 60%),
    radial-gradient(700px 400px at 10% 80%, rgba(172,23,45,.11), transparent 55%);
}
/* Camada 3 — dots pontilhados */
.ri-metodo-dots {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
}
.ri-metodo-content {
  position: relative;
  z-index: 3;
  padding-top: 90px;
  padding-bottom: 80px;
}
.ri-metodo-head {
  text-align: center;
  margin-bottom: 54px;
  padding: 0 var(--pad);
}
.ri-metodo-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: #fff;
}
.ri-metodo-head h2 span { color: var(--red); }
/* ---------- Diagrama do ecossistema (SVG vetorial, sem card branco) ---------- */
.ri-eco {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 8px;
}
.ri-eco-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* Anéis: trilho apagado + arco aceso com brilho */
.ri-eco-trilho { stroke: rgba(255,255,255,.13); stroke-width: 6; }
.ri-eco-arco   { stroke-width: 7; fill: none; filter: url(#eco-brilho); }
.ri-eco-arco--pf { stroke: #C81E38; }
.ri-eco-arco--pj { stroke: var(--red); }
.ri-eco-arco--sv { stroke: #D8334C; }

/* Nomes dos anéis */
.ri-eco-nome { fill: #E8607A; font-family: var(--ff-head); font-weight: 700; letter-spacing: .08em; }
.ri-eco-nome--anel { font-size: 26px; }
.ri-eco-nome--sv   { font-size: 19px; }

/* Núcleo */
.ri-eco-centro {
  fill: #fff;
  font-family: var(--ff-head);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .06em;
}

/* Itens — contorno branco (PF/PJ) e preenchido branco (Serviços) */
.ri-eco-bola {
  fill: rgba(22,25,27,.72);
  stroke: rgba(255,255,255,.62);
  stroke-width: 1.5;
  transition: fill .28s var(--ease), stroke .28s var(--ease);
}
.ri-eco-itens--sv .ri-eco-bola { fill: #fff; stroke: #fff; }
.ri-eco-ico {
  fill: none;
  stroke: rgba(255,255,255,.92);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .28s var(--ease);
}
.ri-eco-itens--sv .ri-eco-ico { stroke: var(--red); }
.ri-eco-rotulo {
  fill: rgba(255,255,255,.86);
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 500;
  transition: fill .28s var(--ease);
}
.ri-eco-itens--sv .ri-eco-rotulo { font-size: 13.5px; }

/* Realce ao passar o mouse: só cor, nunca posição. Escalar a bola e o ícone
   separadamente fazia o ícone escorregar para fora do círculo. */
.ri-eco-item { transition: opacity .28s var(--ease); }
.ri-eco-svg:hover .ri-eco-item { opacity: .55; }
.ri-eco-svg .ri-eco-item:hover { opacity: 1; }
.ri-eco-item:hover .ri-eco-bola { fill: #fff; stroke: #fff; }
.ri-eco-item:hover .ri-eco-ico  { stroke: var(--red); }
.ri-eco-itens--sv .ri-eco-item:hover .ri-eco-bola { fill: var(--red); stroke: #fff; }
.ri-eco-itens--sv .ri-eco-item:hover .ri-eco-ico  { stroke: #fff; }
.ri-eco-item:hover .ri-eco-rotulo { fill: #fff; }

/* ---------- Animação de entrada (ativada por .eco-on via JS) ---------- */
.ri-eco[data-eco] .ri-eco-arco {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.ri-eco.eco-on .ri-eco-arco {
  transition: stroke-dashoffset 1.5s var(--ease);
  stroke-dashoffset: 0;
}
.ri-eco.eco-on .ri-eco-arco--pj { transition-delay: .18s; }
.ri-eco.eco-on .ri-eco-arco--sv { transition-delay: .34s; }

.ri-eco[data-eco] .ri-eco-item,
.ri-eco[data-eco] .ri-eco-nucleo,
.ri-eco[data-eco] .ri-eco-anel-nome text { opacity: 0; }
.ri-eco.eco-on .ri-eco-item,
.ri-eco.eco-on .ri-eco-nucleo,
.ri-eco.eco-on .ri-eco-anel-nome text {
  opacity: 1;
  transition: opacity .6s var(--ease);
}
/* cascata: cada item entra um pouco depois do anterior */
.ri-eco.eco-on .ri-eco-item { transition-delay: calc(.5s + var(--i) * .07s); }
.ri-eco.eco-on .ri-eco-itens--pj .ri-eco-item { transition-delay: calc(.68s + var(--i) * .07s); }
.ri-eco.eco-on .ri-eco-itens--sv .ri-eco-item { transition-delay: calc(.86s + var(--i) * .07s); }
.ri-eco.eco-on .ri-eco-nucleo { transition-delay: 1.05s; }

/* Estilos dos vagão-num (mantido para compatibilidade) */
.ri-vagao-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--red);
  font-family: var(--ff-head);
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
  margin-bottom: 24px;
}

/* ============================================================
   ASSESSORES + VÍDEO
   ============================================================ */
.ri-assessores { padding: 110px 0 90px; background: #fff; }
.ri-assessores-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.ri-assessores-texto h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--tinta);
  margin-bottom: 22px;
  line-height: 1.18;
}
.ri-assessores-texto h2 span { color: var(--red); }
.ri-assessores-texto p {
  font-size: 1.05rem;
  color: var(--tinta-suave);
  line-height: 1.82;
  margin-bottom: 36px;
}
/* Vídeo em destaque */
.ri-assessores-video-wrap {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--dark);
  aspect-ratio: 16/9;
}
.ri-assessores-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Botão de som: só o ícone, discreto no canto do vídeo (sem faixa de texto) */
.ri-video-som {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: rgba(17,19,20,.62);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  color: rgba(255,255,255,.88);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background var(--t), transform var(--t) var(--ease);
  z-index: 10;
}
.ri-video-som:hover {
  background: rgba(172,23,45,.9);
  transform: scale(1.08);
}

/* ============================================================
   DEPOIMENTOS — esteira contínua
   ============================================================ */
.ri-depoimentos {
  position: relative;
  padding: 120px 0 110px;
  background: var(--creme);
  overflow: hidden;
}
/* Efeito pontilhado nos depoimentos */
.ri-depoimentos-dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(17,19,20,.07) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}
/* Foto de fundo em parallax. O véu é chapado (uma cor só) de propósito:
   véu em gradiente deixava o cinza "quebrado", com faixas visíveis. */
.ri-depoimentos-bg {
  position: absolute;
  inset: -30% -8%;
  z-index: 0;
  pointer-events: none;
  opacity: .30;
  background: url('../img/home/bg-depoimentos.jpg') center / cover no-repeat;
}
/* Véu de cor única por cima da foto, garantindo contraste uniforme */
.ri-depoimentos::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--creme);
  opacity: .55;
}
.ri-depoimentos > * { position: relative; z-index: 2; }
/* Ordem das camadas, de trás para frente: foto (0) → véu (1) → conteúdo (2).
   Precisa vir DEPOIS da regra acima, senão a foto herda o z-index dela e
   passa na frente do véu, que deixa de fazer efeito. */
.ri-depoimentos .ri-depoimentos-bg   { z-index: 0; }
.ri-depoimentos .ri-depoimentos-dots { z-index: 1; }
/* "Pessoas de verdade, falando a REAL." cabe numa linha só:
   a caixa padrão de 720px forçava a quebra antes do ponto final. */
.ri-depoimentos .ri-sec-head { margin-bottom: 54px; max-width: 1100px; }
.ri-depoimentos .ri-sec-head h2 {
  color: var(--tinta);
  font-size: clamp(1.6rem, 3.1vw, 2.9rem);
  white-space: nowrap;
}
@media (max-width: 620px) {
  /* em tela estreita, nowrap estouraria a largura — volta a quebrar */
  .ri-depoimentos .ri-sec-head h2 { white-space: normal; }
}
.ri-esteira {
  overflow: hidden;
  /* desvanecimento longo e gradual nas pontas: com corte curto, a sombra
     dos cards era ceifada e aparecia como "risco" de cinza mais escuro */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.ri-esteira-track {
  display: flex;
  gap: 22px;
  width: max-content;
  /* folga vertical suficiente para a sombra inteira caber sem ser cortada */
  padding: 26px 0 40px;
  animation: ri-esteira var(--dur, 48s) linear infinite;
  will-change: transform;
}
.ri-esteira:hover .ri-esteira-track { animation-play-state: paused; }
/* O deslocamento é a largura EXATA de um conjunto de cards, medida no JS
   (--desloca). Com o valor fixo de -50% o loop só fechava quando havia
   exatamente 2 conjuntos; com poucos depoimentos numa tela larga sobrava
   um vão e a esteira "pulava" ao reiniciar. */
@keyframes ri-esteira { to { transform: translateX(var(--desloca, -50%)); } }
.ri-fala {
  flex: 0 0 400px;
  background: #fff;
  border-radius: var(--r-md);
  padding: 32px 32px 28px;
  /* sombra em camadas: contato curto + difusa longa, sem degrau de cinza */
  box-shadow:
    0 1px 2px rgba(17,19,20,.05),
    0 4px 10px rgba(17,19,20,.045),
    0 14px 32px rgba(17,19,20,.04);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.ri-fala:hover {
  transform: translateY(-6px);
  box-shadow:
    0 2px 4px rgba(17,19,20,.06),
    0 8px 18px rgba(17,19,20,.06),
    0 24px 52px rgba(17,19,20,.07);
}
.ri-fala blockquote {
  font-size: .96rem;
  line-height: 1.75;
  color: var(--tinta);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ri-fala figcaption { display: flex; align-items: center; gap: 14px; }
.ri-fala-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-family: var(--ff-head);
  font-weight: 800;
  font-size: .85rem;
  flex: none;
}
.ri-fala figcaption strong {
  display: block;
  font-family: var(--ff-head);
  font-size: .88rem;
  font-weight: 700;
  color: var(--tinta);
}
.ri-fala figcaption small { font-size: .78rem; color: var(--tinta-suave); }

/* ============================================================
   PASSOS
   ============================================================ */
.ri-passos {
  padding-top: 84px;
  padding-bottom: 72px;
  background: #fff;
}
/* "Começar é simples." / "São 4 passos:" sempre em duas linhas,
   em vez de quebrar em lugar aleatório conforme a largura. */
.ri-passos .ri-sec-head { margin-bottom: 28px; }
.ri-passos .ri-sec-head h2 span { color: var(--red); display: block; }
.ri-passos .ri-sec-cta { padding-bottom: 0; margin-top: 28px; }

/* ============================================================
   FECHAMENTO — cinza claro da marca, texto escuro
   ============================================================ */
.ri-fechamento {
  position: relative;
  overflow: hidden;
  background: var(--creme);
  padding: 120px 0;
  text-align: center;
}
/* Foto de fundo em parallax + véu chapado (mesma receita dos depoimentos) */
.ri-fechamento-bg {
  position: absolute;
  inset: -30% -8%;
  z-index: 0;
  pointer-events: none;
  opacity: .16;
  background: url('../img/home/bg-fechamento.jpg') center / cover no-repeat;
}
/* Véu forte: aqui o texto é escuro sobre fundo claro, e as áreas escuras da
   foto engoliam o título. A foto fica só como textura de apoio. */
.ri-fechamento::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--creme);
  opacity: .80;
}
/* Efeito pontilhado no fechamento */
.ri-fechamento-dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(172,23,45,.1) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  opacity: .6;
}
/* Mesma ordem de camadas dos depoimentos: foto (0) → véu (1) → conteúdo (2) */
.ri-fechamento .ri-fechamento-bg   { z-index: 0; }
.ri-fechamento .ri-fechamento-dots { z-index: 1; }
.ri-fechamento .container { position: relative; z-index: 2; }
.ri-fechamento-inner {
  max-width: 720px;
  margin: 0 auto;
}
.ri-fechamento-linha {
  display: block;
  width: 52px;
  height: 3px;
  background: var(--red);
  margin: 0 auto 48px;
}
.ri-fechamento h2 {
  font-family: var(--ff-head);
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--tinta);
  line-height: 1.18;
  margin-bottom: 24px;
}
.ri-fechamento-sub {
  font-size: 1.1rem;
  color: var(--tinta-suave);
  line-height: 1.75;
  max-width: 580px;
  margin: 0 auto 44px;
}

/* ============================================================
   MOBILE / RESPONSIVIDADE
   ============================================================ */
@media (max-width: 1024px) {
  .ri-numeros-grid { gap: 14px; }
  .ri-numero { flex: 0 0 calc(33.33% - 10px); }
  .ri-assessores-grid { grid-template-columns: 1fr; gap: 40px; }
  /* texto do diagrama cresce junto que a figura encolhe */
  .ri-eco-rotulo { font-size: 16px; }
  .ri-eco-itens--sv .ri-eco-rotulo { font-size: 15px; }
}
@media (max-width: 860px) {
  /* Abaixo desta largura o diagrama ficaria ilegível espremido:
     ele mantém um tamanho mínimo confortável e a pessoa arrasta na horizontal. */
  .ri-eco {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .ri-eco-svg { min-width: 680px; }
  .ri-eco-rotulo { font-size: 17px; }
  .ri-eco-itens--sv .ri-eco-rotulo { font-size: 16px; }
  .ri-eco-centro { font-size: 29px; }

  /* aviso de que o diagrama se arrasta; some assim que a pessoa arrasta */
  .ri-eco.eco-arrasta { position: relative; }
  .ri-eco.eco-arrasta::after {
    content: 'arraste para ver tudo';
    position: sticky;
    left: 0;
    bottom: 0;
    display: block;
    width: max-content;
    margin: 6px auto 0;
    padding: 6px 14px;
    font-family: var(--ff-head);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.62);
    border: 1px solid rgba(255,255,255,.18);
    transition: opacity .4s var(--ease);
  }
  .ri-eco.eco-arrastou::after { opacity: 0; }
}
@media (max-width: 700px) {
  .ri-hero { min-height: 84vh; padding-top: 120px; }
  .ri-hero-media { inset: 0; }
  .ri-carta { padding: 80px 16px 32px; }
  .ri-carta-inner { padding: 36px 26px; }
  /* no celular as cartas voltam a empilhar no fluxo normal, sem sticky */
  .ri-deck-passos .ri-carta {
    position: static;
    min-height: 0;
    padding: 0 16px 18px;
  }
  .ri-deck-passos .ri-carta-inner { width: 100%; padding: 28px 24px; }
  .ri-passos { padding-top: 64px; }
  .ri-numeros-grid { gap: 12px; }
  .ri-numero { flex: 0 0 calc(50% - 8px); min-width: 0; }
  .ri-numero strong { font-size: clamp(1.3rem, 5vw, 1.7rem); }
  .ri-esteira-track { animation-duration: 30s; }
  .ri-fala { flex-basis: 300px; }
  .ri-assessores-foto { min-height: 280px; }
}
@media (max-width: 460px) {
  .ri-numero { flex: 0 0 100%; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ri-hero-frase .ri-palavra { opacity: 1; transform: none; transition: none; }
  .ri-esteira-track { animation: none; flex-wrap: wrap; width: auto; }
  [data-parallax] { transform: none !important; }
  [data-parallax-cards] .ri-numero { --ry: 0px !important; transform: none !important; }
}