/* Tidos · Criação de sites (/criacao-de-sites/). Gerado a partir de processo/paginas/05-sites-visual/sites.src.css (o body.tds-pg-criacao-de-sites vira body.tds-pg-criacao-de-sites).
   Visual no desenho do frame Site do Figma (nó 263:1112): topo escuro com os aparelhos, cartões claros, faixa de sites, cartões
   escuros grandes com uma mini interface, portfólio com a cor de cada cliente, bloco laranja dividido, caixa laranja com cartões
   brancos e a chamada escura com os aparelhos no pedestal. Ritmo: escuro, branco, preto, preto, branco, branco, branco, branco. */
body.tds-pg-criacao-de-sites .e-con.st-sec { padding: clamp(72px, 7.5vw, 128px) 0; }
body.tds-pg-criacao-de-sites .fx-h2 .elementor-heading-title span, body.tds-pg-criacao-de-sites .st-h1 .elementor-heading-title span { color: var(--fx-laranja); }
body.tds-pg-criacao-de-sites .st-h2 .elementor-heading-title { max-width: 860px; text-wrap: balance; }
body.tds-pg-criacao-de-sites .st-txt p { margin: 0 0 12px; max-width: 720px; font-size: clamp(17px, .3vw + 14px, 19px); line-height: 1.6; color: #575757; }
body.tds-pg-criacao-de-sites .st-txt p:last-child { margin-bottom: 0; }
body.tds-pg-criacao-de-sites .e-con.st-cta-linha { flex-direction: row; justify-content: center; margin-top: clamp(32px, 3vw, 52px); }
body.tds-pg-criacao-de-sites .st-btn .elementor-button, body.tds-pg-criacao-de-sites .st-cta-linha .fx-btn .elementor-button { height: 60px; padding: 0 34px; font-size: 18px; }
/* o ícone num círculo laranja (usado nos cartões) */
body.tds-pg-criacao-de-sites .st-ic, body.tds-pg-criacao-de-sites .st-pd__ic, body.tds-pg-criacao-de-sites .st-cm__ic, body.tds-pg-criacao-de-sites .st-fn__ic, body.tds-pg-criacao-de-sites .st-chip__ic { flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--fx-laranja); }
body.tds-pg-criacao-de-sites .st-ic i, body.tds-pg-criacao-de-sites .st-pd__ic i, body.tds-pg-criacao-de-sites .st-cm__ic i, body.tds-pg-criacao-de-sites .st-fn__ic i, body.tds-pg-criacao-de-sites .st-chip__ic i { width: 50%; height: 50%; background: #fff; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }

/* ===== 1 · topo escuro, com os aparelhos ===== */
body.tds-pg-criacao-de-sites .e-con.st-topo { position: relative; padding: 0; min-height: clamp(640px, calc(100svh - 84px), 940px); display: flex; justify-content: center; align-items: stretch; overflow: hidden; background: radial-gradient(120% 90% at 78% 40%, #3A2A25 0%, #1C1B1B 46%, #121212 100%); }
/* as linhas verticais finas do fundo do Figma */
body.tds-pg-criacao-de-sites .e-con.st-topo::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 180px); -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); pointer-events: none; }
body.tds-pg-criacao-de-sites .e-con.st-topo__grade { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: center; padding: clamp(48px, 6vh, 80px) 0; }
body.tds-pg-criacao-de-sites .e-con.st-topo__txt { display: block; min-width: 0; }
body.tds-pg-criacao-de-sites .e-con.st-topo__vis { display: block; min-width: 0; }
body.tds-pg-criacao-de-sites .st-topo .fx-eyebrow .elementor-heading-title { font-size: 20px; letter-spacing: .05em; }
body.tds-pg-criacao-de-sites .st-h1 .elementor-heading-title { margin: 0; max-width: 640px; font-family: var(--fx-titulo); font-weight: 800; font-size: clamp(30px, 1.6vw + 21px, 44px); line-height: 1.05; letter-spacing: -0.025em; color: #fff; }
body.tds-pg-criacao-de-sites .st-sub { margin-top: 22px; }
body.tds-pg-criacao-de-sites .st-sub p { margin: 0; max-width: 560px; font-size: clamp(17px, .35vw + 14px, 19px); line-height: 1.55; color: #C9C9C9; }
body.tds-pg-criacao-de-sites .e-con.st-botoes { flex-direction: row; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
body.tds-pg-criacao-de-sites .st-btn-contorno .elementor-button { height: 60px; padding: 0 30px; font-size: 18px; box-shadow: inset 0 0 0 1.5px var(--fx-laranja); color: var(--fx-laranja); }
body.tds-pg-criacao-de-sites .st-btn-contorno .elementor-button:hover { background: rgba(239, 84, 51, .1); color: var(--fx-laranja); }
/* os três selos embaixo dos botões (no Figma eram números; aqui é o que a Tidos faz) */
body.tds-pg-criacao-de-sites .st-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; }
body.tds-pg-criacao-de-sites .st-chips li { display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 12px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .03); font: 600 14.5px/1.25 var(--fx-texto); color: #E6E6E6; }
body.tds-pg-criacao-de-sites .st-chip__ic { width: 28px; height: 28px; }
/* a vitrine: duas janelas de site que giram pelos sites feitos, a esfera laranja atrás e os selos. Sem o painel creme de fundo:
   "consegue fazer uma versão sem essa moldura clara de bg? Só os mockups, logo e a esfera, pra dar mais destaque na seção e não
   ficar tão 'tímida'" */
body.tds-pg-criacao-de-sites .st-vt { position: relative; aspect-ratio: 16 / 11; container-type: inline-size; perspective: 140cqw; }
/* no desk a cena cresce pra direita, até perto da borda da tela */
@media (min-width: 1101px) {
  body.tds-pg-criacao-de-sites .st-vt { width: calc(100% + min(20%, max(0px, (100vw - min(var(--fx-largura), 100vw - 2 * var(--fx-margem))) / 2 - 24px))); }
}
body.tds-pg-criacao-de-sites .st-vt__forma { position: absolute; left: 24%; top: -4%; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FF7A55 0%, var(--fx-laranja) 55%, #D9401F 100%); box-shadow: 0 0 12cqw 2cqw rgba(239, 84, 51, .38); }
/* a troca dos sites: o mesmo desenho de antes (a da frente desce pra direita e some, a de trás vem pra frente e a próxima entra
   por cima, à esquerda), com o fade mais longo e uma curva mais suave. Ele: "Acho que o efeito entre os sites tava melhor do outro
   jeito [...] Talvez um fade-in e um fade out mais suave, uma transição mais fluida." Tudo em transform, que roda mais liso. */
body.tds-pg-criacao-de-sites .st-jn { position: absolute; left: 0; top: 0; margin: 0; width: 74%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 1.8cqw; background: #161616; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 3.5cqw 7cqw -2cqw rgba(0, 0, 0, .8); opacity: 0; visibility: hidden; transform: translate3d(-6cqw, -1cqw, 0) scale(.96); transition: none; will-change: transform, opacity; }
body.tds-pg-criacao-de-sites .st-jn__barra { position: absolute; left: 0; right: 0; top: 0; z-index: 1; display: flex; gap: .6cqw; align-items: center; height: 3.2cqw; padding: 0 1.4cqw; background: #F1F1F1; }
body.tds-pg-criacao-de-sites .st-jn__barra i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #CFCFCF; }
body.tds-pg-criacao-de-sites .st-jn img { position: absolute; left: 0; top: 3.2cqw; width: 100%; height: calc(100% - 3.2cqw); object-fit: cover; object-position: 50% 0; }
/* atrás: em cima, à esquerda (entra devagar, aparecendo aos poucos) */
body.tds-pg-criacao-de-sites .st-jn.is-tras { z-index: 0; opacity: 1; visibility: visible; transform: translate3d(-3cqw, 2cqw, 0); transition: transform .85s cubic-bezier(.33, 0, .15, 1) .12s, opacity .7s ease .12s; }
/* na frente: embaixo, à direita */
body.tds-pg-criacao-de-sites .st-jn.is-frente { z-index: 2; opacity: 1; visibility: visible; transform: translate3d(24cqw, 21cqw, 0); transition: transform .85s cubic-bezier(.45, 0, .15, 1); }
/* saindo: desce um pouco pra direita e some aos poucos, por baixo da nova da frente */
body.tds-pg-criacao-de-sites .st-jn.is-sai { z-index: 1; opacity: 0; visibility: visible; transform: translate3d(31cqw, 26.5cqw, 0) scale(.96); transition: transform .8s cubic-bezier(.33, 0, .15, 1), opacity .6s ease; }
/* os selos do Figma e do WordPress como moedas em 3D (borda, luz e sombra), cada um numa altura e flutuando no seu ritmo */
body.tds-pg-criacao-de-sites .st-selo { position: absolute; z-index: 4; display: block; border-radius: 50%; background: #fff; box-shadow: 0 .35cqw 0 #E6E0D4, 0 .7cqw 0 #D2CABB, 0 1.05cqw 0 #B9B0A0, 0 3.2cqw 4cqw -.8cqw rgba(0, 0, 0, .65); animation: st-flutua-a 5.4s ease-in-out infinite alternate; will-change: transform; }
body.tds-pg-criacao-de-sites .st-selo img { display: block; width: 100%; height: auto; border-radius: 50%; }
body.tds-pg-criacao-de-sites .st-selo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset -1cqw -1.2cqw 1.8cqw rgba(0, 0, 0, .14), inset .8cqw .8cqw 1.2cqw rgba(255, 255, 255, .9); pointer-events: none; }
body.tds-pg-criacao-de-sites .st-vt .st-selo--figma { left: 2%; bottom: -3%; width: 16cqw; }
body.tds-pg-criacao-de-sites .st-vt .st-selo--wp { right: 3%; top: 1%; width: 12cqw; animation-name: st-flutua-b; animation-duration: 6.6s; animation-delay: -2.4s; }
@keyframes st-flutua-a { from { transform: translate3d(0, 0, 0) rotateX(16deg) rotateY(-20deg) rotateZ(-11deg); } to { transform: translate3d(0, -1.8cqw, 0) rotateX(6deg) rotateY(6deg) rotateZ(-4deg); } }
@keyframes st-flutua-b { from { transform: translate3d(0, 0, 0) rotateX(-10deg) rotateY(18deg) rotateZ(10deg); } to { transform: translate3d(0, -1.4cqw, 0) rotateX(8deg) rotateY(-8deg) rotateZ(3deg); } }
/* os cartões de interface da MIV */

/* ===== 2 · onde o site perde o cliente (os cartões claros do Figma) ===== */
body.tds-pg-criacao-de-sites .e-con.st-perde { background: #fff; }
body.tds-pg-criacao-de-sites .e-con.st-perde__in { display: block; }
body.tds-pg-criacao-de-sites .e-con.st-perde__cab { display: flex; flex-direction: column; align-items: center; text-align: center; }
body.tds-pg-criacao-de-sites .st-perde__cab .st-h2 .elementor-heading-title { margin-left: auto; margin-right: auto; }
body.tds-pg-criacao-de-sites .st-perde__cab .st-txt { margin-top: 16px; }
body.tds-pg-criacao-de-sites .st-perde__cab .st-txt p { margin-left: auto; margin-right: auto; }
body.tds-pg-criacao-de-sites .st-pds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); margin: clamp(40px, 4vw, 60px) 0 0; padding: 0; list-style: none; font-family: var(--fx-texto); }
body.tds-pg-criacao-de-sites .st-pd { display: flex; flex-direction: column; align-items: center; padding: 36px 28px 34px; border-radius: 22px; background: linear-gradient(160deg, #FFF6F4, #FDE6E1); box-shadow: 0 30px 60px -30px rgba(239, 84, 51, .45), inset 0 0 0 1px rgba(239, 84, 51, .1); text-align: center; }
body.tds-pg-criacao-de-sites .st-pd :where(p) { margin: 0; }
body.tds-pg-criacao-de-sites .st-pd__ic { width: 60px; height: 60px; }
body.tds-pg-criacao-de-sites .st-pd__t { margin: 20px 0 0; font: 800 22px/1.2 var(--fx-titulo); color: #222; }
body.tds-pg-criacao-de-sites .st-pd__selo { margin-top: 16px !important; padding: 10px 16px; border-radius: 12px; background: #FFE3DD; box-shadow: inset 0 0 0 1px rgba(239, 84, 51, .18); font-weight: 700; font-size: 15.5px; line-height: 1.3; color: #D9442A; }
body.tds-pg-criacao-de-sites .st-pd__txt { margin-top: 16px !important; font-size: 15.5px; line-height: 1.55; color: #5A5A5A; }
body.tds-pg-criacao-de-sites .st-pd__txt a { color: #D9442A; text-decoration: underline; }

/* ===== 3 · faixa de sites reais rolando (a faixa preta do Figma) ===== */
body.tds-pg-criacao-de-sites .e-con.st-faixa-sec { padding: clamp(40px, 4vw, 64px) 0; overflow: hidden; background: #0A0A0A; }
body.tds-pg-criacao-de-sites .st-faixa { position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
body.tds-pg-criacao-de-sites .st-faixa__trilho { display: flex; gap: 18px; width: max-content; animation: st-faixa 70s linear infinite; }
@keyframes st-faixa { to { transform: translateX(calc(-50% - 9px)); } }
body.tds-pg-criacao-de-sites .st-fx { position: relative; flex: none; border: 1px solid rgba(255, 255, 255, .14); height: clamp(200px, 17vw, 280px); margin: 0; overflow: hidden; border-radius: 16px; background: #1A1A1A; }
body.tds-pg-criacao-de-sites .st-fx--tela { aspect-ratio: 16 / 10; }
body.tds-pg-criacao-de-sites .st-fx--cel { aspect-ratio: 9 / 18; border-radius: 22px; box-shadow: inset 0 0 0 5px #2A2A2A; }
body.tds-pg-criacao-de-sites .st-fx img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
body.tds-pg-criacao-de-sites .st-fx--cel img { padding: 5px; border-radius: 22px; }

/* ===== 4 · como fazemos: os cartões escuros grandes, cada um com uma mini interface ===== */
body.tds-pg-criacao-de-sites .e-con.st-como { background: #0A0A0A; }
body.tds-pg-criacao-de-sites .e-con.st-como__in { display: block; }
body.tds-pg-criacao-de-sites .e-con.st-como__cab { display: flex; flex-direction: column; align-items: center; text-align: center; }
body.tds-pg-criacao-de-sites .st-como .fx-h2 .elementor-heading-title { margin-left: auto; margin-right: auto; color: #fff; }
body.tds-pg-criacao-de-sites .st-como .st-txt { margin-top: 16px; }
body.tds-pg-criacao-de-sites .st-como .st-txt p { margin-left: auto; margin-right: auto; color: #BDBDBD; }
body.tds-pg-criacao-de-sites .st-cms { display: flex; flex-direction: column; gap: 20px; max-width: 1120px; margin: clamp(40px, 4vw, 64px) auto 0; font-family: var(--fx-texto); }
body.tds-pg-criacao-de-sites .st-cm { padding: 14px; border-radius: 32px; background: #222222; }
body.tds-pg-criacao-de-sites .st-cm:first-child { box-shadow: 0 0 0 1px rgba(239, 84, 51, .55), 0 0 60px -10px rgba(239, 84, 51, .35); }
body.tds-pg-criacao-de-sites .st-cm__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "cab ui" "txt ui"; grid-template-rows: auto 1fr; column-gap: clamp(24px, 3vw, 48px); align-items: start; padding: clamp(24px, 2.6vw, 40px); border-radius: 22px; box-shadow: inset 0 0 0 1px #2E2E2E; }
body.tds-pg-criacao-de-sites .st-cm__cab { grid-area: cab; display: flex; align-items: center; gap: 16px; }
body.tds-pg-criacao-de-sites .st-cm__ic { width: 52px; height: 52px; }
body.tds-pg-criacao-de-sites .st-cm__t { margin: 0; font: 800 clamp(22px, .8vw + 14px, 28px)/1.15 var(--fx-titulo); letter-spacing: -0.01em; color: #fff; }
body.tds-pg-criacao-de-sites .st-cm__txt { grid-area: txt; margin: 18px 0 0; font-size: 16.5px; line-height: 1.6; color: #BDBDBD; }
body.tds-pg-criacao-de-sites .st-ui { grid-area: ui; align-self: center; padding: 22px; border-radius: 20px; background: #F5F0DF; color: #222; }
body.tds-pg-criacao-de-sites .st-ui :where(p, ul) { margin: 0; padding: 0; list-style: none; }
body.tds-pg-criacao-de-sites .st-ui__rot { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; color: #6B655A; }
body.tds-pg-criacao-de-sites .st-ui__pe { display: flex; align-items: center; gap: 8px; margin-top: 14px !important; font-size: 13.5px; font-weight: 600; color: #3B3B3B; }
body.tds-pg-criacao-de-sites .st-ui__pe i, body.tds-pg-criacao-de-sites .st-ui__pag i { flex: none; width: 16px; height: 16px; background: #28B446; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
/* perguntas: a busca de um lado e a página respondendo do outro */
body.tds-pg-criacao-de-sites .st-ui--perg { display: grid; grid-template-columns: minmax(0, 1.25fr) 28px minmax(0, 1fr); align-items: center; gap: 10px; }
body.tds-pg-criacao-de-sites .st-ui__busca, body.tds-pg-criacao-de-sites .st-ui__pag { padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .3); }
body.tds-pg-criacao-de-sites .st-ui__barra, body.tds-pg-criacao-de-sites .st-ui__sug li { white-space: nowrap; }
body.tds-pg-criacao-de-sites .st-ui__barra { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 99px; box-shadow: inset 0 0 0 1px #E2E2E2; font-size: 13.5px; color: #3B3B3B; }
body.tds-pg-criacao-de-sites .st-ui__barra i, body.tds-pg-criacao-de-sites .st-ui__sug i { flex: none; width: 13px; height: 13px; background: #9A9A9A; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
body.tds-pg-criacao-de-sites .st-ui__sug li { display: flex; align-items: center; gap: 8px; padding: 8px 12px 0; font-size: 13.5px; color: #555; }
body.tds-pg-criacao-de-sites .st-ui__seta { justify-self: center; width: 22px; height: 2px; background: var(--fx-laranja); position: relative; }
body.tds-pg-criacao-de-sites .st-ui__seta::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--fx-laranja); border-right: 0; }
body.tds-pg-criacao-de-sites .st-ui__pag ul { margin-top: 8px !important; }
body.tds-pg-criacao-de-sites .st-ui__pag li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid #F0F0F0; }
body.tds-pg-criacao-de-sites .st-ui__pag li:first-child { border-top: 0; }
body.tds-pg-criacao-de-sites .st-ui__pag b { flex: none; font-size: 13.5px; font-weight: 600; color: #222; }
body.tds-pg-criacao-de-sites .st-ui__pag span { flex: 1; height: 6px; border-radius: 99px; background: #EDEDED; }
/* origem: os contatos da semana, cada um com de onde veio */
body.tds-pg-criacao-de-sites .st-ui--origem ul { margin-top: 10px !important; }
body.tds-pg-criacao-de-sites .st-ui--origem li { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .3); }
body.tds-pg-criacao-de-sites .st-ui__av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #161616; font: 800 14px/1 var(--fx-titulo); color: #fff; }
body.tds-pg-criacao-de-sites .st-ui--origem li p { flex: 1; min-width: 0; }
body.tds-pg-criacao-de-sites .st-ui--origem li b { display: block; font-size: 14px; font-weight: 600; color: #222; }
body.tds-pg-criacao-de-sites .st-ui--origem li small { display: block; margin-top: 2px; font-size: 12.5px; color: #8A8A8A; }
body.tds-pg-criacao-de-sites .st-ui--origem li em { flex: none; padding: 5px 10px; border-radius: 99px; background: #FFF0EC; font-size: 12px; font-style: normal; font-weight: 700; color: #D9442A; }
/* teste: as duas versões do título e o mapa de calor */
body.tds-pg-criacao-de-sites .st-ui--teste { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 14px; }
body.tds-pg-criacao-de-sites .st-ui__ab, body.tds-pg-criacao-de-sites .st-ui__calor { padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .3); }
body.tds-pg-criacao-de-sites .st-ui__v { display: flex; align-items: center; gap: 10px; margin-top: 12px !important; }
body.tds-pg-criacao-de-sites .st-ui__v b { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #EDEDED; font-size: 13px; color: #555; }
body.tds-pg-criacao-de-sites .st-ui__v span { flex: 1; height: 12px; border-radius: 99px; background: #F2F2F2; overflow: hidden; }
body.tds-pg-criacao-de-sites .st-ui__v span i { display: block; height: 100%; border-radius: 99px; background: #CFCFCF; }
body.tds-pg-criacao-de-sites .st-ui__v--b b { background: var(--fx-laranja); color: #fff; }
body.tds-pg-criacao-de-sites .st-ui__v--b span i { background: var(--fx-laranja); }
body.tds-pg-criacao-de-sites .st-ui__nota { margin-top: 12px !important; font-size: 12.5px; color: #8A8A8A; }
body.tds-pg-criacao-de-sites .st-ui__mini { position: relative; height: 92px; margin-top: 10px; padding: 8px; border-radius: 8px; overflow: hidden; background: #FAFAFA; box-shadow: inset 0 0 0 1px #EFEFEF; }
body.tds-pg-criacao-de-sites .st-ui__mini b { display: block; height: 8px; margin-bottom: 9px; border-radius: 99px; background: #E6E6E6; }
body.tds-pg-criacao-de-sites .st-ui__mini b:first-child { width: 70%; height: 12px; background: #DADADA; }
body.tds-pg-criacao-de-sites .st-ui__mini b:nth-child(3) { width: 45%; height: 18px; border-radius: 6px; background: #E9E9E9; }
body.tds-pg-criacao-de-sites .st-ui__mini > i { position: absolute; left: var(--x); top: var(--y); width: calc(var(--s) * 44px); height: calc(var(--s) * 44px); margin: calc(var(--s) * -22px) 0 0 calc(var(--s) * -22px); border-radius: 50%; background: radial-gradient(closest-side, rgba(239, 84, 51, .75), rgba(252, 175, 17, .4) 55%, rgba(252, 175, 17, 0)); }
/* modelos: as páginas de campanha saindo do mesmo modelo */
body.tds-pg-criacao-de-sites .st-ui--modelos ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px !important; }
body.tds-pg-criacao-de-sites .st-ui__pg { position: relative; padding: 12px 12px 34px; border-radius: 12px; background: #fff; box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .3); }
body.tds-pg-criacao-de-sites .st-ui__pg b { display: block; height: 30px; border-radius: 6px; background: #161616; }
body.tds-pg-criacao-de-sites .st-ui__pg i { display: block; height: 6px; margin-top: 8px; border-radius: 99px; background: #E6E6E6; }
body.tds-pg-criacao-de-sites .st-ui__pg i + i { width: 66%; }
body.tds-pg-criacao-de-sites .st-ui__pg span { display: block; width: 56%; height: 14px; margin-top: 10px; border-radius: 99px; background: var(--fx-laranja); }
body.tds-pg-criacao-de-sites .st-ui__pg small { position: absolute; left: 12px; bottom: 10px; white-space: nowrap; font-size: 12px; font-weight: 600; color: #555; }
body.tds-pg-criacao-de-sites .st-ui__pg.is-nova { background: #FFF6F3; box-shadow: inset 0 0 0 1.5px var(--fx-laranja); animation: st-nova 2.4s ease-in-out infinite; }
body.tds-pg-criacao-de-sites .st-ui__pg.is-nova small { color: #D9442A; }
@keyframes st-nova { 0%, 100% { transform: none; } 50% { transform: translateY(-4px); } }
/* rápido: o medidor e as etiquetas */
body.tds-pg-criacao-de-sites .st-ui__vel { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .3); }
body.tds-pg-criacao-de-sites .st-ui__gauge { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: conic-gradient(#28B446 0 92%, #E6E6E6 92% 100%); }
body.tds-pg-criacao-de-sites .st-ui__gauge::before { content: ""; grid-area: 1 / 1; width: 46px; height: 46px; border-radius: 50%; background: #fff; }
body.tds-pg-criacao-de-sites .st-ui__gauge i { grid-area: 1 / 1; z-index: 1; width: 22px; height: 22px; background: #28B446; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
body.tds-pg-criacao-de-sites .st-ui__vel b { display: block; font-size: 15px; font-weight: 600; color: #222; }
body.tds-pg-criacao-de-sites .st-ui__vel small { display: block; margin-top: 3px; font-size: 13px; color: #8A8A8A; }
body.tds-pg-criacao-de-sites .st-ui__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px !important; }
body.tds-pg-criacao-de-sites .st-ui__tags li { padding: 8px 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #E6DFC8; font-size: 13.5px; font-weight: 600; color: #3B3B3B; }

/* as mini interfaces se montam quando o cartão aparece (o JS põe .is-anima e depois .is-on); sem JS ficam prontas */
body.tds-pg-criacao-de-sites .st-cm.is-anima .st-ui__sug li, body.tds-pg-criacao-de-sites .st-cm.is-anima .st-ui__pag li, body.tds-pg-criacao-de-sites .st-cm.is-anima .st-ui--origem li, body.tds-pg-criacao-de-sites .st-cm.is-anima .st-ui__pe,
body.tds-pg-criacao-de-sites .st-cm.is-anima .st-ui__pg, body.tds-pg-criacao-de-sites .st-cm.is-anima .st-ui__tags li, body.tds-pg-criacao-de-sites .st-cm.is-anima .st-ui__nota { opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .5s cubic-bezier(.34, 1.4, .64, 1); }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__sug li, body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__pag li, body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui--origem li, body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__pe,
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__pg, body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__tags li, body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__nota { opacity: 1; transform: none; }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__sug li:nth-child(1) { transition-delay: .2s; }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__sug li:nth-child(2) { transition-delay: .35s; }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__sug li:nth-child(3) { transition-delay: .5s; }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__pag li:nth-child(1) { transition-delay: .9s; }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__pag li:nth-child(2) { transition-delay: 1.1s; }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__pag li:nth-child(3) { transition-delay: 1.3s; }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui--origem li:nth-child(1) { transition-delay: .2s; }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui--origem li:nth-child(2) { transition-delay: .7s; }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui--origem li:nth-child(3) { transition-delay: 1.2s; }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__pe { transition-delay: 1.6s; }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__pg:nth-child(1) { transition-delay: .2s; }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__pg:nth-child(2) { transition-delay: .4s; }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__pg:nth-child(3) { transition-delay: 1s; }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__tags li:nth-child(1) { transition-delay: .5s; }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__tags li:nth-child(2) { transition-delay: .65s; }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__tags li:nth-child(3) { transition-delay: .8s; }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__tags li:nth-child(4) { transition-delay: .95s; }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__nota { transition-delay: 1.5s; }
/* o teste: as barras crescem e a B passa a A; o mapa de calor acende */
body.tds-pg-criacao-de-sites .st-cm.is-anima .st-ui__v span i { transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .3s; }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__v span i { transform: none; }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__v--b span i { transition-duration: 1.5s; }
body.tds-pg-criacao-de-sites .st-cm.is-anima .st-ui__mini > i { opacity: 0; transform: scale(.3); transition: opacity .6s, transform .8s cubic-bezier(.34, 1.4, .64, 1); }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__mini > i { opacity: 1; transform: none; }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__mini > i:nth-of-type(2) { transition-delay: .4s; }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__mini > i:nth-of-type(3) { transition-delay: .8s; }
body.tds-pg-criacao-de-sites .st-cm.is-on .st-ui__mini > i:nth-of-type(4) { transition-delay: 1.2s; }
/* o recomeço do ciclo (o JS põe .is-zera por meio segundo): some só o que entra de novo, num fade, e o primeiro de cada lista fica,
   pro painel nunca ficar vazio; o movimento de volta acontece invisível, depois do fade */
body.tds-pg-criacao-de-sites .st-cm.is-on.is-zera :is(.st-ui__sug li, .st-ui__pag li, .st-ui--origem li, .st-ui__tags li):not(:first-child),
body.tds-pg-criacao-de-sites .st-cm.is-on.is-zera :is(.st-ui__pe, .st-ui__pg.is-nova, .st-ui__nota) { opacity: 0; transform: translateY(10px); transition: opacity .3s, transform 0s .3s; }
body.tds-pg-criacao-de-sites .st-cm.is-on.is-zera .st-ui__mini > i { opacity: 0; transform: scale(.3); transition: opacity .3s, transform 0s .3s; }
body.tds-pg-criacao-de-sites .st-cm.is-on.is-zera .st-ui__v span i { opacity: 0; transform: scaleX(0); transition: opacity .3s, transform 0s .3s; }
/* o medidor de velocidade enche */
body.tds-pg-criacao-de-sites .st-cm.is-anima .st-ui__gauge { background: conic-gradient(#28B446 0 var(--g, 92%), #E6E6E6 var(--g, 92%) 100%); }
body.tds-pg-criacao-de-sites .st-ui__barra .st-ui__cur { display: inline-block; width: 1.5px; height: 14px; margin-left: 1px; background: #222; vertical-align: -2px; animation: st-pisca 1s steps(1) infinite; }
@keyframes st-pisca { 50% { opacity: 0; } }

/* ===== 5 · portfólio (o desenho do Figma: a tela do site na cor do cliente e a etiqueta do ramo) ===== */
body.tds-pg-criacao-de-sites .e-con.st-port-sec { background: #fff; }
body.tds-pg-criacao-de-sites .e-con.st-port__in { display: block; }
body.tds-pg-criacao-de-sites .e-con.st-port__cab { display: flex; flex-direction: column; align-items: center; text-align: center; }
body.tds-pg-criacao-de-sites .st-port__cab .st-h2 .elementor-heading-title { margin-left: auto; margin-right: auto; }
body.tds-pg-criacao-de-sites .st-port__cab .st-txt { margin-top: 14px; }
body.tds-pg-criacao-de-sites .st-port { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 4vw, 60px); text-align: left; font-family: var(--fx-texto); }
body.tds-pg-criacao-de-sites .st-proj { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #222222; }
body.tds-pg-criacao-de-sites .st-proj__tela { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: var(--cor, #0A0A0A); }
/* a página do site numa janela que passa um pouco da borda de baixo; com o mouse em cima, a página rola até o fim */
body.tds-pg-criacao-de-sites .st-proj__jan { position: absolute; left: 7%; right: 7%; top: 8%; bottom: -3%; display: flex; flex-direction: column; overflow: hidden; border-radius: 12px 12px 0 0; background: #fff; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6); }
body.tds-pg-criacao-de-sites .st-proj__barra { flex: none; display: flex; gap: 6px; align-items: center; height: clamp(16px, 1.5vw, 24px); padding: 0 clamp(10px, 1vw, 14px); background: #F1F1F1; }
body.tds-pg-criacao-de-sites .st-proj__barra i { width: clamp(6px, .55vw, 9px); aspect-ratio: 1; border-radius: 50%; background: #CFCFCF; }
body.tds-pg-criacao-de-sites .st-proj__vidro { flex: 1; min-height: 0; overflow: hidden; }
body.tds-pg-criacao-de-sites .st-proj__vidro img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: object-position 6s ease-in-out; }
body.tds-pg-criacao-de-sites .st-proj:hover .st-proj__vidro img { object-position: 50% 100%; }
body.tds-pg-criacao-de-sites .st-proj__info { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: clamp(22px, 1.8vw, 30px) clamp(22px, 2vw, 34px) clamp(24px, 2vw, 32px); }
body.tds-pg-criacao-de-sites .st-proj__info :where(p) { margin: 0; }
body.tds-pg-criacao-de-sites .st-proj__seg { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--fx-laranja); color: var(--fx-laranja); font: 600 14.5px/1 var(--fx-texto); }
body.tds-pg-criacao-de-sites .st-proj__t { margin: 6px 0 0; padding: 0; font: 800 clamp(20px, .5vw + 14px, 25px)/1.15 var(--fx-titulo); color: #fff; letter-spacing: 0; }

/* ===== 5b · páginas de campanha: uma fileira de páginas longas que rolam sozinhas no passar do mouse ===== */
body.tds-pg-criacao-de-sites .e-con.st-lps-sec { background: #F5F0DF; }
body.tds-pg-criacao-de-sites .e-con.st-lps__in { display: block; }
body.tds-pg-criacao-de-sites .e-con.st-lps__cab { display: block; max-width: 820px; }
body.tds-pg-criacao-de-sites .st-lps__cab .st-txt { margin-top: 16px; }
body.tds-pg-criacao-de-sites .st-lps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 16px; margin: clamp(36px, 3.6vw, 56px) 0 0; padding: 0 0 8px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; font-family: var(--fx-texto); }
body.tds-pg-criacao-de-sites .st-lp { scroll-snap-align: start; }
body.tds-pg-criacao-de-sites .st-lp__tela { position: relative; aspect-ratio: 9 / 15; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 0 0 6px #161616, 0 24px 40px -22px rgba(0, 0, 0, .55); margin: 6px; }
body.tds-pg-criacao-de-sites .st-lp__tela img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: object-position 7s ease-in-out; }
body.tds-pg-criacao-de-sites .st-lp:hover .st-lp__tela img { object-position: 50% 100%; }
body.tds-pg-criacao-de-sites .st-lp__info { margin: 16px 6px 0 !important; }
body.tds-pg-criacao-de-sites .st-lp__info b { display: block; font: 800 17px/1.2 var(--fx-titulo); color: #222; }
body.tds-pg-criacao-de-sites .st-lp__info small { display: block; margin-top: 3px; font-size: 14px; color: #6E6E6E; }
body.tds-pg-criacao-de-sites .st-lps { grid-auto-columns: calc((100% - 4 * 16px) / 4.4); scrollbar-width: none; }
body.tds-pg-criacao-de-sites .st-lps::-webkit-scrollbar { display: none; }
/* No computador e no tablet a fileira corta na borda do conteúdo, e o corte seco parecia erro ("Precisa de um fadezinho aí, esse corte
   seco ta estranho", 30/10/2026). As pontas somem num degradê, só do lado em que há página escondida. O primeiro, de 72 px, ficou "muito
   grosseiro"; o segundo, quase até o começo do penúltimo card, "ta muito grande agora, reduza 20% do tamanho"; o terceiro, com 80%
   daquele, ainda "um pouco grosseiro ainda. reduza mais 30% do tamanho e suavize". A largura ficou em 70% do terceiro, presa à do card
   (a fileira mostra 4,4 cards). A curva em vários pontos parecia "uma faixa bem escura com degrade e um degradê por cima", e ele pediu
   o degradê reto: "100% na linha de encerramento e 0% onde ele realmente encerra. Sem valores intermediários entre eles". O JS põe em
   --st-pe e --st-pd quanto de cada degradê aparece (de 0 a 1), crescendo junto com a rolagem, então o da esquerda entra aos poucos. No
   celular a fileira vai até a borda da tela e roda sozinha, sem degradê. */
@media (min-width: 768px) {
  body.tds-pg-criacao-de-sites .st-lps { --st-f: calc(((100% - 4 * 16px) / 4.4 + 12.8px) * .7); --st-fe: calc(var(--st-f) * var(--st-pe, 0)); --st-fd: calc(var(--st-f) * var(--st-pd, 0)); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--st-fe), #000 calc(100% - var(--st-fd)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--st-fe), #000 calc(100% - var(--st-fd)), transparent 100%); }
}
}
}
}
}
body.tds-pg-criacao-de-sites .st-lps__nav { display: flex; justify-content: flex-end; gap: 10px; margin: 18px 0 0 !important; }
body.tds-pg-criacao-de-sites .st-lps__nav button { position: relative; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: #161616; cursor: pointer; transition: background-color .2s, opacity .2s; }
body.tds-pg-criacao-de-sites .st-lps__nav button:hover { background: var(--fx-laranja); }
body.tds-pg-criacao-de-sites .st-lps__nav button:disabled { opacity: .3; cursor: default; background: #161616; }
body.tds-pg-criacao-de-sites .st-lps__nav button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -6px 0 0 -8px; border-top: 2.5px solid #fff; border-right: 2.5px solid #fff; transform: rotate(45deg); }
body.tds-pg-criacao-de-sites .st-lps__nav button[data-dir="-1"]::before { margin-left: -4px; transform: rotate(-135deg); }

/* ===== 6 · o site no funil (o bloco laranja dividido do Figma) ===== */
body.tds-pg-criacao-de-sites .e-con.st-fn-sec { padding-top: 0; background: #fff; }
body.tds-pg-criacao-de-sites .st-fn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 28px; overflow: hidden; font-family: var(--fx-texto); }
body.tds-pg-criacao-de-sites .st-fn :where(p, ul) { margin: 0; padding: 0; list-style: none; }
body.tds-pg-criacao-de-sites .st-fn__lar { padding: clamp(36px, 4vw, 64px); background: var(--fx-laranja); color: #fff; }
body.tds-pg-criacao-de-sites .st-fn__selo { display: inline-block; padding: 7px 14px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); font: 600 13px/1 var(--fx-texto); letter-spacing: .04em; text-transform: uppercase; }
body.tds-pg-criacao-de-sites .st-fn__t { margin: 20px 0 0; font: 800 clamp(28px, 1.3vw + 16px, 40px)/1.05 var(--fx-titulo); letter-spacing: -0.02em; color: #fff; }
body.tds-pg-criacao-de-sites .st-fn__d { margin-top: 16px !important; max-width: 520px; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .9); }
body.tds-pg-criacao-de-sites .st-fn__lista { margin-top: 26px !important; }
body.tds-pg-criacao-de-sites .st-fn__lista a { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .28); color: #fff; }
body.tds-pg-criacao-de-sites .st-fn__lista a:hover b { text-decoration: underline; }
body.tds-pg-criacao-de-sites .st-fn__ic { width: 40px; height: 40px; background: #fff; }
body.tds-pg-criacao-de-sites .st-fn__ic i { background: var(--fx-laranja); }
body.tds-pg-criacao-de-sites .st-fn__lista span { font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
body.tds-pg-criacao-de-sites .st-fn__lista b { display: block; font-size: 17px; color: #fff; }
body.tds-pg-criacao-de-sites .st-fn__link { display: inline-block; margin-top: 22px; font-weight: 700; font-size: 16.5px; color: #fff; text-decoration: underline; text-underline-offset: 4px; }
body.tds-pg-criacao-de-sites .st-fn__vis { display: flex; align-items: center; justify-content: center; padding: clamp(24px, 3vw, 48px); background: #0A0A0A; }
body.tds-pg-criacao-de-sites .st-fn__vis img { display: block; width: 100%; height: auto; }
body.tds-pg-criacao-de-sites .st-fn__av { display: none; }

/* ===== 7 · como funciona (a caixa laranja com cartões brancos do Figma) ===== */
body.tds-pg-criacao-de-sites .e-con.st-et-sec { padding-top: 0; background: #fff; }
body.tds-pg-criacao-de-sites .st-et { padding: clamp(40px, 4.4vw, 72px) clamp(24px, 4vw, 64px); border-radius: 28px; background: var(--fx-laranja); font-family: var(--fx-texto); text-align: center; }
body.tds-pg-criacao-de-sites .st-et :where(p, ol) { margin: 0; padding: 0; list-style: none; }
body.tds-pg-criacao-de-sites .st-et__selo { font: 400 20px/1 var(--fx-eyebrow); letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
body.tds-pg-criacao-de-sites .st-et__t { margin: 12px 0 0; font: 800 clamp(28px, 1.4vw + 16px, 44px)/1.05 var(--fx-titulo); letter-spacing: -0.02em; color: #fff; }
body.tds-pg-criacao-de-sites .st-et__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 3vw, 44px) !important; text-align: left; }
body.tds-pg-criacao-de-sites .st-et__grade li { display: flex; align-items: flex-start; gap: 16px; padding: 22px; border-radius: 18px; background: #fff; box-shadow: 0 20px 40px -24px rgba(90, 20, 5, .5); }
body.tds-pg-criacao-de-sites .st-et__ic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #FFF0EC; }
body.tds-pg-criacao-de-sites .st-et__ic i { width: 50%; height: 50%; background: var(--fx-laranja); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
body.tds-pg-criacao-de-sites .st-et__grade small { display: block; font: 400 18px/1 var(--fx-eyebrow); letter-spacing: .06em; color: var(--fx-laranja); }
body.tds-pg-criacao-de-sites .st-et__grade b { display: block; margin: 6px 0 6px; font: 800 19px/1.2 var(--fx-titulo); color: #222; }
body.tds-pg-criacao-de-sites .st-et__grade p { font-size: 15px; line-height: 1.5; color: #5A5A5A; }
body.tds-pg-criacao-de-sites .st-et__barra { margin-top: 20px !important; padding: 22px 28px; border-radius: 18px; background: #222222; font-size: 17px; line-height: 1.5; color: #fff; }

/* ===== 8 · a chamada com os aparelhos no pedestal laranja ===== */
body.tds-pg-criacao-de-sites .e-con.st-ch-sec { padding-top: 0; background: #fff; }
body.tds-pg-criacao-de-sites .st-ch { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; border-radius: 28px; overflow: hidden; background: linear-gradient(90deg, #251C19, #1C1B1B 60%, #141414); font-family: var(--fx-texto); }
body.tds-pg-criacao-de-sites .st-ch__vis { align-self: stretch; }
body.tds-pg-criacao-de-sites .st-ch__vis img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 100%; }
body.tds-pg-criacao-de-sites .st-ch__txt { padding: clamp(32px, 4vw, 64px); }
body.tds-pg-criacao-de-sites .st-ch__t { margin: 0; font: 800 clamp(30px, 1.6vw + 16px, 48px)/1.05 var(--fx-titulo); letter-spacing: -0.02em; color: #F5F0DF; }
body.tds-pg-criacao-de-sites .st-ch__t span { color: var(--fx-laranja); }
body.tds-pg-criacao-de-sites .st-ch__bt { display: inline-flex; align-items: center; height: 60px; margin-top: 28px; padding: 0 34px; border-radius: 999px; background: var(--fx-laranja); font: 800 18px var(--fx-titulo); color: #fff; transition: background-color .2s; }
body.tds-pg-criacao-de-sites .st-ch__bt:hover { background: var(--fx-laranja-esc); color: #fff; }

/* ===== telas menores ===== */
@media (max-width: 1100px) {
  body.tds-pg-criacao-de-sites .st-cm__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cab" "txt" "ui"; }
  body.tds-pg-criacao-de-sites .st-ui { margin-top: 22px; }
  body.tds-pg-criacao-de-sites .st-port { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.tds-pg-criacao-de-sites .st-et__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  body.tds-pg-criacao-de-sites .e-con.st-topo { min-height: 0; }
  body.tds-pg-criacao-de-sites .e-con.st-topo__grade { grid-template-columns: minmax(0, 1fr); padding: 48px 0 56px; }
  body.tds-pg-criacao-de-sites .st-vt { margin: 8px 0 0; }
  body.tds-pg-criacao-de-sites .st-pds { grid-template-columns: minmax(0, 1fr); }
  body.tds-pg-criacao-de-sites .st-fn, body.tds-pg-criacao-de-sites .st-ch { grid-template-columns: minmax(0, 1fr); }
  body.tds-pg-criacao-de-sites .st-ch__vis { order: 2; }
  body.tds-pg-criacao-de-sites .st-ch__vis img { height: auto; }
}
@media (max-width: 767px) {
  body.tds-pg-criacao-de-sites .e-con.st-sec { padding: 64px 0; }
  body.tds-pg-criacao-de-sites .e-con.st-topo { padding: 0; }
  body.tds-pg-criacao-de-sites .st-btn .elementor-button, body.tds-pg-criacao-de-sites .st-btn-contorno .elementor-button, body.tds-pg-criacao-de-sites .st-cta-linha .fx-btn .elementor-button { width: 100%; justify-content: center; height: auto; min-height: 56px; padding: 12px 22px; white-space: normal; text-align: center; line-height: 1.2; font-size: 17px; }
  body.tds-pg-criacao-de-sites .e-con.st-botoes > .elementor-element, body.tds-pg-criacao-de-sites .e-con.st-cta-linha > .elementor-element { width: 100%; }
  body.tds-pg-criacao-de-sites .st-chips li { width: 100%; }
  body.tds-pg-criacao-de-sites .st-cm { padding: 8px; border-radius: 24px; }
  body.tds-pg-criacao-de-sites .st-cm__in { padding: 22px 18px; }
  body.tds-pg-criacao-de-sites .st-ui { padding: 14px; }
  body.tds-pg-criacao-de-sites .st-ui--perg { grid-template-columns: minmax(0, 1fr); }
  body.tds-pg-criacao-de-sites .st-ui__seta { transform: rotate(90deg); margin: 4px 0; }
  body.tds-pg-criacao-de-sites .st-ui--teste { grid-template-columns: minmax(0, 1fr); }
  body.tds-pg-criacao-de-sites .st-ui--origem li { flex-wrap: wrap; }
  /* o texto ocupa a linha toda e a etiqueta desce: com etiqueta curta, o texto ficava espremido, uma palavra por linha */
  body.tds-pg-criacao-de-sites .st-ui--origem li p { flex: 1 1 calc(100% - 46px); }
  body.tds-pg-criacao-de-sites .st-ui--origem li em { margin-left: 46px; }
  body.tds-pg-criacao-de-sites .st-ui__pg small { font-size: 11px; left: 8px; }
  /* doze projetos empilhados ficavam enormes no celular: viram uma fileira de arrastar pro lado */
  /* os projetos e as páginas de campanha vão até a borda da tela e rolam sozinhos (tidos.js) */
  body.tds-pg-criacao-de-sites .st-port { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--fx-margem) 6px; margin-left: calc(-1 * var(--fx-margem)); margin-right: calc(-1 * var(--fx-margem)); scroll-padding-inline: var(--fx-margem); }
  body.tds-pg-criacao-de-sites .st-port::-webkit-scrollbar { display: none; }
  body.tds-pg-criacao-de-sites .st-proj { scroll-snap-align: start; }
  body.tds-pg-criacao-de-sites .st-lps { grid-auto-columns: 62%; padding: 0 var(--fx-margem) 8px; margin-left: calc(-1 * var(--fx-margem)); margin-right: calc(-1 * var(--fx-margem)); scroll-padding-inline: var(--fx-margem); }
  body.tds-pg-criacao-de-sites .st-lps__nav { display: none; }
  body.tds-pg-criacao-de-sites .st-et { padding: 36px 16px 20px; }
  body.tds-pg-criacao-de-sites .st-et__grade { grid-template-columns: minmax(0, 1fr); }
  body.tds-pg-criacao-de-sites .st-et__barra { padding: 18px; font-size: 15.5px; }
  body.tds-pg-criacao-de-sites .st-fn__lar { padding: 32px 22px; }
  body.tds-pg-criacao-de-sites .st-ch__bt { display: flex; width: 100%; justify-content: center; height: auto; min-height: 56px; padding: 12px 22px; text-align: center; line-height: 1.2; font-size: 17px; }
  /* no computador essas seções começam sem respiro em cima; o padding de 64 px do celular devolvia 128 px de branco entre os cartões */
  body.tds-pg-criacao-de-sites .e-con.st-et-sec, body.tds-pg-criacao-de-sites .e-con.st-ch-sec { padding-top: 0; }
  /* etapas: o ícone flutua ao lado do número e do título, e a descrição usa a largura toda do cartão */
  body.tds-pg-criacao-de-sites .st-et__grade li { display: flow-root; }
  body.tds-pg-criacao-de-sites .st-et__ic { float: left; margin: 0 14px 0 0; }
  body.tds-pg-criacao-de-sites .st-et__grade b { margin-bottom: 10px; }
  body.tds-pg-criacao-de-sites :is(.st-pd__t, .st-cm__t, .st-fn__t, .st-et__t, .st-ch__t) { text-wrap: balance; }
  body.tds-pg-criacao-de-sites .st-ch__txt { padding: 32px 24px; }
  body.tds-pg-criacao-de-sites .st-fn__link { padding: 10px 0; margin-top: 12px; }
  /* os dois avisos da janela do funil em HTML por cima da imagem */
  body.tds-pg-criacao-de-sites .st-fn__vis { position: relative; padding: 20px 12px; }
  body.tds-pg-criacao-de-sites .st-fn__av { position: absolute; z-index: 1; display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; border-radius: 10px; background: #fff; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); font-family: var(--fx-texto); }
  body.tds-pg-criacao-de-sites .st-fn__av-ic { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #28B446; }
  body.tds-pg-criacao-de-sites .st-fn__av--cel .st-fn__av-ic { background: var(--fx-laranja); }
  body.tds-pg-criacao-de-sites .st-fn__av-ic i { width: 13px; height: 13px; background: #fff; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
  body.tds-pg-criacao-de-sites .st-fn__av b { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.2; color: #222; white-space: nowrap; }
  body.tds-pg-criacao-de-sites .st-fn__av small { display: block; margin-top: 2px; font-size: 10px; line-height: 1.2; color: #8A8A8A; white-space: nowrap; }
  body.tds-pg-criacao-de-sites .st-fn__av--form { left: 8px; top: 34%; }
  body.tds-pg-criacao-de-sites .st-fn__av--cel { right: 8px; bottom: 9%; }
}
@media (prefers-reduced-motion: reduce) {
  body.tds-pg-criacao-de-sites .st-faixa__trilho, body.tds-pg-criacao-de-sites .st-ui__pg.is-nova, body.tds-pg-criacao-de-sites .st-ui__cur { animation: none; }
  body.tds-pg-criacao-de-sites .st-jn, body.tds-pg-criacao-de-sites .st-proj__vidro img { transition: none; }
  body.tds-pg-criacao-de-sites .st-selo { animation: none; transform: rotate(-6deg); }
}

/* rastreio, SEO e GEO: a lista do que fica configurado dos dois lados e, no meio, o site com as ferramentas em volta */
body.tds-pg-criacao-de-sites .e-con.st-fer-sec { background: #F5F0DF; }
body.tds-pg-criacao-de-sites .e-con.st-fer__in { display: block; }
body.tds-pg-criacao-de-sites .e-con.st-fer__cab { display: flex; flex-direction: column; align-items: center; text-align: center; }
body.tds-pg-criacao-de-sites .st-fer__cab .st-h2 .elementor-heading-title { margin-left: auto; margin-right: auto; }
body.tds-pg-criacao-de-sites .st-fer__cab .st-txt { margin-top: 14px; }
body.tds-pg-criacao-de-sites .st-fer__cab .st-txt p { margin-left: auto; margin-right: auto; }
/* as duas listas começam na mesma altura (centradas, a de 7 itens ficava acima da de 6) e o site fica no meio */
body.tds-pg-criacao-de-sites .st-fer__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 56px); align-items: start; margin-top: clamp(40px, 4vw, 64px); font-family: var(--fx-texto); }
body.tds-pg-criacao-de-sites .st-fer__grupo { margin: 0 0 18px; font: 400 24px/1 var(--fx-eyebrow); letter-spacing: .03em; color: var(--fx-laranja); }
body.tds-pg-criacao-de-sites .st-fer__lista { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
body.tds-pg-criacao-de-sites .st-fer__lista li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
body.tds-pg-criacao-de-sites .st-fer__lista li > i { width: 20px; height: 20px; margin-top: 2px; background: var(--fx-laranja); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
body.tds-pg-criacao-de-sites .st-fer__lista p { margin: 0; }
body.tds-pg-criacao-de-sites .st-fer__lista b { display: block; font: 800 17px/1.25 var(--fx-titulo); color: var(--fx-tinta); }
body.tds-pg-criacao-de-sites .st-fer__lista span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.45; color: #6B6B6B; }
body.tds-pg-criacao-de-sites .st-hub { position: relative; align-self: center; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 1; container-type: inline-size; perspective: 140cqw; }
body.tds-pg-criacao-de-sites .st-hub__brilho { position: absolute; left: 22%; top: 22%; width: 56%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FF7A55 0%, var(--fx-laranja) 55%, #D9401F 100%); box-shadow: 0 0 10cqw 2cqw rgba(239, 84, 51, .35); }
body.tds-pg-criacao-de-sites .st-hub__fios { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
body.tds-pg-criacao-de-sites .st-hub__fios line { stroke: #2A2A2A; stroke-opacity: .35; stroke-width: 1.5; stroke-dasharray: 3 6; animation: st-fio 1.4s linear infinite; }
@keyframes st-fio { to { stroke-dashoffset: -18; } }
body.tds-pg-criacao-de-sites .st-hub__site { position: absolute; left: 25%; top: 33%; z-index: 2; width: 50%; overflow: hidden; border-radius: 1.6cqw; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 3cqw 6cqw -2cqw rgba(0, 0, 0, .55); }
body.tds-pg-criacao-de-sites .st-hub__barra { display: flex; gap: .6cqw; align-items: center; height: 3.4cqw; padding: 0 1.4cqw; background: #F1F1F1; }
body.tds-pg-criacao-de-sites .st-hub__barra i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #CFCFCF; }
body.tds-pg-criacao-de-sites .st-hub__site img { display: block; width: 100%; height: auto; }
/* cada ferramenta é uma moeda em 3D, como os selos do topo, flutuando fora de compasso */
body.tds-pg-criacao-de-sites .st-hub__b { position: absolute; z-index: 3; left: calc(var(--x) * 1% - 7.5cqw); top: calc(var(--y) * 1% - 7.5cqw); display: grid; place-items: center; width: 15cqw; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 .35cqw 0 #E6E0D4, 0 .7cqw 0 #D2CABB, 0 1.05cqw 0 #B9B0A0, 0 3cqw 4cqw -.8cqw rgba(0, 0, 0, .45); animation: st-flutua-a 5.4s ease-in-out var(--d) infinite alternate; }
body.tds-pg-criacao-de-sites .st-hub__b:nth-child(even) { animation-name: st-flutua-b; animation-duration: 6.4s; }
body.tds-pg-criacao-de-sites .st-hub__b::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset -1cqw -1.2cqw 1.8cqw rgba(0, 0, 0, .12), inset .8cqw .8cqw 1.2cqw rgba(255, 255, 255, .9); pointer-events: none; }
body.tds-pg-criacao-de-sites .st-hub__b img { width: 54%; height: 54%; object-fit: contain; }
body.tds-pg-criacao-de-sites .st-hub__b i { width: 52%; height: 52%; background: var(--c); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
@media (max-width: 1100px) {
  body.tds-pg-criacao-de-sites .st-fer__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.tds-pg-criacao-de-sites .st-hub { grid-column: 1 / -1; order: -1; max-width: 480px; }
}
@media (max-width: 767px) {
  body.tds-pg-criacao-de-sites .st-fer__grade { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  body.tds-pg-criacao-de-sites .st-fer__lista b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body.tds-pg-criacao-de-sites .st-hub__b, body.tds-pg-criacao-de-sites .st-hub__fios line { animation: none; }
}

/* as imagens dos sites não abrem em outra guia: sem arrastar, sem o menu do botão direito e sem o menu do toque longo no celular.
   O JS da página completa (bloqueia o menu e o arrastar nessas áreas). Ele pediu: "Você consegue colocar um código bloqueando que as
   pessoas consigam abrir as imagens dos sites e páginas em outra guia?" */
body.tds-pg-criacao-de-sites :is(.st-vt, .st-faixa, .st-proj__tela, .st-lp__tela, .st-ch__vis, .st-hub) img { pointer-events: none; -webkit-user-drag: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.tds-pg-criacao-de-sites :is(.st-vt, .st-faixa, .st-proj__tela, .st-lp__tela, .st-ch__vis, .st-hub) { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }