/* Link Affiliattes — #rede: clone do bento "1M+ / 2M+ / 20+" da a referência (a referência).
   Medidas 1:1 com a referência (grade de 944, cartão de raio 40 com borda em degradê, título 24→40,
   botão de 48, carrossel centrado de 160); trocados a copy, a foto (mão + print real da Rede no painel),
   a cor de destaque (verde → vermelho da marca) e a família da letra (Public Sans). */

#rede .rd-in{max-width:944px;margin-inline:auto}
/* o celular passa da borda de cima do cartão grande (64px até 1279, 95px dali para cima):
   o cabeçalho abre espaço para ele não encostar no texto */
@media (min-width:768px){#rede .sec-head{margin-bottom:96px}}
@media (min-width:1280px){#rede .sec-head{margin-bottom:128px}}

/* ---------- grade ---------- */
.rd-grid{display:grid;gap:16px}
.rd-big{grid-column:1/-1}
@media (min-width:768px){.rd-grid{grid-template-columns:1fr 1fr;grid-template-rows:minmax(320px,1fr)}}
@media (min-width:1280px){.rd-grid{grid-template-rows:440px minmax(360px,1fr)}}

/* ---------- cartão: borda de 1px em degradê + miolo em degradê radial ---------- */
.rd-hide,.rd-borda,.rd-card{height:100%}
.rd-borda{padding:1px;border-radius:40px;background:linear-gradient(148.42deg,#333 13.56%,#111 80.96%)}
.rd-card{position:relative;border-radius:40px;background:radial-gradient(100.15% 191.04% at 15.32% 0%,#171717 0%,#101010 66.17%)}

/* revelar ao entrar na tela, como a referência: sobe 35% e acende em .6s */
.js-ok .rd-hide{opacity:0;transform:translateY(35%);transition:transform .6s ease-out,opacity .6s ease-out}
.js-ok .rd-c.on .rd-hide{opacity:1;transform:none}

/* ---------- título: a primeira parte acende do cinza para o branco ---------- */
.rd-h3{margin:0 0 16px;font-size:24px;line-height:1.06;font-weight:600;letter-spacing:-.02em;color:rgba(255,255,255,.56);text-wrap:pretty}
.rd-h3 span{color:#fff}
.js-ok .rd-h3 span{color:rgba(255,255,255,.56)}
.js-ok .rd-c.on .rd-h3 span{animation:rd-luz .6s .3s forwards}
@keyframes rd-luz{from{color:rgba(255,255,255,.56)}to{color:#fff}}
@media (min-width:1280px){.rd-h3{font-size:40px}}

/* ---------- cartão grande ---------- */
.rd-big-in{padding-top:40px;text-align:center}
.rd-big-head{max-width:272px;margin:0 auto}
.rd-cta{display:flex;flex-direction:column;align-items:center;padding-top:8px}
.rd-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:16px;
  background:linear-gradient(90deg,#b9211a,#dc2f22);color:#fff;font-size:16px;line-height:24px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;transition:background .3s,transform .15s}
.rd-btn:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.rd-btn:hover{background:linear-gradient(90deg,#a91d17,#c9281d)}}
.rd-btn:focus-visible,.rd-link:focus-visible{outline:2px solid var(--red-hi);outline-offset:3px}

/* a imagem tem 18,2% de vazio à direita do braço: a margem negativa do mesmo tamanho, dentro de quem recorta
   (sangria deliberada), leva a manga até a borda do cartão, que corta o pulso no canto como na referência.
   No celular a foto encosta à direita; com o cartão acima de 400px, o respiro da direita cresce metade do que
   sobra e o celular volta para perto do meio (medido na referência em 600 px: a manga para a 90 px da borda;
   aqui, a ~76) */
.rd-foto{margin:40px auto 0;padding-right:max(0px,calc((100% - 400px) / 2));display:flex;justify-content:flex-end;overflow:hidden;border-radius:40px}
.rd-foto-box{position:relative;flex:none;width:333px;bottom:-4px;margin-right:-60px;container-type:inline-size}
.rd-foto-box img{display:block;width:100%;height:auto;aspect-ratio:696/803}

@media (min-width:768px){
  .rd-big-in{position:relative;min-height:320px;padding:40px 32px;display:flex;align-items:center;text-align:left}
  .rd-big-head{max-width:304px;margin:0}
  .rd-cta{align-items:flex-start}
  /* daqui para cima o recorte só arredonda o canto do cartão (embaixo à direita) e abre 24px à esquerda do celular:
     a etiqueta da esquerda passa da borda da foto e, sem a folga, o texto dela saía cortado reto (achado do de audit) */
  .rd-foto{position:absolute;bottom:0;right:0;margin:0;padding:0 0 0 24px;border-radius:0 0 40px 0}
  .rd-foto-box{bottom:0}
}
@media (min-width:1280px){
  .rd-big-in{min-height:440px}
  .rd-big-head{max-width:400px}
  .rd-foto-box{width:464px;margin-right:-84px}
}

/* etiquetas "+ R$" flutuando em volta do celular: fundo escuro, borda vermelha com brilho, um lado inclinado */
.rd-tag{position:absolute;left:var(--x);top:var(--y);width:24cqw;height:9.6cqw;display:grid;place-items:center;
  padding-left:1.6cqw;font-size:4cqw;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:#fff;white-space:nowrap;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 72' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23341311'/%3E%3Cstop offset='1' stop-color='%23110d0d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M32 1.5H166Q178.5 1.5 178.5 14V58Q178.5 70.5 166 70.5H14Q1.5 70.5 4.5 58L17.5 14Q20.5 1.5 32 1.5Z' fill='url(%23g)' fill-opacity='.9' stroke='%23ff5448' stroke-width='2'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  filter:drop-shadow(0 0 1.6cqw rgba(255,84,72,.45))}
.rd-tag-d{padding-left:0;padding-right:1.6cqw;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 72' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23341311'/%3E%3Cstop offset='1' stop-color='%23110d0d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M148 1.5H14Q1.5 1.5 1.5 14V58Q1.5 70.5 14 70.5H166Q178.5 70.5 175.5 58L162.5 14Q159.5 1.5 148 1.5Z' fill='url(%23g)' fill-opacity='.9' stroke='%23ff5448' stroke-width='2'/%3E%3C/svg%3E")}
/* posições: as da referência, recalculadas para o celular da nossa foto (x 13–51%, y 0–68%):
   uma sobre a borda direita em cima, uma à direita no meio, uma sobre a borda esquerda */
.rd-t1{--x:42%;--y:3%}
.rd-t2{--x:52%;--y:29.5%}
.rd-t3{--x:-2%;--y:37.5%}   /* ~36% dela sobre o celular, como a "+$150" da referência */

/* ---------- cartões pequenos ---------- */
.rd-sm{display:grid;min-height:296px;padding:40px 32px}
.rd-sm-head{max-width:272px}
@media (min-width:768px){.rd-sm{min-height:400px}.rd-sm-head{max-width:304px}}
@media (min-width:1280px){.rd-sm{min-height:440px}.rd-sm-head{max-width:400px}}

.rd-ln{display:flex;flex-direction:column;align-items:flex-start;row-gap:12px}
.rd-link{display:inline-flex;align-items:center;min-height:44px;margin-block:-10px;transform:translateX(4px);
  color:var(--red-hi);font-size:14px;line-height:21px;font-weight:600;white-space:nowrap;transition:color .3s}
@media (min-width:768px){.rd-link{font-size:16px;line-height:24px}}
.rd-seta{position:relative;left:-8px;width:7px;height:12px;margin-left:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine) and (min-width:1280px){.rd-link:hover .rd-seta{animation:rd-vai .6s infinite}}
@keyframes rd-vai{0%{left:-8px}50%{left:0}100%{left:-8px}}

/* fileira de quem entrou na rede (o lugar dos ícones sociais da referência) */
.rd-av{display:flex;gap:12px;margin:auto 0 0;padding:0;list-style:none}
.rd-av li{width:40px;height:40px;display:grid;place-items:center;border:1.5px solid #fff;border-radius:11px;
  font-size:13px;font-weight:600;letter-spacing:.02em;color:#fff}
.rd-av svg{width:18px;height:18px;fill:none;stroke:var(--red-hi);stroke-width:2.2;stroke-linecap:round}
.rd-av .rd-av-mais{border-color:var(--red-hi)}

/* cartão das etapas: o carrossel vai de borda a borda */
.rd-sm-sl{padding:40px 0;min-height:350px}
.rd-sm-sl .rd-sm-head{max-width:375px;padding:0 32px}
@media (min-width:1280px){.rd-sm-sl .rd-sm-head{max-width:100%}}
.rd-sl{position:relative;margin-top:auto;overflow:hidden}
/* o leitor de tela lê as quatro etapas paradas; a trilha que anda fica escondida dele */
.rd-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.rd-sl-trk{display:flex;margin:0;padding:0;list-style:none}
.rd-sl-trk li{flex:0 0 160px;display:grid;justify-items:center;align-content:start;gap:8px}
/* as etapas dos lados ficam apagadas, como na referência, mas por COR e não por opacidade: a .3 a letra caía
   para 1:1; assim a apagada já tem 5:1 e, ao acender, só o fundo da pílula clareia (nenhum meio-termo abaixo de 4,5) */
.rd-pill{width:fit-content;margin:0;padding:8px 12px;border-radius:20px;background:#8a8a8a;color:#101010;font-size:20px;line-height:20px;font-weight:600;letter-spacing:-.02em;transition:background-color .6s}
.rd-tit{margin:0;padding:0 8px;text-align:center;font-size:16px;line-height:24px;color:#888;transition:color .6s}
.rd-sl-trk li.on .rd-pill{background:#fff}
.rd-sl-trk li.on .rd-tit{color:#fff}
/* sem JS, ou com "menos movimento" ligado: as quatro etapas em grade, paradas e todas acesas */
html:not(.js-ok) .rd-sl-trk,.rd-sl.parado .rd-sl-trk{flex-wrap:wrap;justify-content:center;row-gap:16px}
html:not(.js-ok) .rd-sl-trk .rd-pill,.rd-sl.parado .rd-sl-trk .rd-pill{background:#fff}
html:not(.js-ok) .rd-sl-trk .rd-tit,.rd-sl.parado .rd-sl-trk .rd-tit{color:#fff}

@media (prefers-reduced-motion:reduce){
  .js-ok .rd-hide{transform:none;transition:opacity .3s}
}