/* ===== Pagina de servico no celular (so telas de ate 720 px; o computador nao usa este arquivo) =====
   Referencia: "Criacao de sites". As outras paginas de servico entram depois da aprovacao. */

/* ---- escala e espacos ---- */
.svc .phero{padding-top:92px;padding-bottom:14px}
.svc .phero .wrap{gap:18px}
.svc .phero h1{font-size:1.9rem;line-height:1.1;margin:14px 0 10px}
.svc .phero .tag{font-size:1.02rem;margin-bottom:8px}
.svc .phero .lede{font-size:1rem}
.svc .phero .ctas{margin-top:16px;gap:10px}
.svc .phero .ctas .btn{min-height:46px;padding:12px 20px}
.svc .crumbs{font-size:.7rem;gap:8px}
.svc .sec{padding-top:30px;padding-bottom:30px}
.svc .sec h2{font-size:26px;line-height:1.2}
.svc .kicker{font-size:13px;letter-spacing:.2em;margin:0 0 12px}
.svc .sh{margin-bottom:14px}
.svc .sh .kicker{margin-bottom:10px}
.svc .sh p:not(.kicker){margin-top:8px}
.svc .lede{margin-top:10px}

/* ilustracao da abertura: mais baixa, mesma proporcao e mesma animacao */
.svc .art{max-width:none;height:172px;padding:9px;border-radius:18px;display:flex;align-items:center;justify-content:center}
.svc .art::before{border-radius:18px}
.svc .art::after{bottom:-14px;height:24px}
.svc .art .scene{width:auto;height:100%;max-width:100%}

/* ---- Como funciona na pratica ---- */
.svc .intro{gap:20px}
.svc .intro .txt p:not(.kicker){margin-top:10px;font-size:.97rem}
.svc .intro .who h3{margin-bottom:12px}
.svc .chips{display:block;gap:0;border-top:1px solid rgba(102,120,159,.3)}
.svc .chips li{display:flex;align-items:flex-start;gap:12px;padding:9px 2px;border:0;border-bottom:1px solid rgba(102,120,159,.3);border-radius:0;background:none;font-size:.93rem;line-height:1.4}
.svc .chips li::before{margin-top:.5em}
.svc .chips li:hover{transform:none;background:none;border-color:rgba(102,120,159,.3)}

/* ---- Beneficios: carrossel manual (um cartao inteiro e um pedaco do proximo) ---- */
.svc .ngrid,.svc .nrows,.svc .nsplit .stack{display:flex;gap:12px;margin:0 calc(-1*max(16px,5vw));padding:2px max(16px,5vw) 4px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 max(16px,5vw);scroll-behavior:smooth;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.svc .ngrid::-webkit-scrollbar,.svc .nrows::-webkit-scrollbar,.svc .nsplit .stack::-webkit-scrollbar{display:none;width:0;height:0}
.svc .ngrid:focus-visible,.svc .nrows:focus-visible,.svc .nsplit .stack:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:14px}
.svc .ngrid>div,.svc .nsplit .stack>div{flex:0 0 80%;min-width:0;scroll-snap-align:start}
.svc .ngrid>.rv,.svc .nsplit .stack>.rv{opacity:1;transform:none;transition:none}
.svc .ngrid .card{padding:16px}
.svc .ngrid .card:hover{transform:none;box-shadow:none}
.svc .ngrid .nic{width:32px;height:32px}
.svc .ngrid .nic *{stroke-dashoffset:0;transition:none}
.svc .ngrid h3{font-size:1.05rem;margin:10px 0 4px}
.svc .ngrid p{font-size:.92rem;line-height:1.5}
.svc-pos{display:block;margin-top:10px;text-align:center;font:400 .8rem/1 var(--mono);letter-spacing:.16em;color:var(--text-secondary)}
.svc-pos span{color:var(--accent)}

/* ---- Entregas: lista vertical numerada ---- */
.svc .bento{display:block;border-top:1px solid rgba(102,120,159,.3)}
.svc .bento .btw,.svc .bento .btw:nth-child(n){display:block;grid-column:auto;grid-row:auto}
.svc .bento .btw .bt{display:flex;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:14px;min-height:0;padding:11px 2px;border:0;border-bottom:1px solid rgba(102,120,159,.3);border-radius:0;background:none;box-shadow:none;font:400 .97rem/1.4 var(--body);color:var(--text-primary)}
.svc .bento .btw .bt:hover{transform:none;box-shadow:none;border-color:rgba(102,120,159,.3)}
.svc .bento .btw .bt .n{flex:none;width:24px;color:var(--accent-muted)}
.svc .bento .btw.rv{transform:none;transition:opacity .45s var(--ease);transition-delay:0s}
.svc .bento .bt::before{display:none}

/* ---- Processo: etapas na vertical, ligadas por uma linha dourada fina ---- */
.svc .tlh{position:relative;gap:0;padding:4px 0 0 30px}
.svc .tlh::before{display:block;content:"";left:9px;right:auto;top:12px;bottom:18px;width:1px;height:auto;background:linear-gradient(180deg,var(--accent),rgba(127,180,255,.45));transform:scaleY(0);transform-origin:top;transition:transform 1.2s var(--ease) .1s}
.svc .tlh.in::before{transform:scaleY(1)}
.svc .tlh .st{overflow:visible;padding:0 0 12px;background:none;border:0;border-radius:0;box-shadow:none;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.svc .tlh.in .st{opacity:1;transform:none;transition-delay:calc(var(--k)*.1s);animation:none}
.svc .tlh.in .st:hover{transform:none}
.svc .tlh .st::before{display:block;content:"";opacity:1;right:auto;bottom:auto;left:-26px;top:5px;width:11px;height:11px;margin:0;border:2px solid var(--accent);border-radius:50%;background:var(--canvas);transform:scale(0);transition:transform .4s var(--ease);transition-delay:calc(var(--k)*.1s + .1s)}
.svc .tlh.in .st::before{transform:scale(1)}
.svc .st h3{font-size:1.1rem;margin-bottom:2px}
.svc .st p{font-size:.94rem;line-height:1.5}
.svc .st .mine{margin-top:6px;padding-top:6px;gap:2px;font-size:.92rem}

/* ---- Escopo e custos: tres paineis que expandem (montados pelo servico-mobile.js) ---- */
.svc .scope{gap:10px}
.svc .sc3{padding:0}
.svc .sc3 h3{position:relative;margin:0;font-size:.8rem}
.svc .sc3 h3::before{position:absolute;left:18px;top:50%;margin-top:-4.5px;z-index:1;pointer-events:none}
.sc3-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:54px;padding:0 16px 0 40px;background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sc3-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:16px}
.sc3-btn i{flex:none;width:9px;height:9px;margin-top:-4px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .32s cubic-bezier(.4,0,.2,1)}
.sc3.open .sc3-btn i{transform:rotate(225deg);margin-top:4px}
.sc3-w{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1)}
.sc3.open .sc3-w{grid-template-rows:1fr}
.sc3-in{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s linear .32s}
.sc3.open .sc3-in{visibility:visible;transition-delay:0s}
.svc .sc3 ul{padding:2px 16px 16px;gap:8px}
.svc .sc3 li{font-size:.95rem}
.svc .scope-note{margin-top:12px;padding:16px 18px}
.svc .scope-note h3{font-size:1.05rem;margin-bottom:6px}

/* ---- Perguntas e chamada final ---- */
.svc .faq-grid{gap:14px}
.svc .qa-q{min-height:48px;padding:12px 2px;gap:12px;font-size:1rem}
.svc .qa-q:hover{transform:none}
.svc .qa-a p{padding:0 2px 16px;font-size:.95rem}
.svc .pcta{padding:22px 18px;gap:14px;border-radius:20px}
.svc .pcta h2{font-size:1.45rem;line-height:1.2}
.svc .pcta p{margin-top:8px;font-size:.97rem}
.svc .pcta .ctas{gap:10px}
.svc .pcta .btn{min-height:46px}
.svc #orcamento{padding-bottom:26px}
.svc .rel{display:none}


/* ===================== variantes de layout das outras paginas de servico ===================== */

/* ---- Para quem faz sentido: lista simples com pontos dourados (em vez de caixas ou numeros) ---- */
.svc .numlist,.svc .qcards{display:block;gap:0;border-top:1px solid rgba(102,120,159,.3)}
.svc .numlist li,.svc .qcards li{display:flex;align-items:flex-start;gap:12px;padding:9px 2px;border:0;border-bottom:1px solid rgba(102,120,159,.3);border-radius:0;background:none;font-size:.93rem;line-height:1.4}
.svc .numlist li::before,.svc .qcards li::before{content:"";flex:none;width:7px;height:7px;margin-top:.5em;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(217,178,106,.6);font:inherit;letter-spacing:0}
.svc .numlist li:hover,.svc .qcards li:hover{padding-left:2px;transform:none;background:none}
.svc .qcards li:last-child:nth-child(odd){grid-column:auto}

/* ---- Beneficios em linhas (carrossel de cartoes compactos) ---- */
.svc .nrows{border-top:0}
.svc .nrow{display:block;flex:0 0 80%;min-width:0;scroll-snap-align:start;padding:16px;border:1px solid rgba(102,120,159,.3);border-radius:16px;background:linear-gradient(160deg,rgba(14,23,48,.92),rgba(14,23,48,.5));opacity:1;transform:none;transition:none}
.svc .nrow:hover{padding-left:16px;transform:none;background:linear-gradient(160deg,rgba(14,23,48,.92),rgba(14,23,48,.5))}
.svc .nrow>b{display:block;margin-bottom:8px}
.svc .nrow p{grid-column:auto}
.svc .nrow h3,.svc .nsplit h3{font-size:1.05rem;margin:0 0 4px}
.svc .nrow p,.svc .nsplit p{font-size:.92rem;line-height:1.5}

/* ---- Beneficios em duas colunas (titulo + cartoes): titulo em cima, cartoes no carrossel ---- */
.svc .nsplit{display:block}
.svc .nsplit .stick{position:static;margin-bottom:14px}
.svc .nsplit .stick .lede{margin-top:8px}
.svc .nsplit .stack{gap:12px}
.svc .nsplit .card{padding:16px;overflow:hidden}
.svc .nsplit .card:hover{transform:none;box-shadow:none}
.svc .nsplit .card::before{opacity:1;background:none;position:static;display:block;left:auto;top:auto;margin-bottom:6px;font-size:1.7rem}
.svc .nsplit .card:hover::before{transform:none}

/* ---- Entregas em itens com marca (checks) e em colunas: lista vertical numerada ---- */
.svc .checks{display:block;gap:0;border-top:1px solid rgba(102,120,159,.3);counter-reset:ck}
.svc .checks .ck{display:flex;align-items:baseline;gap:14px;padding:11px 2px;border-bottom:1px solid rgba(102,120,159,.3);counter-increment:ck;font-size:.97rem;line-height:1.4;transition:opacity .45s var(--ease);transition-delay:0s;transform:none}
.svc .checks .ck:hover{padding-left:2px}
.svc .checks .ck svg{display:none}
.svc .checks .ck::before{content:counter(ck,decimal-leading-zero);flex:none;width:24px;font:400 .74rem/1 var(--mono);letter-spacing:.18em;color:var(--accent-muted)}
.svc .cols{display:block;gap:0;border-top:1px solid rgba(102,120,159,.3);counter-reset:cl}
.svc .cols .col{display:block;padding:0;border:0;opacity:1;transform:none;transition:none}
.svc .cols .col li{display:flex;align-items:baseline;gap:14px;padding:11px 2px;border-bottom:1px solid rgba(102,120,159,.3);counter-increment:cl;font-size:.97rem;line-height:1.4}
.svc .cols .col li::before{position:static;flex:none;width:24px;height:auto;border-radius:0;background:none;content:counter(cl,decimal-leading-zero);font:400 .74rem/1 var(--mono);letter-spacing:.18em;color:var(--accent-muted)}
.svc .cols .col li:hover{transform:none;color:var(--text-primary)}

/* ---- Processo em passos numerados (stepper) e em cartoes (pcards): mesma linha dourada e mesmos espacos ---- */
.svc .stepper{display:block;gap:0;padding:4px 0 0 30px}
.svc .stepper::before{left:9px;top:12px;bottom:18px;transition-duration:1.2s}
.svc .stepper .pst{display:block;overflow:visible;padding:0 0 12px;background:none;border:0;border-radius:0;box-shadow:none;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.svc .stepper.in .pst{opacity:1;transform:none;transition-delay:calc(var(--k)*.1s);animation:none}
.svc .stepper.in .pst:hover{transform:none}
.svc .stepper .pst::before,.svc .pcards .pc::before{display:block;content:"";opacity:1;right:auto;bottom:auto;left:-26px;top:5px;width:11px;height:11px;margin:0;border:2px solid var(--accent);border-radius:50%;background:var(--canvas);color:transparent;-webkit-text-stroke:0;font-size:0;transform:scale(1)}
.svc .stepper .pst:hover::before{background:var(--canvas);color:transparent;transform:scale(1)}
.svc .stepper .pst .mine,.svc .pcards .pc .mine{align-self:auto;margin:6px 0 0;padding-top:6px;border-top:1px dashed rgba(102,120,159,.4);gap:2px;font-size:.92rem}
.svc .pcards{display:block;position:relative;padding:4px 0 0 30px}
.svc .pcards::before{content:"";position:absolute;left:9px;top:12px;bottom:18px;width:1px;background:linear-gradient(180deg,var(--accent),rgba(127,180,255,.45))}
.svc .pcards>div{display:block;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--k)*.1s)}
.svc .pcards>div.in{opacity:1;transform:none}
.svc .pcards .pc{padding:0 0 12px;overflow:visible;background:none;border:0;border-radius:0;box-shadow:none}
.svc .pcards .pc:hover{transform:none;box-shadow:none}
.svc .pcards .pc::after{display:none}
.svc .pcards .rv.in .pc{animation:none}
.svc .pst h3,.svc .pc h3{font-size:1.1rem;margin-bottom:2px}
.svc .pst p,.svc .pc p{font-size:.94rem;line-height:1.5}

@media (prefers-reduced-motion:reduce){
  .svc .stepper::before{transform:scaleY(1)}
  .svc .stepper .pst,.svc .pcards>div{opacity:1;transform:none;transition:none}
  .svc .checks .ck{transition:none}
  .svc .ngrid,.svc .nrows,.svc .nsplit .stack{scroll-behavior:auto}
  .svc .tlh::before,.svc .tlh .st,.svc .tlh .st::before,.sc3-w,.sc3-in,.sc3-btn i,.svc .bento .btw.rv{transition:none}
  .svc .tlh::before{transform:scaleY(1)}
  .svc .tlh .st{opacity:1;transform:none}
  .svc .tlh .st::before{transform:scale(1)}
}

/* ---- fios em V na abertura das paginas de servico (so celular) ---- */
.vfios.vp-ok>.beam:not(.beam-v){display:none}
.vfios.vp-ok>.beam-v{display:block}
.beam-v svg{overflow:visible}
.beam-v .g0{stop-color:var(--ice)}
.beam-v .g1{stop-color:var(--accent)}
.vfios.vp-ok .beam-v path{stroke:url(#vpg);opacity:.4}
.vfios.vp-ok>.beam-v{-webkit-mask-image:linear-gradient(to bottom,transparent var(--v0,0),#000 calc(var(--v0,0) + 78px));mask-image:linear-gradient(to bottom,transparent var(--v0,0),#000 calc(var(--v0,0) + 78px))}
/* um pouco mais de folga entre os botoes e a ilustracao, para o V aparecer inteiro (paginas de servico, so celular) */
.vfios .art{margin-top:20px}