/* ===========================================================================
   app.extra.css — o que é NOSSO na raiz de entelecy.app.

   ARQUIVO SEPARADO de propósito. O `app.bundle.css` é MONTADO a partir da suíte
   externa (`Entelecy.Site/entelecy-web-suite`) — o cabeçalho dele diz isso e diz
   como regerar. Toda edição feita lá dentro morre na próxima remontagem, em
   silêncio, e alguém descobre pela página quebrada. Aqui não morre.

   Carregado DEPOIS do bundle e FORA de `@layer`: o que está em camada perde para
   o que não está, então estas regras vencem sem disputa de especificidade —
   inclusive a de `position` do `.ec-header`, que no bundle é `relative`.

   Versionado por hash no `SitesServer.Versionados` — sem isso a Cloudflare serve
   a versão velha por horas (já aconteceu com o app.js em 09/08).
   =========================================================================== */

/* --- header fixo: a página rola por baixo (pedido do dono, 12/08) ---------
   `sticky` e não `fixed`: `fixed` tira o header do fluxo e o conteúdo sobe por
   baixo dele, exigindo um padding no topo que precisa ser mantido igual à altura
   em toda quebra de tela. Com `sticky` o espaço continua reservado e o efeito é
   o mesmo. O fundo translúcido + blur já vêm do bundle — é o que faz o conteúdo
   passar por baixo com elegância, em vez de sumir atrás de uma tarja opaca. */
.ec-header {
  position: sticky;
  top: 0;
}

/* Com o header fixo, um link de âncora encostaria o alvo embaixo dele. */
:target,
#vitrine, #projetos, #como, #endereco, #garantias {
  scroll-margin-top: calc(var(--ec-header-height) + 1.25rem);
}

/* ===========================================================================
   PRIMEIRO BLOCO (15/08) — última publicação + busca + categorias

   Substituiu o herói de TEXTO (manchete + lede fixos). O bundle desenha
   `.app-hero` como um flex centrado de UM filho; agora são quatro blocos
   empilhados, então o display é redefinido aqui. Sem isto os quatro sairiam
   lado a lado, espremidos.
   =========================================================================== */
.app-hero {
  display: block;
  min-height: 0;
  padding-block: clamp(2rem, 6vw, 4rem);
}
/* O olho volta a alinhar à esquerda: o bloco deixou de ser centrado. */
.app-hero .ec-eyebrow { justify-content: flex-start; }

/* --- a peça + a ficha ---------------------------------------------------- */
.vhero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-top: var(--ec-space-4);
}

/* A moldura é a MESMA do card da grade (mesma peça, dois tamanhos). */
.vhero__peca {
  display: block;
  overflow: hidden;
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius-lg);
  background: #12100f;
  box-shadow: var(--ec-shadow);
  text-decoration: none;
  transition: transform var(--ec-duration-base) var(--ec-ease),
    border-color var(--ec-duration-base) ease;
}
.vhero__peca:hover {
  transform: translateY(-4px);
  border-color: var(--ec-accent);
}

.vhero__viewport {
  height: clamp(15rem, 30vw, 23rem);
  position: relative;
  display: block;
  overflow: hidden;
  background: #ece8df;
}
.vhero__viewport > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #b7afa4;
  font-family: var(--ec-font-display);
  font-size: 4.5rem;
}
/* Mesmo truque da grade: o site é renderizado em 250% e reduzido, senão ele
   cairia no layout MOBILE dele dentro de um quadro estreito. */
.vhero__viewport iframe {
  width: 250%;
  height: 250%;
  max-width: none;
  position: absolute;
  inset: 0 auto auto 0;
  border: 0;
  background: white;
  transform: scale(0.4);
  transform-origin: top left;
  pointer-events: none;
}
.vhero__viewport > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
}

.vhero__tag {
  margin: 0 0 .5rem;
  font: 600 .6875rem/1 var(--ec-font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ec-accent, #c86b4a);
}
.vhero__copy h1 {
  margin: 0 0 var(--ec-space-3);
  max-width: none;   /* o bundle limita em 14ch — aqui é um NOME, não manchete */
}
.vhero__desc {
  margin: 0 0 var(--ec-space-3);
  color: var(--ec-text-muted);
  font-size: var(--ec-step-0);
  /* Três linhas. A descrição é "carregada" por pedido, e carregada por inteiro
     empurraria a busca para fora da primeira tela — que é o oposto de pôr a
     busca em destaque. O texto todo está na peça, a um clique. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vhero__url {
  margin: 0 0 var(--ec-space-4);
  font: .8125rem/1.4 var(--ec-font-mono);
  color: var(--ec-text-muted);
  word-break: break-all;
}
.vhero__actions { display: flex; flex-wrap: wrap; gap: var(--ec-space-3); }

/* --- o chamariz ----------------------------------------------------------
   Substituiu a busca no herói. Um convite só, com o número do acervo — e é um
   link de âncora de verdade: sem JS ele leva ao mesmo lugar, só sem deslizar. */
/* Centrado: é um convite para a página inteira, não uma legenda da peça. Colado
   à esquerda ele ficava pendurado embaixo da moldura, parecendo pertencer a ela.
   `width: fit-content` + margem automática porque o pai é block — `text-align`
   não centraliza um inline-flex que ocupa a linha toda. */
.vcta {
  /* `flex` e não `inline-flex`: margem automática só centraliza caixa de nível
     de bloco. Como inline, ele flui na linha e a margem não tem o que resolver. */
  display: flex;
  align-items: center;
  gap: .6rem;
  width: fit-content;
  margin-inline: auto;
  margin-top: clamp(1.75rem, 5vw, 2.5rem);
  padding: .85rem 1.5rem;
  border: 1px solid var(--ec-accent, #c86b4a);
  border-radius: 999px;
  color: var(--ec-accent, #c86b4a);
  font-size: var(--ec-step-0);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.vcta:hover {
  background: var(--ec-accent, #c86b4a);
  color: var(--ec-bg, #16110e);
  transform: translateY(-2px);
}
.vcta svg { transition: transform .2s ease; }
.vcta:hover svg { transform: translateY(3px); }

/* --- a BARRA da galeria: gruda no topo -----------------------------------
   Os controles moram COM a grade, não no herói: buscar no topo e ter de rolar
   até o resultado (levando o campo embora) tornava refinar uma viagem de ida e
   volta.

   `top` é a altura do cabeçalho do site, que também é sticky (regra no começo
   deste arquivo). Grudar em `top:0` empilharia as duas barras uma sobre a outra.

   FORA do `.ec-container`: o fundo sangra de ponta a ponta quando gruda, e o
   container volta por dentro. */
/* O respiro do `.ec-section` no TOPO desta seção encolhe: ele foi desenhado para
   um bloco que começa com título, e agora ela começa com a barra de controles.
   Com o padding cheio sobrava um vão morto entre o herói e a busca, e a barra
   parecia solta em vez de ser o cabeçalho do bloco. O de baixo continua. */
.app-projects { padding-block-start: clamp(1.25rem, 3vw, 2.25rem); }

.vbar {
  position: sticky;
  top: var(--ec-header-height);
  z-index: 20;
  padding-block: .75rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--ec-bg, #16110e) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* Só ganha borda e sombra DEPOIS de grudar (o app.js marca) — parada no meio da
   seção, uma linha solta pareceria um separador que ninguém pediu. */
.vbar[data-grudada] {
  border-bottom-color: var(--ec-line);
  box-shadow: 0 6px 20px rgb(0 0 0 / .18);
}
.vbar__inner {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.25rem);
}

/* --- Todos | Sites | Imagens --------------------------------------------- */
.vtipos {
  display: flex;
  flex: none;
  align-items: center;
  gap: .15rem;
  padding: .2rem;
  border: 1px solid var(--ec-line);
  border-radius: 999px;
}
.vtipo {
  border: 0;
  background: none;
  padding: .45rem .9rem;
  border-radius: 999px;
  font: inherit;
  font-size: .875rem;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ec-text-muted, #6b6259);
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease;
}
.vtipo:hover { color: var(--ec-text, inherit); }
.vtipo[aria-selected="true"] {
  color: var(--ec-text, inherit);
  font-weight: 600;
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.vtipo:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* --- a busca (agora dentro da barra) -------------------------------------- */
.vbusca {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 1;
  min-width: 0;
  padding: .1rem .4rem .1rem .9rem;
  border: 1px solid var(--ec-line);
  border-radius: 999px;
  background: var(--ec-bg-elevated, rgb(255 255 255 / .04));
  transition: border-color .18s ease;
}
.vbusca:focus-within { border-color: var(--ec-accent); }
.vbusca__lupa { flex: none; color: var(--ec-text-muted); }
.vbusca__campo {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: .6rem 0;
  font: inherit;
  font-size: var(--ec-step-0);
  color: var(--ec-text, inherit);
}
.vbusca__campo:focus { outline: none; }   /* o anel vai na pílula inteira */
/* O X nativo do type=search duplicaria o nosso botão, em outro estilo. */
.vbusca__campo::-webkit-search-cancel-button { display: none; }
.vbusca__limpar {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ec-text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.vbusca__limpar:hover { color: var(--ec-text, inherit); }
.vbusca__limpar[hidden] { display: none; }

/* --- a linha de categorias -----------------------------------------------
   UMA LINHA em qualquer largura (a régua do dono). Em tela estreita ela ROLA
   na horizontal em vez de quebrar: quebrar viraria duas ou três linhas de
   botão, que é justamente o "muito extenso" que o pedido excluía. */
.vchips {
  display: flex;
  flex-wrap: nowrap;
  gap: .4rem;
  margin-top: .6rem;
  overflow-x: auto;
  scrollbar-width: none;
  /* Alinhada à ESQUERDA, não centrada: dentro da barra ela fica sob a busca, e
     centrar deixaria as duas fileiras desencontradas a cada mudança no número
     de chips. */
  padding-block: .1rem;
}
.vchips::-webkit-scrollbar { display: none; }

/* Discretas de propósito: SEM contorno e em corpo menor. São o terceiro filtro
   da barra, atrás da busca e do tipo — desenhá-las como botão cheio dava a três
   controles o mesmo peso visual e comia a altura que a grade quer.
   Só a selecionada ganha fundo, e é assim que ela se distingue sem moldura. */
.vchip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border: 0;
  border-radius: 999px;
  padding: .25rem .55rem;
  background: none;
  font: inherit;
  font-size: .8125rem;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--ec-text-muted);
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease;
}
.vchip:hover {
  color: var(--ec-text, inherit);
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.vchip:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.vchip[aria-pressed="true"] {
  color: var(--ec-bg, #16110e);
  background: var(--ec-accent, #c86b4a);
  font-weight: 600;
}
/* A contagem: presente, mas nunca competindo com o rótulo. */
.vchip i {
  font-style: normal;
  font-size: .6875rem;
  opacity: .55;
  font-variant-numeric: tabular-nums;
}

/* Em modo de busca a grade reserva altura.

   Sem isto, buscar algo com um resultado só encurtava o documento a ponto de não
   haver mais o que rolar — e o navegador devolvia a página para perto do topo,
   descolando a barra bem no instante em que o resultado aparecia. Medido em
   15/08: a barra saltava de 0px para 777px abaixo do cabeçalho.

   `min-height` e não altura fixa: com muitos resultados a grade cresce normal.
   Serve também ao estado vazio, que deixa de parecer um bloco desabado. */
#vgrid[data-busca] { min-height: 62vh; }

/* Aviso de busca sem resultado. Ocupa o lugar da grade, não empurra nada. */
.vsemnada {
  margin: var(--ec-space-6) 0;
  text-align: center;
  color: var(--ec-text-muted);
}
.vsemnada[hidden] { display: none; }

@media (max-width: 860px) {
  .vhero { grid-template-columns: 1fr; }
  /* A ficha vem ANTES da peça no empilhado: o nome e a descrição são o que
     orienta, e a moldura sozinha no topo empurraria o chamariz para baixo da
     dobra num telefone. */
  .vhero__copy { order: -1; }
  .vhero__viewport { height: clamp(12rem, 52vw, 18rem); }
}

/* A barra não cabe em uma fileira num telefone: a busca ocupa a linha inteira e
   os tipos descem. Empilhar é melhor que espremer o campo até ele não caber uma
   palavra. */
@media (max-width: 720px) {
  .vbar__inner { flex-wrap: wrap; }
  .vbusca { flex: 1 0 100%; }
  .vtipos { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vhero__peca, .vbusca, .vchip, .vcta, .vcta svg, .vbar { transition: none; }
}

/* O `.app-subnav` (Landing Pages | Imagens) saiu em 15/08: virou `.vtipos`
   dentro da barra grudada, com "Todos" na frente. As regras dele foram embora
   junto — CSS de marcação que não existe mais é peso que ninguém remove depois
   porque ninguém lembra que era dele. */

/* O filtro ESCONDE; a grade continua a mesma. */
.app-project[hidden] { display: none; }

/* A frase que explica o gesto do card. Sob a barra, em corpo de texto — o
   cabeçalho grande da seção saiu para não competir com o campo de busca. */
.vnota {
  margin: 0 0 var(--ec-space-5);
  color: var(--ec-text-muted);
  font-size: var(--ec-step--1, .9375rem);
}

/* --- cartão de IMAGEM --------------------------------------------------
   A foto ocupa a moldura inteira. `cover` e não `contain`: a grade tem quadros
   de proporção fixa e uma foto encaixada com tarjas nas laterais faz a fileira
   parecer quebrada. O corte é do enquadramento do cartão — a foto inteira está
   a um clique, no visor. */
.app-project[data-kind="imagem"] .app-project__viewport > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;   /* acima do lavado gerado, que fica de fundo */
}

@media (prefers-reduced-motion: reduce) {
  .vtipo { transition: none; }
}

/* --- setas do preview de site -------------------------------------------
   Percorrer a vitrine sem fechar e reabrir o diálogo. Ficam FORA do cartão
   (são do diálogo, não da peça), então não entram no ciclo de Tab que prende
   o foco entre as ações do cartão. */
.app-preview__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--ec-line, rgb(255 255 255 / .14));
  background: color-mix(in srgb, var(--ec-bg, #16110e) 72%, transparent);
  backdrop-filter: blur(10px);
  color: var(--ec-text, inherit);
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
/* O `hidden` do HTML tem de vencer o `display:grid` de cima — sem isto a seta
   apareceria nas pontas, levando a lugar nenhum. */
.app-preview__nav[hidden] { display: none; }

.app-preview__nav:hover { background: color-mix(in srgb, var(--ec-bg, #16110e) 92%, transparent); }
.app-preview__nav:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.app-preview__nav--esq { left: max(16px, calc(50vw - 34rem)); }
.app-preview__nav--dir { right: max(16px, calc(50vw - 34rem)); }

/* Telas estreitas: o cartão ocupa quase tudo e as setas encostariam nele.
   Descem para as bordas, menores — e o teclado continua valendo. */
@media (max-width: 720px) {
  .app-preview__nav { width: 38px; height: 38px; }
  .app-preview__nav--esq { left: 8px; }
  .app-preview__nav--dir { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-preview__nav { transition: none; }
}

/* ===========================================================================
   RODAPÉ — vãos IGUAIS entre os itens (pedido do dono, 03/09)

   O bundle desenha `.ec-footer__inner` como `grid: 1fr auto 1fr`, um desenho de
   TRÊS itens: o do meio ficava centrado e os dois vãos saíam com larguras
   diferentes, porque dependiam do comprimento de cada texto. Com a entrada do
   "Por que Entelecy?" são quatro, e a terceira coluna passaria a empilhar dois
   itens numa célula só.

   `space-between` e não `repeat(4, 1fr)`: o pedido é espaço em branco igual
   ENTRE os elementos, e colunas iguais dariam o contrário — textos de larguras
   diferentes deixariam vãos diferentes. Aqui os itens medem o que medem e o que
   sobra é repartido em partes iguais, com o primeiro e o último nas bordas.

   `gap` é o PISO: quando a linha aperta, o espaço distribuído chega a zero e é o
   gap que impede os textos de se encostarem antes de quebrarem para a linha de
   baixo. */
.ec-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--ec-space-4, 1rem) var(--ec-space-5, 1.5rem);
}

/* `justify-self` do bundle é de grid e não faz nada em flex — o último item já
   encosta na borda direita por causa do `space-between`. */

/* Empilhado, "espaço igual" não quer dizer nada: o que vale é a margem da
   coluna. O bundle já empilha aqui, mas com `justify-items`, que também é de
   grid — em flex quem alinha é o `align-items`. */
@media (max-width: 48rem) {
  .ec-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
}