/* Aba Serviços: banner, sub-navegação, quatro blocos de serviço e chamada final. Títulos na fonte display, em maiúsculas, com <em> em azul. */
.sv-topo h1,.sv-bloco h2,.sv-cta h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.015em;line-height:1;margin:0}
.sv-topo em,.sv-bloco em,.sv-cta em{font-style:normal;color:var(--blue)}

/* Banner: céu, nuvens e ilhas como no banner do index; texto à esquerda, baiacu com câmera à direita. */
.sv-topo{position:relative;isolation:isolate;overflow:hidden;background:#cfe2fa url('../img/nova-arte/ceu-azul-luminoso-com-nuvens-suaves-4.webp') center/cover;padding:56px 0 40px}
.sv-ceu{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#ffffffd9,#ffffff73 55%,#fff0)}
/* Sem faixas de nuvens no banner: peixinho no alto, entre o texto e a arte, e cursor no canto inferior direito. */
.sv-peixe,.sv-cursor{position:absolute;height:auto}
.sv-topo .sv-peixe{width:clamp(70px,6vw,110px);left:45%;top:4%;--duracao:9s;--atraso:-2s;--altura:-16px;--giro:-6deg}
.sv-topo .sv-cursor{width:clamp(50px,4.2vw,76px);right:5%;bottom:8%;--duracao:6s;--atraso:-4s;--altura:-12px;--giro:8deg}
.sv-ilha{position:absolute;height:auto;--altura:-22px;--giro:3deg}
.sv-ilha-1{width:clamp(70px,8vw,130px);left:-3%;top:22%;--duracao:8s;--atraso:-3s}
.sv-ilha-2{width:clamp(60px,6vw,100px);right:2%;top:12%;--duracao:6.5s;--atraso:-1s;--giro:-3deg}
.sv-ilha-3{width:clamp(50px,4.5vw,80px);left:44%;bottom:12%;--duracao:9s;--atraso:-5s}
.sv-topo-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4%;max-width:1440px}
.sv-topo .eyebrow{color:var(--blue);margin:0 0 18px}
.sv-topo h1{font-size:clamp(46px,5.4vw,84px);margin-bottom:20px}
.sv-topo h1 em{display:block}
.sv-topo-texto{font-size:clamp(16px,1.4vw,20px);line-height:1.45;color:#2b3550;max-width:460px;margin:0 0 28px}
.sv-topo .btn{gap:16px;font-size:14px}
.sv-lema{margin:36px 0 0;padding-left:56px;position:relative;font-size:9px;letter-spacing:.3em;line-height:1.8;text-transform:uppercase}
.sv-lema:before{content:'';position:absolute;left:0;top:50%;width:40px;border-top:1px solid var(--ink)}
.sv-topo-arte{position:relative}
.sv-topo-arte img{display:block;width:100%;height:auto;filter:drop-shadow(0 28px 26px #0b2a7a2e);--duracao:7s;--altura:-10px;--giro:.6deg}

/* Frases manuscritas (estilo e escrita em base.css + escrita.js): canto superior direito de cada arte. */
.sv-escrita{position:absolute;right:0;top:4%;margin:0;color:var(--blue);font-size:clamp(13px,1.2vw,18px);z-index:2}

/* Sub-navegação: âncoras para os quatro serviços; faixa branca de ponta a ponta (sem o limite de largura do .wrap). */
.sv-abas{max-width:none;display:flex;justify-content:center;gap:clamp(24px,6vw,90px);padding-top:22px;padding-bottom:22px;border-bottom:1px solid #c9d4ea;font-size:13px;font-weight:700;background:#fff}
.sv-abas a:hover{color:var(--blue)}

/* Blocos: texto e arte lado a lado; nos "inversos" a arte vem à esquerda; o 03 em faixa azul. */
.sv-bloco{position:relative;isolation:isolate;overflow:hidden;padding:72px 0;background:linear-gradient(180deg,#ffffffe6,#ffffffb3),#cfe2fa url('../img/nova-arte/ceu-azul-com-nuvens-suaves-11.webp') center/cover}
.sv-bloco-grid{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:5%}
.sv-bloco-inverso .sv-bloco-grid{grid-template-columns:1.1fr 1fr}
.sv-bloco-inverso .sv-texto{order:2}
.sv-num{display:flex;align-items:center;gap:14px;margin:0 0 18px;font-size:12px;font-weight:700;letter-spacing:.18em}
.sv-num:after{content:'';width:48px;border-top:1px solid currentColor}
.sv-bloco h2{font-size:clamp(38px,4vw,62px);margin-bottom:16px}
.sv-texto p{margin:0 0 10px;font-size:17px;color:#2b3550;max-width:460px}
.sv-texto .sv-solucao{color:var(--blue);font-weight:700;font-size:clamp(18px,1.5vw,21px);margin:14px 0}
.sv-texto .sv-tags{font-size:10px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:24px}
.sv-link{color:var(--blue);font-weight:700;font-size:15px;border-bottom:1px solid currentColor;padding-bottom:3px}
.sv-link:hover{color:#0335b5}
.sv-arte{position:relative}
.sv-arte img{display:block;width:100%;height:auto;--duracao:7.5s;--altura:-10px;--giro:-.8deg}
.sv-bloco-azul{background:var(--blue);color:#fff}
/* 01 Identidade: o azul do 03 com o céu de nuvens parado do banner por baixo, num véu azul que mantém o texto branco legível. */
#identidade{background:linear-gradient(90deg,#0646e8f2,#0646e8bf 55%,#0646e899),var(--blue) url('../img/nova-arte/ceu-azul-luminoso-com-nuvens-suaves-4.webp') center/cover}
.sv-bloco-azul em{color:#a9c1ff}
.sv-bloco-azul .sv-texto p,.sv-bloco-azul .sv-texto .sv-solucao,.sv-bloco-azul .sv-link,.sv-bloco-azul .sv-escrita{color:#fff}
.sv-bloco-azul .sv-link:hover{color:#dbe5ff}

/* Decoração dos blocos: nuvens, ilhas e estrela atrás do conteúdo, nas bordas; ritmos diferentes para nada mexer em sincronia. */
.sv-bloco-ceu{position:absolute;inset:0;z-index:-1;pointer-events:none}
/* Nuvens só nos blocos 02 e 03 (e na chamada final), no nível do banner do index: uma camada por faixa (25% do base.css), mais escondida; cada bloco muda só o ponto de partida. */
.sv-nuvens-base{bottom:-9vw;height:19vw;--duracao:85s}
.sv-bloco-azul .sv-nuvens-base{bottom:-11vw;opacity:.85;--duracao:95s}
#audiovisual{padding-bottom:110px}
/* 01 Identidade: nuvens penduradas no alto do bloco, em duas faixas com velocidades e tamanhos diferentes (longe: menor, mais lenta e transparente; perto: maior e mais rápida).
   O top deixa sempre a mesma altura à mostra (84px / 60px), em qualquer largura, para não chegar no "01". */
/* scale:1 -1 vira a faixa de ponta-cabeça: a parte fofa das nuvens fica pendurada para baixo (a base da imagem é reta). Não briga com o transform da animação. */
.sv-nuvens-alto-longe,.sv-nuvens-alto-perto{scale:1 -1}
#identidade{padding-top:132px}
.sv-nuvens-alto-longe{top:calc(60px - 9.5vw);height:9.5vw;background-size:12.5% auto;background-position:30% 0;opacity:.6;--duracao:150s}
.sv-nuvens-alto-perto{top:calc(84px - 19vw);height:19vw;background-position:60% 0;opacity:.9;--duracao:70s}
#redes .nuvens{background-position-x:30%}
#audiovisual .nuvens{background-position-x:60%}
.sv-estrela{position:absolute;height:auto;width:clamp(60px,6vw,104px);--duracao:7s;--altura:-14px;--giro:8deg}
#identidade .sv-ilha-a{width:clamp(80px,9vw,150px);left:-4%;top:3%;--duracao:8s;--atraso:-2s}
#identidade .sv-ilha-b{width:clamp(50px,4.5vw,80px);left:46%;bottom:14%;--duracao:6s;--atraso:-4s;--giro:-3deg}
/* Estrela no vão entre o texto e a arte, longe da frase manuscrita do canto direito. */
#identidade .sv-estrela{left:49%;top:112px;--atraso:-1s}
#redes .sv-ilha-a{width:clamp(80px,9vw,150px);right:-3%;top:38%;--duracao:7.5s;--atraso:-3s;--giro:-3deg}
#audiovisual .sv-ilha-a{width:clamp(70px,8vw,130px);left:-4%;bottom:3%;--duracao:9s;--atraso:-5s}
#audiovisual .sv-estrela{left:40%;top:10%;width:clamp(50px,4.5vw,80px);--duracao:6.5s;--atraso:-3s;--giro:-8deg}
#sites .sv-ilha-a{width:clamp(70px,8vw,130px);left:-3%;top:12%;--duracao:8.5s;--atraso:-1s}
/* Blocos 01 e 04 sem nuvens: cursor (01) e peixinho (04) no canto inferior direito. */
#identidade .sv-cursor{width:clamp(56px,4.8vw,86px);right:5%;bottom:9%;--duracao:6.5s;--atraso:-1s;--altura:-12px;--giro:8deg}
#sites .sv-peixe{width:clamp(80px,7vw,124px);right:5%;bottom:8%;--duracao:8.5s;--atraso:-3s;--altura:-14px;--giro:-5deg}
#sites .sv-ilha-b{width:clamp(70px,7vw,120px);right:-2%;top:8%;--duracao:7s;--atraso:-6s;--giro:-3deg}

/* Chamada final: faixa azul-marinho com nuvens na base, título à esquerda e botão à direita. */
.sv-cta{position:relative;isolation:isolate;overflow:hidden;background:#0a1640;color:#fff;padding:72px 0 96px}
.sv-cta-nuvens{bottom:-10vw;height:19vw;z-index:-1;opacity:.9;--duracao:90s;background-position-x:45%}
.sv-cta-grid{position:relative;display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:6%}
.sv-cta h2{font-size:clamp(40px,4.4vw,68px)}
.sv-cta em{color:#7fa2ff}
.sv-cta-grid p{margin:0 0 22px;font-size:17px;color:#dbe5ff}
.sv-cta .btn{gap:16px;font-size:14px}
.sv-cta .sv-escrita{color:#fff;top:-30px;right:5%}

/* Celular: tudo em uma coluna, arte acima do texto. */
@media(max-width:650px){
  .sv-topo{padding:36px 0 32px}
  .sv-ceu{background:linear-gradient(180deg,#ffffffcc,#ffffff59)}
  .sv-topo-grid,.sv-bloco-grid,.sv-bloco-inverso .sv-bloco-grid,.sv-cta-grid{grid-template-columns:1fr;gap:28px}
  .sv-topo-arte,.sv-arte{order:-1}
  .sv-bloco-inverso .sv-texto{order:0}
  /* 01 no celular: céu mais visível em cima, na arte, e véu azul forte embaixo, no texto. */
  #identidade{background:linear-gradient(180deg,#0646e8b3,#0646e8f2 55%),var(--blue) url('../img/nova-arte/ceu-azul-luminoso-com-nuvens-suaves-4.webp') center/cover}
  .sv-topo h1{font-size:clamp(38px,11vw,52px)}
  .sv-ilha-3{display:none}
  /* Frases manuscritas num respiro acima da arte, sem cobrir a imagem. */
  .sv-topo-arte,.sv-arte{padding-top:56px}
  .sv-escrita{font-size:12px;top:0;right:2%}
  .sv-ilha-2{top:auto;bottom:7%;right:4%}
  .sv-abas{justify-content:space-between;gap:12px;font-size:12px}
  .sv-bloco{padding:52px 0}
  .sv-bloco h2{font-size:clamp(34px,9.5vw,44px)}
  .sv-texto p{font-size:16px}
  .sv-cta{padding:56px 0 80px}
  .sv-cta h2{font-size:clamp(34px,9.5vw,44px)}
  .sv-cta .sv-escrita{display:none}
  /* Decoração no celular: uma ilha pequena e a estrela por bloco, nuvens mais altas. */
  .sv-ilha-b{display:none}
  /* Estrela no alto à esquerda (a frase fica à direita); ilha na altura da arte, meio fora da tela, do lado oposto à estrela. Com #id para vencer as posições do desktop. */
  .sv-estrela{width:52px}
  #identidade .sv-estrela,#audiovisual .sv-estrela{left:5%;right:auto;top:28px}
  #identidade .sv-estrela{top:76px}
  #identidade .sv-ilha-a,#audiovisual .sv-ilha-a{width:64px;left:auto;right:-6%;top:30%;bottom:auto}
  #redes .sv-ilha-a,#sites .sv-ilha-a{width:64px;left:-6%;right:auto;top:30%;bottom:auto}
  /* Peixinho e cursor menores, em cantos vazios: no banner, peixinho à esquerda acima da arte e cursor à direita do botão; nos blocos, canto inferior direito, ao lado do link "Quero…". */
  .sv-topo .sv-peixe{width:56px;left:5%;top:14px}
  .sv-topo .sv-cursor{width:44px;right:6%;bottom:auto;top:calc(100% - 178px)}
  #identidade .sv-cursor{width:48px;right:7%;bottom:44px}
  #sites .sv-peixe{width:64px;right:6%;bottom:44px}
  #identidade{padding-top:84px}
  .sv-nuvens-alto-longe{top:calc(44px - 20vw);height:20vw;background-size:25% auto}
  .sv-nuvens-alto-perto{top:calc(64px - 38vw);height:38vw;background-size:50% auto}
  /* Nuvens no celular: as mesmas duas camadas do banner do index (hero.css), mais baixas nos blocos e na chamada. */
  .sv-nuvens-base,.sv-bloco-azul .sv-nuvens-base,.sv-cta-nuvens{height:46vw;background:url('../img/nova-arte/nuvens-brancas-isoladas-em-fundo-transparente-10.webp') repeat-x 0 100%/50% auto,url('../img/nova-arte/nuvens-brancas-isoladas-em-fundo-transparente-10.webp') repeat-x 35% 0/25% auto}
  .sv-nuvens-base,.sv-bloco-azul .sv-nuvens-base,.sv-cta-nuvens{bottom:-24vw}
  .sv-bloco{padding-bottom:120px}
}