# Versão com Ícones
## Passo 1 - Input de Informações
```
<div style="display: flex; flex-direction: column; justify-content: flex-start;
align-items: flex-end; width: 276px; overflow: hidden; gap: 8px; padding: 16px;
border-radius: 16px; background: #fff; border-width: 1px; border-color: #cdcdcd;" >
<div style="display: flex; justify-content: flex-start; align-items: flex-start;
align-self: stretch; flex-grow: 0; flex-shrink: 0; position: relative; gap: 10px;
padding-bottom: 12px;" > <p style="flex-grow: 1; width: 244px; font-size: 16px;
font-weight: 700; text-align: left; color: #1b1b1b;" > Indique seus amigos e ganhe
comi$$ões a cada matrícula </p> </div> <div style="display: flex; flex-direction:
column; justify-content: flex-start; align-items: flex-start; align-self: stretch;
flex-grow: 0; flex-shrink: 0; gap: 20px;" > <div style="display: flex; flex-
direction: column; justify-content: flex-start; align-items: flex-start; align-
self: stretch; flex-grow: 0; flex-shrink: 0; height: 56px; border-top-left-radius:
4px; border-top-right-radius: 4px; background: #fff;" > <div style="display: flex;
flex-direction: column; justify-content: flex-start; align-items: flex-start;
align-self: stretch; flex-grow: 0; flex-shrink: 0; gap: 10px; border-radius: 4px;
border-width: 1px; border-color: #cdcdcd;" > <div style="display: flex; justify-
content: flex-start; align-items: center; align-self: stretch; flex-grow: 0; flex-
shrink: 0; padding-left: 16px; padding-top: 8px; padding-bottom: 8px; border-top-
left-radius: 4px; border-top-right-radius: 4px;" > <div style="display: flex; flex-
direction: column; justify-content: center; align-items: flex-start; flex-grow: 1;
height: 40px;" > <div style="display: flex; justify-content: flex-start; align-
items: center; flex-grow: 0; flex-shrink: 0; position: relative;" > <p style="flex-
grow: 0; flex-shrink: 0; font-size: 16px; text-align: left; color: #1b1b1b;" > Nome
completo </p> </div> </div> </div> </div> </div> <div style="display: flex; flex-
direction: column; justify-content: flex-start; align-items: flex-start; align-
self: stretch; flex-grow: 0; flex-shrink: 0; height: 56px; border-top-left-radius:
4px; border-top-right-radius: 4px;" > <div style="display: flex; flex-direction:
column; justify-content: flex-start; align-items: flex-start; align-self: stretch;
flex-grow: 0; flex-shrink: 0; gap: 10px; border-radius: 4px; border-width: 1px;
border-color: #cdcdcd;" > <div style="display: flex; justify-content: flex-start;
align-items: center; align-self: stretch; flex-grow: 0; flex-shrink: 0; padding-
left: 16px; padding-top: 8px; padding-bottom: 8px; border-top-left-radius: 4px;
border-top-right-radius: 4px;" > <div style="display: flex; flex-direction: column;
justify-content: center; align-items: flex-start; flex-grow: 1; height: 40px;" >
<div style="display: flex; justify-content: flex-start; align-items: center; flex-
grow: 0; flex-shrink: 0; position: relative;" > <p style="flex-grow: 0; flex-
shrink: 0; font-size: 16px; text-align: left; color: #1b1b1b;" > E-mail do amigo
</p> </div> </div> </div> </div> </div> <div style="display: flex; flex-direction:
column; justify-content: flex-start; align-items: flex-start; align-self: stretch;
flex-grow: 0; flex-shrink: 0; height: 56px; border-top-left-radius: 4px; border-
top-right-radius: 4px;" > <div style="display: flex; flex-direction: column;
justify-content: flex-start; align-items: flex-start; align-self: stretch; flex-
grow: 0; flex-shrink: 0; gap: 10px; border-radius: 4px; border-width: 1px; border-
color: #cdcdcd;" > <div style="display: flex; justify-content: flex-start; align-
items: center; align-self: stretch; flex-grow: 0; flex-shrink: 0; padding-left:
16px; padding-top: 8px; padding-bottom: 8px; border-top-left-radius: 4px; border-
top-right-radius: 4px;" > <div style="display: flex; flex-direction: column;
justify-content: center; align-items: flex-start; flex-grow: 1; height: 40px;" >
<div style="display: flex; justify-content: flex-start; align-items: center; flex-
grow: 0; flex-shrink: 0; position: relative;" > <p style="flex-grow: 0; flex-
shrink: 0; font-size: 16px; text-align: left; color: #1b1b1b;" > (xx) xxxx-xxxx
</p> </div> </div> </div> </div> </div> </div> <div style="display: flex; flex-
direction: column; justify-content: flex-start; align-items: flex-end; align-self:
stretch; flex-grow: 0; flex-shrink: 0; gap: 10px; padding-top: 4px; padding-bottom:
4px;" > <div style="display: flex; justify-content: center; align-items: center;
flex-grow: 0; flex-shrink: 0; width: 128px; height: 40px; position: relative; gap:
10px; padding: 16px; border-radius: 32px; border-width: 1px; border-color:
#149aff;" > <p style="flex-grow: 0; flex-shrink: 0; font-size: 14px; text-align:
center; color: #149aff;"> Enviar </p> </div> </div> </div>
```
## Passo 2 - Aguarde
```
<div style="display: flex; justify-content: flex-start; align-items: center; width:
276px; position: relative; overflow: hidden; gap: 16px; padding: 16px; border-
radius: 16px; background: #fff; border-width: 1px; border-color: #cdcdcd;" > <svg
width="36" height="37" viewBox="0 0 36 37" fill="none"
xmlns="[Link] style="flex-grow: 0; flex-shrink: 0; width:
36px; height: 36px; position: relative;" preserveAspectRatio="xMidYMid meet" > <g
clip-path="url(#clip0_9_575)"> <path opacity="0.1" fill-rule="evenodd" clip-
rule="evenodd" d="M18 7.25C15.0163 7.25 12.1548 8.43526 10.045 10.545C7.93526
12.6548 6.75 15.5163 6.75 18.5C6.75 21.4837 7.93526 24.3452 10.045 26.455C12.1548
28.5647 15.0163 29.75 18 29.75C20.9837 29.75 23.8452 28.5647 25.955 26.455C28.0647
24.3452 29.25 21.4837 29.25 18.5C29.25 15.5163 28.0647 12.6548 25.955
10.545C23.8452 8.43526 20.9837 7.25 18 7.25ZM2.25 18.5C2.25 9.8015 9.3015 2.75 18
2.75C26.6985 2.75 33.75 9.8015 33.75 18.5C33.75 27.1985 26.6985 34.25 18
34.25C9.3015 34.25 2.25 27.1985 2.25 18.5Z" fill="#149AFF" ></path> <path fill-
rule="evenodd" clip-rule="evenodd" d="M18 7.25002C15.0995 7.2435 12.3099 8.36376
10.2195 10.3745C9.78643 10.775 9.21341 10.9893 8.62384 10.9714C8.03427 10.9536
7.4753 10.7049 7.06726 10.279C6.65922 9.85303 6.43476 9.28391 6.4422
8.69411C6.44963 8.10432 6.68837 7.54103 7.10701 7.12552C10.0349 4.31221 13.9396
2.74377 18 2.75002C18.5967 2.75002 19.169 2.98707 19.591 3.40903C20.013 3.83099
20.25 4.40328 20.25 5.00002C20.25 5.59676 20.013 6.16905 19.591 6.59101C19.169
7.01297 18.5967 7.25002 18 7.25002Z" fill="#149AFF" ></path> </g> <defs> <clipPath
id="clip0_9_575"> <rect width="36" height="36" fill="white" transform="translate(0
0.5)"></rect> </clipPath> </defs> </svg> <p style="flex-grow: 1; width: 192px;
font-size: 14px; text-align: left; color: #1b1b1b;"> Por favor, aguarde. Estamos
avisando o Saber em Rede da sua indicação! </p> </div>
```
## Passo 3a - Erro de Indicação
```
<div style="display: flex; flex-direction: column; justify-content: center; align-
items: flex-start; width: 276px; overflow: hidden; gap: 8px; padding: 16px; border-
radius: 16px; background: #fff; border-width: 1px; border-color: #cdcdcd;" > <div
style="display: flex; flex-direction: column; justify-content: flex-start; align-
items: flex-start; align-self: stretch; flex-grow: 0; flex-shrink: 0; position:
relative; gap: 10px; padding-bottom: 12px;" > <p style="align-self: stretch; flex-
grow: 0; flex-shrink: 0; width: 244px; font-size: 16px; font-weight: 700; text-
align: left; color: #1b1b1b;" > Erro na indicação </p> </div> <div style="display:
flex; justify-content: flex-start; align-items: center; align-self: stretch; flex-
grow: 0; flex-shrink: 0; position: relative; gap: 16px;" > <div style="display:
flex; justify-content: center; align-items: center; flex-grow: 0; flex-shrink: 0;
width: 40px; height: 40px; position: relative; gap: 10px; padding: 4px; border-
radius: 32px; background: #fff6e8;" > <svg width="24" height="25" viewBox="0 0 24
25" fill="none" xmlns="[Link] style="flex-grow: 0; flex-
shrink: 0; width: 24px; height: 24px; position: relative;"
preserveAspectRatio="none" > <path d="M11 15.5H13V17.5H11V15.5ZM11
7.5H13V13.5H11V7.5ZM12 2.5C6.47 2.5 2 7 2 12.5C2 15.1522 3.05357 17.6957 4.92893
19.5711C5.85752 20.4997 6.95991 21.2362 8.17317 21.7388C9.38642 22.2413 10.6868
22.5 12 22.5C14.6522 22.5 17.1957 21.4464 19.0711 19.5711C20.9464 17.6957 22
15.1522 22 12.5C22 11.1868 21.7413 9.88642 21.2388 8.67317C20.7362 7.45991 19.9997
6.35752 19.0711 5.42893C18.1425 4.50035 17.0401 3.76375 15.8268 3.2612C14.6136
2.75866 13.3132 2.5 12 2.5ZM12 20.5C9.87827 20.5 7.84344 19.6571 6.34315
18.1569C4.84285 16.6566 4 14.6217 4 12.5C4 10.3783 4.84285 8.34344 6.34315
6.84315C7.84344 5.34285 9.87827 4.5 12 4.5C14.1217 4.5 16.1566 5.34285 17.6569
6.84315C19.1571 8.34344 20 10.3783 20 12.5C20 14.6217 19.1571 16.6566 17.6569
18.1569C16.1566 19.6571 14.1217 20.5 12 20.5Z" fill="black" ></path> </svg> </div>
<p style="flex-grow: 1; width: 188px; font-size: 14px; text-align: left;"> <span
style="flex-grow: 1; width: 188px; font-size: 14px; text-align: left; color:
#1b1b1b;" >Não conseguimos contatar o Saber em Rede. Recarregue esta página para
tentar novamente ou acesse a </span ><span style="flex-grow: 1; width: 188px; font-
size: 14px; text-align: left; color: #149aff;" >página do programa</span ><span
style="flex-grow: 1; width: 188px; font-size: 14px; text-align: left; color:
#1b1b1b;" >.</span > </p> </div> </div>
```
## Passo 3b - Indicação Feita com Sucesso
```
<div style="display: flex; flex-direction: column; justify-content: flex-start;
align-items: flex-end; width: 276px; overflow: hidden; gap: 8px; padding: 16px;
border-radius: 16px; background: #fff; border-width: 1px; border-color: #cdcdcd;" >
<div style="display: flex; flex-direction: column; justify-content: flex-start;
align-items: flex-start; align-self: stretch; flex-grow: 0; flex-shrink: 0;
position: relative; gap: 10px; padding-bottom: 12px;" > <p style="align-self:
stretch; flex-grow: 0; flex-shrink: 0; width: 244px; font-size: 16px; font-weight:
700; text-align: left; color: #1b1b1b;" > Sua indicação foi processada com sucesso.
Parabéns! </p> </div> <div style="display: flex; justify-content: flex-start;
align-items: flex-start; align-self: stretch; flex-grow: 0; flex-shrink: 0;
position: relative; gap: 16px;" > <div style="display: flex; justify-content:
center; align-items: center; flex-grow: 0; flex-shrink: 0; width: 40px; height:
40px; position: relative; gap: 10px; padding: 4px; border-radius: 32px; background:
#addcff;" > <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="[Link] style="flex-grow: 0; flex-shrink: 0; width:
24px; height: 24px; position: relative;" preserveAspectRatio="none" > <path d="M12
3L1 9L5 11.18V17.18L12 21L19 17.18V11.18L21 10.09V17H23V9L12 3ZM18.82 9L12
12.72L5.18 9L12 5.28L18.82 9ZM17 16L12 18.72L7 16V12.27L12 15L17 12.27V16Z"
fill="#1B1B1B" ></path> </svg> </div> <p style="flex-grow: 1; width: 188px; font-
size: 14px; text-align: left;"> <span style="flex-grow: 1; width: 188px; font-size:
14px; font-weight: 700; font-style: italic; text-align: left; color: #149aff;"
>Clique aqui</span ><span style="flex-grow: 1; width: 188px; font-size: 14px; font-
style: italic; text-align: left; color: #1b1b1b;" > e acesse a plataforma do Saber
em Rede para acompanhar suas indicações.</span > </p> </div> </div>
```
## Passo 3c.1 - Usuário sem Conta
```
<div style="display: flex; flex-direction: column; justify-content: flex-start;
align-items: flex-end; width: 276px; overflow: hidden; gap: 8px; padding: 16px;
border-radius: 16px; background: #fff; border-width: 1px; border-color: #cdcdcd;" >
<div style="display: flex; flex-direction: column; justify-content: flex-start;
align-items: flex-start; align-self: stretch; flex-grow: 0; flex-shrink: 0;
position: relative; gap: 10px; padding-bottom: 12px;" > <p style="align-self:
stretch; flex-grow: 0; flex-shrink: 0; width: 244px; font-size: 16px; text-align:
left; color: #1b1b1b;" > <span style="align-self: stretch; flex-grow: 0; flex-
shrink: 0; width: 244px; font-size: 16px; text-align: left; color: #1b1b1b;"
>Verificamos que você ainda não tem uma conta no programa de indicação.</span
><br /><span style="align-self: stretch; flex-grow: 0; flex-shrink: 0; width:
244px; font-size: 16px; text-align: left; color: #1b1b1b;" >Vamos criar?</span >
</p> </div> <div style="display: flex; justify-content: flex-end; align-items:
flex-start; align-self: stretch; flex-grow: 0; flex-shrink: 0; position: relative;
gap: 12px;" > <div style="flex-grow: 0; flex-shrink: 0; width: 20px; height: 20px;
border-radius: 4px; border-width: 2px; border-color: #1b1b1b;" ></div> <p
style="flex-grow: 1; width: 212px; font-size: 14px; font-style: italic; text-align:
left;"> <span style="flex-grow: 1; width: 212px; font-size: 14px; font-style:
italic; text-align: left; color: #1b1b1b;" >Aceito os </span ><span style="flex-
grow: 1; width: 212px; font-size: 14px; font-style: italic; text-align: left;
color: #149aff;" >termos de uso</span ><span style="flex-grow: 1; width: 212px;
font-size: 14px; font-style: italic; text-align: left; color: #1b1b1b;" > da conta
de Afiliado.</span > </p> </div> <div style="display: flex; flex-direction: column;
justify-content: flex-start; align-items: flex-end; align-self: stretch; flex-grow:
0; flex-shrink: 0; gap: 10px; padding-top: 4px; padding-bottom: 4px;" > <div
style="display: flex; justify-content: center; align-items: center; flex-grow: 0;
flex-shrink: 0; height: 40px; position: relative; gap: 10px; padding: 16px; border-
radius: 32px; border-width: 1px; border-color: #149aff;" > <p style="flex-grow: 0;
flex-shrink: 0; font-size: 14px; text-align: center; color: #149aff;"> Criar minha
conta </p> </div> </div> </div>
```
## Passo 3c.2 - Cadastro com Sucesso (Ir para 3b)
```
<div style="display: flex; flex-direction: column; justify-content: flex-start;
align-items: flex-end; width: 276px; position: relative; overflow: hidden; gap:
8px; padding: 16px; border-radius: 16px; background: #fff; border-width: 1px;
border-color: #cdcdcd;" > <div style="display: flex; flex-direction: column;
justify-content: flex-start; align-items: flex-start; align-self: stretch; flex-
grow: 0; flex-shrink: 0; position: relative; gap: 10px; padding-bottom: 12px;" > <p
style="align-self: stretch; flex-grow: 0; flex-shrink: 0; width: 244px; font-size:
16px; font-weight: 700; text-align: left; color: #1b1b1b;" > Sua conta de Afiliado
foi criada! </p> </div> <p style="align-self: stretch; flex-grow: 0; flex-shrink:
0; width: 244px; font-size: 14px; text-align: left;" > <span style="align-self:
stretch; flex-grow: 0; flex-shrink: 0; width: 244px; font-size: 14px; text-align:
left; color: #1b1b1b;" >Sua senha provisória será </span ><span style="align-self:
stretch; flex-grow: 0; flex-shrink: 0; width: 244px; font-size: 14px; font-weight:
700; text-align: left; color: #1b1b1b;" >amigoindica123</span ><span style="align-
self: stretch; flex-grow: 0; flex-shrink: 0; width: 244px; font-size: 14px; text-
align: left; color: #1b1b1b;" >. Quando finalizar a indicação, acesse a </span
><span style="align-self: stretch; flex-grow: 0; flex-shrink: 0; width: 244px;
font-size: 14px; text-align: left; color: #149aff;" >plataforma do programa</span
><span style="align-self: stretch; flex-grow: 0; flex-shrink: 0; width: 244px;
font-size: 14px; text-align: left; color: #1b1b1b;" > e altere seus dados.</span >
</p> <div style="display: flex; flex-direction: column; justify-content: flex-
start; align-items: flex-end; align-self: stretch; flex-grow: 0; flex-shrink: 0;
gap: 10px; padding-top: 4px; padding-bottom: 4px;" > <div style="display: flex;
justify-content: center; align-items: center; flex-grow: 0; flex-shrink: 0; height:
40px; position: relative; gap: 10px; padding: 16px; border-radius: 32px; border-
width: 1px; border-color: #149aff;" > <p style="flex-grow: 0; flex-shrink: 0; font-
size: 14px; text-align: center; color: #149aff;"> Finalizar indicação </p> </div>
</div> </div>
```
# Versão sem Ícones
## Passo 1 - Input de Informações
```
<div style="display: flex; flex-direction: column; justify-content: flex-start;
align-items: flex-end; width: 276px; overflow: hidden; gap: 8px; padding: 16px;
border-radius: 16px; background: #fff; border-width: 1px; border-color: #cdcdcd;" >
<div style="display: flex; justify-content: flex-start; align-items: flex-start;
align-self: stretch; flex-grow: 0; flex-shrink: 0; position: relative; gap: 10px;
padding-bottom: 12px;" > <p style="flex-grow: 1; width: 244px; font-size: 16px;
font-weight: 700; text-align: left; color: #1b1b1b;" > Indique seus amigos e ganhe
comi$$ões a cada matrícula </p> </div> <div style="display: flex; flex-direction:
column; justify-content: flex-start; align-items: flex-start; align-self: stretch;
flex-grow: 0; flex-shrink: 0; gap: 20px;" > <div style="display: flex; flex-
direction: column; justify-content: flex-start; align-items: flex-start; flex-grow:
0; flex-shrink: 0; width: 244px; gap: 20px;" > <div style="display: flex; flex-
direction: column; justify-content: flex-start; align-items: flex-start; align-
self: stretch; flex-grow: 0; flex-shrink: 0; height: 56px; border-top-left-radius:
4px; border-top-right-radius: 4px; background: #fff;" > <div style="display: flex;
flex-direction: column; justify-content: flex-start; align-items: flex-start;
align-self: stretch; flex-grow: 0; flex-shrink: 0; gap: 10px; border-radius: 4px;
border-width: 1px; border-color: #cdcdcd;" > <div style="display: flex; justify-
content: flex-start; align-items: center; align-self: stretch; flex-grow: 0; flex-
shrink: 0; padding-left: 16px; padding-top: 8px; padding-bottom: 8px; border-top-
left-radius: 4px; border-top-right-radius: 4px;" > <div style="display: flex; flex-
direction: column; justify-content: center; align-items: flex-start; flex-grow: 1;
height: 40px;" > <div style="display: flex; justify-content: flex-start; align-
items: center; flex-grow: 0; flex-shrink: 0; position: relative;" > <p style="flex-
grow: 0; flex-shrink: 0; font-size: 16px; text-align: left; color: #1b1b1b;" > Nome
completo </p> </div> </div> </div> </div> </div> <div style="display: flex; flex-
direction: column; justify-content: flex-start; align-items: flex-start; align-
self: stretch; flex-grow: 0; flex-shrink: 0; height: 56px; border-top-left-radius:
4px; border-top-right-radius: 4px;" > <div style="display: flex; flex-direction:
column; justify-content: flex-start; align-items: flex-start; align-self: stretch;
flex-grow: 0; flex-shrink: 0; gap: 10px; border-radius: 4px; border-width: 1px;
border-color: #cdcdcd;" > <div style="display: flex; justify-content: flex-start;
align-items: center; align-self: stretch; flex-grow: 0; flex-shrink: 0; padding-
left: 16px; padding-top: 8px; padding-bottom: 8px; border-top-left-radius: 4px;
border-top-right-radius: 4px;" > <div style="display: flex; flex-direction: column;
justify-content: center; align-items: flex-start; flex-grow: 1; height: 40px;" >
<div style="display: flex; justify-content: flex-start; align-items: center; flex-
grow: 0; flex-shrink: 0; position: relative;" > <p style="flex-grow: 0; flex-
shrink: 0; font-size: 16px; text-align: left; color: #1b1b1b;" > E-mail do amigo
</p> </div> </div> </div> </div> </div> <div style="display: flex; flex-direction:
column; justify-content: flex-start; align-items: flex-start; align-self: stretch;
flex-grow: 0; flex-shrink: 0; height: 56px; border-top-left-radius: 4px; border-
top-right-radius: 4px;" > <div style="display: flex; flex-direction: column;
justify-content: flex-start; align-items: flex-start; align-self: stretch; flex-
grow: 0; flex-shrink: 0; gap: 10px; border-radius: 4px; border-width: 1px; border-
color: #cdcdcd;" > <div style="display: flex; justify-content: flex-start; align-
items: center; align-self: stretch; flex-grow: 0; flex-shrink: 0; padding-left:
16px; padding-top: 8px; padding-bottom: 8px; border-top-left-radius: 4px; border-
top-right-radius: 4px;" > <div style="display: flex; flex-direction: column;
justify-content: center; align-items: flex-start; flex-grow: 1; height: 40px;" >
<div style="display: flex; justify-content: flex-start; align-items: center; flex-
grow: 0; flex-shrink: 0; position: relative;" > <p style="flex-grow: 0; flex-
shrink: 0; font-size: 16px; text-align: left; color: #1b1b1b;" > (xx) xxxx-xxxx
</p> </div> </div> </div> </div> </div> </div> </div> <div style="display: flex;
flex-direction: column; justify-content: flex-start; align-items: flex-end; align-
self: stretch; flex-grow: 0; flex-shrink: 0; gap: 10px; padding-top: 4px; padding-
bottom: 4px;" > <div style="display: flex; justify-content: center; align-items:
center; flex-grow: 0; flex-shrink: 0; width: 128px; height: 40px; position:
relative; gap: 10px; padding: 16px; border-radius: 32px; border-width: 1px; border-
color: #149aff;" > <p style="flex-grow: 0; flex-shrink: 0; font-size: 14px; text-
align: center; color: #149aff;"> Enviar </p> </div> </div> </div>
```
## Passo 2 - Aguarde
```
<div style="display: flex; justify-content: flex-start; align-items: center; width:
276px; position: relative; overflow: hidden; gap: 8px; padding: 16px; border-
radius: 16px; background: #fff; border-width: 1px; border-color: #cdcdcd;" > <p
style="flex-grow: 1; width: 244px; font-size: 14px; font-style: italic; text-align:
left; color: #1b1b1b;" > Por favor, aguarde. Estamos avisando o Saber em Rede da
sua indicação! </p> </div>
```
## Passo 3a - Erro de Indicação
```
<div style="display: flex; flex-direction: column; justify-content: center; align-
items: flex-start; width: 276px; overflow: hidden; gap: 8px; padding: 16px; border-
radius: 16px; background: #fff; border-width: 1px; border-color: #cdcdcd;" > <div
style="display: flex; flex-direction: column; justify-content: flex-start; align-
items: flex-start; align-self: stretch; flex-grow: 0; flex-shrink: 0; position:
relative; gap: 10px; padding-bottom: 12px;" > <p style="align-self: stretch; flex-
grow: 0; flex-shrink: 0; width: 244px; font-size: 16px; font-weight: 700; text-
align: left; color: #1b1b1b;" > Erro na indicação </p> </div> <div style="display:
flex; justify-content: flex-start; align-items: center; align-self: stretch; flex-
grow: 0; flex-shrink: 0; position: relative; gap: 16px; padding: 12px; border-
radius: 8px; background: #fff6e8;" > <p style="flex-grow: 1; width: 220px; font-
size: 14px; text-align: left;"> <span style="flex-grow: 1; width: 220px; font-size:
14px; text-align: left; color: #1b1b1b;" >Não conseguimos contatar o Saber em Rede.
Recarregue esta página para tentar novamente ou acesse a </span ><span style="flex-
grow: 1; width: 220px; font-size: 14px; text-align: left; color: #149aff;" >página
do programa</span ><span style="flex-grow: 1; width: 220px; font-size: 14px; text-
align: left; color: #1b1b1b;" >.</span > </p> </div> </div>
```
## Passo 3b - Indicação Feita com Sucesso
```
<div style="display: flex; flex-direction: column; justify-content: flex-start;
align-items: flex-end; width: 276px; overflow: hidden; gap: 8px; padding: 16px;
border-radius: 16px; background: #fff; border-width: 1px; border-color: #cdcdcd;" >
<div style="display: flex; flex-direction: column; justify-content: flex-start;
align-items: flex-start; align-self: stretch; flex-grow: 0; flex-shrink: 0;
position: relative; gap: 10px; padding-bottom: 12px;" > <p style="align-self:
stretch; flex-grow: 0; flex-shrink: 0; width: 244px; font-size: 16px; font-weight:
700; text-align: left; color: #1b1b1b;" > Sua indicação foi processada com sucesso.
Parabéns! </p> </div> <div style="display: flex; justify-content: flex-start;
align-items: flex-start; align-self: stretch; flex-grow: 0; flex-shrink: 0;
position: relative; gap: 16px; padding: 12px; border-radius: 8px; background:
#f5f5f5;" > <p style="flex-grow: 1; width: 220px; font-size: 14px; text-align:
left;"> <span style="flex-grow: 1; width: 220px; font-size: 14px; font-weight: 700;
font-style: italic; text-align: left; color: #149aff;" >Clique aqui</span ><span
style="flex-grow: 1; width: 220px; font-size: 14px; font-style: italic; text-align:
left; color: #1b1b1b;" > e acesse a plataforma do Saber em Rede para acompanhar
suas indicações.</span > </p> </div> </div>
```
## Passo 3c.1 - Usuário sem Conta
```
<div style="display: flex; flex-direction: column; justify-content: flex-start;
align-items: flex-end; width: 276px; overflow: hidden; gap: 8px; padding: 16px;
border-radius: 16px; background: #fff; border-width: 1px; border-color: #cdcdcd;" >
<div style="display: flex; flex-direction: column; justify-content: flex-start;
align-items: flex-start; align-self: stretch; flex-grow: 0; flex-shrink: 0;
position: relative; gap: 10px; padding-bottom: 12px;" > <p style="align-self:
stretch; flex-grow: 0; flex-shrink: 0; width: 244px; font-size: 16px; text-align:
left; color: #1b1b1b;" > <span style="align-self: stretch; flex-grow: 0; flex-
shrink: 0; width: 244px; font-size: 16px; text-align: left; color: #1b1b1b;"
>Verificamos que você ainda não tem uma conta no programa de indicação.</span
><br /><span style="align-self: stretch; flex-grow: 0; flex-shrink: 0; width:
244px; font-size: 16px; text-align: left; color: #1b1b1b;" >Vamos criar?</span >
</p> </div> <div style="display: flex; justify-content: flex-end; align-items:
flex-start; align-self: stretch; flex-grow: 0; flex-shrink: 0; position: relative;
gap: 12px;" > <div style="flex-grow: 0; flex-shrink: 0; width: 20px; height: 20px;
border-radius: 4px; border-width: 2px; border-color: #1b1b1b;" ></div> <p
style="flex-grow: 1; width: 212px; font-size: 14px; font-style: italic; text-align:
left;"> <span style="flex-grow: 1; width: 212px; font-size: 14px; font-style:
italic; text-align: left; color: #1b1b1b;" >Aceito os </span ><span style="flex-
grow: 1; width: 212px; font-size: 14px; font-style: italic; text-align: left;
color: #149aff;" >termos de uso</span ><span style="flex-grow: 1; width: 212px;
font-size: 14px; font-style: italic; text-align: left; color: #1b1b1b;" > da conta
de Afiliado.</span > </p> </div> <div style="display: flex; flex-direction: column;
justify-content: flex-start; align-items: flex-end; align-self: stretch; flex-grow:
0; flex-shrink: 0; gap: 10px; padding-top: 4px; padding-bottom: 4px;" > <div
style="display: flex; justify-content: center; align-items: center; flex-grow: 0;
flex-shrink: 0; height: 40px; position: relative; gap: 10px; padding: 16px; border-
radius: 32px; border-width: 1px; border-color: #149aff;" > <p style="flex-grow: 0;
flex-shrink: 0; font-size: 14px; text-align: center; color: #149aff;"> Criar minha
conta </p> </div> </div> </div>
```
## Passo 3c.2 - Cadastro com Sucesso (Ir para 3b)
```
<div style="display: flex; flex-direction: column; justify-content: flex-start;
align-items: flex-end; width: 276px; position: relative; overflow: hidden; gap:
8px; padding: 16px; border-radius: 16px; background: #fff; border-width: 1px;
border-color: #cdcdcd;" > <div style="display: flex; flex-direction: column;
justify-content: flex-start; align-items: flex-start; align-self: stretch; flex-
grow: 0; flex-shrink: 0; position: relative; gap: 10px; padding-bottom: 12px;" > <p
style="align-self: stretch; flex-grow: 0; flex-shrink: 0; width: 244px; font-size:
16px; font-weight: 700; text-align: left; color: #1b1b1b;" > Sua conta de Afiliado
foi criada! </p> </div> <p style="align-self: stretch; flex-grow: 0; flex-shrink:
0; width: 244px; font-size: 14px; text-align: left;" > <span style="align-self:
stretch; flex-grow: 0; flex-shrink: 0; width: 244px; font-size: 14px; text-align:
left; color: #1b1b1b;" >Sua senha provisória será </span ><span style="align-self:
stretch; flex-grow: 0; flex-shrink: 0; width: 244px; font-size: 14px; font-weight:
700; text-align: left; color: #1b1b1b;" >amigoindica123</span ><span style="align-
self: stretch; flex-grow: 0; flex-shrink: 0; width: 244px; font-size: 14px; text-
align: left; color: #1b1b1b;" >. Quando finalizar a indicação, acesse a </span
><span style="align-self: stretch; flex-grow: 0; flex-shrink: 0; width: 244px;
font-size: 14px; text-align: left; color: #149aff;" >plataforma do programa</span
><span style="align-self: stretch; flex-grow: 0; flex-shrink: 0; width: 244px;
font-size: 14px; text-align: left; color: #1b1b1b;" > e altere seus dados.</span >
</p> <div style="display: flex; flex-direction: column; justify-content: flex-
start; align-items: flex-end; align-self: stretch; flex-grow: 0; flex-shrink: 0;
gap: 10px; padding-top: 4px; padding-bottom: 4px;" > <div style="display: flex;
justify-content: center; align-items: center; flex-grow: 0; flex-shrink: 0; height:
40px; position: relative; gap: 10px; padding: 16px; border-radius: 32px; border-
width: 1px; border-color: #149aff;" > <p style="flex-grow: 0; flex-shrink: 0; font-
size: 14px; text-align: center; color: #149aff;"> Finalizar indicação </p> </div>
</div> </div>
```
