/* Visual da trial nas paginas de servico (Implantamos), 22/10/2026.

   Base unica de todas as paginas de servico no modelo da /implantacao-crm:
   pagina escura como a /hub-trial, com a Na pratica e o Como funciona como
   ilhas claras (.svc-ilha), rotulos em pilula de vidro, cards de vidro e os
   capitulos de video real do Hub (o componente th-cap da trial, tocado pelo
   /site/servicos/trial.js). A pagina carrega, nesta ordem:
   /site/criacao-de-sites/lp.css, /site/lp-hub/lp.css, /site/lp-gestao/trial.css,
   /site/hub-trial/lp.css e este arquivo, e embrulha o conteudo em
   <div class="cs svc-trial">. O que for so de uma pagina fica num <style>
   dela, depois deste link.

   Parte 1: as regras de pagina (vinham do <style> da /implantacao-crm).
   Parte 2: o tema e os ajustes (vinham do /site/implantacao-crm/lp.css). */

.cs.svc-trial{background:#04081F;color:var(--white)}
/* Cor da area (refino de 25/10/2026, issue #765): o destaque segue a area
   do projeto (marca/direcao-de-arte, principio 4), lida do data-area dos
   capitulos da Na pratica. Receita guarda os valores da /implantacao-crm.
   --svc-area: traco e icone; --svc-tx: texto e icone sobre o escuro;
   --svc-ink: texto sobre a ilha clara (62% da area + preto quando o tom
   puro nao passa de 4,5:1; receita escurece um tom); --svc-on: icone sobre a area solida;
   --svc-campo: o topo do degrade do card 01 e do formato em destaque,
   navy em todas as areas (a cor da area e traco, nunca campo; o laranja
   misturado ao navy virava marrom, 25/10/2026). */
.svc-trial{--svc-area:#3972fd;--svc-tx:#93b3ff;--svc-ink:#2F62E8;--svc-on:#fff;--svc-campo:#16306e}
.svc-trial:has([data-area="operacao"]){--svc-area:#FA9800;--svc-tx:#FFC266;--svc-ink:color-mix(in srgb,#FA9800 62%,#000);--svc-on:#04081F}
.svc-trial:has([data-area="tecnologia"]){--svc-area:#A364FF;--svc-tx:#C9A6FF;--svc-ink:#8A45F0;--svc-on:#fff}
.svc-trial:has([data-area="backoffice"]){--svc-area:#5BC0BE;--svc-tx:#8FE3E0;--svc-ink:color-mix(in srgb,#5BC0BE 62%,#000);--svc-on:#04081F}
.svc-trial:has([data-area="pessoas"]){--svc-area:#FA3D85;--svc-tx:#FF8FB8;--svc-ink:#D81B66;--svc-on:#fff}
.svc-trial #main{margin:12px;border-radius:30px;background:linear-gradient(145deg,#04081F,#102D3A);color:var(--white);--bg:#102D3A}
.svc-trial #problema{border-top:0}
/* Respiro de secao (refino de 25/10/2026): a base cs- usava 128px em cima e
   embaixo, 256px entre duas secoes. Fica na escala do acabamento (88px no
   desktop, 56px no celular), como o Hub escuro. */
.svc-trial .cs-pad{padding-block:clamp(56px,6.2vw,88px)}
.svc-trial #diferencial .cs-glow{display:none}
.svc-trial #na-pratica{--muted:var(--v3-mut);--line:rgba(11,13,24,.1)}
.svc-trial #na-pratica .cs-caso figcaption b{color:var(--v3-ink)}
.svc-trial #na-pratica :is(.cs-caso-v,.cs-prova-v){box-shadow:var(--v3-hair),0 20px 45px -30px #0b132b40}
.svc-trial #na-pratica .cs-prova-bar{background:#eef1f5}
.svc-trial #na-pratica .cs-prova-bar i{background:#c3ccd9}
.svc-trial #na-pratica .cs-prova-bar span{font-size:14px}
.svc-trial #na-pratica .cs-ad-como{color:var(--v3-mut)}
.svc-trial #na-pratica .cs-ad-depois small{color:var(--v3-teal-ink);font-size:14px}
.svc-trial #diferencial{margin:12px;border-radius:30px;background:linear-gradient(145deg,#04081F,#102D3A);color:var(--white);--muted:#bcc9dc}
.svc-trial #contato{background:linear-gradient(145deg,#123c42,#287d7b);color:var(--white)}
.svc-trial #contato .cs-aurora{display:none}
.svc-trial #contato :is(.cs-label,.cs-t2,.cs-lede){color:#d4efed}
.svc-trial #contato .cs-form{padding:32px;border-radius:24px;background:#f4fbfa;box-shadow:0 24px 60px -35px #08282066}
.svc-trial #contato .cs-form label{color:#142039}
.svc-trial #contato .cs-form :is(input,select){background:#fff;color:#142039;box-shadow:inset 0 0 0 1px #c6d9d7;color-scheme:light}
.svc-trial #contato .cs-form :is(input,select):focus{box-shadow:inset 0 0 0 2px #287d7b}
.svc-trial #contato .cs-form input::placeholder{color:#647184}
.svc-trial #contato .cs-consent a{color:#287d7b}
.svc-trial #contato .cs-form .cs-btn{background:#11294b;color:#fff;box-shadow:none}
.svc-trial #contato .cs-form-ok{color:#942e2e}
@media(max-width:560px){.svc-trial #main,.svc-trial #diferencial{margin:8px;border-radius:24px}.svc-trial #contato .cs-form{padding:24px}}
#contato.cs-final h2{font-size:clamp(30px,3.3vw,46px);line-height:1.15;text-wrap:balance}
#contato .cs-form{row-gap:20px}
#contato .cs-form label{gap:10px}
#contato .cs-consent{margin-block:12px;line-height:1.7}
#contato .cs-consent a{display:block;margin-top:8px;width:fit-content}
#contato .cs-form .cs-btn{margin-top:12px}
#pacotes .cs-center>.cs-h2 .cs-t2{display:block}
.svc-trial :is(#entrega,#como-funciona,#diferencial,#pacotes) .cs-h2.svc-titulo-duas-linhas>.cs-t2{display:block}
#problema .cs-prob-head{display:block;text-align:center}
#problema .cs-h2{max-width:26ch;margin-inline:auto;text-wrap:balance}
#problema .cs-prob-head .cs-lede{max-width:68ch;margin:24px auto 0;font-size:18px;line-height:1.6;text-wrap:pretty}
#problema .cs-pains{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:40px}
#problema .cs-pain{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:20px;align-content:center;padding:28px 32px}
#problema .cs-n{grid-row:1/3;display:grid;place-items:center;align-self:center;width:48px;height:48px;border-radius:14px;background:color-mix(in srgb,var(--svc-area) 10%,transparent);color:var(--svc-tx);font-size:16px}
#problema .cs-pain h3{margin:0 0 8px;font-size:22px;text-wrap:balance}
#problema .cs-pain p{font-size:16px;line-height:1.55;text-wrap:pretty}
/* Problema em duas colunas: argumento à esquerda e cards à direita. */
.svc-trial #problema.svc-problema-split .cs-wrap{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:clamp(32px,4vw,64px);align-items:center}
.svc-trial #problema.svc-problema-split .cs-prob-head{text-align:left;min-width:0}
.svc-trial #problema.svc-problema-split .cs-h2{margin-inline:0;font-size:clamp(32px,3.2vw,48px);text-align:left;text-wrap:pretty}
.svc-trial #problema.svc-problema-split .cs-prob-head .cs-lede{margin-inline:0;text-align:left}
.svc-trial #problema.svc-problema-split .cs-pains{margin-top:0;min-width:0}
.svc-trial #problema.svc-problema-split .cs-pain{grid-template-columns:36px minmax(0,1fr);column-gap:14px;padding:28px;min-height:190px}
.svc-trial #problema.svc-problema-split .cs-n{width:36px;height:36px;border-radius:12px;font-size:14px}
.svc-trial #problema.svc-problema-split .cs-pain h3{font-size:20px;text-align:left}
.svc-trial #problema.svc-problema-split .cs-pain p{text-align:left}
@media(max-width:1000px){.svc-trial #problema.svc-problema-split .cs-wrap{grid-template-columns:minmax(0,1fr);gap:32px}}
@media(max-width:700px){#problema .cs-pains{grid-template-columns:1fr}#problema .cs-pain{padding:24px;column-gap:16px}#problema .cs-pain h3{font-size:20px}}
#faq{scroll-margin-top:140px}
#faq .cs-faq-grid{grid-template-columns:1fr;gap:40px;max-width:900px}
#faq .cs-faq-grid>div:first-child{text-align:center}
#faq .cs-faq-grid .cs-h2{text-wrap:balance;margin-inline:auto}
#entrega .cs-center>.cs-h2{font-size:clamp(28px,3.1vw,44px);text-wrap:balance}
#entrega .cs-center>.cs-h2 .cs-t2{display:block}
#entrega .cs-feats{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;background:transparent;box-shadow:none;overflow:visible}
#entrega .cs-feat{border:0;border-radius:24px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);padding:28px;transition:transform .3s,box-shadow .3s;overflow:hidden}
#entrega .cs-feat::after{display:none}
#entrega .cs-feat::before{display:none}
#entrega .cs-feat:hover{transform:translateY(-5px);box-shadow:0 16px 36px -20px color-mix(in srgb,var(--svc-area) 33%,transparent),inset 0 0 0 1px rgba(255,255,255,.16)}
#entrega .cs-feat:first-child{grid-column:span 2;grid-row:span 2;background:linear-gradient(150deg,var(--svc-campo),#0b1736);color:#fff;display:flex;flex-direction:column}
#entrega .cs-feat:first-child p{color:#c5cde0;max-width:34ch}
#entrega .cs-feat:first-child h3{font-size:30px;max-width:18ch}
#entrega .cs-feat:first-child .cs-ic{background:var(--svc-area);color:var(--svc-on)}
#entrega .cs-feat:last-child{grid-column:span 2;background:rgba(91,192,190,.08)}
#entrega .cs-feat h3{text-wrap:balance}
#entrega .cs-feat p{text-wrap:balance}
/* A demonstracao do card "Funil com o seu processo" (22/10): a tela real
   do quadro de Oportunidades do CRM, recortada nas etapas Entrada e
   Cadencia (quadro do guia da Central, com os dados ficticios de la). Fica
   numa moldura de janela e some num degrade embaixo, como quem continua. */
.svc-tela-real{margin-top:auto;padding-top:32px}
.svc-tela-real img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 24px 50px -24px #000a,0 0 0 1px #ffffff1f;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
/* .is-inteira: a captura e uma tela que acaba (ex.: as Sessoes do WhatsApp),
   entao aparece inteira, sem o degrade de quem continua */
.svc-tela-real.is-inteira img{-webkit-mask-image:none;mask-image:none}
@media(max-width:1000px){#entrega .cs-feats{grid-template-columns:repeat(2,minmax(0,1fr))}#entrega .cs-feat:first-child{grid-row:auto}.svc-tela-real{padding-top:24px}}
@media(max-width:560px){#entrega .cs-feats{grid-template-columns:1fr}#entrega .cs-feat:first-child,#entrega .cs-feat:last-child{grid-column:auto}#entrega .cs-feat{padding:26px}}
@media(prefers-reduced-motion:reduce){#entrega .cs-feat{transition:none}}

/* ---- parte 2 ---- */
/* Adaptação da implantação aos componentes canônicos da hub-trial. */
.svc-trial{--v3-bg:var(--light-bg);--v3-ink:var(--light-tx);--v3-mut:var(--light-tx2);--v3-t2:var(--light-mut)}
.svc-trial #main.cs-hero{margin:0;border-radius:0;background:var(--bg);--bg:#04081F;padding-top:150px}
/* A copy da hero usa as classes da hero da /hub-trial (selo, h1.th-h1 em duas
   frases, .sub e .hero-cta) e herda o CSS dela. Aqui so o que a trial nao
   cobre: a segunda frase do titulo em negrito; o subtitulo, que na trial e
   uma linha curta (nowrap) e aqui e um paragrafo, quebrando como o da
   /lp-gestao-com-ia-trial; e a tela, que preenche a moldura da trial
   (1400/760) seja qual for a proporcao da captura, presa no canto de cima
   a esquerda, onde ficam o menu e o comeco da tela. */
.svc-trial #main h1.th-h1 .cs-t2{display:inline-block;color:#fff;font-weight:600}
/* O termo de busca mora dentro do h1 (SEO, 22/10): o selo e o primeiro
   filho do titulo e mantem a medida do selo da trial (altura e os 40px ate
   o texto, 30px no celular) */
.svc-trial #main h1.th-h1{margin-top:0}
.svc-trial #main h1.th-h1 .th-selo{margin:0 auto 40px;line-height:1.55;justify-content:center;text-align:center}
@media(max-width:640px){.svc-trial #main h1.th-h1 .th-selo{margin-bottom:30px}}
.svc-trial #main .sub{max-width:620px;white-space:normal;text-wrap:balance}
.svc-trial #main .th-tela-hero img{height:100%;object-fit:cover;object-position:left top}
/* O reset do criacao-de-sites (.cs *: margem e recheio zero) apagava o que o
   site.css da a hero da trial: o .hero-in centrado, o respiro acima dos
   botoes e o recheio deles. Volta com o mesmo peso das regras do site.css
   (o :where nao conta), entao as regras de celular da trial seguem valendo. */
:where(.svc-trial) .hero-in{margin:0 auto;padding:0 24px}
:where(.svc-trial) .hero-cta{margin-top:52px}
:where(.svc-trial) .hero-cta .btn{padding:13px 26px}
@media(max-width:640px){
  :where(.svc-trial) .hero-cta{margin-top:34px}
  :where(.svc-trial) .hero-cta .btn{padding:13px 15px}
}
/* o texto de apoio do Diferencial em duas linhas */
.svc-trial #diferencial .cs-center>.cs-lede{max-width:760px;text-wrap:balance}
.svc-trial #main .th-tela-hero video{display:block;width:100%;height:auto;border-radius:16px}
.svc-trial #main .th-tela-hero.in ~ .th-flut{opacity:1;animation:thFlut 7s ease-in-out var(--ff) infinite}
@media(prefers-reduced-motion:reduce){.svc-trial #main .th-tela-hero.in ~ .th-flut{animation:none}}
.svc-trial .cs-light{background:var(--light-bg)}
.svc-trial .cs-h2{font-weight:400;letter-spacing:-.035em}
.svc-trial .cs-h2 .cs-t2{font-weight:600;color:var(--light-tx)}
.svc-trial .cs-lede{color:var(--light-tx2)}
.svc-trial #diferencial{margin:0;border-radius:0;background:#04081F}
.svc-trial #diferencial .cs-h2 .cs-t2{color:#fff}
.svc-trial #diferencial .cs-lede{color:#c9d4e8}
/* o icone do WhatsApp sai sempre no verde padrao do WhatsApp (pedido da autora, 22/10) */
.svc-trial .svc-whatsapp-icon{display:block;width:40px;height:40px;background:#25D366;mask:url('/site/icons/whatsapp.svg') center/contain no-repeat;-webkit-mask:url('/site/icons/whatsapp.svg') center/contain no-repeat}
.svc-trial #contato{background:#050923}
.svc-trial #contato .cs-form{background:#fff}
.svc-trial #contato .cs-form .cs-btn{background:linear-gradient(180deg,#4a7dff,#3567f0);color:#fff}
.svc-trial #contato .cs-consent a{color:#2557d6}
.svc-trial #na-pratica .svc-cap{margin-top:72px}
.svc-trial #na-pratica .th-cap-tx{min-width:0}
.svc-trial #na-pratica .th-cap-tx>p{font-size:18px}
.svc-trial #na-pratica .gestao-kicker{font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--box-c) 72%,#000)}
.svc-trial #na-pratica .th-cap h3{font-size:clamp(28px,2.5vw,36px);font-weight:400}
.svc-trial #na-pratica .th-passo-d>span{font-size:16px;line-height:1.65}
.svc-trial #na-pratica .th-cap-tela{align-self:center;padding:6% 6% 0;min-width:0}
.svc-trial #na-pratica .th-tela{position:relative;overflow:hidden;aspect-ratio:16/10;background:#fff}
.svc-trial #na-pratica .th-tela video{width:100%;height:100%;object-fit:contain;display:block}
.svc-trial #na-pratica .cs-np-nota{font-size:14px;margin-top:40px;color:var(--light-mut)}
@media(max-width:600px){
  .svc-trial #main.cs-hero{margin:0;border-radius:0;padding-top:120px}
  .svc-trial #na-pratica .svc-cap{margin-top:48px}
  .svc-trial #na-pratica .th-cap-tela{margin-top:24px}
}

/* Tema da trial no resto da pagina (22/10, pedido da autora). A pagina fica
   azul-marinho como a /hub-trial e a Na pratica vira a ilha clara (o #hub da
   trial), arredondada e com margem. As outras secoes perderam o cs-light e
   voltaram ao escuro que o CSS base (criacao-de-sites) ja tem; aqui so entra
   o que o base nao cobre. Rotulo: a pilula de vidro da trial (.th-pill), e na
   ilha a mesma pilula em branco. Titulo claro (#E8ECF8) com a segunda parte em
   600, lede em #7E84A6. Formatos, linha do tempo e FAQ tinham so a versao
   clara: viram vidro escuro com fio fino, e o FAQ fica como o da trial. */
.svc-trial #na-pratica.svc-ilha{margin:0 clamp(12px,2vw,24px);border-radius:40px;background:#FBFCFF}
.svc-trial section:not(.svc-ilha) .cs-label{display:inline-flex;align-items:center;padding:9px 16px;border-radius:100px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);box-shadow:0 10px 28px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.16);color:#fff;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none}
.svc-trial .svc-ilha .cs-label{display:inline-flex;align-items:center;padding:9px 16px;border-radius:100px;background:#fff;border:1px solid rgba(20,27,51,.12);box-shadow:0 10px 24px -16px rgba(20,27,51,.35);color:#141B33;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none}
.svc-trial section:not(.svc-ilha) :is(.cs-h2,h2){color:#E8ECF8;font-weight:400;letter-spacing:-.035em}
.svc-trial section:not(.svc-ilha) :is(.cs-h2,h2) .cs-t2{color:#E8ECF8;font-weight:600}
.svc-trial section:not(.svc-ilha) .cs-lede{color:#7E84A6}
.svc-trial #problema .cs-pain h3,.svc-trial #entrega .cs-feat h3{color:#E8ECF8}
.svc-trial #problema .cs-pain p,.svc-trial #entrega .cs-feat p{color:#9AA3C2}
.svc-trial #entrega .cs-feat .cs-ic{background:color-mix(in srgb,var(--svc-area) 16%,transparent);color:var(--svc-tx)}
.svc-trial #entrega .cs-feat.cs-hl .cs-ic{background:rgba(91,192,190,.16);color:#8edbd7}
.svc-trial #como-funciona .cs-wrap{text-align:center}
.svc-trial #como-funciona .cs-timeline{text-align:left}
.svc-trial #como-funciona .cs-tl .cs-day{color:var(--svc-ink)}
/* Formatos e Duvidas viram ilhas claras (refino de 25/10/2026, pedido da
   autora: depois do Como funciona a pagina ficava toda escura). O ritmo passa
   a alternar escuro e claro ate o Contato. O card destacado segue navy, o
   ponto escuro da ilha. */
.svc-trial .svc-ilha{margin:0 clamp(12px,2vw,24px);border-radius:40px;background:#FBFCFF}
@media(max-width:600px){.svc-trial .svc-ilha{margin-inline:8px;border-radius:28px}}
.svc-trial #pacotes .cs-plan{background:#fff;box-shadow:0 0 0 1px rgba(16,24,40,.07),0 26px 50px -36px rgba(4,8,31,.4);color:#141B33}
.svc-trial #pacotes .cs-plan :is(.cs-for,.terms){color:#5B6478}
.svc-trial #pacotes .cs-plan ul{border-color:rgba(16,24,40,.08)}
.svc-trial #pacotes .cs-plan li svg{color:var(--svc-ink)}
.svc-trial #pacotes .cs-plan .cs-tag{background:color-mix(in srgb,var(--svc-area) 12%,#fff);color:var(--svc-ink)}
.svc-trial #pacotes .cs-plan.cs-feat-plan{background:linear-gradient(160deg,var(--svc-campo),#0b1736);color:#F9F9F9;box-shadow:0 30px 60px -30px rgba(4,8,31,.55)}
.svc-trial #pacotes .cs-plan.cs-feat-plan :is(.cs-for,.terms){color:#AEB6CF}
.svc-trial #pacotes .cs-plan.cs-feat-plan ul{border-color:rgba(255,255,255,.1)}
.svc-trial #pacotes .cs-plan.cs-feat-plan li svg{color:var(--svc-tx)}
.svc-trial #pacotes .cs-plan.cs-feat-plan .cs-tag{background:color-mix(in srgb,var(--svc-area) 18%,transparent);color:var(--svc-tx)}
.svc-trial #pacotes .cs-btn-ink{background:#04081F;color:#fff}
.svc-trial #pacotes .cs-feat-plan .cs-btn-ink{background:#fff;color:#0b132b}
/* sem o filete no degrade do Hub em cima do card destacado (gradiente so em
   elemento de marca, nunca como enfeite de card; pedido da autora, 25/10) */
.svc-trial #pacotes .cs-plan.cs-feat-plan::before{display:none}
/* Formatos (22/10): a etiqueta sobe para cima do titulo, como rotulo, e o
   titulo ganha a largura toda. Os tres cards dividem as linhas (subgrid):
   titulo, texto de apoio, lista e botao comecam na mesma altura nos tres,
   com titulo de uma ou de duas linhas. */
.svc-trial #pacotes .cs-plan{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
.svc-trial #pacotes .cs-plan .cs-top{flex-direction:column-reverse;align-items:flex-start;justify-content:flex-end;gap:16px}
.svc-trial #pacotes .cs-plan h3{font-size:20px;line-height:1.25;text-wrap:balance}
.svc-trial #pacotes .cs-plan .cs-for{min-height:0;margin-top:8px;font-size:15px;line-height:1.5}
/* a lista do card mais curto ocupa a mesma linha que a maior: os itens ficam
   no topo, com o espacamento normal, em vez de se esticarem para preencher */
.svc-trial #pacotes .cs-plan ul{align-content:start}
/* Refino de 25/10/2026 (issue #765): titulo de card em 500, como manda o
   acabamento (o 600 da base cs- e legado), e itens curtos sem palavra
   sozinha na ultima linha. */
.svc-trial :is(#entrega .cs-feat,#como-funciona .cs-tl,#diferencial .cs-step,#pacotes .cs-plan) h3{font-weight:500}
.svc-trial #pacotes .cs-plan li{text-wrap:balance}
.svc-trial #na-pratica .th-passo-d span,.svc-trial #como-funciona .cs-tl p{text-wrap:balance}
.svc-trial #faq .cs-faq{border-top-color:rgba(16,24,40,.1)}
.svc-trial #faq .cs-faq details{border-bottom-color:rgba(16,24,40,.1)}
.svc-trial #faq .cs-faq summary{color:#141B33;font-weight:500;text-wrap:balance}
.svc-trial #faq .cs-faq summary i{box-shadow:inset 0 0 0 1px rgba(16,24,40,.2);color:#141B33}
.svc-trial #faq .cs-faq details[open] summary i{background:#141B33;color:#fff}
.svc-trial #faq .cs-faq details p{color:#454D6B}
@media(max-width:600px){.svc-trial #na-pratica.svc-ilha{margin:0 8px;border-radius:28px}}
/* a linha do fluxo do Diferencial: branca e com 1px, no lugar do degradê de 2px */

/* A hero termina como a da trial (22/10): a tela ganha respiro embaixo e o
   brilho do fundo se apaga no pe, sem a linha reta onde a secao acaba. */
.svc-trial #main .hero-stage.th-live{padding-bottom:clamp(48px,6vw,88px)}
/* "O problema" sobe para perto da hero (pedido da autora): menos respiro em cima */
.svc-trial #problema.cs-pad{padding-top:clamp(16px,2.5vw,40px)}
/* o brilho azul da moldura da tela nao e cortado no fim da secao (era a
   barra reta): a hero so recorta na horizontal e o brilho se apaga sozinho */
.svc-trial #main.cs-hero{overflow-x:clip;overflow-y:visible}
.svc-trial #main.cs-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(140px,16vw,240px);background:linear-gradient(180deg,rgba(4,8,31,0),#04081F 85%);pointer-events:none}

/* A hero dentro do painel (refino de 25/10/2026, pedido da autora): o painel
   teal-navy arredondado da familia, recuado 12px da borda, e a tela do Hub
   encostada no pe dele, cortada pela borda, sem esmaecer (o mesmo encaixe da
   secao Marvin da /hub-trial, .th-mvp). Substitui o esmaecido de baixo para
   cima e o brilho que vazava para a dobra seguinte. */
.svc-trial #main.cs-hero{margin:12px;border-radius:clamp(22px,2.2vw,30px);overflow:hidden;padding-bottom:0;
  background:radial-gradient(70% 60% at 85% 100%,rgba(57,114,253,.22),transparent 70%),linear-gradient(145deg,#04081F,#102D3A);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.svc-trial #main.cs-hero::after{display:none}
.svc-trial #main .hero-stage.th-live{padding-bottom:0}
.svc-trial #main .th-cena{margin-bottom:calc(-1 * clamp(40px,7vw,120px))}
.svc-trial #main .th-tela-hero{-webkit-mask-image:none;mask-image:none;border-radius:24px 24px 0 0;border-bottom:0;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.75)}
/* os cartoes ficam acima da faixa que a borda corta */
.svc-trial #main .th-flut-3{top:58%;bottom:auto}
@media(max-width:760px){
  .svc-trial #main .th-cena{margin-bottom:-24px}
  .svc-trial #main .th-tela-hero{-webkit-mask-image:none;mask-image:none}
  .svc-trial #main .th-flut-3{top:auto;bottom:88px}
  .svc-trial #main .th-flut-4{bottom:40px}
}
@media(max-width:560px){.svc-trial #main.cs-hero{margin:8px}}

/* Como funciona (refino de 25/10/2026, pedido da autora: os numeros 01 a 04
   empilhados nao existiam em outra pagina). Vira a linha do tempo vertical do
   metodo da /scale-ai (.method-timeline): cabecalho empilhado e centralizado,
   uma linha no meio e as etapas alternando de lado em cards claros, cada uma
   com o ponto na cor da area sobre a linha. No celular a linha vai para a
   esquerda e todos os cards ficam do lado direito. */
.svc-trial #como-funciona .cs-wrap{display:block;text-align:center}
.svc-trial #como-funciona .cs-h2{margin-inline:auto;max-width:22ch;text-wrap:balance}
.svc-trial #como-funciona .cs-timeline{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:72px;row-gap:0;grid-auto-rows:auto;max-width:940px;margin:clamp(36px,4vw,56px) auto 0;text-align:left}
.svc-trial #como-funciona .cs-timeline::before{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:2px;transform:translateX(-50%);border-radius:2px;background:color-mix(in srgb,var(--svc-area) 22%,#e3e8f2)}
.svc-trial #como-funciona .cs-tl{position:relative;grid-column:1;padding:22px 24px;border:0;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(16,24,40,.07),0 26px 50px -36px rgba(4,8,31,.35);transition:transform .3s var(--v3-ease,ease),box-shadow .3s var(--v3-ease,ease)}
.svc-trial #como-funciona .cs-tl:nth-child(even){grid-column:2}
.svc-trial #como-funciona .cs-tl:nth-child(2){grid-row:2}.svc-trial #como-funciona .cs-tl:nth-child(3){grid-row:3}.svc-trial #como-funciona .cs-tl:nth-child(4){grid-row:4}
.svc-trial #como-funciona .cs-tl:nth-child(n+2){margin-top:-28px}
.svc-trial #como-funciona .cs-tl:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(16,24,40,.07),0 12px 32px -18px rgba(11,13,24,.18)}
.svc-trial #como-funciona .cs-tl::before{content:"";position:absolute;top:28px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--svc-area);box-shadow:0 0 0 5px color-mix(in srgb,var(--svc-area) 14%,transparent);transition:none}
.svc-trial #como-funciona .cs-tl:nth-child(odd)::before{left:auto;right:-43px}
.svc-trial #como-funciona .cs-tl:nth-child(even)::before{left:-43px;right:auto}
.svc-trial #como-funciona .cs-tl::after{content:none}
.svc-trial #como-funciona .cs-tl .cs-day{display:inline-flex;padding:4px 11px;border-radius:99px;background:color-mix(in srgb,var(--svc-area) 11%,#fff);color:var(--svc-ink);font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none}
.svc-trial #como-funciona .cs-tl h3{margin:12px 0 6px;font-size:20px;line-height:1.25}
.svc-trial #como-funciona .cs-tl p{max-width:none;font-size:15.5px;line-height:1.55;color:#5B6478}
@media(max-width:760px){
  .svc-trial #como-funciona .cs-timeline{grid-template-columns:1fr;row-gap:16px;padding-left:36px}
  .svc-trial #como-funciona .cs-timeline::before{left:9px;transform:none}
  .svc-trial #como-funciona .cs-tl,.svc-trial #como-funciona .cs-tl:nth-child(n){grid-column:1;grid-row:auto;margin-top:0}
  .svc-trial #como-funciona .cs-tl:nth-child(n)::before{left:-34px;right:auto;top:26px}
}

/* O que so a Marvee entrega (refino de 25/10/2026, segunda rodada: os
   quatro cards de vidro ligados por fio ficaram genericos e foram
   reprovados). Vira a grade so com divisores da arquitetura da /hub (.wgrid)
   dentro de um painel de vidro unico: quatro colunas com o texto a esquerda,
   sem moldura entre elas e sem linha ligando. A ordem aparece na barra de
   progresso em segmentos do topo (a das pilulas do Marvin da /hub-trial),
   que acende uma etapa por vez quando a dobra entra. O Marvin, o ultimo,
   ganha o fundo na cor da area. A secao segue no painel teal-navy recuado. */
.svc-trial #diferencial{margin:0 12px;border-radius:clamp(22px,2.2vw,30px);background:linear-gradient(145deg,#04081F,#102D3A);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.svc-trial #diferencial .cs-track,.svc-trial #diferencial .cs-pulse{display:none}
.svc-trial #diferencial .cs-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;max-width:1180px;margin:clamp(40px,4.5vw,64px) auto 0;border-radius:24px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.08),0 30px 70px -40px rgba(0,0,0,.8)}
.svc-trial #diferencial .cs-step{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(48px,4.4vw,60px) clamp(22px,2.4vw,34px) clamp(28px,2.6vw,36px);text-align:left;background:none;border:0;border-radius:0;box-shadow:none;transform:none}
.svc-trial #diferencial .cs-step:not(:last-child){border-right:1px solid rgba(255,255,255,.08)}
.svc-trial #diferencial .cs-step:last-child{background:linear-gradient(180deg,color-mix(in srgb,var(--svc-area) 12%,transparent),transparent 75%)}
/* a barra: trilho fixo e o segmento na cor da area, que enche da esquerda */
.svc-trial #diferencial .cs-step::before,.svc-trial #diferencial .cs-step::after{content:"";position:absolute;left:clamp(22px,2.4vw,34px);right:clamp(22px,2.4vw,34px);top:clamp(18px,1.7vw,24px);width:auto;height:3px;border-radius:2px;background:rgba(255,255,255,.09)}
.svc-trial #diferencial .cs-step::after{background:var(--svc-area);transform-origin:0 50%;transform:scaleX(0);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.svc-trial #diferencial .cs-step.cs-in::after{transform:scaleX(1)}
.svc-trial #diferencial .cs-step:nth-child(3)::after{transition-delay:.35s}
.svc-trial #diferencial .cs-step:nth-child(4)::after{transition-delay:.7s}
.svc-trial #diferencial .cs-step:nth-child(5)::after{transition-delay:1.05s}
.svc-trial #diferencial .cs-step:hover{transform:none}
.svc-trial #diferencial .cs-step .cs-node{width:44px;height:44px;margin:0 0 22px;border-radius:12px;background:color-mix(in srgb,var(--svc-area) 12%,rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.svc-trial #diferencial .cs-step .cs-node img{width:24px;height:24px;border-radius:0;object-fit:contain}
.svc-trial #diferencial .cs-step .cs-node .svc-whatsapp-icon{width:24px;height:24px}
.svc-trial #diferencial .cs-step .cs-node svg{width:22px;height:22px;color:var(--svc-tx)}
.svc-trial #diferencial .cs-step h3{margin:0 0 10px;font-size:19px;line-height:1.25;color:#fff;text-wrap:balance}
.svc-trial #diferencial .cs-step p{max-width:none;margin:0;text-wrap:pretty;font-size:15px;line-height:1.6;color:#AEB6CF}
@media(prefers-reduced-motion:reduce){.svc-trial #diferencial .cs-step::after{transform:scaleX(1);transition:none}}
@media(max-width:900px){
  .svc-trial #diferencial .cs-flow{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px}
  .svc-trial #diferencial .cs-step:nth-child(3){border-right:0}
  .svc-trial #diferencial .cs-step:nth-child(-n+3){border-bottom:1px solid rgba(255,255,255,.08)}
}
@media(max-width:560px){
  .svc-trial #diferencial .cs-flow{grid-template-columns:1fr}
  .svc-trial #diferencial .cs-step:nth-child(n){border-right:0}
  .svc-trial #diferencial .cs-step:not(:last-child){border-bottom:1px solid rgba(255,255,255,.08)}
  .svc-trial #diferencial .cs-step p{max-width:none}
}
@media(max-width:560px){.svc-trial #diferencial{margin-inline:8px}}

/* Contato (22/10, pedido da autora): o texto a esquerda e o formulario a
   direita, alinhados ao meio. No celular volta a uma coluna. */
.svc-trial #contato .cs-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:clamp(40px,6vw,88px);align-items:center;text-align:left}
.svc-trial #contato .cs-wrap>:not(form){grid-column:1}
.svc-trial #contato .cs-label{justify-self:start}
/* o titulo em tres linhas equilibradas (pedido da autora): o negrito segue
   na mesma linha e a medida de 14ch com o balance reparte o texto em tres
   linhas parecidas, sem vao no fim de nenhuma */
.svc-trial #contato.cs-final h2{margin:0;max-width:14ch;font-size:clamp(32px,3.2vw,46px);text-wrap:balance}
.svc-trial #contato.cs-final h2 .cs-t2{display:inline}
.svc-trial #contato .cs-lede{margin:24px 0 0;max-width:42ch}
.svc-trial #contato .cs-form{grid-column:2;grid-row:1 / span 4;margin:0;max-width:none}
@media(max-width:900px){
  .svc-trial #contato .cs-wrap{grid-template-columns:1fr}
  .svc-trial #contato .cs-form{grid-column:1;grid-row:auto;margin-top:36px}
}

/* A ilha clara do fim (22/10, pedidos da autora: depois da Na pratica estava
   tudo escuro, depois duas ilhas coladas pareciam uma secao so, e os
   Formatos voltaram ao escuro). Como funciona e a ilha, inteira e
   arredondada como a caixa de casos da trial, entre a Entrega e o
   Diferencial, que sao escuros. */
.svc-trial #como-funciona.svc-ilha{margin:0 clamp(12px,2vw,24px);border-radius:40px;background:#FBFCFF;box-shadow:none}
@media(max-width:600px){.svc-trial #como-funciona.svc-ilha{margin-inline:8px;border-radius:28px}}

/* Cabecalhos das secoes com mais ar (22/10, pedido da autora no Diferencial,
   aplicado a todas para ficarem iguais): 24px do rotulo ao titulo e do
   titulo ao texto, entrelinha mais solta no titulo e o texto equilibrado.
   O titulo do Diferencial desce para a medida do da Entrega. */
.svc-trial section .cs-label{margin-bottom:24px}
.svc-trial section .cs-h2{line-height:1.15}
.svc-trial section .cs-lede{margin-top:24px;text-wrap:balance}
.svc-trial #diferencial .cs-h2{font-size:clamp(30px,3.1vw,44px);text-wrap:balance}
/* uma frase por linha, como em Formatos e na Entrega: numa linha so o titulo
   ia quase de borda a borda e o bloco perdia o respiro dos lados */
.svc-trial #diferencial .cs-h2 .cs-t2{display:block}
.svc-trial #diferencial .cs-lede{max-width:640px}

/* Celular (22/10, pedido da autora: adaptar para mobile). A pagina ficava
   comprida demais com tudo empilhado. Entrega: o card 01 (com o quadro) e o
   08 em largura cheia, os outros seis em duas colunas compactas, que o texto
   curto permite. Formatos: os tres cards viram um carrossel de arrastar para
   o lado, com o proximo aparecendo na borda. O problema: cards mais
   compactos. */
@media(max-width:560px){
  .svc-trial #entrega .cs-feats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:36px}
  .svc-trial #entrega .cs-feat{padding:18px 16px;border-radius:18px}
  .svc-trial #entrega .cs-feat:first-child,.svc-trial #entrega .cs-feat:last-child{grid-column:1 / -1}
  .svc-trial #entrega .cs-feat:first-child{padding:22px}
  .svc-trial #entrega .cs-feat:first-child h3{font-size:24px}
  .svc-trial #entrega .cs-feat .cs-ic{width:36px;height:36px;margin-bottom:14px;border-radius:10px}
  .svc-trial #entrega .cs-feat .cs-ic svg{width:18px;height:18px}
  .svc-trial #entrega .cs-feat h3{font-size:16px;line-height:1.3;margin-bottom:6px}
  .svc-trial #entrega .cs-feat p{font-size:14px;line-height:1.45}
  .svc-trial #pacotes .cs-plans{display:flex;gap:12px;max-width:none;margin:36px -20px 0;padding:4px 20px 12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:none}
  .svc-trial #pacotes .cs-plans::-webkit-scrollbar{display:none}
  .svc-trial #pacotes .cs-plan{display:flex;flex:0 0 86%;scroll-snap-align:start;padding:26px 22px 24px}
  .svc-trial #problema .cs-pains{gap:10px;margin-top:28px}
  .svc-trial #problema .cs-pain{padding:20px 18px;column-gap:14px;grid-template-columns:40px minmax(0,1fr)}
  .svc-trial #problema .cs-n{width:40px;height:40px;border-radius:12px;font-size:14px}
  .svc-trial #problema .cs-pain h3{font-size:18px;margin-bottom:4px}
  .svc-trial #problema .cs-pain p{font-size:15px}
}

/* Hero de servico sem captura disponivel: somente copy e CTA, sem tela ficticia. */
.svc-trial #main.cs-hero.svc-sem-tela{padding-bottom:clamp(72px,8vw,112px)}
.svc-trial #main.svc-sem-tela::after{display:none}

/* Icones da Entrega (refino de 25/10/2026): objeto, campo e estado usam o
   icone proprio do /icons-system (marca/icones), em dois tons: o traco
   claro e o detalhe na cor da area. O canal (WhatsApp) fica com o icone
   oficial, no verde padrao. */
.svc-trial :is(#entrega .cs-ic,#diferencial .cs-node) .svc-ic-sys{width:22px;height:22px;--icon-base:#E8ECF8;--icon-mark:#E8ECF8;--icon-tint:var(--svc-tx)}
.svc-trial #entrega .cs-ic.cs-ic-canal{background:rgba(37,211,102,.12)}
.svc-trial #entrega .cs-ic .svc-whatsapp-icon{width:22px;height:22px}

/* Titulo numa linha quando cabe (regra da autora, 25/10/2026): a segunda
   frase do titulo de secao nao desce a forca (display:block) e o titulo nao
   e estreitado em ch; a quebra so acontece quando nao cabe, e equilibrada
   (balance). A hero e o Contato, que dividem a linha com outra peca, seguem
   com as medidas proprias. */
.svc-trial :is(#problema,#entrega,#como-funciona,#diferencial,#pacotes,#faq,#especialistas) .cs-h2{max-width:none;text-wrap:balance}
.svc-trial :is(#entrega,#diferencial,#pacotes) .cs-h2 .cs-t2{display:inline}

/* O recorte do card 01 da Entrega (25/10/2026, pedido da autora: o
   esmaecido de baixo para cima foi reprovado). A tela encosta no pe e na
   direita do card e e cortada pelas bordas dele, sem mascara, como a hero
   e os cards com tela da Central de Ajuda. So o canto de cima a esquerda
   fica arredondado. */
#entrega .cs-feat:first-child .svc-tela-real{margin:auto -28px -28px 0;padding-top:32px}
#entrega .cs-feat:first-child .svc-tela-real img{-webkit-mask-image:none;mask-image:none;border-radius:14px 0 0 0;box-shadow:0 24px 50px -24px #000a,0 0 0 1px #ffffff1f}
@media(max-width:1000px){#entrega .cs-feat:first-child .svc-tela-real{padding-top:24px}}

/* Pagina sem a Na pratica (25/10/2026, issues #768, #773, #782, #788): a
   ilha clara passa a ser o Problema, logo depois da hero, e o ritmo segue
   alternando (hero em painel, Problema claro, Entrega escura, Como
   funciona claro, Diferencial em painel...). Cards brancos; o numero da dor
   na tinta da area. Antes a Entrega virava a ilha e encostava no Como
   funciona, tambem claro. */
.svc-trial #problema.svc-ilha{margin-top:clamp(12px,1.6vw,20px)}
.svc-trial #problema.svc-ilha.cs-pad{padding-top:clamp(56px,6.2vw,88px)}
.svc-trial #problema.svc-ilha .cs-pain{background:#fff;box-shadow:0 0 0 1px rgba(16,24,40,.07),0 26px 50px -36px rgba(4,8,31,.35)}
.svc-trial #problema.svc-ilha .cs-pain h3{color:#141B33}
.svc-trial #problema.svc-ilha .cs-pain p{color:#5B6478}
.svc-trial #problema.svc-ilha .cs-n{background:color-mix(in srgb,var(--svc-area) 10%,#fff);color:var(--svc-ink)}
.svc-trial #problema.svc-ilha .cs-lede{color:#5B6478}
/* a barra das telas da Na pratica antiga perde as bolinhas de janela
   (barra de navegador falsa, reprovada); fica so o rotulo dos apps */
.svc-trial .cs-prova-bar i{display:none}
.svc-trial .cs-prova-bar span{margin-left:0}
/* sem recorte de tela no card 01, nenhum card ocupa duas linhas nem duas
   colunas: oito cards iguais em duas fileiras de quatro, sem bloco vazio */
@media(min-width:1001px){.svc-trial #entrega .cs-feats:not(:has(.svc-tela-real)) .cs-feat:is(:first-child,:last-child){grid-column:auto;grid-row:auto}
.svc-trial #entrega .cs-feats:not(:has(.svc-tela-real)) .cs-feat:first-child h3{font-size:19px;max-width:none}}
/* o recorte preenche todo o espaco livre do card 01, seja qual for a
   proporcao da captura: ampliado e preso no canto de cima a esquerda,
   cortado pela direita e por baixo (25/10/2026, issue #769: capturas
   baixas e largas deixavam um vao navy no meio do card) */
@media(min-width:1001px){
  #entrega .cs-feat:first-child .svc-tela-real{position:relative;flex:1 1 auto;min-height:220px;padding-top:0;margin-top:32px}
  #entrega .cs-feat:first-child .svc-tela-real img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top}
}
/* parágrafos curtos de card (uma ou duas linhas) em balance: o pretty do
   navegador não evita a palavra sozinha nesse tamanho (auditoria de
   25/10/2026 nas 24 páginas) */
.svc-trial :is(#diferencial .cs-step p,#problema .cs-pain p,#pacotes .cs-plan .cs-for,#entrega .cs-feat p){text-wrap:balance}