/* /indique/ · topo: painel laranja (como os painéis das frentes da Home) com o celular mostrando a mensagem que a pessoa recebe */
/* com tudo absoluto dentro, aspect-ratio e padding em % viram 0 no flex do Elementor e a cena fica sem altura.
   A coluna do visual vira contêiner e a altura sai da largura dela (627 x 489 do modelo). */
body.tds-pg-indique .e-con.fx-pg-topo__vis { container-type: inline-size; }
body.tds-pg-indique .ind-cena { position: relative; overflow: hidden; height: 78cqw; background: var(--fx-laranja); border-radius: 27px; isolation: isolate; }
body.tds-pg-indique .ind-cena__anel { position: absolute; left: 50%; top: 62%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .24); transform: translate(-50%, -50%); z-index: -1; }
body.tds-pg-indique .ind-cena__anel--1 { width: 78%; }
body.tds-pg-indique .ind-cena__anel--2 { width: 118%; border-color: rgba(255, 255, 255, .14); }
body.tds-pg-indique .ind-tel { position: absolute; left: 50%; top: 13%; width: 58%; height: 100%; transform: translateX(-50%); box-sizing: border-box; padding: 10px; background: #0F0F0F; border-radius: 42px; box-shadow: 0 40px 70px -28px rgba(60, 14, 4, .65); container-type: inline-size; }
body.tds-pg-indique .ind-tel__tela { height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 33px; background: #EFE7DE; }
body.tds-pg-indique .ind-tel__topo { display: flex; align-items: center; gap: 3.4cqw; padding: 6cqw 5cqw 3.6cqw; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
body.tds-pg-indique .ind-tel__seta { width: 2.4cqw; height: 2.4cqw; margin-left: 1cqw; border-left: 2px solid #3B4A54; border-bottom: 2px solid #3B4A54; transform: rotate(45deg); }
body.tds-pg-indique .ind-tel__foto { flex: none; width: 9cqw; aspect-ratio: 1; border-radius: 50%; background: #DFE5E7; position: relative; overflow: hidden; }
body.tds-pg-indique .ind-tel__foto::before { content: ""; position: absolute; left: 50%; top: 22%; width: 38%; aspect-ratio: 1; border-radius: 50%; background: #fff; transform: translateX(-50%); }
body.tds-pg-indique .ind-tel__foto::after { content: ""; position: absolute; left: 50%; bottom: -26%; width: 74%; aspect-ratio: 1; border-radius: 50%; background: #fff; transform: translateX(-50%); }
body.tds-pg-indique .ind-tel__nome { font: 600 4cqw/1.2 var(--fx-texto); color: #111B21; }
body.tds-pg-indique .ind-tel__chat { flex: 1; display: flex; flex-direction: column; align-items: flex-end; padding: 6cqw 4.4cqw; }
body.tds-pg-indique .ind-balao { position: relative; margin: 0; max-width: 90%; box-sizing: border-box; padding: 3.2cqw 3.8cqw; background: #D9FDD3; border-radius: 3.2cqw 0 3.2cqw 3.2cqw; box-shadow: 0 1px 1px rgba(11, 20, 26, .12); font: 400 4.1cqw/1.45 var(--fx-texto); color: #111B21; text-align: left; }
body.tds-pg-indique .ind-balao::after { content: ""; position: absolute; top: 0; right: -2.2cqw; border-top: 2.6cqw solid #D9FDD3; border-right: 2.6cqw solid transparent; }
body.tds-pg-indique .ind-balao__link { color: #027EB5; text-decoration: underline; }

body.tds-pg-indique .ind-nota { margin: 16px 0 0; font-size: 15px; line-height: 1.4; color: var(--fx-cinza); }

/* faixa preta: o cartão creme com quem não é cliente, ao lado da lista de pra quem é */
body.tds-pg-indique .ind-nao { box-sizing: border-box; background: var(--fx-creme); border-radius: 27px; padding: clamp(30px, 3.4vw, 64px) clamp(26px, 3.2vw, 60px); }
body.tds-pg-indique .ind-nao__t { margin: 0 0 clamp(18px, 1.6vw, 30px); font: 800 clamp(24px, 1vw + 13px, 34px)/1.15 var(--fx-titulo); color: var(--fx-tinta); }
body.tds-pg-indique .ind-nao ul { list-style: none; margin: 0; padding: 0; }
body.tds-pg-indique .ind-nao li { position: relative; padding: clamp(15px, 1.2vw, 21px) 0 clamp(15px, 1.2vw, 21px) 42px; border-top: 1px solid rgba(34, 34, 34, .12); font: 500 clamp(16px, 0.3vw + 13px, 20px)/1.4 var(--fx-texto); color: #575757; }
body.tds-pg-indique .ind-nao li::before { content: ""; position: absolute; left: 0; top: calc(clamp(15px, 1.2vw, 21px) + .2em); width: 22px; height: 22px; border-radius: 50%; background: var(--fx-tinta); }
body.tds-pg-indique .ind-nao li::after { content: ""; position: absolute; left: 6px; top: calc(clamp(15px, 1.2vw, 21px) + .2em + 10px); width: 10px; height: 2px; border-radius: 1px; background: var(--fx-creme); }

@media (max-width: 900px) {
  body.tds-pg-indique .ind-cena { height: 96cqw; }
  body.tds-pg-indique .ind-tel { width: 72%; top: 9%; }
  /* faixa preta: no celular o tidos.css devolve o visual pro topo; aqui o cartão de quem não indicar fica depois da lista de pra quem indicar */
  body.tds-pg-indique .fx-escura__grade--inv > .fx-escura__vis { order: 2; }
}
@media (max-width: 767px) {
  body.tds-pg-indique .ind-cena { border-radius: 20px; height: 112cqw; }
  body.tds-pg-indique .ind-tel { width: 86%; top: 8%; padding: 8px; border-radius: 34px; }
  body.tds-pg-indique .ind-tel__tela { border-radius: 27px; }
  body.tds-pg-indique .ind-cena__anel--1 { width: 100%; }
  body.tds-pg-indique .ind-cena__anel--2 { width: 150%; }
  body.tds-pg-indique .fx-pg-topo .fx-botoes .fx-btn .elementor-button { width: 100%; }
  body.tds-pg-indique .ind-nao { border-radius: 20px; }
}
@media (max-width: 767px) {
  /* a mensagem do celular desenhado com letra de ler */
  body.tds-pg-indique .ind-balao { max-width: 96%; font-size: max(13px, 4.1cqw); }
}