/* Meu CDN, TRAVESSIA v3 (página completa): as seções depois da abertura.
   Canais (ênfase: a caixa única no monitor da atendente) · Todos os nichos (a conversa no celular da cliente) ·
   Portfólio de sites · Modalidades (a tela que cresce) · Hospedagem · Apps · Sob medida (antes → sistema) ·
   Mais da plataforma · Provedores (compacto).
   Base = versão parada (sem JS ou "reduzir movimento"); html.mov = palcos presos e movimento ligado à rolagem.
   Telas dentro das fotos: caixa em px da foto (1536 x 1024) escalada pelo JS; cada tela com matrix3d dos 4 cantos. */

/* ---------- comum ---------- */
.ni-titulo, .si-titulo, .ap-titulo, .sm-titulo, .pv-titulo, .cx-titulo, .md-titulo, .hs-titulo, .pf-titulo { font-weight: 800; font-size: clamp(2rem, 3.4vw, 3.15rem); line-height: 1.04; margin: 12px 0 14px; text-wrap: balance; }
.ni-apoio, .si-apoio, .ap-apoio, .pv-apoio, .hs-apoio { color: var(--tinta-2); font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.55; max-width: 36em; }
.px1536 { position: absolute; left: 0; top: 0; width: 1536px; height: 1024px; transform-origin: 0 0; pointer-events: none; }
html:not(.js) .px1536, html:not(.js) .ap-px { display: none; }
[data-quad] { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
.si-brilho { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgb(255 255 255 / .14) 0%, rgb(255 255 255 / 0) 36%), linear-gradient(0deg, rgb(40 20 80 / .10), rgb(40 20 80 / 0) 40%); }


/* o buldogue com o celular de frente: a tela lisa recebe os logos dos canais por código (tela em 10,2% / 31,6%, 20,6% x 31,9%) */
.pose-social { display: block; aspect-ratio: 705 / 1100; }
.pose-social:not(.produto__pose) { position: relative; }
.pose-social > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.pose-social__tela { position: absolute; left: 10.2%; top: 31.6%; width: 20.6%; height: 31.9%; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 9% 12%; }
.pose-social__tela .mc { width: 36%; height: auto; aspect-ratio: 1 / 1; }

/* conversa no celular (app genérico, sem marca de terceiros), herdada da direção Garganta */
.tela-chat {
  width: 300px; height: 650px; display: flex; flex-direction: column; background: #efeaf6; color: #1d1530;
  font-family: var(--fonte); -webkit-mask: url('../img/nichos/mascara-celular.png') 0 0 / 100% 100%; mask: url('../img/nichos/mascara-celular.png') 0 0 / 100% 100%;
}
.chat-topo { display: flex; align-items: center; gap: 10px; padding: 34px 14px 11px; background: #fff; border-bottom: 1px solid #e4ddef; }
.chat-av { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--degrade); color: #fff; font-weight: 800; font-size: 14px; }
.chat-canal { position: absolute; right: -5px; bottom: -4px; width: 19px; height: 19px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 1px 3px rgb(29 21 48 / .25); }
.chat-canal .mc { width: 14px; height: 14px; }
.chat-nome b { display: block; font-size: 17px; line-height: 1.2; }
.chat-nome small { display: block; font-size: 13px; color: #6f6585; }
.chat-corpo { flex: 1; position: relative; overflow: hidden; }
.conversa { position: absolute; inset: 0; display: none; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px 11px; }
.conversa.is-agora { display: flex; }
.msg { max-width: 88%; margin: 0; padding: 9px 12px 6px; border-radius: 17px; font-size: 18px; line-height: 1.3; font-weight: 500; }
.msg.eu { align-self: flex-end; background: #e2d4ff; border-bottom-right-radius: 5px; }
.msg.ele { align-self: flex-start; background: #fff; border-bottom-left-radius: 5px; box-shadow: 0 1px 0 rgb(29 21 48 / .06); }
.msg time { display: block; text-align: right; font-size: 11.5px; color: #7d7393; margin-top: 3px; }
.chat-pe { padding: 9px 11px 22px; background: #fff; }
.chat-pe span { display: block; padding: 9px 14px; border-radius: 20px; background: #f1edf7; color: #9b90b3; font-size: 15px; }
html.mov .conversa .msg { display: none; }
html.mov .conversa .msg.on { display: block; animation: sc-chega .38s var(--saida) both; }
@keyframes sc-chega { from { opacity: 0; transform: translateY(12px) scale(.97); } }

/* =========================================================================================================
   CANAIS (ênfase principal)
   ========================================================================================================= */
.cx { position: relative; padding: 104px var(--lado) 88px; background: radial-gradient(60% 50% at 85% 18%, rgb(139 43 226 / .2), transparent 70%), var(--fundo); }
.cx-palco { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "cab foto" "caps caps" "nota nota"; gap: 32px 56px; align-items: center; }
.cx-texto { display: contents; }
.cx-cabeca { grid-area: cab; }
.cx-foto { grid-area: foto; position: relative; aspect-ratio: 3 / 2; border-radius: 18px; overflow: hidden; background: var(--fundo-2); }
.cx-camera { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.cx-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.cx-canais, .cx-pose, .cx-cartao { display: none; }
.cx-marcas { list-style: none; margin: 4px 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 20px; font: 700 .95rem/1.2 var(--fonte); }
.cx-marcas li { position: relative; display: flex; align-items: center; min-height: 30px; padding-left: 38px; }
.cx-marcas li::before { content: ''; position: absolute; left: 0; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px -6px rgb(0 0 0 / .6); }
.cx-marcas .mc { position: absolute; left: 6px; top: 50%; width: 18px; height: 18px; margin-top: -9px; }
.cx-marcas .mc--app { left: 3px; width: 24px; height: 24px; margin-top: -12px; }
.cx-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 16px 12px 18px; border-radius: 4px 12px 12px 4px; background: rgb(255 255 255 / .07); box-shadow: inset 3px 0 0 var(--magenta); font: 700 1rem/1.3 var(--fonte); }
.cx-meta span { color: var(--magenta); }
.cx-caps { grid-area: caps; list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 56px; }
.cx-cap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 56px; align-items: start; }
.cx-cap > .cx-n, .cx-cap > h3, .cx-cap > .cx-txt { grid-column: 1; }
.cx-cap > .cx-janela { grid-column: 2; grid-row: 1 / span 4; }
.cx-n { font: 700 .78rem/1 var(--fonte); letter-spacing: .14em; color: var(--magenta); }
.cx-cap h3 { font-weight: 800; font-size: 1.5rem; line-height: 1.15; margin: 10px 0 8px; }
.cx-txt { color: var(--tinta-2); font-size: 1rem; line-height: 1.55; max-width: 32em; }
.cx-janela { container-type: inline-size; border-radius: 16px; overflow: hidden; background: #f5f2fa; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .12); }
.cx-nota { grid-area: nota; font-size: .8rem; color: var(--tinta-3); }

/* a caixa de entrada (interface clara como o painel real; mesma marcação no monitor, no cartão do celular e nos blocos) */
.cx-vista { --t: 1; display: flex; flex-direction: column; min-height: 100%; font: 500 16px/1.35 var(--fonte); color: #1d1530; background: #f5f2fa; text-align: left; }
.ui-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; background: #fff; border-bottom: 1px solid #e7e0f1; }
.ui-topo > b { font-size: 1.12em; font-weight: 800; }
.ui-filtros { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ui-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #f1ecf8; color: #5d5275; font-size: .78em; font-weight: 700; line-height: 1.2; }
.ui-chip.is-on { background: #1d1530; color: #fff; }
.ui-chip .mc { width: 1.15em; height: 1.15em; }
.ui-chip.is-on .mc { background-color: #fff; }
.ui-chip.is-on .mc--ig, .ui-chip.is-on .mc--ms { background: #fff; }
.ui-chip--wa.is-on { background: #e3f8ec; color: #0b6b3a; }
.ui-chip--wa.is-on .mc { background: #25D366; }
.ui-corpo { flex: 1; display: grid; gap: 14px; padding: 16px 18px; align-content: start; }
.ui-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #ece5f7; color: #5b2bb0; font-weight: 800; font-size: .74em; }
.ui-av--loja { background: var(--degrade); color: #fff; }
.ui-msg { max-width: 86%; margin: 0; padding: 9px 13px; border-radius: 16px; font-size: .92em; line-height: 1.32; }
.ui-msg.ele { align-self: flex-start; background: #f1ecf8; border-bottom-left-radius: 5px; }
.ui-msg.eu { align-self: flex-end; background: #e2d4ff; border-bottom-right-radius: 5px; }
.ui-tag { display: inline-block; font-size: .7em; font-weight: 800; letter-spacing: .02em; line-height: 1.2; padding: 4px 8px; border-radius: 6px; background: #efe6ff; color: #6a1fc0; white-space: nowrap; }
.ui-tag--alta { background: #ffe5f7; color: #b8008f; }
.ui-tag--ok { background: #dcf7e7; color: #0b6b3a; justify-self: start; }
.ui-barra { position: relative; display: block; height: 10px; border-radius: 5px; background: #efe9f7; overflow: hidden; }
.ui-barra i { position: absolute; inset: 0; border-radius: 5px; background: linear-gradient(90deg, #F000D0, #8B2BE2 60%, #0050F0); transform-origin: left; transform: scaleX(calc(var(--v, 1) * var(--t, 1))); }
/* 1 · caixa única */
.ui-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.ui-conv { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #fff; box-shadow: 0 1px 0 rgb(29 21 48 / .06); }
.ui-conv > .mc { width: 22px; height: 22px; }
.ui-q b { display: block; font-size: .94em; }
.ui-q span { display: block; color: #6f6585; font-size: .84em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-conv time { align-self: start; font-size: .72em; color: #8d83a3; }
.ui-conv.is-sel { box-shadow: inset 0 0 0 2px #8B2BE2; }
.ui-conversa { display: none; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: #fff; }
.ui-conversa__topo { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid #eee7f6; }
.ui-conversa__topo .mc { width: 22px; height: 22px; }
.ui-conversa__topo small { margin-left: auto; color: #6f6585; font-size: .76em; font-weight: 700; }
.ui-aviso { align-self: center; margin: 0; font-size: .74em; font-weight: 700; color: #6f6585; background: #f6f2fb; padding: 5px 10px; border-radius: 8px; }
/* 2 · publicações */
.ui-post { margin: 0; overflow: hidden; display: grid; border-radius: 14px; background: #fff; align-self: start; }
.ui-post img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.ui-post figcaption { padding: 10px 14px 4px; font-size: .86em; line-height: 1.35; }
.ui-post figcaption b { margin-right: 4px; }
.ui-post__num { display: flex; gap: 14px; margin: 0; padding: 4px 14px 12px; font-size: .78em; color: #6f6585; }
.ui-coments { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.ui-coments li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 9px 12px; border-radius: 12px; background: #fff; }
.ui-coments p { flex: 1; min-width: 0; margin: 0; font-size: .88em; }
.ui-coments p b { margin-right: 4px; }
.ui-coments .ui-resp { margin-left: 30px; background: #f2ebfd; }
.ui-coments .ui-acoes { justify-content: flex-end; padding: 2px 0 0; background: none; }
.ui-bt { font-size: .78em; font-weight: 800; padding: 7px 12px; border-radius: 9px; background: #fff; border: 1px solid #ddd3ec; color: #3a2d57; }
.ui-bt--forte { background: #1d1530; border-color: #1d1530; color: #fff; }
/* 3 · respostas automáticas */
.ui-regras, .ui-fluxo { display: grid; gap: 10px; align-content: start; }
.ui-regra { position: relative; display: grid; gap: 6px; padding: 12px 58px 12px 14px; border-radius: 14px; background: #fff; }
.ui-regra p { margin: 0; font-size: .86em; line-height: 1.35; }
.ui-regra p span { display: inline-block; min-width: 3.9em; font-size: .78em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8B2BE2; }
.ui-liga { position: absolute; right: 14px; top: 14px; width: 36px; height: 21px; border-radius: 11px; background: #22c46e; }
.ui-liga::after { content: ''; position: absolute; right: 3px; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; }
.ui-coment { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; padding: 10px 12px; border-radius: 12px; background: #fff; font-size: .88em; }
.ui-coment > span:not(.ui-av):not(.ui-tag) { flex: 1; min-width: 0; }
.ui-coment b { margin-right: 4px; }
.ui-coment--auto { margin-left: 26px; background: #f2ebfd; }
.ui-direct { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: #fff; }
.ui-direct__topo { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .8em; font-weight: 800; color: #5d5275; }
.ui-direct__topo .mc { width: 18px; height: 18px; }
/* 4 · desempenho */
.ui-resumo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ui-resumo li { padding: 10px 12px; border-radius: 12px; background: #fff; }
.ui-resumo span { display: block; font-size: .72em; font-weight: 700; color: #6f6585; }
.ui-resumo b { display: block; font-size: 1.32em; font-weight: 800; letter-spacing: -.02em; }
.ui-ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ui-ranking li { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 4.6em; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: #fff; }
.ui-ranking img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.ui-ranking p { margin: 0; font-size: .86em; }
.ui-ranking p b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-ranking p span { display: block; font-size: .84em; color: #6f6585; }
/* 5 · disparos */
.ui-camp { display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: 14px; background: #fff; }
.ui-camp__nome { margin: 0; }
.ui-camp__nome b { display: block; font-weight: 800; }
.ui-camp__nome span { display: block; margin-top: 2px; font-size: .8em; color: #6f6585; }
.ui-previa { display: flex; flex-direction: column; padding: 12px; border-radius: 12px; background: #efe9e1; }
.ui-previa .ui-msg.eu { background: #d9fdd3; max-width: 92%; }
.ui-funil { list-style: none; margin: 0; padding: 14px; display: grid; gap: 12px; align-content: start; border-radius: 14px; background: #fff; }
.ui-funil li { display: grid; grid-template-columns: 6.4em minmax(0, 1fr) 3em; align-items: center; gap: 10px; font-size: .86em; }
.ui-funil li b { text-align: right; }
.ui-funil .ui-barra { height: 14px; border-radius: 7px; }
.ui-funil .ui-custo { display: block; padding-top: 10px; border-top: 1px solid #eee7f6; font-size: .8em; font-weight: 700; color: #5d5275; }

@container (min-width: 640px) {
  .cx-vista--caixa .ui-corpo { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); }
  .cx-vista--caixa .ui-conversa { display: flex; }
  .cx-vista--posts .ui-corpo { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
  .cx-vista--auto .ui-corpo { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .cx-vista--disp .ui-corpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@container (max-width: 639px) {
  .cx-vista { font-size: 14px; }
  .ui-topo { padding: 11px 13px; }
  .ui-corpo { padding: 12px 12px; gap: 10px; }
  .ui-filtros .ui-chip:nth-child(n+4) { display: none; }
  .ui-post { grid-template-columns: 74px minmax(0, 1fr); align-items: center; }
  .ui-post img { height: 74px; }
  .ui-post figcaption { padding: 8px 12px 2px; }
  .ui-post__num { grid-column: 2; padding: 0 12px 8px; }
  .ui-coments li:nth-child(4) { display: none; }
  .ui-regra:nth-child(2) { display: none; }
  .ui-resumo { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ui-ranking li { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 4px 10px; }
  .ui-ranking li:nth-child(4) { display: none; }
  .ui-ranking img { width: 38px; height: 38px; grid-row: span 2; }
  .ui-ranking .ui-barra { grid-column: 2 / -1; height: 8px; }
  .ui-ranking .ui-tag { grid-column: 3; grid-row: 1; }
  .ui-previa { display: none; }
  .ui-funil { gap: 9px; padding: 12px; }
}

/* com movimento: o palco preso (foto que cobre, câmera própria, textos à esquerda) */
html.mov .cx { padding: 0; background: #0a0517; }
html.mov .cx-palco { display: block; position: relative; height: var(--alto); overflow: hidden; }
html.mov .cx-foto { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; background: none; }
html.mov .cx-camera { width: auto; height: auto; will-change: transform; }
html.mov .cx-foto::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(12 6 28 / .93) 0%, rgb(12 6 28 / .8) 28%, rgb(12 6 28 / .3) 44%, rgb(12 6 28 / 0) 54%), linear-gradient(180deg, rgb(12 6 28 / .6) 0%, rgb(12 6 28 / 0) 18%), linear-gradient(0deg, rgb(12 6 28 / .55) 0%, rgb(12 6 28 / 0) 22%); }
html.mov .cx-monitor { background: #f5f2fa; }
.cx-vistas { position: absolute; inset: 0; container-type: inline-size; overflow: hidden; }
.cx-vistas .cx-vista { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; }
.cx-vistas .cx-vista.is-agora { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.cx-monitor .cx-vista { font-size: 19px; }
html.mov .cx-vista [data-em] { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .5s var(--saida); }
html.mov .cx-vista [data-em].on { opacity: 1; transform: none; }
html.mov .cx-janela { display: none; }
html.mov .cx-texto { display: flex; flex-direction: column; justify-content: center; position: absolute; z-index: 3; left: var(--lado); top: calc(var(--cab) + 8px); bottom: 32px; width: min(520px, 38vw); }
html.mov .cx-titulo { font-size: clamp(1.9rem, 2.9vw, 2.75rem); }
html.mov .cx-meta { font-size: .95rem; }
html.mov .cx-caps { display: block; margin: 22px 0 0; }
html.mov .cx-cap { display: block; position: relative; padding: 10px 0 10px 18px; border-top: 1px solid rgb(255 255 255 / .1); opacity: .5; transition: opacity .4s; }
html.mov .cx-cap::before { content: ''; position: absolute; left: 0; top: 19px; width: 8px; height: 8px; border-radius: 2px; background: rgb(255 255 255 / .25); }
html.mov .cx-cap .cx-n { display: none; }
html.mov .cx-cap h3 { margin: 0; font-size: 1.06rem; font-weight: 700; }
html.mov .cx-cap .cx-txt { max-height: 0; overflow: hidden; opacity: 0; font-size: .95rem; transition: max-height .5s var(--saida), opacity .35s; }
html.mov .cx-cap.is-agora { opacity: 1; }
html.mov .cx-cap.is-agora h3 { font-size: 1.16rem; font-weight: 800; }
html.mov .cx-cap.is-agora .cx-txt { max-height: 9em; opacity: 1; margin-top: 4px; }
html.mov .cx-cap.is-agora::before { background: var(--magenta); box-shadow: 0 0 12px rgb(240 0 208 / .8); }
html.mov .cx-cap.is-agora::after { content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--degrade); transform-origin: left; animation: sc-fio .6s var(--saida) both; }
html.mov .cx-nota { margin-top: 14px; }
/* os canais: selos brancos que acendem quando a mensagem daquele canal chega (camada do meio, parallax próprio) */
html.mov .cx-canais { display: block; position: absolute; z-index: 2; left: 0; top: 0; list-style: none; margin: 0; padding: 0; will-change: transform; pointer-events: none; }
html.mov .cx-canais li { position: absolute; left: 0; top: 0; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 14px 30px -12px rgb(0 0 0 / .7), 0 0 0 0 rgb(240 0 208 / 0); translate: var(--x, 0px) var(--y, 0px); scale: var(--s, .9); transition: box-shadow .4s, scale .5s var(--saida); }
html.mov .cx-canais li .mc { width: 32px; height: 32px; }
html.mov .cx-canais li .mc--app { width: 40px; height: 40px; }
html.mov .cx-canais li.is-ativo { --s: 1.08; box-shadow: 0 14px 30px -12px rgb(0 0 0 / .7), 0 0 0 6px rgb(240 0 208 / .35); }
html.mov .cx-pose { display: block; position: absolute; z-index: 4; right: .5vw; bottom: 0; height: min(42vh, 400px); aspect-ratio: 705 / 1100; will-change: transform; filter: drop-shadow(-10px 14px 24px rgb(8 4 20 / .6)); pointer-events: none; }
html.mov .cx-pose .pose-social { height: 100%; }

/* =========================================================================================================
   TODOS OS NICHOS
   ========================================================================================================= */
.ni { position: relative; padding: 104px var(--lado) 80px; background: var(--fundo); }
.ni-palco { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 56px; align-items: center; }
.ni-foto { order: 2; position: relative; aspect-ratio: 3 / 2; border-radius: 18px; overflow: hidden; background: var(--fundo-2); }
.ni-camera, .si-camera { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.ni-img, .si-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.ni-lista { list-style: none; margin: 26px 0 0; padding: 0; }
.ni-lista li { position: relative; padding: 11px 0 11px 18px; border-top: 1px solid rgb(255 255 255 / .1); }
.ni-lista li::before { content: ''; position: absolute; left: 0; top: 19px; width: 8px; height: 8px; border-radius: 2px; background: rgb(255 255 255 / .25); }
.ni-lista b { display: block; font-weight: 700; font-size: 1.04rem; }
.ni-lista span { display: block; color: var(--tinta-2); font-size: .93rem; line-height: 1.5; }
.ni-lista a { color: #fff; text-decoration-color: var(--magenta); text-underline-offset: 3px; }
.ni-nota { margin-top: 14px; font-size: .8rem; color: var(--tinta-3); }

html.mov .ni { padding: 0; }
html.mov .ni-palco { display: block; position: relative; height: var(--alto); overflow: hidden; background: #0a0517; }
html.mov .ni-foto { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
html.mov .ni-camera { width: auto; height: auto; will-change: transform; }
html.mov .ni-foto::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(14 7 32 / .9) 0%, rgb(14 7 32 / .72) 30%, rgb(14 7 32 / .1) 52%, rgb(14 7 32 / 0) 62%), linear-gradient(0deg, rgb(14 7 32 / .5) 0%, rgb(14 7 32 / 0) 26%), linear-gradient(180deg, rgb(14 7 32 / .55) 0%, rgb(14 7 32 / 0) 18%); }
html.mov .ni-texto { position: absolute; z-index: 2; left: var(--lado); top: 50%; transform: translateY(-50%); width: min(520px, 40vw); }
html.mov .ni-titulo { font-size: clamp(1.9rem, 3vw, 2.8rem); }
html.mov .ni-lista li { opacity: .5; transition: opacity .4s; }
html.mov .ni-lista li span { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--saida), opacity .35s; }
html.mov .ni-lista li.is-agora { opacity: 1; }
html.mov .ni-lista li.is-agora span { max-height: 5em; opacity: 1; margin-top: 3px; }
html.mov .ni-lista li.is-agora::before { background: var(--magenta); box-shadow: 0 0 12px rgb(240 0 208 / .8); }
html.mov .ni-lista li.is-agora::after { content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--degrade); transform-origin: left; animation: sc-fio .6s var(--saida) both; }
@keyframes sc-fio { from { transform: scaleX(0); } }

/* =========================================================================================================
   PORTFÓLIO DE SITES
   ========================================================================================================= */
.si { position: relative; padding: 96px var(--lado) 72px; background: radial-gradient(60% 50% at 80% 30%, rgb(139 43 226 / .16), transparent 70%), var(--fundo); }
.si-palco { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "cab foto" "est foto"; gap: 24px 56px; align-items: start; }
.si-foto { grid-area: foto; position: relative; aspect-ratio: 3 / 2; border-radius: 18px; overflow: hidden; background: #120a24; }
.si-cabeca { grid-area: cab; }
.si-sete { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; font-size: 1.12rem; }
.si-sete b { font-weight: 800; color: #fff; }
.si-sete a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; font-size: .95rem; text-decoration: none; color: var(--tinta-2); border-bottom: 2px solid var(--magenta); min-height: 0; padding-bottom: 2px; }
.si-estados { grid-area: est; list-style: none; margin: 0; padding: 0; counter-reset: si; }
.si-estados li { position: relative; padding: 12px 0 12px 40px; border-top: 1px solid rgb(255 255 255 / .1); counter-increment: si; }
.si-estados li::before { content: '0' counter(si); position: absolute; left: 0; top: 14px; font: 700 .76rem/1 var(--fonte); letter-spacing: .1em; color: var(--tinta-3); }
.si-estados b { display: block; font-weight: 700; }
.si-estados span { display: block; color: var(--tinta-2); font-size: .92rem; }
.si-tela { background: #0d0820; }
.si-tela--cel { border-radius: 30px; }
.si-shot { position: absolute; left: 0; top: 0; width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: 50% 0; max-width: none; opacity: 0; transition: opacity .45s ease; will-change: transform; }
.si-shot.is-agora { opacity: 1; }
.si-tela--cel .si-shot[data-quadro], .si-tela--cel .si-tira { width: 109%; left: -4.5%; }
/* tira montada pelo JS: só os quadros escolhidos, empilhados como uma página curta (cada janela recorta um quadro) */
.si-tira { min-height: 0; }
.si-quadro { position: relative; display: block; height: var(--qh, 100%); overflow: hidden; }
.si-quadro__img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; transform: translate3d(0, calc(var(--k, 0) * var(--qh, 0px) * -1), 0); }
.si-notch { position: absolute; left: 50%; top: 10px; width: 112px; height: 26px; margin-left: -56px; border-radius: 14px; background: #08060d; }

html.mov .si { padding: 0; background: #0a0517; }
html.mov .si-palco { display: block; position: relative; height: var(--alto); overflow: hidden; }
html.mov .si-foto { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; background: none; }
html.mov .si-camera { width: auto; height: auto; will-change: transform; }
html.mov .si-foto::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(10 5 23 / .82) 0%, rgb(10 5 23 / .5) 22%, rgb(10 5 23 / 0) 36%), linear-gradient(0deg, rgb(10 5 23 / .92) 0%, rgb(10 5 23 / .6) 20%, rgb(10 5 23 / 0) 34%), linear-gradient(90deg, rgb(10 5 23 / .6) 0%, rgb(10 5 23 / 0) 30%); }
html.mov .si-cabeca { position: absolute; z-index: 2; left: var(--lado); top: calc(var(--cab) + 14px); width: min(700px, 52vw); }
html.mov .si-titulo { font-size: clamp(1.7rem, 2.6vw, 2.5rem); margin: 8px 0 8px; }
html.mov .si-apoio { font-size: .98rem; max-width: 40em; }
html.mov .si-sete { margin-top: 10px; font-size: 1.04rem; }
html.mov .si-estados { position: absolute; z-index: 2; left: var(--lado); right: var(--lado); bottom: 62px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
html.mov .si-estados li { border-top: 0; padding: 14px 0 0; opacity: .5; transition: opacity .4s; }
html.mov .si-estados li::before { position: static; display: block; margin-bottom: 6px; }
html.mov .si-estados li::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgb(255 255 255 / .2); }
html.mov .si-estados li.is-agora { opacity: 1; }
html.mov .si-estados li.is-agora::after { background: var(--degrade); }
html.mov .si-estados li.is-agora::before { color: var(--magenta); }
html.mov .si-estados span { font-size: .84rem; line-height: 1.4; }

/* =========================================================================================================
   MODALIDADES: a tela que cresce
   ========================================================================================================= */
.md { position: relative; padding: 104px var(--lado) 96px; background: radial-gradient(50% 60% at 90% 10%, rgb(240 0 208 / .1), transparent 70%), var(--fundo-2); overflow: hidden; }
.md-texto { max-width: 1180px; }
.md-sete { display: flex; align-items: center; gap: 18px; margin: 18px 0 8px; max-width: 34em; color: var(--tinta-2); font-size: 1.04rem; line-height: 1.45; }
.md-sete b { flex: none; font-weight: 800; font-size: clamp(4.2rem, 6.4vw, 6rem); line-height: .82; letter-spacing: -.06em; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.md-sete strong { display: block; color: #fff; font-size: 1.22rem; font-weight: 800; margin-bottom: 2px; }
.md-passos { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 26px; }
.md-passo { padding-top: 18px; border-top: 2px solid rgb(255 255 255 / .14); }
.md-n { font: 700 .76rem/1 var(--fonte); letter-spacing: .14em; color: var(--magenta); }
.md-passo h3 { font-weight: 800; font-size: 1.2rem; line-height: 1.15; margin: 10px 0 8px; }
.md-passo p:not(.md-n) { color: var(--tinta-2); font-size: .94rem; line-height: 1.5; }
.md-acao { margin-top: 36px; }
.md-cena { display: none; }

html.mov .md { padding: 0; }
html.mov .md-palco { position: relative; height: var(--alto); overflow: hidden; }
html.mov .md-texto { position: absolute; z-index: 3; left: var(--lado); top: calc(var(--cab) + 8px); bottom: 30px; width: min(470px, 35vw); display: flex; flex-direction: column; justify-content: center; }
html.mov .md-titulo { font-size: clamp(1.9rem, 2.9vw, 2.7rem); }
html.mov .md-passos { display: block; margin: 20px 0 0; }
html.mov .md-passo { position: relative; padding: 9px 0 9px 18px; border-top: 1px solid rgb(255 255 255 / .1); opacity: .5; transition: opacity .4s; }
html.mov .md-passo::before { content: ''; position: absolute; left: 0; top: 18px; width: 8px; height: 8px; border-radius: 2px; background: rgb(255 255 255 / .25); }
html.mov .md-passo .md-n { display: none; }
html.mov .md-passo h3 { margin: 0; font-size: 1.04rem; font-weight: 700; }
html.mov .md-passo p:not(.md-n) { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--saida), opacity .35s; }
html.mov .md-passo.is-agora { opacity: 1; }
html.mov .md-passo.is-agora h3 { font-size: 1.14rem; font-weight: 800; }
html.mov .md-passo.is-agora p:not(.md-n) { max-height: 8em; opacity: 1; margin-top: 4px; }
html.mov .md-passo.is-agora::before { background: var(--magenta); box-shadow: 0 0 12px rgb(240 0 208 / .8); }
html.mov .md-passo.is-agora::after { content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--degrade); transform-origin: left; animation: sc-fio .6s var(--saida) both; }
html.mov .md-acao { margin-top: 22px; }
/* a cena: a tela cresce (o JS escreve largura e altura), o cromo ganha peças por etapa, os apps encaixam no fim */
html.mov .md-cena { display: block; position: absolute; z-index: 1; margin: 0; left: 0; top: 0; right: 0; bottom: 0; }
.md-luz { position: absolute; left: 40%; right: -10%; bottom: -10%; height: 80%; background: radial-gradient(50% 55% at 50% 100%, rgb(240 0 208 / .28), rgb(139 43 226 / .12) 50%, transparent 76%); }
.md-tela { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: #0d0820; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .14); will-change: transform; }
.md-cromo { flex: none; position: relative; display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px; background: #1b1233; border-bottom: 1px solid rgb(255 255 255 / .08); font: 600 .74rem/1 var(--fonte); color: var(--tinta-2); white-space: nowrap; overflow: hidden; }
.md-bolinhas { display: flex; gap: 6px; }
.md-bolinhas i { width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / .22); }
.md-url { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 7px; background: rgb(255 255 255 / .07); }
.md-url svg { width: 12px; height: 12px; fill: none; stroke: #7cf2b0; stroke-width: 1.6; }
.md-abas { display: flex; gap: 12px; opacity: 0; transition: opacity .4s; }
.md-abas i { font-style: normal; }
.md-sacola, .md-entrar { margin-left: auto; padding: 6px 10px; border-radius: 7px; background: rgb(255 255 255 / .1); color: #fff; opacity: 0; transition: opacity .4s; }
.md-entrar { margin-left: 0; background: var(--degrade); }
.md-sacola b { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 4px; border-radius: 9px; background: var(--magenta); font-size: .7rem; }
.md-tela[data-etapa="1"] .md-abas, .md-tela[data-etapa="2"] .md-abas { opacity: 1; }
.md-tela[data-etapa="2"] .md-sacola, .md-tela[data-etapa="3"] .md-sacola, .md-tela[data-etapa="4"] .md-sacola { opacity: 1; }
.md-tela[data-etapa="3"] .md-entrar, .md-tela[data-etapa="4"] .md-entrar { opacity: 1; }
.md-conteudo { position: relative; flex: 1; overflow: hidden; background: #fff; }
.md-shot { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; opacity: 0; transition: opacity .45s ease; will-change: transform; }
.md-shot.is-agora { opacity: 1; }
.md-apps { position: absolute; left: 0; top: 0; list-style: none; margin: 0; padding: 0; pointer-events: none; }
.md-apps li { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 12px; background: #fff; color: #1d1530; font: 700 .86rem/1 var(--fonte); white-space: nowrap; box-shadow: 0 16px 30px -14px rgb(0 0 0 / .7); opacity: 0; will-change: transform, opacity; }
.md-apps .mc { width: 22px; height: 22px; }
.md-ico { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 6px; background: #1d1530; color: #fff; font-size: .62rem; letter-spacing: .02em; }
.md-pose { position: absolute; left: 0; top: 0; height: auto; width: auto; max-width: none; opacity: 0; transition: opacity .35s ease; transform-origin: 50% 100%; filter: drop-shadow(-8px 14px 22px rgb(8 4 20 / .6)); pointer-events: none; }
.md-pose.is-agora { opacity: 1; }
.md-contador { position: absolute; right: var(--lado); bottom: 26px; font: 700 .82rem/1 var(--fonte); letter-spacing: .12em; color: var(--tinta-2); }
.md-contador b { color: #fff; }

/* =========================================================================================================
   HOSPEDAGEM
   ========================================================================================================= */
.hs { position: relative; padding: 112px var(--lado) 104px; background: radial-gradient(55% 60% at 80% 60%, rgb(0 80 240 / .14), transparent 72%), var(--fundo); overflow: hidden; }
.hs-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px 64px; align-items: center; max-width: 1320px; margin: 0 auto; }
.hs-itens { list-style: none; margin: 28px 0 32px; padding: 0; display: grid; gap: 0; }
.hs-itens li { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; padding: 16px 0; border-top: 1px solid rgb(255 255 255 / .1); }
.hs-itens svg { grid-row: span 2; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: rgb(255 255 255 / .07); fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hs-itens b { font-weight: 800; font-size: 1.1rem; }
.hs-itens span { color: var(--tinta-2); font-size: .96rem; line-height: 1.5; }
.hs-cena { position: relative; margin: 0; aspect-ratio: 6 / 5; }
.hs-predio { position: absolute; left: 0; right: 8%; top: 0; bottom: 14%; overflow: hidden; border-radius: 18px; background: #0a0517; box-shadow: 0 30px 70px -30px rgb(0 0 0 / .8); }
.hs-predio__foto { position: absolute; inset: -6% 0; width: 100%; height: 112%; max-width: none; object-fit: cover; object-position: 62% 30%; }
.hs-predio__letreiro { position: absolute; left: 55.6%; top: 7.4%; width: 12%; height: auto; }
.hs-predio::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(10 5 23 / .7), rgb(10 5 23 / 0) 50%); }
.hs-navegador { position: absolute; left: 6%; top: 50%; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 12px; background: #fff; color: #1d1530; font: 600 1rem/1 var(--fonte); box-shadow: 0 20px 40px -18px rgb(0 0 0 / .8); }
.hs-navegador svg { width: 20px; height: 20px; fill: none; stroke: #13a35a; stroke-width: 2; stroke-linecap: round; }
.hs-navegador b { font-weight: 800; }
.hs-email { position: absolute; right: 0; top: 5%; width: min(330px, 56%); padding: 14px; border-radius: 14px; background: #fff; color: #1d1530; box-shadow: 0 24px 50px -20px rgb(0 0 0 / .8); }
.hs-email__topo { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid #eee7f6; }
.hs-email__topo b { font-weight: 800; }
.hs-email__topo span { font-size: .82rem; color: #6f6585; }
.hs-email ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.hs-email li { padding: 7px 8px; border-radius: 8px; }
.hs-email li:first-child { background: #f3edfc; }
.hs-email li b { display: block; font-size: .9rem; }
.hs-email li span { display: block; font-size: .78rem; color: #6f6585; }
.hs-suporte { position: absolute; left: 14%; bottom: 0; width: min(320px, 58%); display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: #f0ebe4; color: #1d1530; font-family: var(--fonte); box-shadow: 0 24px 50px -20px rgb(0 0 0 / .8); }
.hs-suporte__topo { display: flex; align-items: center; gap: 8px; font-size: .86rem; }
.hs-suporte__topo .mc { width: 20px; height: 20px; }
.hs-suporte .ui-msg { font-size: .92rem; background: #fff; max-width: 100%; }
.hs-pose { position: absolute; right: -7%; bottom: -3%; height: 44%; width: auto; max-width: none; filter: drop-shadow(-10px 14px 22px rgb(8 4 20 / .6)); }
html.mov .hs-cena [data-hs] { will-change: transform; transform: translate3d(0, var(--py, 0px), 0); }

/* =========================================================================================================
   APPS
   ========================================================================================================= */
.ap { position: relative; padding: 104px var(--lado) 80px; background: var(--fundo); overflow-x: clip; }
.ap-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: start; }
.ap-passos { list-style: none; margin: 34px 0 0; padding: 0; }
.ap-passos li { padding: 26px 0; border-top: 1px solid rgb(255 255 255 / .1); }
.ap-n { font: 700 .76rem/1 var(--fonte); letter-spacing: .14em; text-transform: uppercase; color: var(--magenta); }
.ap-passos h3 { font-weight: 800; font-size: 1.5rem; margin: 10px 0 8px; }
.ap-passos p:not(.ap-n) { color: var(--tinta-2); max-width: 32em; }
.ap-passos .botao { margin-top: 22px; }
.ap-figura { position: relative; margin: 0; }
.ap-masc { position: relative; width: min(100%, 440px); aspect-ratio: 730 / 1100; margin: 0 auto; }
.ap-img { position: relative; z-index: 1; width: 100%; height: 100%; }
.ap-luz { position: absolute; left: -20%; right: -20%; bottom: 0; height: 70%; background: radial-gradient(50% 55% at 50% 100%, rgb(240 0 208 / .38), rgb(139 43 226 / .16) 50%, transparent 76%); }
.ap-px { position: absolute; z-index: 2; left: 0; top: 0; width: 730px; height: 1100px; transform-origin: 0 0; pointer-events: none; }
.ap-tela { background: #0d0820; border-radius: 20px; }
.ap-shot { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; opacity: 0; transition: opacity .45s ease; }
.ap-shot.is-agora { opacity: 1; }
.ap-legenda { margin-top: 12px; text-align: center; font-size: .8rem; color: var(--tinta-3); }
html.mov .ap-figura { position: sticky; top: calc(var(--cab) + 2vh); height: calc(var(--alto) - var(--cab) - 6vh); display: flex; flex-direction: column; justify-content: center; }
/* CAUSA DO TREMOR (iPhone): parada, a figura presa não tinha camada de composição própria; na troca de tela as transições de
   opacidade (tela e passo) criavam camadas e a figura passava a ser composta "por sobreposição", e voltava depois. No Safari
   do iPhone um sticky sem camada é reposicionado pela thread principal durante o arrasto e salta quando ganha ou perde
   camada. Correção: camada própria e permanente na figura, nas telas e nos passos; as imagens chegam já decodificadas. */
html.mov .ap-figura, html.mov .pf-figura { will-change: transform; }
html.mov .ap-shot, html.mov .pf-shot, html.mov .pf-pose { will-change: opacity; }
html.mov .ap-passos li, html.mov .pf-itens li { will-change: opacity; }
html.mov .ap-masc { height: min(100%, 700px); width: auto; max-width: 100%; }
html.mov .ap-passos li { min-height: 52vh; display: flex; flex-direction: column; justify-content: center; opacity: .35; transition: opacity .45s; }
html.mov .ap-passos li.is-agora { opacity: 1; }
html.mov .ap-passos .botao { align-self: flex-start; }

/* computador: o último passo chega ao meio da tela com a figura ainda presa (antes ela já subia no último app) */
@media (min-width: 761px) and (min-aspect-ratio: 4/5) {
  html.mov .ap-passos { padding-bottom: 22vh; }
  html.mov .pf-itens { padding-bottom: 24vh; }
}

/* =========================================================================================================
   SOB MEDIDA: antes → sistema
   ========================================================================================================= */
.sm { position: relative; padding: 104px var(--lado) 96px; background: radial-gradient(55% 40% at 10% 0%, rgb(139 43 226 / .2), transparent 72%), var(--fundo); }
.sm-cabeca { max-width: 760px; }
.sm-casos { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 64px; }
.sm-caso { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px 56px; align-items: center; }
.sm-par { position: relative; display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); gap: 16px; align-items: end; padding-bottom: 8px; }
.sm-par figure { position: relative; margin: 0; }
.sm-par img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 24px 50px -24px rgb(0 0 0 / .8); }
.sm-antes img { aspect-ratio: 3 / 4; object-fit: cover; }
.sm-depois--tela img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 0 0; }
.sm-depois--cel { justify-self: center; width: min(62%, 230px); }
.sm-depois--cel img { aspect-ratio: 390 / 800; object-fit: cover; object-position: 50% 0; border-radius: 26px; border: 6px solid #120b22; }
.sm-par figcaption { position: absolute; left: 10px; top: 10px; padding: 5px 9px; border-radius: 6px; font: 800 .7rem/1 var(--fonte); letter-spacing: .1em; text-transform: uppercase; background: rgb(10 5 23 / .78); color: var(--tinta-2); }
.sm-depois figcaption { background: var(--degrade); color: #fff; }
.sm-pose { display: none; }
.sm-n { font: 700 .78rem/1 var(--fonte); letter-spacing: .14em; color: var(--magenta); }
.sm-n span { color: var(--tinta-3); }
.sm-caso h3 { font-weight: 800; font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.12; margin: 10px 0 14px; }
.sm-caso dl { margin: 0; display: grid; gap: 10px; }
.sm-caso dt { font: 700 .72rem/1 var(--fonte); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.sm-caso dt:nth-of-type(2) { color: var(--magenta); }
.sm-caso dt:nth-of-type(3) { color: #7cf2b0; }
.sm-caso dd { margin: 4px 0 0; color: var(--tinta-2); font-size: 1rem; line-height: 1.5; }
.sm-trilha { display: none; }
.sm-como { margin-top: 96px; }
.sm-como__titulo { font-weight: 800; font-size: clamp(1.5rem, 2.2vw, 2rem); margin: 0 0 22px; }
.sm-etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; counter-reset: et; }
.sm-etapas li { position: relative; padding: 22px 16px 0 0; counter-increment: et; }
.sm-etapas li::before { content: '0' counter(et); display: block; font: 700 .74rem/1 var(--fonte); letter-spacing: .12em; color: var(--magenta); margin-bottom: 10px; }
.sm-etapas li::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgb(255 255 255 / .14); }
.sm-etapas b { display: block; font-weight: 800; font-size: 1.02rem; margin-bottom: 6px; }
.sm-etapas span { display: block; color: var(--tinta-2); font-size: .88rem; line-height: 1.45; }
.sm-cta { margin-top: 44px; }
html.mov .sm-etapas li::after { background: linear-gradient(90deg, var(--magenta), var(--roxo)); transform-origin: left; transform: scaleX(var(--et, 0)); transition: transform .7s var(--saida); }
html.mov .sm-etapas li { opacity: .35; transition: opacity .5s; }
html.mov .sm-etapas li.visto { opacity: 1; --et: 1; }

/* com movimento: o palco preso (um caso por vez; antes recua, depois vem para a frente, a pose troca) */
html.mov .sm { padding: 0 var(--lado) 96px; }
html.mov .sm-palco { position: relative; height: var(--alto); overflow: hidden; margin: 0 calc(-1 * var(--lado)); }
html.mov .sm-cabeca { position: absolute; z-index: 3; left: calc(var(--lado) + 52%); right: var(--lado); top: calc(var(--cab) + 4vh); max-width: none; }
html.mov .sm-titulo { font-size: clamp(1.7rem, 2.5vw, 2.4rem); }
html.mov .sm-casos { position: absolute; inset: 0; margin: 0; display: block; }
html.mov .sm-caso { position: absolute; inset: 0; display: block; visibility: hidden; }
html.mov .sm-caso.is-vivo { visibility: visible; }
html.mov .sm-par { position: absolute; left: var(--lado); width: 46%; top: calc(var(--cab) + 4vh); bottom: 7vh; display: block; padding: 0; }
html.mov .sm-par figure { position: absolute; will-change: transform, opacity; }
html.mov .sm-antes { left: 0; top: 4%; height: 84%; aspect-ratio: 3 / 4; }
html.mov .sm-antes img { height: 100%; width: 100%; }
html.mov .sm-depois--tela { right: 0; top: 18%; width: 78%; }
html.mov .sm-depois--cel { right: 12%; top: 6%; height: 86%; width: auto; aspect-ratio: 390 / 800; }
html.mov .sm-depois--cel img { height: 100%; width: 100%; }
html.mov .sm-pose { display: block; position: absolute; right: -4%; bottom: -2%; height: 46%; width: auto; max-width: none; transform-origin: 50% 100%; filter: drop-shadow(-8px 14px 22px rgb(8 4 20 / .6)); will-change: transform, opacity; }
html.mov .sm-caso__texto { position: absolute; left: calc(var(--lado) + 52%); right: var(--lado); top: 50%; transform: translateY(-34%); will-change: transform, opacity; }
html.mov .sm-caso dd { font-size: 1.04rem; }
html.mov .sm-trilha { display: flex; gap: 6px; position: absolute; z-index: 3; left: calc(var(--lado) + 52%); bottom: 32px; width: min(260px, 30vw); margin: 0; }
html.mov .sm-trilha i { flex: 1; height: 3px; border-radius: 2px; background: rgb(255 255 255 / .2); }
html.mov .sm-trilha i.is-agora { background: var(--degrade); }
html.mov .sm-como { margin-top: 72px; }

/* =========================================================================================================
   MAIS DA PLATAFORMA
   ========================================================================================================= */
.pf { position: relative; padding: 104px var(--lado) 80px; background: var(--fundo-2); border-top: 1px solid rgb(255 255 255 / .06); overflow-x: clip; }
.pf-grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: start; }
.pf-figura { display: none; position: relative; margin: 0; }
.pf-itens { list-style: none; margin: 30px 0 0; padding: 0; }
.pf-itens li { padding: 26px 0; border-top: 1px solid rgb(255 255 255 / .1); }
.pf-n { font: 700 .76rem/1 var(--fonte); letter-spacing: .14em; text-transform: uppercase; color: var(--magenta); }
.pf-itens h3 { font-weight: 800; font-size: 1.45rem; margin: 10px 0 8px; }
.pf-itens p:not(.pf-n) { color: var(--tinta-2); max-width: 32em; }
.pf-mini { margin-top: 16px; width: 100%; max-width: 560px; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px rgb(255 255 255 / .1); }
.pf-grade { grid-template-areas: "texto texto"; }
.pf-texto { grid-area: texto; }
html.mov .pf-grade { grid-template-areas: "fig texto"; }
html.mov .pf-figura { grid-area: fig; display: flex; flex-direction: column; justify-content: center; position: sticky; top: calc(var(--cab) + 2vh); height: calc(var(--alto) - var(--cab) - 6vh); }
html.mov .pf-mini { display: none; }
.pf-tela { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #e8eaf2; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .12); }
.pf-shot { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 0 0; opacity: 0; transition: opacity .5s ease; }
.pf-shot.is-agora { opacity: 1; }
.pf-pose { position: absolute; right: -3%; bottom: 7%; height: 46%; width: auto; max-width: none; opacity: 0; transition: opacity .4s ease; filter: drop-shadow(-8px 14px 22px rgb(8 4 20 / .6)); }
.pf-pose.is-agora { opacity: 1; }
.pf-legenda { margin-top: 12px; font-size: .8rem; color: var(--tinta-3); }
html.mov .pf-itens li { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; opacity: .35; transition: opacity .45s; }
html.mov .pf-itens li.is-agora { opacity: 1; }

/* =========================================================================================================
   PARA PROVEDORES DE INTERNET (compacto)
   ========================================================================================================= */
.pv { position: relative; padding: 80px var(--lado) 80px; background: var(--fundo); border-top: 1px solid rgb(255 255 255 / .06); }
.pv-grade { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3.4fr); gap: 32px 48px; align-items: start; max-width: 1360px; margin: 0 auto; }
.pv-titulo { font-size: clamp(1.6rem, 2.3vw, 2.1rem); }
.pv-apoio { font-size: .98rem; }
.pv-itens { list-style: none; margin: 0; padding: 0; }
.pv-itens li { padding: 12px 0; border-top: 1px solid rgb(255 255 255 / .1); }
.pv-itens li:first-child { border-top: 0; padding-top: 0; }
.pv-itens b { display: block; font-weight: 700; font-size: 1rem; }
.pv-itens span { display: block; color: var(--tinta-2); font-size: .88rem; line-height: 1.5; margin-top: 3px; }
.pv-foto { margin: 0; }
.pv-foto img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 24px 50px -24px rgb(0 0 0 / .8); }
.pv-foto figcaption { margin-top: 8px; font-size: .78rem; color: var(--tinta-3); }
.pv-acoes { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; }
.pv-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; text-decoration: none; }
.pv-link span { color: var(--magenta); }
.pv-link:hover { text-decoration: underline; text-decoration-color: var(--magenta); text-underline-offset: 4px; }

/* =========================================================================================================
   COMPUTADOR MAIS ESTREITO (761 a 1180 px): menos texto nos palcos
   ========================================================================================================= */
@media (min-width: 761px) and (max-width: 1180px) {
  html.mov .cx-texto { width: min(440px, 40vw); }
  html.mov .cx-marcas li { font-size: 0; padding-left: 30px; }
  html.mov .si-estados span { display: none; }
  html.mov .md-texto { width: min(420px, 38vw); }
  .md-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 26px; }
  .sm-etapas { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 26px; }
  .pv-grade { grid-template-columns: 1fr 1fr; }
  .pv-foto { grid-column: 1; grid-row: 2; }
}
@media (min-width: 761px) and (max-height: 760px) {
  html.mov .cx-marcas { margin-bottom: 10px; }
  html.mov .cx-meta { padding: 8px 12px; }
  html.mov .cx-cap { padding: 7px 0 7px 18px; }
  html.mov .md-sete b { font-size: 3.6rem; }
}

/* =========================================================================================================
   CELULAR (até 760 px ou tela em pé): layouts próprios
   ========================================================================================================= */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .ni-titulo, .si-titulo, .ap-titulo, .sm-titulo, .pv-titulo, .cx-titulo, .md-titulo, .hs-titulo, .pf-titulo { font-size: clamp(1.7rem, 7.4vw, 2.1rem); }
  .ni, .si, .ap, .sm, .pv, .cx, .md, .hs, .pf { padding: 72px 20px 56px; }
  .ni-palco, .si-palco, .cx-palco, .cx-cap, .hs-grade, .pf-grade, .sm-caso, .pv-grade { grid-template-columns: 1fr; }
  .cx-palco { grid-template-areas: "cab" "foto" "caps" "nota"; }
  .cx-cap > .cx-janela { grid-column: 1; grid-row: auto; margin-top: 16px; }
  .cx-meta { font-size: .92rem; }
  .ni-foto { order: 0; }
  .si-palco { grid-template-areas: "cab" "foto" "est"; }
  .md-passos { grid-template-columns: 1fr; gap: 0; }
  .md-passo { padding: 16px 0 18px; border-top-width: 1px; }
  .md-sete b { font-size: 4.2rem; }
  .md-acao .botao, .hs-texto .botao, .sm-cta .botao, .ap-passos .botao { width: 100%; }
  .hs-cena { aspect-ratio: 5 / 6; margin-top: 8px; }
  .hs-predio { right: 0; bottom: 28%; }
  .hs-navegador { left: 4%; top: auto; bottom: 32%; font-size: .9rem; }
  .hs-email { top: auto; bottom: 8%; right: 0; width: 64%; }
  .hs-suporte { left: 0; bottom: 0; width: 70%; }
  .hs-email ul li:nth-child(n+3) { display: none; }
  .hs-pose { height: 34%; right: -4%; bottom: 30%; }
  .ap-grade { grid-template-columns: 1fr; }
  .ap-texto { display: contents; }
  .ap-cabeca { order: 1; }
  .ap-figura { order: 2; }
  .ap-passos { order: 3; margin-top: 8px; }
  .sm-par { grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); }
  .sm-etapas { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .sm-como { margin-top: 64px; }
  .pv-itens li:first-child { padding-top: 12px; border-top: 1px solid rgb(255 255 255 / .1); }

  /* canais com movimento: foto ao fundo, a caixa de entrada num cartão no meio, o capítulo embaixo */
  html.mov .cx { padding: 0; }
  html.mov .cx-foto::after { background: linear-gradient(180deg, rgb(12 6 28 / .9) 0%, rgb(12 6 28 / .75) 26%, rgb(12 6 28 / .55) 60%, rgb(12 6 28 / .95) 82%); }
  html.mov .cx-texto { left: 16px; right: 16px; top: calc(var(--cab) + 10px); bottom: 40px; width: auto; display: block; }
  html.mov .cx-cabeca > .rotulo { display: none; }
  html.mov .cx-titulo { font-size: 1.32rem; margin: 0 0 8px; }
  html.mov .cx-marcas { gap: 8px; margin: 0 0 8px; }
  html.mov .cx-marcas li { font-size: 0; padding-left: 26px; min-height: 26px; }
  html.mov .cx-marcas li::before { width: 26px; height: 26px; margin-top: -13px; }
  html.mov .cx-marcas .mc { left: 5px; width: 16px; height: 16px; margin-top: -8px; }
  html.mov .cx-marcas .mc--app { left: 3px; width: 20px; height: 20px; margin-top: -10px; }
  html.mov .cx-meta { font-size: .76rem; padding: 7px 10px 7px 12px; gap: 2px 6px; }
  html.mov .cx-cartao { display: block; position: absolute; z-index: 3; left: 12px; right: 12px; top: calc(var(--cab) + 150px); bottom: 196px; border-radius: 16px; overflow: hidden; background: #f5f2fa; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .9), 0 0 0 1px rgb(255 255 255 / .14); }
  html.mov .cx-caps { position: absolute; left: 0; right: 0; bottom: 140px; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
  html.mov .cx-cap { position: static; height: 3px; padding: 0; border: 0; border-radius: 2px; background: rgb(255 255 255 / .22); opacity: 1; }
  html.mov .cx-cap.is-agora { background: var(--degrade); }
  html.mov .cx-cap::before, html.mov .cx-cap::after, html.mov .cx-cap.is-agora::before, html.mov .cx-cap.is-agora::after { display: none; }
  html.mov .cx-cap h3, html.mov .cx-cap .cx-txt { display: none; }
  html.mov .cx-cap.is-agora h3 { display: block; position: absolute; left: 0; right: 0; top: 14px; font-size: 1.02rem; }
  html.mov .cx-cap.is-agora .cx-txt { display: block; position: absolute; left: 0; right: 0; top: 40px; max-height: none; font-size: .86rem; line-height: 1.45; margin: 0; }
  html.mov .cx-nota { display: none; }
  html.mov .cx-canais, html.mov .cx-pose { display: none; }

  /* nichos com movimento: foto cobre o palco, o celular no meio; a folha embaixo mostra o nicho da vez */
  html.mov .ni { padding: 0; }
  html.mov .ni-foto::after { background: linear-gradient(180deg, rgb(14 7 32 / .8) 0%, rgb(14 7 32 / 0) 20%), linear-gradient(0deg, rgb(14 7 32 / .96) 0%, rgb(14 7 32 / .7) 30%, rgb(14 7 32 / 0) 48%); }
  html.mov .ni-texto { left: 16px; right: 16px; top: auto; bottom: 50px; transform: none; width: auto; }
  html.mov .ni-texto > .rotulo { display: none; }
  html.mov .ni-titulo { font-size: 1.35rem; margin: 0 0 4px; }
  html.mov .ni-apoio, html.mov .ni-nota { display: none; }
  html.mov .ni-lista { position: relative; margin-top: 8px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding-bottom: 92px; }
  html.mov .ni-lista li { position: static; opacity: 1; padding: 0; height: 3px; border: 0; border-radius: 2px; background: rgb(255 255 255 / .22); }
  html.mov .ni-lista li.is-agora { background: var(--degrade); }
  html.mov .ni-lista li::before, html.mov .ni-lista li::after, html.mov .ni-lista li.is-agora::before, html.mov .ni-lista li.is-agora::after { display: none; }
  html.mov .ni-lista li b, html.mov .ni-lista li span { display: none; }
  html.mov .ni-lista li.is-agora b { display: block; position: absolute; left: 0; top: 14px; font-size: .95rem; }
  html.mov .ni-lista li.is-agora span { display: block; position: absolute; left: 0; right: 0; top: 36px; font-size: .9rem; max-height: none; margin: 0; }

  /* sites com movimento: a foto encaixada (notebook e celular inteiros) entre o título e a legenda */
  html.mov .si-foto::after { display: none; }
  html.mov .si-camera { -webkit-mask: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); }
  html.mov .si-cabeca { left: 20px; right: 20px; width: auto; top: calc(var(--cab) + 10px); }
  html.mov .si-cabeca > .rotulo { display: none; }
  html.mov .si-titulo { font-size: 1.5rem; margin-top: 0; }
  html.mov .si-apoio { font-size: .9rem; }
  html.mov .si-sete { font-size: .95rem; margin-top: 8px; }
  html.mov .si-sete a { display: none; }
  html.mov .si-estados { left: 20px; right: 20px; bottom: 48px; grid-template-columns: repeat(6, 1fr); gap: 5px; }
  html.mov .si-estados li { position: static; opacity: 1; padding: 0; height: 3px; border-radius: 2px; background: rgb(255 255 255 / .22); }
  html.mov .si-estados li.is-agora { background: var(--degrade); }
  html.mov .si-estados li::before, html.mov .si-estados li::after { display: none; }
  html.mov .si-estados li b, html.mov .si-estados li span { display: none; }
  html.mov .si-estados li.is-agora b { display: block; position: absolute; left: 0; bottom: 100%; margin-bottom: 52px; }
  html.mov .si-estados li.is-agora span { display: block; position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: 12px; font-size: .88rem; }

  /* modalidades com movimento: a tela no alto, a etapa da vez embaixo */
  html.mov .md-texto { left: 20px; right: 20px; top: auto; bottom: 40px; width: auto; display: block; }
  html.mov .md-texto > .rotulo, html.mov .md-acao { display: none; }
  html.mov .md-titulo { font-size: 1.3rem; margin: 0 0 6px; }
  html.mov .md-sete { margin: 0 0 10px; gap: 12px; font-size: .84rem; }
  html.mov .md-sete b { font-size: 2.9rem; }
  html.mov .md-sete strong { font-size: .98rem; }
  html.mov .md-sete span { line-height: 1.35; }
  html.mov .md-passos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 6px 0 0; padding-bottom: 96px; position: relative; }
  html.mov .md-passo { position: static; height: 3px; padding: 0; border: 0; border-radius: 2px; background: rgb(255 255 255 / .22); opacity: 1; }
  html.mov .md-passo.is-agora { background: var(--degrade); }
  html.mov .md-passo::before, html.mov .md-passo::after, html.mov .md-passo.is-agora::before, html.mov .md-passo.is-agora::after { display: none; }
  html.mov .md-passo h3, html.mov .md-passo p:not(.md-n) { display: none; }
  html.mov .md-passo.is-agora h3 { display: block; position: absolute; left: 0; top: 14px; font-size: 1rem; }
  html.mov .md-passo.is-agora p:not(.md-n) { display: block; position: absolute; left: 0; right: 0; top: 38px; max-height: none; font-size: .84rem; line-height: 1.42; margin: 0; }
  html.mov .md-contador { display: none; }
  html.mov .md-apps li { font-size: .74rem; padding: 6px 9px 6px 6px; gap: 6px; }
  html.mov .md-apps .mc, html.mov .md-ico { width: 18px; height: 18px; min-width: 18px; }

  /* sob medida com movimento: título no alto, o par antes/depois no meio, o caso embaixo */
  html.mov .sm { padding: 0 20px 56px; }
  html.mov .sm-palco { margin: 0 -20px; }
  html.mov .sm-cabeca { left: 20px; right: 20px; top: calc(var(--cab) + 10px); }
  html.mov .sm-cabeca > .rotulo { display: none; }
  html.mov .sm-titulo { font-size: 1.3rem; margin: 0; }
  html.mov .sm-par { left: 20px; right: 20px; width: auto; top: calc(var(--cab) + 78px); bottom: 300px; }
  html.mov .sm-antes { height: 92%; top: 0; }
  html.mov .sm-depois--tela { width: 86%; top: 30%; }
  html.mov .sm-depois--cel { right: 6%; top: 2%; height: 98%; }
  html.mov .sm-pose { height: 40%; right: -6%; bottom: -8%; }
  html.mov .sm-caso__texto { left: 20px; right: 20px; top: auto; bottom: 46px; transform: none; }
  html.mov .sm-caso h3 { font-size: 1.15rem; margin: 6px 0 8px; }
  html.mov .sm-caso dl { gap: 6px; }
  html.mov .sm-caso dt:first-of-type, html.mov .sm-caso dt:first-of-type + dd { display: none; }
  html.mov .sm-caso dd { font-size: .88rem; line-height: 1.42; margin-top: 2px; }
  html.mov .sm-trilha { left: 20px; right: 20px; width: auto; bottom: 30px; }

  /* apps com movimento: o buldogue fica preso no alto; os passos passam por baixo */
  html.mov .ap-figura { top: var(--cab); height: 50svh; z-index: 2; background: linear-gradient(180deg, var(--fundo) 0%, var(--fundo) 84%, rgb(14 7 32 / 0) 100%); padding-top: 8px; }
  html.mov .ap-masc { height: calc(100% - 26px); }
  html.mov .ap-legenda { font-size: .72rem; margin-top: 4px; }
  html.mov .ap-passos li { min-height: 40vh; padding: 20px 0; opacity: .5; }
  .ap-passos h3 { font-size: 1.3rem; }

  /* plataforma com movimento: a tela presa no alto; os recursos passam por baixo */
  html.mov .pf-grade { grid-template-areas: "fig" "texto"; }
  html.mov .pf-figura { top: var(--cab); height: auto; z-index: 2; padding: 10px 0 14px; background: linear-gradient(180deg, var(--fundo-2) 0%, var(--fundo-2) 86%, rgb(23 12 51 / 0) 100%); }
  html.mov .pf-texto { margin-top: -8px; }
  html.mov .pf-cabeca { display: none; }
  html.mov .pf-pose { height: 54%; right: -2%; bottom: 14%; }
  html.mov .pf-legenda { font-size: .72rem; margin-top: 6px; }
  html.mov .pf-itens { margin-top: 0; }
  html.mov .pf-itens li { min-height: 40vh; padding: 20px 0; opacity: .5; }
  .pf-itens h3 { font-size: 1.28rem; }
}