/* Sobre (slug sobre). Só o que o modelo de página interna não tem:
   o símbolo em contorno do topo (linha de 3 px, como pede a MIV, cap. 4), o funil com as cinco etapas na faixa preta e o bloco do fundador. */

/* Altura dos visuais montados: um espaçador vazio com a proporção (o aspect-ratio na própria caixa, que tem overflow escondido, zera a altura dela no flex do Elementor) */
body.tds-pg-sobre .vis-espaco { display: block; }
/* no celular o Elementor põe flex-wrap: wrap nos containers, e coluna com wrap zera a altura de visual sem imagem (defeito do bloco compartilhado) */
body.tds-pg-sobre .e-con.fx-pg-topo__vis, body.tds-pg-sobre .e-con.fx-escura__vis { --flex-wrap: nowrap; flex-wrap: nowrap; }
body.tds-pg-sobre .sb-marca > .vis-espaco { aspect-ratio: 627 / 489; }
body.tds-pg-sobre .sb-funil > .vis-espaco { aspect-ratio: 629 / 600; }
@media (max-width: 767px) {
  body.tds-pg-sobre .sb-marca > .vis-espaco { aspect-ratio: 358 / 330; }
}

/* Topo: o símbolo B em contorno laranja sobre o preto das capas (#161616), cortado pela borda, com dois avisos */
body.tds-pg-sobre .sb-marca { position: relative; border-radius: 27px; overflow: hidden; background: #161616; }
body.tds-pg-sobre .sb-marca__in { position: absolute; inset: 0; container-type: inline-size; font-family: var(--fx-texto); }
body.tds-pg-sobre .sb-marca__simbolo { position: absolute; left: 30%; top: 7%; width: 92%; height: auto; }
body.tds-pg-sobre .sb-marca__aviso { position: absolute; display: flex; align-items: center; gap: 2.4cqw; background: #fff; border-radius: 2.6cqw; padding: 2.6cqw 3cqw; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .6); }
body.tds-pg-sobre .sb-marca__aviso--1 { left: 6%; top: 34%; width: 50%; }
body.tds-pg-sobre .sb-marca__aviso--2 { left: 30%; bottom: 10%; width: 42%; }
body.tds-pg-sobre .sb-marca__aviso i { flex: none; width: 7cqw; height: 7cqw; border-radius: 50%; background: var(--fx-laranja); display: grid; place-items: center; }
body.tds-pg-sobre .sb-marca__aviso i::before { content: ""; width: 48%; height: 48%; background: #fff; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
body.tds-pg-sobre .sb-marca__aviso i.is-ok { background: var(--fx-verde); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
body.tds-pg-sobre .sb-marca__aviso i.is-ok::before { display: none; }
body.tds-pg-sobre .sb-marca__aviso span { flex: 1 1 auto; min-width: 0; }
body.tds-pg-sobre .sb-marca__aviso b { display: block; font: 600 clamp(10px, 2.6cqw, 16px)/1.2 var(--fx-texto); color: var(--fx-tinta); }
body.tds-pg-sobre .sb-marca__aviso small { display: block; margin-top: .25em; font: 400 clamp(8.5px, 2cqw, 13px)/1.25 var(--fx-texto); color: #686868; }
body.tds-pg-sobre .sb-marca__aviso em { align-self: flex-start; font: 400 clamp(8px, 1.8cqw, 11.5px)/1 var(--fx-texto); font-style: normal; color: #999999; }
body.tds-pg-sobre .fx-pg-topo .fx-sub p + p { margin-top: .8em; }

/* No que acreditamos: quatro cartões em duas colunas */
body.tds-pg-sobre #acreditamos .fx-card__d p { max-width: 470px; }

/* Faixa preta: o funil das cinco etapas. As quatro faixas do desenho (Ação embaixo, depois Averiguação, Atração e Atenção)
   com a pílula de cada uma do lado direito, sem encostar no desenho, e a Advocacia em cima, com a seta voltando pra boca do funil.
   Tudo em cqw da caixa (629 de largura no computador), pra o desenho e as pílulas crescerem juntos. */
body.tds-pg-sobre .sb-funil { position: relative; }
body.tds-pg-sobre .sb-funil__in { position: absolute; inset: 0; container-type: inline-size; font-family: var(--fx-texto); }
body.tds-pg-sobre .fx-escura__vis .sb-funil img { position: absolute; left: -23.09cqw; top: -7.07cqw; width: 119.24cqw; max-width: none; height: auto; border-radius: 0; }
body.tds-pg-sobre .sb-funil__et { position: absolute; z-index: 1; box-sizing: border-box; transform: translateY(-50%); display: flex; align-items: center; gap: 2cqw;
  background: #fff; border-radius: 2.4cqw; padding: 1.8cqw 2.4cqw 1.8cqw 1.8cqw; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .6); }
body.tds-pg-sobre .sb-funil__et b { flex: none; display: grid; place-items: center; width: 6cqw; height: 6cqw; border-radius: 50%; background: var(--fx-laranja); color: #fff; font: 400 clamp(13px, 3.6cqw, 24px)/1 var(--fx-eyebrow); padding-top: .1em; box-sizing: border-box; }
body.tds-pg-sobre .sb-funil__et span { min-width: 0; }
body.tds-pg-sobre .sb-funil__et strong { display: block; font: 600 clamp(10.5px, 2.7cqw, 17px)/1.2 var(--fx-texto); color: var(--fx-tinta); }
body.tds-pg-sobre .sb-funil__et small { display: block; margin-top: .25em; font: 400 clamp(9px, 2.1cqw, 13.5px)/1.25 var(--fx-texto); color: #686868; }
body.tds-pg-sobre .sb-funil__et--5 { left: 53cqw; top: 11cqw; width: 44cqw; }
body.tds-pg-sobre .sb-funil__et--4 { left: 67.6cqw; top: 45.2cqw; width: 32cqw; }
body.tds-pg-sobre .sb-funil__et--3 { left: 61cqw; top: 59.14cqw; width: 38cqw; }
body.tds-pg-sobre .sb-funil__et--2 { left: 53.7cqw; top: 71.86cqw; width: 33cqw; }
body.tds-pg-sobre .sb-funil__et--1 { left: 44.8cqw; top: 84.74cqw; width: 50cqw; box-shadow: 0 0 0 2px var(--fx-laranja), 0 24px 48px -16px rgba(0, 0, 0, .6); }
/* a volta da Advocacia: tracejado saindo da pílula 5 e descendo até a boca do funil */
body.tds-pg-sobre .sb-funil__volta { position: absolute; left: 38.2cqw; top: 11cqw; width: 14.8cqw; height: 16cqw; box-sizing: border-box;
  border: 2px dashed var(--fx-laranja); border-right: 0; border-bottom: 0; border-top-left-radius: 3cqw; }
body.tds-pg-sobre .sb-funil__volta::after { content: ""; position: absolute; left: -1px; bottom: -1.3cqw; width: 2cqw; height: 1.5cqw; transform: translateX(-50%);
  background: var(--fx-laranja); clip-path: polygon(0 0, 100% 0, 50% 100%); }
body.tds-pg-sobre .fx-escura .fx-txt p + p { margin-top: 1em; }
body.tds-pg-sobre .fx-escura .fx-txt p + p { color: #fff; font-weight: 600; }

/* A Tidos hoje: os links dos serviços dentro do cartão */
body.tds-pg-sobre #hoje .fx-card__d a { color: var(--fx-laranja-esc); font-weight: 600; }
body.tds-pg-sobre #hoje .fx-card__d a:hover { text-decoration: underline; }

/* Fundador: texto de um lado e o cartão do Jonathan (o mesmo da Home) do outro, os dois alinhados pelo topo.
   O respiro da seção é o padrão das páginas internas (fx-pg-sec). */
body.tds-pg-sobre .e-con.sb-fundador { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
body.tds-pg-sobre .e-con.sb-fundador__txt { min-width: 0; }
/* o fx-pg-cab__d do tidos.css tem flex-basis de 518px (largura, no cabeçalho em linha); nesta coluna ele virava 518px de altura */
body.tds-pg-sobre .sb-fundador__txt .fx-pg-cab__d { flex: 0 0 auto; }
body.tds-pg-sobre .sb-fundador__txt .fx-h2 .elementor-heading-title { font-size: clamp(30px, 2vw + 12px, 46px); line-height: 1.05; max-width: 560px; }
body.tds-pg-sobre .sb-fundador__txt .fx-pg-cab__d { margin-top: clamp(18px, 1.6vw, 28px); }
body.tds-pg-sobre .sb-fundador__txt .fx-pg-cab__d, body.tds-pg-sobre .sb-fundador__txt .fx-pg-cab__d p { font-size: clamp(17px, 0.4vw + 13px, 20px); line-height: 1.5; color: var(--fx-cinza); }
body.tds-pg-sobre .sb-fundador__txt .fx-pg-cab__d p + p { margin-top: 1em; }
body.tds-pg-sobre .e-con.sb-fundador__pessoa { min-width: 0; }
body.tds-pg-sobre .sb-pessoa { border-radius: 17px; }

@media (max-width: 900px) {
  body.tds-pg-sobre .e-con.sb-fundador { grid-template-columns: minmax(0, 1fr); }
  body.tds-pg-sobre .sb-funil { max-width: 520px; margin-inline: auto; }
}
@media (max-width: 767px) {
  body.tds-pg-sobre .sb-marca { border-radius: 20px; }
  body.tds-pg-sobre .sb-marca__aviso--1 { width: 62%; top: 30%; }
  body.tds-pg-sobre .sb-marca__aviso--2 { width: 58%; left: 24%; }
  body.tds-pg-sobre .sb-marca__aviso b, body.tds-pg-sobre .sb-funil__et strong { font-size: 12px; }
  body.tds-pg-sobre .sb-marca__aviso small, body.tds-pg-sobre .sb-funil__et small { font-size: 10.5px; }
  /* no celular a pílula fica só com o nome (o apelido de cada etapa está na lista do texto) */
  body.tds-pg-sobre .sb-funil__et { width: auto; padding: 6px 12px 6px 6px; white-space: nowrap; }
  body.tds-pg-sobre .sb-funil__et small { display: none; }
  body.tds-pg-sobre .sb-funil__et--4 { left: auto; right: 0; }
  body.tds-pg-sobre .sb-pessoa img { max-height: 320px; }
}
@media (max-width: 767px) {
  /* o "agora" do aviso caía no piso de 8 px, e os links dos serviços tinham só 4 px entre um e outro */
  body.tds-pg-sobre .sb-marca__aviso em { font-size: 10px; }
  body.tds-pg-sobre #hoje .fx-card__d .elementor-widget-container { line-height: 1.9; }
}