/* Serviços em tela cheia com troca pela rolagem + Projetos em mosaico + Consultoria */

/* ---------- Serviços ---------- */
.sx { position: relative; background: var(--black); color: #fff; }
.sx__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.sx__count { display: flex; align-items: baseline; gap: 10px; font-family: var(--serif); }
.sx__count b { font-weight: 400; font-size: 48px; line-height: 1; color: var(--blue-l); font-variant-numeric: tabular-nums; }
.sx__count span { font-size: 20px; color: rgb(255 255 255 / .7); }
.sx__item h3 { margin-top: 18px; }
.sx__p { margin-top: 22px; max-width: 40ch; font-size: var(--t-lead); line-height: 1.6; color: rgb(255 255 255 / .86); }
.sx__item .btn { margin-top: 30px; }
.sx__k { color: var(--blue-l); }
.sx__mfig { display: none; }
.sx__foot { display: none; }
.sx__frame { display: none; }
.sx .serif em { color: var(--blue-l); }
.sx .label { color: var(--label-d); }

/* Desktop: fixo na tela. A rolagem escolhe o serviço; a troca acontece no próprio tempo */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .svc-intro { padding-bottom: 0; }
  .sx { height: 330vh; }
  .sx__pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; padding-top: 56px; }
  .sx__k { display: none; }
  .sx__left { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 22px; height: min(700px, 84vh); }
  .sx__stack { position: relative; }
  .sx__item { position: absolute; inset: 0; pointer-events: none; }
  .sx__item.is-on { pointer-events: auto; }
  .sx__r { opacity: 0; transform: translateY(28px); filter: blur(4px); transition: opacity .45s var(--ease), transform .6s var(--ease), filter .45s var(--ease); }
  .sx__item.is-on .sx__r { opacity: 1; transform: none; filter: none; transition: opacity .7s var(--ease), transform .9s var(--ease), filter .6s var(--ease); transition-delay: .12s; }
  .sx__item.is-on .sx__r:nth-child(3) { transition-delay: .2s; }
  .sx__item.is-on .sx__r:nth-child(4) { transition-delay: .28s; }
  .sx__item.is-on .sx__r:nth-child(5) { transition-delay: .36s; }
  .sx__item.is-out .sx__r { transform: translateY(-24px); }

  .sx__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgb(255 255 255 / .16); padding-top: 8px; }
  .sx__nav { display: flex; gap: 32px; }
  .sx__nav button { position: relative; padding: 10px 0; font: 600 var(--t-label)/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: rgb(255 255 255 / .68); transition: color .3s; }
  .sx__nav button:hover, .sx__nav button.is-on { color: #fff; }
  /* a linha azul da aba ativa enche conforme a rolagem */
  .sx__nav button.is-on::before { content: ""; position: absolute; top: -9px; left: 0; right: 0; height: 2px; background: var(--blue-l); transform-origin: left; transform: scaleX(calc(.15 + .85 * var(--prog, 0))); }
  .sx__skip { font-size: var(--t-small); color: rgb(255 255 255 / .68); white-space: nowrap; }
  .sx__skip:hover { color: #fff; }

  .sx__grid { display: block; }
  .sx__left { z-index: 2; width: min(480px, 36vw); }
  .sx__frame { display: block; position: absolute; inset: 0 0 0 max(30%, calc((100% - min(1200px, 100% - 48px)) / 2 + 380px)); z-index: 0; overflow: hidden; background: var(--black); }
  .sx__frame::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, var(--black) 0%, rgb(13 14 16 / .88) 14%, rgb(13 14 16 / .35) 36%, rgb(13 14 16 / 0) 58%), linear-gradient(0deg, rgb(13 14 16 / .5) 0%, transparent 18%), linear-gradient(180deg, rgb(13 14 16 / .55) 0%, transparent 16%); }
  /* Cortina: a foto nova sobe (ou desce, ao voltar) por cima da anterior, que recua e escurece */
  .sx__img { position: absolute; inset: 0; visibility: hidden; overflow: hidden; }
  .sx__img img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; transform: scale(1.14); transition: transform 2.2s cubic-bezier(.16, 1, .3, 1), filter 1.4s ease; }
  .sx__img[data-i="0"] img { object-position: 64% 50%; }
  .sx__img[data-i="2"] img { object-position: 92% 50%; }
  .sx__img.is-on { visibility: visible; z-index: 2; animation: sxUp 1.5s cubic-bezier(.76, 0, .24, 1) both; }
  .sx__img.is-on.from-top { animation-name: sxDown; }
  .sx__img.is-on img { transform: scale(1); }
  .sx__img.is-prev { visibility: visible; z-index: 1; }
  .sx__img.is-prev img { transform: scale(1.08) translateY(-3%); filter: brightness(.45); transition-duration: 1.5s; }
  .sx.no-anim .sx__img.is-on { animation: none; }
}
@keyframes sxUp { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sxDown { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* Celular, tablet ou movimento reduzido: serviços empilhados */
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .sx { padding: 20px 0 40px; }
  .sx__grid { display: block; }
  .sx__count { display: none; }
  .sx__item { padding: 36px 0 44px; border-top: 1px solid var(--line-d); }
  .sx__item:first-child { border-top: 0; padding-top: 0; }
  .sx__mfig { display: block; margin: 0 0 26px; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; }
  .sx__mfig img { width: 100%; height: 100%; object-fit: cover; }
  .sx__item[data-i="0"] .sx__mfig img { object-position: 64% 50%; }
}
/* Computador com movimento reduzido: texto e foto lado a lado, sem fixar */
@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .sx__item { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .sx__item .sx__mfig { grid-column: 2; grid-row: 1 / span 5; margin: 0; }
  .sx__item > :not(.sx__mfig) { grid-column: 1; }
}

/* ---------- Projetos (escuro, um tom acima do preto dos serviços) ---------- */
.pj-wrap { position: relative; padding: 120px 0 110px; background: var(--black); isolation: isolate; }
/* fundo com luz azul difusa, em vez de preto chapado */
.pj-wrap::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(60% 50% at 85% 12%, rgb(26 143 208 / .22), transparent 70%),
  radial-gradient(55% 45% at 10% 60%, rgb(15 116 173 / .18), transparent 70%),
  radial-gradient(50% 40% at 70% 100%, rgb(26 143 208 / .12), transparent 70%),
  linear-gradient(180deg, #111419 0%, #0f1216 50%, var(--black) 100%); }
.pj { padding-top: 90px; }
.pj__head { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; padding-top: 70px; border-top: 1px solid var(--line-d); }
.pj__head .h3 { max-width: 22ch; }
.pj__head .lead { max-width: 62ch; }
.pj__brand { display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }
.pj__brand span { font: 600 var(--t-label)/1.6 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--label-d); }
.pj__brand b { color: #fff; font-weight: 600; }
.pj__logo--eq { width: 92px; height: auto; filter: brightness(0) invert(1); }
.pj__logo--mi { width: 56px; height: 56px; border-radius: 50%; }

/* Cards em mosaico (bento) */
.bento { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(140px, auto); gap: 14px; }
.bento--eq { grid-template-areas: "g g f m" "g g a a" "s ana luc l"; }
.bento--mi { grid-template-columns: repeat(3, 1fr); }
.cc--g { grid-area: g; } .cc--f { grid-area: f; } .cc--m { grid-area: m; } .cc--a { grid-area: a; }
.cc--s { grid-area: s; } .cc--ana { grid-area: ana; } .cc--luc { grid-area: luc; } .cc--l { grid-area: l; }
.cc { position: relative; display: flex; flex-direction: column; padding: 22px 22px 20px; border-radius: 18px; border: 1px solid rgb(255 255 255 / .14); background: linear-gradient(160deg, rgb(255 255 255 / .1), rgb(255 255 255 / .04)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 20px 40px -30px rgb(0 0 0 / .8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; transition: border-color .4s, transform .6s var(--ease), box-shadow .6s var(--ease); }
.cc:hover { border-color: rgb(108 192 239 / .6); transform: translateY(-3px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 24px 50px -28px rgb(26 143 208 / .45); }
.cc__cat { font: 600 var(--t-label)/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #a3aab1; }
.cc__ic { margin-top: 16px; width: 26px; height: 26px; fill: none; stroke: var(--blue-l); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cc__av { margin-top: 16px; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; box-shadow: 0 0 0 2px rgb(108 192 239 / .5); }
.cc__txt { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; }
.cc h4 { margin: 0; font: 500 var(--t-sub)/1.25 var(--serif); color: #fff; }
.cc p:not(.cc__cat) { margin-top: 6px; font-size: var(--t-small); line-height: 1.5; color: #b3b8be; }
.cc a { margin-top: 12px; font: 600 var(--t-small)/1.2 var(--sans); color: var(--blue-l); }
.cc a:hover { color: #fff; }
/* card grande: título maior e um brilho azul discreto */
.cc--big { padding: 30px; border-color: rgb(108 192 239 / .35); background: radial-gradient(120% 90% at 100% 0%, rgb(26 143 208 / .55), transparent 60%), linear-gradient(160deg, rgb(15 116 173 / .5), rgb(13 14 16 / .4)); }
.cc--big .cc__cat { color: #cfe6f6; }
.cc--big .cc__ic { stroke: #fff; }
.cc--big p:not(.cc__cat) { color: #d6e4ee; }
.cc--big .cc__ic { width: 36px; height: 36px; }
.cc--big h4 { font-size: var(--t-num); line-height: 1.1; }
.cc--big p:not(.cc__cat) { margin-top: 10px; max-width: 30ch; font-size: var(--t-body); }

.central__cta { margin-top: 80px; padding-top: 36px; border-top: 1px solid var(--line-d); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.central__cta p { font: 400 var(--t-h3)/1.15 var(--serif); color: #fff; max-width: 20ch; }

@media (max-width: 980px) {
  .pj__head { grid-template-columns: 1fr; gap: 26px; }
  .pj__brand { flex-direction: row; align-items: center; }
  .bento, .bento--eq, .bento--mi { grid-template-columns: 1fr 1fr; grid-template-areas: none; grid-auto-rows: auto; }
  .bento .cc { grid-area: auto; }
  .bento .cc--big { grid-column: 1 / -1; }
}
/* Celular: mosaico de duas colunas (card grande e os largos ocupam a linha inteira) */
@media (max-width: 600px) {
  .pj-wrap { padding: 84px 0 80px; }
  .pj { padding-top: 60px; }
  .pj__head { padding-top: 48px; }
  .bento, .bento--eq, .bento--mi { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 10px; margin-top: 36px; }
  .bento--eq { grid-template-areas: "g g" "f m" "a a" "s l" "ana luc"; }
  .bento--mi { grid-template-areas: "p p" "s a"; }
  .bento--eq .cc--g { grid-area: g; } .bento--eq .cc--f { grid-area: f; } .bento--eq .cc--m { grid-area: m; } .bento--eq .cc--a { grid-area: a; }
  .bento--eq .cc--s { grid-area: s; } .bento--eq .cc--ana { grid-area: ana; } .bento--eq .cc--luc { grid-area: luc; } .bento--eq .cc--l { grid-area: l; }
  .bento--mi .cc:nth-child(1) { grid-area: p; } .bento--mi .cc:nth-child(2) { grid-area: s; } .bento--mi .cc:nth-child(3) { grid-area: a; }
  .cc { padding: 16px 14px 14px; border-radius: 14px; }
  .cc__ic { margin-top: 12px; width: 22px; height: 22px; }
  .cc__av { margin-top: 12px; width: 40px; height: 40px; }
  .cc__txt { padding-top: 12px; }
  .cc h4 { font-size: 18px; }
  .cc p:not(.cc__cat) { font-size: 13px; line-height: 1.45; }
  .cc a { margin-top: 10px; font-size: 13px; }
  .cc--big { padding: 20px 18px 18px; }
  .cc--big .cc__ic { width: 28px; height: 28px; }
  .cc--big h4 { font-size: var(--t-sub); }
  .cc--big p:not(.cc__cat) { font-size: var(--t-small); }
  /* cards largos: ícone à esquerda do texto */
  .cc--g, .cc--a, .bento--mi .cc:nth-child(1) { display: grid; grid-template-columns: 40px 1fr; grid-template-areas: "ic cat" "ic txt"; column-gap: 12px; }
  .cc--g .cc__cat, .cc--a .cc__cat, .bento--mi .cc:nth-child(1) .cc__cat { grid-area: cat; }
  .cc--g .cc__ic, .cc--a .cc__ic, .bento--mi .cc:nth-child(1) .cc__ic { grid-area: ic; margin-top: 2px; }
  .cc--g .cc__txt, .cc--a .cc__txt, .bento--mi .cc:nth-child(1) .cc__txt { grid-area: txt; margin: 0; padding-top: 6px; }
  .cc:hover { transform: none; }
  .central__cta { margin-top: 56px; flex-direction: column; align-items: flex-start; }
}

/* ---------- Consultoria: foto em tela cheia, texto no lado escuro ---------- */
.cons { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; color: #fff; background: var(--black); isolation: isolate; }
.cons { --wl: calc((100% - min(1200px, 100% - 48px)) / 2); }
.cons__img { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.cons__img img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 35%; transform: scale(1.08); transition: transform 2.4s cubic-bezier(.16, 1, .3, 1); }
.cons:has(.cons__copy.is-in) .cons__img img { transform: scale(1); }
.cons::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(13 14 16 / .95) 0%, rgb(13 14 16 / .9) calc(var(--wl) + 380px), rgb(13 14 16 / .45) calc(var(--wl) + 560px), rgb(13 14 16 / 0) calc(var(--wl) + 760px)), linear-gradient(0deg, var(--black) 0%, rgb(13 14 16 / 0) 22%); }
.cons__copy { padding: 140px 0 150px; }
.cons__copy .h2 { margin-top: 22px; max-width: 18ch; }
.cons__p { margin-top: 24px; max-width: 42ch; font-size: var(--t-lead); line-height: 1.6; color: rgb(255 255 255 / .84); }
.cons__copy .btn { margin-top: 34px; }
.cons__note { margin-top: 14px; font-size: var(--t-small); color: rgb(255 255 255 / .7); }
@media (max-width: 760px) {
  .cons { display: block; min-height: 0; }
  .cons__img { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 3; }
  .cons__img img { object-position: 80% 30%; }
  .cons::after { inset: 0 0 auto; height: calc(75vw + 2px); z-index: 1; background: linear-gradient(0deg, var(--black) 0%, rgb(13 14 16 / 0) 45%); }
  .cons__copy { position: relative; z-index: 2; padding: 10px 0 70px; }
}
@media (prefers-reduced-motion: reduce) { .cons__img img { transform: none; transition: none; } }