/* #recursos em passos (frontend/lp-recursos-lista.html), no lugar da demo
 * interativa, que fica escondida como #recursos-demo.
 * O estado normal de cada peça é o final: as animações só descrevem de onde
 * ela vem (keyframes "from" + fill both). Sem JS, ou com movimento reduzido,
 * tudo já aparece pronto. O JS põe .rl-js na seção, .is-in no passo que
 * entrou na tela e --rl-fill (0 a 1) para o trilho. */
#recursos-demo[hidden] { display: none !important; }
body:has(.rl-section) .li-demo-link,
body:has(.rl-section) #li-guide-more { display: none !important; }

.rl-section { --rl-verde: var(--green, #0e7555); --rl-tinta: var(--ink, #17251f); --rl-fundo: #eaf0e5; --rl-lima: #D4EF98; position: relative; padding: clamp(64px, 7vw, 104px) 0 clamp(72px, 7.5vw, 112px); border-top: 1px solid #e1e7db; background: var(--rl-fundo); color: var(--rl-tinta); font-family: var(--body, Geist, system-ui, sans-serif); }
.rl-section svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Cabeçalho */
.rl-head { max-width: 760px; margin: 0 auto clamp(48px, 5.5vw, 80px); text-align: center; }
.rl-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #39755b; font-size: 12px; font-weight: 760; letter-spacing: .12em; text-transform: uppercase; }
.rl-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #3d9a62; box-shadow: 0 0 0 4px #3d9a6226; animation: rl-pulso 2.4s ease-in-out infinite; }
.rl-head h2 { margin: 15px 0 0; font-size: clamp(34px, 3.6vw, 52px); font-weight: 660; line-height: 1.06; letter-spacing: -.045em; text-wrap: balance; }
.rl-head h2 span { display: block; color: var(--rl-verde); }
.rl-head p { max-width: 54ch; margin: 18px auto 0; color: #4a5a50; font-size: clamp(16px, .3vw + 15px, 18px); line-height: 1.55; }

/* Trilho: vai do centro do primeiro número ao do último (medido pelo JS) e
 * enche com a rolagem; a bolinha de luz marca onde o leitor está. */
.rl-timeline { position: relative; }
.rl-trilho { position: absolute; top: 22px; left: 21px; width: 2px; height: calc(100% - 44px); border-radius: 2px; background: #d0dbcc; }
.rl-trilho i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(#3d9a62, var(--rl-verde)); transform: scaleY(var(--rl-fill, 0)); transform-origin: top; }
.rl-js .rl-trilho::after { content: ""; position: absolute; top: calc(var(--rl-fill, 0) * 100%); left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #C3E887; box-shadow: 0 0 0 3px #0e755540, 0 0 16px 4px #9fd15aa6; }
.rl-steps { display: grid; gap: clamp(64px, 8vw, 128px); margin: 0; padding: 0; list-style: none; }
.rl-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-left: 88px; }

/* Número do passo: contorno quando falta, verde e pulsando no passo atual,
 * check nos que ficaram para trás. */
.rl-texto { position: relative; min-width: 0; }
.rl-no { position: absolute; z-index: 1; top: -11px; left: -88px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #c9d6c5; border-radius: 50%; color: #5d7466; background: #f6f8f2; box-shadow: 0 0 0 6px var(--rl-fundo); font: 700 13px/1 var(--mono, "Geist Mono", monospace); transition: color .35s ease, background .35s ease, border-color .35s ease; }
.rl-no svg { display: none; width: 18px; height: 18px; stroke-width: 2.4; }
.rl-step.is-past .rl-no { border-color: var(--rl-verde); color: #fff; background: var(--rl-verde); }
.rl-step.is-past:not(.is-atual) .rl-no b { display: none; }
.rl-step.is-past:not(.is-atual) .rl-no svg { display: block; }
.rl-step.is-atual .rl-no { animation: rl-atual 2.2s ease-out infinite; }

/* Texto */
.rl-etapa { display: inline-flex; align-items: center; gap: 8px; min-height: 22px; color: var(--rl-verde); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.rl-etapa svg { width: 17px; height: 17px; }
.rl-texto h3 { max-width: 22ch; margin: 14px 0 0; color: var(--rl-tinta); font-size: clamp(26px, 2.3vw, 36px); font-weight: 640; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.rl-texto > p { max-width: 46ch; margin: 14px 0 0; color: #4a5a50; font-size: 17px; line-height: 1.6; }
.rl-fontes { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.rl-fontes li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border: 1px solid #d0dbcc; border-radius: 999px; color: #35483d; background: #f6f8f2; font-size: 13.5px; font-weight: 550; line-height: 1.3; }
.rl-fontes svg { width: 15px; height: 15px; color: var(--rl-verde); }
.rl-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 12px 18px 12px 20px; border: 1px solid #173e31; border-radius: 999px; color: #173e31; background: transparent; font-size: 15px; font-weight: 600; line-height: 1.3; text-decoration: none; transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
.rl-cta svg { width: 17px; height: 17px; transition: transform .2s ease; }
.rl-cta:hover { color: #fff; background: #173e31; box-shadow: 0 12px 24px -12px #173e3180; transform: translateY(-1px); }
.rl-cta:hover svg { transform: translateX(3px); }
.rl-section a:focus-visible { outline: 3px solid var(--rl-verde); outline-offset: 3px; }

/* Card visual: o mesmo verde escuro do card "Seu caminho" da hero. */
.rl-visual { position: relative; isolation: isolate; min-width: 0; padding: 18px; overflow: hidden; border: 1px solid #396650; border-radius: 24px; color: #F2F6E9; background: radial-gradient(ellipse at 50% 12%, #315E45 0, transparent 55%), linear-gradient(155deg, #1E4A38, #0D332A 76%); box-shadow: 0 40px 70px -42px #0b281dcc, inset 0 1px 0 #d4ef9826; transition: border-color .5s ease, box-shadow .5s ease; }
.rl-visual::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(#ffffff09 1px, transparent 1px), linear-gradient(90deg, #ffffff09 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse at 50% 25%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 25%, #000 25%, transparent 75%); }
.rl-step.is-atual .rl-visual { border-color: #5f8f64; box-shadow: 0 40px 70px -42px #0b281dcc, inset 0 1px 0 #d4ef9833, 0 0 0 1px #d4ef9826, 0 0 70px -24px #9fd15a73; }
.rl-v-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; color: #CBDFCB; font-size: 11px; font-weight: 700; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }
.rl-v-top span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.rl-v-top span + span { color: #AFC7B2; font-size: 12px; font-weight: 550; letter-spacing: .02em; text-transform: none; }
.rl-v-top i { width: 7px; height: 7px; border-radius: 50%; background: #C3E887; box-shadow: 0 0 13px #C3E887; }
.rl-visual b, .rl-visual strong { font-weight: 650; }
.rl-v-linha, .rl-v-empresa, .rl-v-chat { border: 1px solid #ffffff1a; border-radius: 14px; background: #ffffff0d; }
/* avatar da empresa do exemplo */
.rl-v-linha > b, .rl-v-empresa > b, .rl-v-chat-topo > b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #D4EF98; background: #123C2D; box-shadow: 0 0 0 1px #D4EF9833; font-size: 12px; letter-spacing: .02em; }

/* 1. Encontrar: digita a busca, as fontes acendem, as empresas chegam. */
.rl-v-campo { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; color: #173C2A; background: #F4F7E9; box-shadow: 0 10px 24px -14px #04150fcc; font-size: 15px; font-weight: 560; }
.rl-v-campo svg { color: var(--rl-verde); }
.rl-v-digita { display: inline-block; max-width: 100%; overflow: hidden; border-right: 2px solid transparent; white-space: nowrap; vertical-align: bottom; }
.rl-v-fontes { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.rl-v-fontes span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border: 1px solid var(--rl-cor); border-radius: 999px; color: #F2F6E9; background: #ffffff0d; font-size: 12.5px; font-weight: 550; }
.rl-v-fontes svg { width: 14px; height: 14px; color: var(--rl-cor); }
.rl-v-fontes span:nth-child(1) { --rl-cor: #8CC8FF; }
.rl-v-fontes span:nth-child(2) { --rl-cor: #D4EF98; }
.rl-v-fontes span:nth-child(3) { --rl-cor: #F5A3C7; }
.rl-v-lista { display: grid; gap: 7px; }
.rl-v-linha { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 11px; }
.rl-v-linha strong, .rl-v-empresa strong, .rl-v-chat-topo strong { display: block; overflow: hidden; color: #F2F6E9; font-size: 14.5px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.rl-v-linha small, .rl-v-empresa small, .rl-v-chat-topo small { display: block; overflow: hidden; color: #AFC7B2; font-size: 12.5px; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.rl-v-linha em { padding: 3px 9px; border-radius: 999px; color: #123C2D; background: #D4EF98; font-size: 12px; font-style: normal; font-weight: 650; white-space: nowrap; }
.rl-v-linha:first-child em { color: #F6DFAE; background: #3A3B22; box-shadow: inset 0 0 0 1px #E8C77A99; }
.rl-v-total { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; padding: 11px 14px; border-radius: 12px; color: #234A35; background: #E8F3D9; font-size: 14px; font-weight: 550; }
.rl-v-total b { color: #0f4a33; font-size: 22px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; }

/* 2. Analisar: a nota enche, as barras correm, a oportunidade aparece. */
.rl-v-empresa { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px; }
.rl-v-nota { position: relative; display: grid; justify-items: center; gap: 3px; }
.rl-v-nota svg { width: 58px; height: 58px; transform: rotate(-90deg); }
.rl-v-nota circle { fill: none; stroke: #ffffff1f; stroke-width: 4; }
.rl-v-nota .rl-v-arco { stroke: #D4EF98; stroke-linecap: round; stroke-dasharray: 119.38; stroke-dashoffset: 4.78; filter: drop-shadow(0 0 4px #D4EF9880); }
.rl-v-nota b { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 100%; height: 58px; color: #F2F6E9; font-size: 19px; font-weight: 750; font-variant-numeric: tabular-nums; }
.rl-v-nota small { color: #D4EF98; font-size: 11px; font-weight: 600; white-space: nowrap; }
.rl-v-barras { display: grid; gap: 11px; margin: 14px 0; padding: 14px; border: 1px solid #ffffff1a; border-radius: 14px; background: #ffffff0d; }
.rl-v-barras div { display: grid; grid-template-columns: 70px minmax(0, 1fr) 52px; gap: 10px; align-items: center; font-size: 13px; }
.rl-v-barras span { color: #CBDFCB; }
.rl-v-barras i { display: block; height: 8px; overflow: hidden; border-radius: 99px; background: #ffffff1a; }
.rl-v-barras em { display: block; width: var(--rl-v, 50%); height: 100%; border-radius: inherit; background: var(--rl-cor, #D4EF98); transform-origin: left; }
.rl-v-barras b { color: var(--rl-cor, #D4EF98); font-size: 12.5px; text-align: right; }
.rl-v-barras div:nth-child(1) { --rl-v: 26%; --rl-cor: #F2C66D; }
.rl-v-barras div:nth-child(2) { --rl-v: 94%; --rl-cor: #D4EF98; }
.rl-v-barras div:nth-child(3) { --rl-v: 58%; --rl-cor: #A9D7B2; }
.rl-v-achado { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; color: #234A35; background: #E8F3D9; font-size: 14px; line-height: 1.45; }
.rl-v-achado svg { margin-top: 1px; color: var(--rl-verde); }
.rl-v-achado p { margin: 0; }
.rl-v-achado b { color: #0f4a33; }

/* 3. Abordar: "digitando…", a mensagem sai, o lead responde e anda no funil. */
.rl-v-chat { overflow: hidden; }
.rl-v-chat-topo { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid #ffffff14; }
.rl-v-chat-topo small { color: #9fd89f; }
.rl-v-chat-corpo { position: relative; display: grid; gap: 8px; padding: 14px 12px; }
.rl-v-balao, .rl-v-resposta { position: relative; max-width: 88%; margin: 0; padding: 10px 12px 8px; font-size: 14px; line-height: 1.45; }
.rl-v-balao { justify-self: end; border-radius: 14px 14px 4px 14px; color: #123C2D; background: #D4EF98; }
.rl-v-resposta { justify-self: start; border-radius: 14px 14px 14px 4px; color: #F2F6E9; background: #2B553B; box-shadow: inset 0 0 0 1px #ffffff14; }
.rl-v-balao small, .rl-v-resposta small { display: block; margin-top: 3px; font-size: 11px; text-align: right; opacity: .75; }
.rl-v-balao small span { color: #1a73e8; font-weight: 700; letter-spacing: -.12em; }
.rl-v-pontos { position: absolute; top: 14px; right: 12px; display: flex; gap: 4px; padding: 11px 13px; border-radius: 14px 14px 4px 14px; background: #D4EF98; opacity: 0; }
.rl-v-pontos i { width: 6px; height: 6px; border-radius: 50%; background: #123C2D; }
.rl-v-funil { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.rl-v-funil span { position: relative; padding: 9px 6px; border: 1px solid #D4EF98; border-radius: 10px; color: #123C2D; background: #D4EF98; font-size: 12.5px; font-weight: 650; text-align: center; }
.rl-v-funil span + span::before { content: ""; position: absolute; top: 50%; left: -7px; width: 6px; height: 2px; background: #D4EF9899; }

/* 4. Criar: os posts se abrem em leque e entram no calendário. */
.rl-v-posts { position: relative; height: 196px; }
.rl-v-posts div { position: absolute; top: 10px; left: 50%; display: flex; flex-direction: column; justify-content: space-between; width: 46%; height: 170px; margin-left: -23%; padding: 13px; border-radius: 13px; box-shadow: 0 18px 30px -16px #04150fe6; }
.rl-v-posts small { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.rl-v-posts strong { font-size: 15.5px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.rl-v-posts div:nth-child(1) { z-index: 1; color: #173C2A; background: #F4F7E9; transform: translateX(-62%) rotate(-7deg); }
.rl-v-posts div:nth-child(2) { z-index: 2; color: #123C2D; background: #D4EF98; transform: translateY(-4px); }
.rl-v-posts div:nth-child(3) { z-index: 1; color: #F2F6E9; background: #0f3a2b; box-shadow: 0 18px 30px -16px #04150fe6, inset 0 0 0 1px #D4EF9859; transform: translateX(62%) rotate(7deg); }
.rl-v-posts div:nth-child(3) strong { color: #D4EF98; }
.rl-v-agenda { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 14px; padding: 12px; border: 1px solid #ffffff1a; border-radius: 14px; background: #ffffff0d; }
.rl-v-agenda span { color: #CBDFCB; font-size: 12px; font-weight: 600; text-align: center; }
.rl-v-agenda span::after { content: ""; display: block; height: 22px; margin-top: 7px; border: 1px dashed #ffffff26; border-radius: 7px; }
.rl-v-agenda span:nth-child(odd)::after { border: 0; background: linear-gradient(135deg, #D4EF98, #A9D7B2); box-shadow: 0 0 14px -4px #D4EF98; }

/* Fecho */
.rl-fim { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: clamp(64px, 7vw, 104px); padding: clamp(24px, 3vw, 36px) clamp(22px, 3.2vw, 44px); border: 1px solid #396650; border-radius: 24px; color: #F2F6E9; background: radial-gradient(ellipse at 12% 0, #315E45 0, transparent 55%), linear-gradient(155deg, #1E4A38, #0D332A 76%); box-shadow: 0 40px 70px -46px #0b281dcc; }
.rl-fim p { max-width: 52ch; margin: 0; color: #CBDFCB; font-size: 17px; line-height: 1.5; }
.rl-fim p b { display: block; margin-bottom: 6px; color: #F2F6E9; font-size: clamp(22px, 2.1vw, 30px); font-weight: 650; line-height: 1.18; letter-spacing: -.03em; }
.rl-section .rl-fim .button { gap: 12px; padding: 16px 26px; border-color: #D4EF98; color: #123C2D; background: #D4EF98; font-size: 16px; font-weight: 650; box-shadow: 0 12px 30px -12px #9fd15a80; }
.rl-section .rl-fim .button:hover { color: #123C2D; background: #E3F5B8; }
.rl-section .rl-fim .button svg { width: 18px; height: 18px; }

/* ---- Movimento: só com o JS rodando, uma vez por passo ---- */
.rl-js .rl-step:not(.is-in) .rl-texto > :not(.rl-no),
.rl-js .rl-step:not(.is-in) .rl-visual { opacity: 0; }
.rl-js .is-in .rl-texto > :not(.rl-no) { animation: rl-sobe .7s cubic-bezier(.2, .7, .2, 1) both; }
.rl-js .is-in .rl-texto > :nth-child(3) { animation-delay: .08s; }
.rl-js .is-in .rl-texto > :nth-child(4) { animation-delay: .16s; }
.rl-js .is-in .rl-texto > :nth-child(5) { animation-delay: .24s; }
.rl-js .is-in .rl-texto > :nth-child(6) { animation-delay: .32s; }
.rl-js .is-in .rl-visual { animation: rl-card .8s cubic-bezier(.2, .7, .2, 1) .1s both; }

.rl-js .is-in .rl-v-digita { animation: rl-digita 1.2s steps(28, end) .55s both, rl-cursor .7s step-end .55s 4; }
.rl-js .is-in .rl-v-fontes span { animation: rl-acende .45s ease both; }
.rl-js .is-in .rl-v-fontes span:nth-child(1) { animation-delay: 1.8s; }
.rl-js .is-in .rl-v-fontes span:nth-child(2) { animation-delay: 1.95s; }
.rl-js .is-in .rl-v-fontes span:nth-child(3) { animation-delay: 2.1s; }
.rl-js .is-in .rl-v-linha { animation: rl-sobe .55s cubic-bezier(.2, .7, .2, 1) both; }
.rl-js .is-in .rl-v-linha:nth-child(1) { animation-delay: 2.3s; }
.rl-js .is-in .rl-v-linha:nth-child(2) { animation-delay: 2.45s; }
.rl-js .is-in .rl-v-linha:nth-child(3) { animation-delay: 2.6s; }
.rl-js .is-in .rl-v-total { animation: rl-sobe .5s ease 2.2s both; }

.rl-js .is-in .rl-v-empresa { animation: rl-sobe .55s ease .3s both; }
.rl-js .is-in .rl-v-arco { animation: rl-arco 1.1s cubic-bezier(.33, 1, .68, 1) .45s both; }
.rl-js .is-in .rl-v-barras { animation: rl-sobe .55s ease .7s both; }
.rl-js .is-in .rl-v-barras em { animation: rl-barra .9s cubic-bezier(.33, 1, .68, 1) both; }
.rl-js .is-in .rl-v-barras div:nth-child(1) em { animation-delay: .95s; }
.rl-js .is-in .rl-v-barras div:nth-child(2) em { animation-delay: 1.1s; }
.rl-js .is-in .rl-v-barras div:nth-child(3) em { animation-delay: 1.25s; }
.rl-js .is-in .rl-v-barras b { animation: rl-surge .4s ease both; }
.rl-js .is-in .rl-v-barras div:nth-child(1) b { animation-delay: 1.6s; }
.rl-js .is-in .rl-v-barras div:nth-child(2) b { animation-delay: 1.75s; }
.rl-js .is-in .rl-v-barras div:nth-child(3) b { animation-delay: 1.9s; }
.rl-js .is-in .rl-v-achado { animation: rl-sobe .6s cubic-bezier(.2, .7, .2, 1) 2.15s both; }

.rl-js .is-in .rl-v-pontos { animation: rl-pontos 1.3s ease .45s both; }
.rl-js .is-in .rl-v-pontos i { animation: rl-quica .6s ease-in-out .45s 3; }
.rl-js .is-in .rl-v-pontos i:nth-child(2) { animation-delay: .6s; }
.rl-js .is-in .rl-v-pontos i:nth-child(3) { animation-delay: .75s; }
.rl-js .is-in .rl-v-balao { animation: rl-balao .5s cubic-bezier(.2, .7, .2, 1) 1.7s both; }
.rl-js .is-in .rl-v-balao small span { animation: rl-lido .3s ease 2.5s both; }
.rl-js .is-in .rl-v-resposta { animation: rl-balao .5s cubic-bezier(.2, .7, .2, 1) 3s both; }
.rl-js .is-in .rl-v-funil span { animation: rl-etapa-funil .4s ease both; }
.rl-js .is-in .rl-v-funil span:nth-child(1) { animation-delay: .5s; }
.rl-js .is-in .rl-v-funil span:nth-child(2) { animation-delay: 2.2s; }
.rl-js .is-in .rl-v-funil span:nth-child(3) { animation-delay: 3.3s; }

.rl-js .is-in .rl-v-posts div { animation: rl-leque .9s cubic-bezier(.2, .8, .2, 1) both; }
.rl-js .is-in .rl-v-posts div:nth-child(1) { animation-delay: .55s; }
.rl-js .is-in .rl-v-posts div:nth-child(2) { animation-delay: .4s; }
.rl-js .is-in .rl-v-posts div:nth-child(3) { animation-delay: .7s; }
.rl-js .is-in .rl-v-agenda { animation: rl-sobe .55s ease 1.1s both; }
.rl-js .is-in .rl-v-agenda span:nth-child(odd)::after { animation: rl-agenda .45s ease both; }
.rl-js .is-in .rl-v-agenda span:nth-child(1)::after { animation-delay: 1.5s; }
.rl-js .is-in .rl-v-agenda span:nth-child(3)::after { animation-delay: 1.7s; }
.rl-js .is-in .rl-v-agenda span:nth-child(5)::after { animation-delay: 1.9s; }

@keyframes rl-sobe { from { opacity: 0; transform: translateY(18px); } }
@keyframes rl-surge { from { opacity: 0; } }
@keyframes rl-card { from { opacity: 0; transform: translateY(28px) scale(.97); } }
@keyframes rl-digita { from { width: 0; } to { width: var(--rl-w, 100%); } }
@keyframes rl-cursor { 50% { border-color: var(--rl-verde); } }
@keyframes rl-acende { from { border-color: #ffffff24; color: #AFC7B2; background: transparent; opacity: .5; } }
@keyframes rl-arco { from { stroke-dashoffset: 119.38; } }
@keyframes rl-barra { from { transform: scaleX(0); } }
@keyframes rl-pontos { 0% { opacity: 0; transform: translateY(6px); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes rl-quica { 50% { transform: translateY(-4px); opacity: .5; } }
@keyframes rl-balao { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes rl-lido { from { color: #5E7457; } }
@keyframes rl-etapa-funil { from { border-color: #ffffff1a; color: #AFC7B2; background: #ffffff0d; } }
@keyframes rl-leque { from { opacity: 0; transform: translateY(24px) rotate(0); } }
@keyframes rl-agenda { from { opacity: 0; transform: scaleY(.3); } }
@keyframes rl-pulso { 50% { box-shadow: 0 0 0 7px #3d9a6200; } }
@keyframes rl-atual { 0% { box-shadow: 0 0 0 6px var(--rl-fundo), 0 0 0 6px #0e755573; } 100% { box-shadow: 0 0 0 6px var(--rl-fundo), 0 0 0 16px #0e755500; } }

/* Tablet e celular: texto em cima, card embaixo, trilho mais fino. */
@media (max-width: 900px) {
  .rl-step { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-left: 54px; }
  .rl-no { top: -8px; left: -54px; width: 38px; height: 38px; font-size: 12px; }
  .rl-trilho { left: 18px; }
  .rl-visual { width: 100%; max-width: 560px; }
  .rl-texto h3 { max-width: 24ch; }
}
@media (max-width: 620px) {
  .rl-head { margin-bottom: 44px; }
  .rl-head h2 { font-size: clamp(30px, 8.4vw, 36px); }
  .rl-steps { gap: 60px; }
  .rl-step { gap: 22px; padding-left: 44px; }
  .rl-no { top: -6px; left: -44px; width: 32px; height: 32px; font-size: 11px; box-shadow: 0 0 0 5px var(--rl-fundo); }
  .rl-no svg { width: 15px; height: 15px; }
  .rl-trilho { left: 15px; }
  .rl-texto h3 { font-size: 25px; }
  .rl-texto > p { font-size: 16px; }
  .rl-fontes li { font-size: 13px; }
  .rl-cta { width: 100%; justify-content: center; }
  .rl-visual { padding: 14px; border-radius: 18px; }
  .rl-v-top span + span { display: none; }
  .rl-v-campo { padding: 11px 12px; font-size: 14px; }
  .rl-v-linha { gap: 9px; padding: 8px 9px; }
  .rl-v-linha strong, .rl-v-empresa strong, .rl-v-chat-topo strong { font-size: 14px; }
  .rl-v-linha small, .rl-v-empresa small { font-size: 12px; }
  .rl-v-linha em { padding: 2px 7px; font-size: 11px; }
  .rl-v-barras div { grid-template-columns: 62px minmax(0, 1fr) 46px; gap: 8px; }
  .rl-v-posts { height: 172px; }
  .rl-v-posts div { width: 50%; height: 150px; margin-left: -25%; padding: 11px; }
  .rl-v-posts strong { font-size: 13.5px; }
  .rl-v-posts div:nth-child(1) { transform: translateX(-52%) rotate(-7deg); }
  .rl-v-posts div:nth-child(3) { transform: translateX(52%) rotate(7deg); }
  .rl-fim { padding: 22px 20px; border-radius: 20px; }
  .rl-fim p { font-size: 16px; }
  .rl-section .rl-fim .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .rl-section *, .rl-section *::before, .rl-section *::after { animation: none !important; transition: none !important; }
}