/* Meu CDN, TRAVESSIA v4: blocos COMPARTILHADOS das páginas de serviço (atendimento, sites, apps...).
   Carga: base.css → servico.css → pg/<slug>.css (momento assinatura da página) → menu.css.
   Mesma regra da home: a base é a versão parada (sem JS ou "reduzir movimento") e html.mov liga o movimento
   (servico.js: palcos presos com scrub, a vitrine que troca telas, a linha das etapas, a faixa dos nichos, o fecho).
   Celular (até 760 px ou tela em pé) tem layout próprio no fim do arquivo. NÃO edite por página: use pg/<slug>.css.
   Blocos: .sv-heroi · .migalha · .sv-secao/.sv-cabeca · .sv-vitrine · .sv-recursos · .sv-dupla · .sv-app/.sv-msg ·
           .sv-nichos · .sv-etapas · .sv-faq · .sv-outros · .sv-fecho · [data-revela] */

[id] { scroll-margin-top: calc(var(--cab) + 16px); }
.sv-cab-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* =========================================================================================================
   SEÇÕES (base comum)
   ========================================================================================================= */
.sv-secao { position: relative; padding: clamp(80px, 9vw, 132px) var(--lado); background: var(--fundo); }
.sv-secao--alt { background: radial-gradient(70% 60% at 85% 0%, rgb(139 43 226 / .14), transparent 70%), #110829; }
.sv-secao > * { max-width: 1320px; margin-left: auto; margin-right: auto; }
.sv-cabeca { margin-bottom: clamp(32px, 4vw, 56px); }
.sv-cabeca > * { max-width: 760px; }
.sv-h2 { font-weight: 800; font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.04; margin: 12px 0 14px; text-wrap: balance; }
.sv-h3 { font-weight: 800; font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.15; margin: 0 0 10px; }
.sv-apoio { color: var(--tinta-2); font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.55; max-width: 36em; }
.sv-nota { margin-top: 18px; color: var(--tinta-3); font-size: .82rem; }
.sv-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 28px; }
.sv-acoes .detalhe { margin: 0; }
.sv-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 22px; padding: 10px 14px 10px 16px; border-radius: 4px 12px 12px 4px;
  background: rgb(255 255 255 / .07); box-shadow: inset 3px 0 0 var(--magenta); font: 700 .92rem/1.3 var(--fonte); }
.sv-meta span { color: var(--magenta); }

/* logos oficiais dos canais em círculos brancos (o desenho é o .mc do base.css) */
.sv-marcas { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; font: 700 .92rem/1.2 var(--fonte); }
.sv-marcas li { position: relative; display: flex; align-items: center; min-height: 30px; padding-left: 38px; }
.sv-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); }
.sv-marcas .mc { position: absolute; left: 6px; top: 50%; width: 18px; height: 18px; margin-top: -9px; }
.sv-marcas .mc--app { left: 3px; width: 24px; height: 24px; margin-top: -12px; }

/* lista com marcador da marca */
.sv-lista { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.sv-lista li { position: relative; padding-left: 30px; color: var(--tinta-2); line-height: 1.5; }
.sv-lista li::before { content: ''; position: absolute; left: 0; top: .35em; width: 16px; height: 16px; border-radius: 5px; background: var(--degrade); box-shadow: 0 0 14px -2px rgb(240 0 208 / .55); }
.sv-lista li::after { content: ''; position: absolute; left: 5px; top: calc(.35em + 3px); width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sv-lista b { color: var(--tinta); }

/* =========================================================================================================
   HERÓI: cena fotográfica em camadas (céu, cena, meio, frente) com parallax real.
   Cada .sv-camada[data-prof="0..3"] tem a mesma caixa e o mesmo enquadramento: empilhadas sem deslocamento
   reproduzem a foto. Com movimento (servico.js), o palco fica preso e cada camada sobe e cresce na sua velocidade.
   ========================================================================================================= */
.sv-heroi { position: relative; background: #070312; }
.sv-heroi__palco { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: max(var(--alto), 640px); padding: calc(var(--cab) + 32px) var(--lado) 56px; }
.sv-heroi__cena { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #0b0619; }
.sv-camada { position: absolute; left: 0; right: 0; top: -3%; bottom: -12%; transform-origin: var(--origem, 50% 60%); will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
.sv-camada picture, .sv-camada img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.sv-camada img { object-fit: cover; object-position: var(--foco, 72% 42%); }
.sv-heroi__veu { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(7 3 18 / .9) 0%, rgb(7 3 18 / .74) 26%, rgb(7 3 18 / .28) 46%, rgb(7 3 18 / 0) 60%),
              linear-gradient(180deg, rgb(7 3 18 / .6) 0%, rgb(7 3 18 / 0) 20%), linear-gradient(0deg, var(--fundo) 0%, rgb(14 7 32 / .4) 10%, rgb(14 7 32 / 0) 26%); }
.sv-heroi__texto { position: relative; z-index: 2; width: min(600px, 46vw); }
.sv-titulo { font-weight: 800; font-size: clamp(2.3rem, 4.1vw, 3.85rem); line-height: 1.03; margin: 14px 0 16px; text-wrap: balance; text-shadow: 0 2px 30px rgb(7 3 18 / .5); }
.sv-heroi .sv-apoio { font-size: clamp(1rem, 1.2vw, 1.14rem); max-width: 33em; }
.sv-heroi__aviso { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: rgb(255 199 119 / .14); border: 1px solid rgb(255 199 119 / .35); color: var(--ambar); font: 700 .86rem/1.3 var(--fonte); }
.sv-heroi__dica { display: none; }
html.mov .sv-heroi__texto, html.mov .sv-heroi__veu { will-change: transform, opacity; }
html.mov .sv-heroi__dica { display: block; position: absolute; left: 50%; bottom: 20px; z-index: 2; translate: -50% 0; font: 700 .72rem/1 var(--fonte); letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-3); }
html.mov .sv-heroi__dica::after { content: ''; display: block; width: 1px; height: 28px; margin: 10px auto 0; background: linear-gradient(var(--magenta), transparent); animation: sv-dica 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes sv-dica { 0%, 100% { transform: scaleY(.4); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* migalha: Início › Serviço */
.migalha ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; font: 600 .84rem/1.2 var(--fonte); color: var(--tinta-3); }
.migalha li { display: inline-flex; align-items: center; }
.migalha li + li::before { content: '›'; margin: 0 10px; color: var(--magenta); font-weight: 800; }
.migalha a { display: inline-flex; align-items: center; min-height: 40px; color: var(--tinta-2); text-decoration: none; }
.migalha a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--magenta); text-underline-offset: 4px; }
.migalha [aria-current] { color: var(--tinta); }
.sv-heroi .migalha { margin-bottom: 4px; }

/* =========================================================================================================
   VITRINE FIXA: a tela presa troca conforme o passo que passa no meio da tela (computador com movimento).
   Sem movimento e no celular, cada passo mostra a própria tela (.sv-vitrine__mini).
   Safari/iPhone: a janela presa e cada quadro têm camada de composição permanente (translateZ fixo, will-change)
   e as imagens são decodificadas antes de aparecer (servico.js), senão a troca treme no sticky.
   ========================================================================================================= */
.sv-vitrine__grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(32px, 5vw, 80px); align-items: start; }
.sv-vitrine__passos { list-style: none; margin: 0; padding: 0; counter-reset: passo; }
.sv-vitrine__passo { counter-increment: passo; padding: 26px 0 30px; border-top: 1px solid rgb(255 255 255 / .1); }
.sv-vitrine__passo::before { content: counter(passo, decimal-leading-zero); display: block; margin-bottom: 10px; font: 700 .78rem/1 var(--fonte); letter-spacing: .14em; color: var(--magenta); }
.sv-vitrine__passo p { color: var(--tinta-2); line-height: 1.55; }
.sv-vitrine__mini { margin-top: 18px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 24px 50px -30px rgb(0 0 0 / .9); background: #fff; }
.sv-vitrine__mini img { width: 100%; height: auto; }
.sv-vitrine__tela { display: none; }
.sv-janela { position: relative; border-radius: 14px; overflow: hidden; background: #f5f2fa; box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 40px 90px -40px rgb(0 0 0 / .95), 0 0 120px -40px rgb(139 43 226 / .5); }
.sv-janela__topo { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #ebe6f3; border-bottom: 1px solid #ddd5ea; }
.sv-janela__topo i { width: 10px; height: 10px; border-radius: 50%; background: #cfc6de; }
.sv-janela__topo i:first-child { background: #ff6b8a; } .sv-janela__topo i:nth-child(2) { background: #ffc777; } .sv-janela__topo i:nth-child(3) { background: #7cf2b0; }
.sv-janela__topo span { margin-left: 10px; font: 600 .74rem/1 var(--fonte); color: #6f6585; }
.sv-janela__quadros { position: relative; aspect-ratio: 16 / 10; background: #f5f2fa; }
.sv-vitrine__quadro { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 0 0; opacity: 0;
  transform: translateZ(0) scale(1.012); will-change: opacity, transform; backface-visibility: hidden; transition: opacity .5s ease, transform .9s var(--saida); }
.sv-vitrine__quadro.is-agora { opacity: 1; transform: translateZ(0) scale(1); }
.sv-vitrine__legenda { margin-top: 14px; color: var(--tinta-3); font-size: .82rem; }
/* parada no computador: sem a janela presa, cada passo vira uma linha (texto à esquerda, a tela à direita) */
html:not(.mov) .sv-vitrine__grade { grid-template-columns: 1fr; }
html:not(.mov) .sv-vitrine__passo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr; column-gap: clamp(32px, 5vw, 80px); align-items: start; }
html:not(.mov) .sv-vitrine__passo::before, html:not(.mov) .sv-vitrine__passo > h3, html:not(.mov) .sv-vitrine__passo > p { grid-column: 1; }
html:not(.mov) .sv-vitrine__mini { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
html.mov .sv-vitrine__tela { display: block; position: sticky; top: calc(var(--cab) + 7vh); will-change: transform; transform: translateZ(0); }
html.mov .sv-vitrine__mini { display: none; }
html.mov .sv-vitrine__passo { min-height: 58vh; display: flex; flex-direction: column; justify-content: center; opacity: .42; transition: opacity .45s ease; }
html.mov .sv-vitrine__passo:first-child { min-height: 46vh; }
html.mov .sv-vitrine__passo.is-agora { opacity: 1; }
html.mov .sv-vitrine__passo.is-agora::before { color: #fff; text-shadow: 0 0 14px rgb(240 0 208 / .9); }

/* =========================================================================================================
   GRADE DE RECURSOS (ícones em duas camadas, no espírito do Solar Bold Duotone)
   ========================================================================================================= */
.sv-recursos__grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; }
.sv-recurso { position: relative; padding: 22px 22px 24px; border-radius: 16px; background: linear-gradient(160deg, rgb(255 255 255 / .06), rgb(255 255 255 / .02)); border: 1px solid rgb(255 255 255 / .09); transition: border-color .3s, transform .45s var(--saida), background .3s; }
.sv-recurso:hover { border-color: rgb(240 0 208 / .45); transform: translateY(-3px); background: linear-gradient(160deg, rgb(240 0 208 / .1), rgb(255 255 255 / .02)); }
.sv-recurso h3 { margin: 16px 0 8px; font-size: 1.08rem; font-weight: 800; line-height: 1.25; }
.sv-recurso p { color: var(--tinta-2); font-size: .95rem; line-height: 1.5; }
.sv-ic { display: block; width: 42px; height: 42px; color: #f45be0; }
.sv-ic .a { fill: currentColor; opacity: .32; }
.sv-ic .b { fill: currentColor; }
.sv-ic .l { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* =========================================================================================================
   DUPLA: texto e figura lado a lado (--inv inverte)
   ========================================================================================================= */
.sv-dupla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 84px); align-items: center; }
.sv-dupla--inv > :first-child { order: 2; }
.sv-dupla__figura { position: relative; }

/* janela de app clara (mock de interface com dados de exemplo) e bolhas de conversa */
.sv-app { position: relative; border-radius: 16px; overflow: hidden; background: #f6f3fb; color: #1d1530; box-shadow: 0 0 0 1px rgb(255 255 255 / .12), 0 34px 80px -36px rgb(0 0 0 / .95); font-family: var(--fonte); }
.sv-app__topo { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #fff; border-bottom: 1px solid #e6dff0; font-weight: 800; font-size: .92rem; }
.sv-app__topo small { margin-left: auto; font-weight: 600; font-size: .74rem; color: #7d7393; }
.sv-app__corpo { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.sv-msg { max-width: 86%; margin: 0; padding: 9px 12px 8px; border-radius: 16px; font-size: .9rem; line-height: 1.35; font-weight: 500; }
.sv-msg--ele { align-self: flex-start; background: #fff; border-bottom-left-radius: 5px; box-shadow: 0 1px 0 rgb(29 21 48 / .07); }
.sv-msg--eu { align-self: flex-end; background: #e2d4ff; border-bottom-right-radius: 5px; }
.sv-msg--ia { align-self: flex-end; background: linear-gradient(135deg, #f3dcff, #dfe6ff); border-bottom-right-radius: 5px; }
.sv-msg small { display: block; margin-bottom: 3px; font: 800 .66rem/1 var(--fonte); letter-spacing: .08em; text-transform: uppercase; color: #8b2be2; }
.sv-aviso { align-self: center; margin: 4px 0; padding: 5px 10px; border-radius: 99px; background: #ece5f7; color: #5d5275; font: 700 .72rem/1.2 var(--fonte); }
.sv-tag { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 6px; background: #efe6ff; color: #6a1fc0; font: 800 .68rem/1.2 var(--fonte); letter-spacing: .02em; }
.sv-tag--ok { background: #dcfbe9; color: #0c7a43; }
.sv-tag--alerta { background: #ffe8ec; color: #c0123c; }

/* =========================================================================================================
   FAIXA "PARA QUAIS NICHOS": no computador com movimento a faixa anda de lado com a rolagem (scrub);
   no celular é uma faixa que o dedo arrasta (scroll-snap); parada, uma grade.
   ========================================================================================================= */
.sv-nichos { overflow: hidden; }
.sv-nichos__trilho { max-width: none; }
.sv-nichos__lista { list-style: none; margin: 0 auto; padding: 0; max-width: 1320px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.sv-nicho { position: relative; padding: 20px 20px 22px; border-radius: 16px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .09); }
.sv-nicho b { display: block; margin-bottom: 8px; font-size: 1.12rem; font-weight: 800; }
.sv-nicho span { color: var(--tinta-2); font-size: .93rem; line-height: 1.5; }
.sv-nicho a { color: #fff; text-decoration-color: var(--magenta); text-underline-offset: 3px; }
.sv-nicho__n { position: absolute; right: 18px; top: 18px; font: 800 .74rem/1 var(--fonte); letter-spacing: .12em; color: var(--magenta); }
html.mov .sv-nichos__lista { display: flex; width: max-content; max-width: none; padding: 0 var(--lado); will-change: transform; }
html.mov .sv-nicho { flex: 0 0 300px; }

/* =========================================================================================================
   PROCESSO EM ETAPAS: a linha enche com a rolagem (--prog, servico.js) e cada etapa acende ao ser alcançada
   ========================================================================================================= */
.sv-etapas { --prog: 1; position: relative; list-style: none; margin: 0; padding: 40px 0 0; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 22px; }
.sv-etapas::before, .sv-etapas::after { content: ''; position: absolute; left: 7px; right: 7px; top: 11px; height: 2px; border-radius: 2px; }
.sv-etapas::before { background: rgb(255 255 255 / .12); }
.sv-etapas::after { background: var(--degrade); transform-origin: left; transform: scaleX(var(--prog)); }
.sv-etapa { position: relative; }
.sv-etapa::before { content: ''; position: absolute; left: 0; top: -36px; width: 16px; height: 16px; border-radius: 50%; background: #1c1036; box-shadow: 0 0 0 2px rgb(255 255 255 / .25); transition: background .35s, box-shadow .35s; }
.sv-etapa.is-feito::before, html:not(.mov) .sv-etapa::before { background: var(--magenta); box-shadow: 0 0 0 4px rgb(240 0 208 / .25), 0 0 18px rgb(240 0 208 / .7); }
.sv-etapa b { display: block; margin-bottom: 6px; font-size: 1.04rem; font-weight: 800; }
.sv-etapa span { color: var(--tinta-2); font-size: .93rem; line-height: 1.5; }
.sv-etapa__n { display: block; margin-bottom: 8px; font: 700 .74rem/1 var(--fonte); letter-spacing: .14em; color: var(--magenta); }

/* =========================================================================================================
   PERGUNTAS FREQUENTES: <details> nativo (teclado e leitor de tela de graça); servico.js anima a altura
   ========================================================================================================= */
.sv-faq { max-width: 880px; }
.sv-pergunta { border-bottom: 1px solid rgb(255 255 255 / .12); }
.sv-pergunta summary { position: relative; display: flex; align-items: center; min-height: 64px; padding: 14px 52px 14px 0; cursor: pointer; list-style: none; font: 700 1.06rem/1.35 var(--fonte); color: var(--tinta); }
.sv-pergunta summary::-webkit-details-marker { display: none; }
.sv-pergunta summary::before, .sv-pergunta summary::after { content: ''; position: absolute; right: 14px; top: 50%; width: 16px; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--magenta); transition: transform .35s var(--saida); }
.sv-pergunta summary::after { transform: rotate(90deg); }
.sv-pergunta[open] summary::after { transform: rotate(0deg); }
.sv-pergunta summary:hover { color: #fff; }
.sv-pergunta summary:focus-visible { outline-offset: 2px; }
.sv-resposta { padding: 0 52px 22px 0; overflow: hidden; }
.sv-resposta p { color: var(--tinta-2); line-height: 1.6; }
.sv-resposta p + p { margin-top: 10px; }
.sv-resposta a { color: #fff; text-decoration-color: var(--magenta); text-underline-offset: 3px; }

/* =========================================================================================================
   OUTROS SERVIÇOS (gerado pelo paginas_servico.py)
   ========================================================================================================= */
.sv-outros__lista { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.sv-outro__link { position: relative; display: grid; grid-template-rows: auto auto 1fr; height: 100%; border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--tinta);
  background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .09); transition: border-color .3s, transform .45s var(--saida); }
.sv-outro__link:hover { border-color: rgb(240 0 208 / .5); transform: translateY(-4px); }
.sv-outro__img { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; transition: transform .8s var(--saida); }
.sv-outro__link:hover .sv-outro__img { transform: scale(1.04); }
.sv-outro__nome { padding: 16px 18px 4px; font-weight: 800; font-size: 1.08rem; }
.sv-outro__frase { padding: 0 52px 20px 18px; color: var(--tinta-2); font-size: .9rem; line-height: 1.45; }
.sv-outro__ir { position: absolute; right: 16px; bottom: 18px; color: var(--magenta); font-weight: 800; transition: transform .35s var(--saida); }
.sv-outro__link:hover .sv-outro__ir { transform: translateX(4px); }
.sv-outro__link:focus-visible { outline-offset: 3px; }

/* =========================================================================================================
   FECHO COMPACTO: a Ponte da Amizade à noite (3 camadas que andam com a rolagem) e o cartão de contato da home
   ========================================================================================================= */
.sv-fecho { position: relative; isolation: isolate; overflow: hidden; background: #070312; padding: clamp(96px, 10vw, 140px) var(--lado) clamp(64px, 7vw, 96px); }
.sv-fecho__cena { position: absolute; inset: 0; z-index: -2; }
.sv-fecho__camada { position: absolute; left: 0; right: 0; top: -14%; bottom: -14%; will-change: transform; transform: translateZ(0); }
.sv-fecho__camada img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 58%; }
.sv-fecho__veu { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(7 3 18 / .92) 0%, rgb(7 3 18 / .7) 36%, rgb(7 3 18 / .3) 62%, rgb(7 3 18 / .55) 100%), linear-gradient(180deg, var(--fundo) 0%, rgb(7 3 18 / 0) 26%), linear-gradient(0deg, #070312 0%, rgb(7 3 18 / 0) 30%); }
.sv-fecho__dentro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 40px clamp(32px, 5vw, 80px); align-items: end; max-width: 1320px; margin: 0 auto; }
.sv-fecho__titulo { font-weight: 800; font-size: clamp(2.1rem, 3.8vw, 3.4rem); line-height: 1.02; margin: 12px 0 14px; text-wrap: balance; text-shadow: 0 2px 30px rgb(7 3 18 / .5); }
.sv-fecho__apoio { color: var(--tinta-2); font-size: 1.05rem; line-height: 1.55; max-width: 32em; }
.sv-fecho__paises { margin-top: 12px; font-weight: 700; color: #fff; }
.sv-fecho__contato { position: relative; padding-top: 150px; }
.sv-fecho__boris { position: absolute; right: 18px; top: 0; height: 196px; width: auto; max-width: none; filter: drop-shadow(-10px 10px 22px rgb(4 2 12 / .8)); pointer-events: none; }
.sv-fecho .fecho__canal { margin-top: 0; }

/* =========================================================================================================
   PÁGINA EM CONSTRUÇÃO (só nas páginas provisórias; sai quando a página for preenchida)
   ========================================================================================================= */
.sv-construcao__lista { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.sv-construcao__item { padding: 20px 20px 14px; border-radius: 16px; background: rgb(255 255 255 / .05); border: 1px dashed rgb(255 255 255 / .2); }
.sv-construcao__item b { display: block; font-size: 1.06rem; font-weight: 800; }
.sv-construcao__item .detalhe { margin-top: 6px; font-size: .9rem; }

/* =========================================================================================================
   REVELAR AO ENTRAR (só com movimento; servico.js põe .is-visto)
   ========================================================================================================= */
html.mov [data-revela] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--saida), transform .9s var(--saida); }
html.mov [data-revela].is-visto { opacity: 1; transform: none; }
html.mov [data-revela-grupo] > * { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--saida), transform .8s var(--saida); transition-delay: calc(var(--i, 0) * 60ms); }
html.mov [data-revela-grupo].is-visto > * { opacity: 1; transform: none; }

/* =========================================================================================================
   COMPUTADOR MAIS ESTREITO (761 a 1180 px)
   ========================================================================================================= */
@media (min-width: 761px) and (max-width: 1180px) {
  .sv-heroi__texto { width: min(560px, 58vw); }
  .sv-vitrine__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .sv-etapas { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 56px; }
  .sv-etapas::before, .sv-etapas::after { display: none; }
  .sv-fecho__dentro { grid-template-columns: minmax(0, 1fr); }
  .sv-fecho__contato { max-width: 560px; }
}

/* =========================================================================================================
   CELULAR (até 760 px ou tela em pé): layouts próprios
   ========================================================================================================= */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .sv-secao { padding: 72px 16px; }
  .sv-h2 { font-size: clamp(1.75rem, 7.6vw, 2.2rem); }
  .sv-acoes { gap: 10px 16px; }
  .sv-acoes .botao { width: 100%; }

  /* herói: a foto em pé (recorte -m em volta do assunto) e o texto embaixo, sobre um véu que sobe do pé */
  .sv-heroi__palco { align-items: flex-end; min-height: max(var(--alto), 600px); padding: calc(var(--cab) + 12px) 16px 30px; }
  .sv-camada { top: var(--topo-m, -2%); bottom: var(--pe-m, -8%); }   /* --topo-m/--pe-m no style do herói sobem a cena quando o assunto está embaixo */
  .sv-camada img { object-position: var(--foco-m, 50% 30%); }
  .sv-heroi__veu { background: linear-gradient(180deg, rgb(7 3 18 / .55) 0%, rgb(7 3 18 / 0) 16%, rgb(7 3 18 / 0) 34%, rgb(7 3 18 / .78) 56%, rgb(7 3 18 / .95) 72%, var(--fundo) 100%); }
  .sv-heroi__texto { width: auto; }
  .sv-titulo { font-size: clamp(1.85rem, 8vw, 2.3rem); margin: 6px 0 8px; }
  .sv-heroi .sv-apoio { font-size: .94rem; line-height: 1.5; }
  .sv-heroi .sv-acoes { margin-top: 18px; }
  .sv-heroi .sv-marcas li { padding-left: 32px; } .sv-heroi .sv-marcas li::before { width: 26px; height: 26px; margin-top: -13px; }
  .sv-heroi .sv-marcas .mc { left: 5px; width: 16px; height: 16px; margin-top: -8px; } .sv-heroi .sv-marcas .mc--app { left: 2px; width: 22px; height: 22px; margin-top: -11px; }
  .sv-marcas { gap: 8px 14px; font-size: .84rem; margin-top: 14px; }
  .sv-meta { font-size: .8rem; margin-top: 14px; }
  .migalha a { min-height: 36px; }
  html.mov .sv-heroi__dica { display: none; }

  .sv-vitrine__grade { grid-template-columns: 1fr; }
  html:not(.mov) .sv-vitrine__passo { display: block; }
  html:not(.mov) .sv-vitrine__mini { margin-top: 18px; }
  html.mov .sv-vitrine__tela { display: none; }
  html.mov .sv-vitrine__mini { display: block; }
  html.mov .sv-vitrine__passo { min-height: 0; opacity: 1; display: block; }

  .sv-recursos__grade { grid-template-columns: 1fr; gap: 10px; }
  .sv-recurso { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 16px; padding: 18px; }
  .sv-recurso .sv-ic { grid-row: span 2; }
  .sv-recurso h3 { margin: 0 0 6px; }

  .sv-dupla { grid-template-columns: 1fr; gap: 32px; }
  .sv-dupla--inv > :first-child { order: 0; }

  html.mov .sv-nichos__lista, .sv-nichos__lista { display: flex; width: auto; max-width: none; margin: 0 -16px; padding: 4px 16px 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; transform: none !important; }
  .sv-nichos__lista::-webkit-scrollbar { display: none; }
  .sv-nicho, html.mov .sv-nicho { flex: 0 0 78%; scroll-snap-align: start; }

  .sv-etapas { grid-template-columns: 1fr; gap: 26px; padding: 0 0 0 34px; }
  .sv-etapas::before, .sv-etapas::after { display: block; left: 7px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .sv-etapas::after { transform-origin: top; transform: scaleY(var(--prog)); }
  .sv-etapa::before { left: -34px; top: 2px; }

  .sv-pergunta summary { font-size: 1rem; padding-right: 44px; }
  .sv-resposta { padding-right: 8px; }

  .sv-outros__lista { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sv-outro__nome { padding: 12px 12px 2px; font-size: .96rem; }
  .sv-outro__frase { padding: 0 12px 34px; font-size: .82rem; }
  .sv-outro__ir { right: 12px; bottom: 12px; }

  .sv-fecho { padding: 84px 16px 40px; }
  .sv-fecho__dentro { grid-template-columns: 1fr; gap: 24px; }
  .sv-fecho__veu { background: linear-gradient(180deg, var(--fundo) 0%, rgb(7 3 18 / .7) 20%, rgb(7 3 18 / .45) 55%, rgb(7 3 18 / .8) 80%, #070312 100%); }
  .sv-fecho__titulo { font-size: clamp(1.9rem, 8.4vw, 2.3rem); }
  .sv-fecho__contato { padding-top: 140px; }
  .sv-fecho__boris { height: 168px; right: 6px; }
}
@media (max-width: 380px) {
  .sv-outros__lista { grid-template-columns: 1fr; }
}