/* ===== Home no celular (so carregado em telas de ate 720 px; o computador nao usa este arquivo) ===== */

/* ---- Servicos: carrossel manual (um cartao inteiro e um pedaco do proximo) ---- */
.svc-cards{display:flex;gap:12px;margin:14px -16px 0;padding:2px 16px 4px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 16px;scroll-behavior:smooth;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.svc-cards::-webkit-scrollbar{display:none;width:0;height:0}
.svc-cards:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:14px}
.sc-w{flex:0 0 82%;min-width:0;scroll-snap-align:start}
.sc-w.rv{opacity:1;transform:none;transition:none}
.sc{padding:14px 16px 4px;column-gap:12px}
.sc:hover,.sc:focus-within{transform:none;box-shadow:none}
.sc::before{display:none}
.ic{width:34px;height:34px}
.sc h3{font-size:1.05rem}
.sc p{font-size:.9rem}
.sc-actions{flex-direction:column;align-items:stretch;gap:0;margin-top:auto;padding-top:6px}
.sc-actions .sc-cta,.sc-actions .sc-link{display:flex;align-items:center;min-height:44px;margin:0;padding:0;opacity:1;transform:none;font-size:.92rem}
.sc-actions .sc-link{border-top:1px solid rgba(102,120,159,.25)}
.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)}

/* ---- Como funciona: tres etapas na vertical, ligadas por uma linha dourada ---- */
#como .tl{display:none}
.steps{position:relative;display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px;padding-left:44px}
.steps::before{content:"";position:absolute;left:15px;top:20px;bottom:20px;width:1px;background:linear-gradient(180deg,var(--accent),rgba(127,180,255,.45))}
.step-w{position:relative}
.step{overflow:visible;border-radius:16px}
.step:hover{transform:none;box-shadow:none}
.step::before,.step::after{display:none}
.step .pic{display:contents}
.step .pic::after{display:none}
.step .pic img{display:block;width:100%;height:60px;object-fit:cover;object-position:center 35%;border-radius:15px 15px 0 0;-webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent);animation:none!important;transform:none!important}
.step .num{position:absolute;left:-44px;top:13px;width:30px;height:30px;z-index:3}
.step:hover .num{transform:none;background:rgba(7,13,30,.7);color:var(--accent)}
.step .tx{padding:4px 16px 14px}
.step h3{font-size:1.12rem;margin-bottom:4px}
.step p{font-size:.93rem;line-height:1.5}
/* uma unica entrada, curta e suave */
.step-w.rv{transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--d,0s)*.4)}
.step-w.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .step-w.rv{transform:none;transition:none}
  .svc-cards{scroll-behavior:auto}
}

/* ===== compactacao: titulos, rotulos e espacos (so celular) ===== */
#servicos,#como,#promessa{padding-top:36px;padding-bottom:36px}
#servicos h2,#como h2,#promessa h2{font-size:26px;line-height:1.2;text-wrap:balance}
#servicos .kicker,#como .kicker,#promessa .kicker{font-size:13px;letter-spacing:.2em;margin-bottom:12px}
#servicos .lede,#como .lede,#promessa .lede{margin-top:10px;text-wrap:balance}
.home-links{margin-top:10px;gap:8px 20px}
.sc p,.step p,.promises li{text-wrap:balance}

/* Como funciona: faixas de imagem mais baixas */
.steps{margin-top:14px;gap:10px}
.step .pic img{height:40px}
.step .num{top:5px}
.step .tx{padding:2px 16px 12px}

/* Um ponto so: intervalos menores entre desenho, botao e promessas */
.conv{margin:4px auto 0}
.hold-wrap{margin-top:0}
.promises{margin-top:18px;gap:10px}
.promises li{padding:12px 16px}
.promises li b{margin-bottom:2px}

/* Perguntas: fora da Home no celular (some do layout e do foco do teclado) */
#perguntas{display:none}

/* ===== abertura em video (so celular, sem movimento reduzido: a classe hm-intro vem do <head>) ===== */
/* a regra da Home que esconde o video do computador (.stage video) nao pode esconder este */
html .stage video.hm-video{display:block!important}
.hm-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
html.hm-playing .hm-video,html.hm-end .hm-video{opacity:1}
/* imagem de fundo enquanto o video carrega: o primeiro quadro dele */
html.hm-intro .static-bg::after{content:"";position:absolute;inset:0;background:url(/assets/hero-movel-poster.jpg) center/cover no-repeat;transition:opacity .2s linear .15s}
html.hm-playing .static-bg::after,html.hm-failed .static-bg::after{opacity:0}
/* marca: so opacidade, sem deslocamento. Fica quase invisivel (e ja desenhada) ate o fim da explosao.
   Sem o JS da abertura, aparece sozinha em 2,6 s. */
html.hm-intro{--hm-o:.001;--hm-pe:none;animation:hmSafe .01s linear 2.6s forwards}
html.hm-playing{animation:none}
html.hm-intro.hm-show{--hm-o:1;--hm-pe:auto}
@keyframes hmSafe{to{--hm-o:1;--hm-pe:auto}}
html.hm-intro .band-4 .logo-reveal,html.hm-intro .band-4 h1,html.hm-intro .band-4 .sub,html.hm-intro .band-4 .ctas{opacity:var(--hm-o)!important;transition:opacity .55s ease-out;will-change:opacity}
html.hm-intro .band-4::before{opacity:var(--hm-o);transition:opacity .55s ease-out;will-change:opacity}
html.hm-intro .band-4 .ctas{pointer-events:var(--hm-pe)}
html.hm-intro .band-4 .sub,html.hm-intro .band-4 .ctas{transition-delay:.18s}
html.hm-fast .band-4 .logo-reveal,html.hm-fast .band-4 h1,html.hm-fast .band-4 .sub,html.hm-fast .band-4 .ctas,html.hm-fast .band-4::before{transition-duration:.25s!important;transition-delay:0s!important}
html.hm-settled .band-4 .logo-reveal,html.hm-settled .band-4 h1,html.hm-settled .band-4 .sub,html.hm-settled .band-4 .ctas,html.hm-settled .band-4::before{will-change:auto}
/* particulas lentas sobre o quadro final: so se movem depois do video, e pausam fora da tela */
.hm-dust{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
html.hm-end .hm-dust,html.hm-failed .hm-dust{opacity:1}
.hm-dust i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);border-radius:50%;background:radial-gradient(circle,var(--c) 0,var(--c2) 45%,transparent 75%);opacity:0;animation:hmFloat var(--t) ease-in-out var(--dl) infinite;animation-play-state:paused;will-change:transform,opacity}
.hm-dust.hm-run i{animation-play-state:running}
@keyframes hmFloat{
  0%{opacity:0;transform:translate3d(0,0,0)}
  15%{opacity:var(--o)}
  35%{opacity:calc(var(--o)*.7)}
  50%{transform:translate3d(calc(var(--dx)*-.6),calc(var(--dy)*.5),0)}
  60%{opacity:var(--o)}
  85%{opacity:calc(var(--o)*.6)}
  100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0)}
}
@media (prefers-reduced-motion:reduce){.hm-dust{display:none}}