/* Faixa de chamada: único uso do Índigo (no tema claro, Lilás 200) */
.faixa {
  padding: var(--e7) var(--e6);
  background: var(--gls-faixa);
  border-radius: var(--gls-radius-lg);
  box-shadow: var(--gls-relevo);
}
.faixa p { color: var(--gls-faixa-texto); }
.faixa .btn-sec { color: var(--gls-faixa-link); }

/* Abertura da landing page: título, apresentação logo abaixo dele e ficha de escopo em blocos */
.abertura { display: grid; gap: var(--e7); }
.abertura-topo { display: grid; gap: var(--e5); }
.abertura-topo h1 { margin-block-end: 0; }
.abertura-topo .acoes { margin-block-start: var(--e4); }

/* Ficha de escopo: cada serviço é um bloco quadrado, derivado do símbolo da marca.
   Marcar um serviço destaca o bloco com fundo tingido e contorno lilás, como o bloco S do logo. */
.escopo { display: grid; gap: var(--e5); }
.escopo-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e2) var(--e5); }
.escopo h2 { font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; margin-block-end: 0; }
.escopo-grade { display: grid; gap: var(--e5) var(--e3); }
.blocos legend { font-size: 14px; line-height: 1.45; color: var(--gls-muted); }
.blocos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--e3); }
@media (min-width: 1000px) {
  /* Seis colunas: "Sites" ocupa a primeira fileira; os outros três grupos dividem a segunda */
  .escopo-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .blocos { grid-column: span var(--colunas); }
  .blocos-grade { grid-template-columns: repeat(var(--colunas), minmax(0, 1fr)); }
  .bloco { aspect-ratio: 1; }
}
.escopo .bloco {
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--e4);
  min-height: 112px;
  margin: 0;
  padding: var(--e4);
  background: var(--gls-vidro);
  border: 1px solid var(--gls-line);
  border-radius: var(--gls-radius-lg);
  box-shadow: var(--gls-relevo);
  font-size: 15px;
  line-height: 1.35;
  transition: border-color .12s, box-shadow .12s, background-color .12s;
  animation: bloco-surgir .4s both, bloco-varrer .6s ease-out;
}
.bloco-icone { flex: none; fill: currentColor; color: var(--gls-muted); transition: color .12s; }
.escopo .bloco:hover { border-color: var(--gls-controle); }
.escopo .bloco:hover .bloco-icone { color: var(--gls-text); }
.escopo .bloco:has(input:checked) .bloco-icone { color: var(--gls-accent-strong); }
.escopo .bloco:has(input:checked) {
  background: var(--gls-accent-tint);
  border-color: var(--gls-accent-strong);
  box-shadow: inset 0 0 0 1px var(--gls-accent-strong);
}
.escopo .bloco:has(input:focus-visible) { outline: 2px solid var(--gls-accent); outline-offset: 2px; }
.escopo .bloco input { position: absolute; inset-block-start: var(--e4); inset-inline-end: var(--e4); margin: 0; }
.escopo .bloco input:focus-visible { outline: none; }
/* Marcar um bloco solta um anel de luz, que se abre e some. Fica em um pseudo-elemento
   para que desmarcar não repita a animação de entrada do bloco. */
.escopo .bloco::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
}
.escopo .bloco:has(input:checked)::after { animation: bloco-acender .5s ease-out; }
@keyframes bloco-acender {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gls-accent-strong) 50%, transparent); }
  to { box-shadow: 0 0 0 10px transparent; }
}
/* Abertura da página, uma única vez: os blocos surgem em sequência e, em seguida,
   o contorno lilás percorre a ficha na mesma ordem, mostrando que cada bloco pode ser marcado. */
@keyframes bloco-surgir { from { opacity: 0; transform: translateY(8px); } }
@keyframes bloco-varrer {
  40% { border-color: var(--gls-accent-strong); }
}
.escopo .bloco {
  --entrada: calc(var(--atraso-grupo, 0s) + var(--atraso, 0s));
  animation-delay: var(--entrada), calc(var(--entrada) * 2 + .7s);
}
.blocos:nth-child(2) { --atraso-grupo: .24s; }
.blocos:nth-child(3) { --atraso-grupo: .28s; }
.blocos:nth-child(4) { --atraso-grupo: .4s; }
.bloco:nth-child(2) { --atraso: .04s; }
.bloco:nth-child(3) { --atraso: .08s; }
.bloco:nth-child(4) { --atraso: .12s; }
.bloco:nth-child(5) { --atraso: .16s; }
.bloco:nth-child(6) { --atraso: .2s; }
@media (prefers-reduced-motion: reduce) {
  .escopo .bloco, .escopo .bloco:has(input:checked)::after { animation: none; }
}
.escopo-base { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e5); }
.escopo-resumo { color: var(--gls-accent-text); font-weight: 500; font-size: 16px; }

/* Como trabalhamos: o trilho se preenche conforme a leitura avança e a Entrega acende quando
   o trilho chega a ela. A referência é uma linha a 55% da altura da janela.
   Sem suporte a animação por rolagem, ou com movimento reduzido, fica o desenho estático. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .passos li::after {
      background: linear-gradient(var(--gls-accent), var(--gls-accent)) no-repeat top / 100% 0, var(--gls-line);
      animation: trilho-avancar linear both;
      animation-timeline: view(block 55% 45%);
      animation-range: cover;
    }
    .passos .passo-entrega::before {
      animation: entrega-acender linear both;
      animation-timeline: view(block 55% 45%);
      animation-range: cover;
    }
  }
  /* Em telas largas as etapas ficam lado a lado e entram juntas na janela; por isso cada trecho
     do trilho tem a sua parte da rolagem, da esquerda para a direita. O trecho aberto depois da
     Sustentação não se preenche. */
  @media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
    .passos li::after {
      background: linear-gradient(var(--gls-accent), var(--gls-accent)) no-repeat left / 0 100%, var(--gls-line);
      animation-name: trilho-correr;
      animation-timeline: view();
      animation-range: cover var(--de) cover var(--ate);
    }
    .passos li:nth-child(1) { --de: 25%; --ate: 33%; }
    .passos li:nth-child(2) { --de: 33%; --ate: 41%; }
    .passos li:nth-child(3) { --de: 41%; --ate: 49%; }
    .passos li:nth-child(4) { --de: 51%; --ate: 59%; }
    .passos li:last-child::after {
      background: linear-gradient(90deg, var(--gls-line), transparent);
      animation: none;
    }
    .passos .passo-entrega::before { animation-timeline: view(); animation-range: cover 47% cover 51%; }
  }
}
@keyframes trilho-avancar { to { background-size: 100% 100%; } }
@keyframes trilho-correr { to { background-size: 100% 100%; } }
@keyframes entrega-acender {
  from { border-color: var(--gls-controle); color: var(--gls-text); box-shadow: inset 0 0 0 1px transparent; }
}

/* Atalho para o portfólio: uma linha entre divisórias, com o botão à direita */
.atalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e5) var(--e7);
  padding-block: var(--e6);
  border-block: 1px solid var(--gls-line);
}
.atalho h2 { font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; margin-block-end: var(--e2); }
.atalho p { color: var(--gls-muted); }

/* Portfólio em formato de feed: cabeçalho de perfil e grade de publicações quadradas */
.perfil { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e5) var(--e6); }
.perfil h1 { font-size: clamp(32px, 3.6vw, 40px); line-height: 1.15; margin-block-end: var(--e2); }
.perfil-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  background: var(--gls-vidro);
  border: 1px solid var(--gls-line);
  border-radius: var(--gls-radius-lg);
  box-shadow: var(--gls-relevo);
}

.projeto { margin-block-end: var(--e6); }
.projeto-itens { margin: 0; padding: 0; list-style: none; max-width: none; }
.projeto-itens li { margin: 0; padding-block: var(--e3); border-block-start: 1px solid var(--gls-line); font-size: 16px; }
.projeto-itens li:last-child { border-block-end: 1px solid var(--gls-line); }

/* Carrossel do projeto: vídeo primeiro, depois as telas. O trilho rola de lado mesmo sem JavaScript. */
.carrossel {
  overflow: hidden;
  background: var(--gls-vidro);
  border: 1px solid var(--gls-line);
  border-radius: var(--gls-radius);
  box-shadow: var(--gls-relevo);
}
.carrossel-trilho {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Mesmo tom do fundo das telas da loja, para as faixas laterais não aparecerem */
  background: #0F0F12;
}
.carrossel-trilho:focus-visible { outline-offset: -2px; }
.carrossel-ativo .carrossel-trilho { scrollbar-width: none; }
.carrossel-ativo .carrossel-trilho::-webkit-scrollbar { display: none; }
.carrossel-trilho > .carrossel-slide {
  flex: 0 0 100%;
  margin: 0;
  aspect-ratio: 1;
  scroll-snap-align: start;
}
.carrossel-slide img, .carrossel-slide video { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 700px) {
  .carrossel-trilho > .carrossel-slide { aspect-ratio: 16 / 9; }
}
.carrossel-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2) var(--e5);
  padding: var(--e3) var(--e4);
  border-block-start: 1px solid var(--gls-line);
}
.carrossel-barra[hidden] { display: none; }
.carrossel-barra p { margin: 0; }
.carrossel-botao {
  padding: var(--e1) 0;
  background: none;
  border: 0;
  color: var(--gls-accent-text);
  font: 500 16px/1.3 var(--gls-font);
  cursor: pointer;
}
.carrossel-botao:hover { text-decoration: underline; }
.carrossel-barra .carrossel-legenda { margin-inline-start: auto; font-size: 14px; font-weight: 500; line-height: 1.45; }

/* Grade de publicações quadradas */
.feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e2);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: none;
}
@media (min-width: 900px) {
  .feed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tipos de projeto: publicações de texto na mesma grade */
.feed-tipos { margin-block-start: var(--e6); }
.feed-tipos > div {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: var(--e5);
  background: var(--gls-vidro);
  border: 1px solid var(--gls-line);
  border-radius: var(--gls-radius);
  box-shadow: var(--gls-relevo);
  scroll-margin-top: var(--e5);
}
.feed-tipos > div:target { border-color: var(--gls-accent-strong); box-shadow: inset 0 0 0 1px var(--gls-accent-strong); }
/* O ícone é o mesmo do serviço na ficha de escopo da página inicial */
.feed-tipos dt { display: flex; flex-direction: column; gap: var(--e3); font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.feed-icone { flex: none; fill: currentColor; color: var(--gls-accent-strong); }
.feed-tipos dd { display: flex; flex: 1; flex-direction: column; gap: var(--e4); margin: 0; color: var(--gls-muted); font-size: 16px; }
.feed-tipos dd p + p { margin-block-start: 0; }
.feed-tipos .feed-pe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2) var(--e4);
  margin-block-start: auto;
}
@media (max-width: 599px) {
  .feed-tipos { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 600px) {
  .feed-tipos > div { aspect-ratio: 1; }
}