/* ==========================================================================
   Vazto — o padrão partilhado das dez páginas de produto

   POR QUE EXISTE ESTE FICHEIRO. O miolo das páginas de produto está escrito
   dentro de cada uma, num bloco `<style>` que foi copiado dez vezes. Corrigir
   uma regra ali é corrigi-la dez vezes e falhar a décima primeira — foi
   exactamente assim que a numeração ficou com dois tons por página.

   Aqui fica o que TEM de ser igual nas dez. É carregado depois do bloco
   copiado, e é por isso que ganha: mesma especificidade, mais abaixo.

   Não é uma folha de estilo nova para as páginas. É a autoridade sobre três
   coisas concretas, e sobre mais nenhuma.
   ========================================================================== */


/* ==========================================================================
   1 · A NUMERAÇÃO — uma cor, exactamente uma, por produto

   O cliente pediu isto três vezes e das três encontrou tons diferentes na
   mesma página: no Customizer o 01 saía roxo escuro e o 02 lavanda claro.

   A causa não era um gradiente. Era uma regra por CHÃO: cada família de
   pastilha tinha uma versão para fundo claro (`--acc-ink`, o tom escuro da
   cor) e outra para fundo escuro (o acento). Duas secções seguidas com fundos
   diferentes davam dois azuis, dois roxos, dois âmbares — e a página lia-se
   como se cada etapa tivesse a sua cor.

   A regra passa a ser a que o cliente escreveu: O FUNDO DA SECÇÃO NÃO MUDA A
   COR DA PASTILHA. O contraste resolve-se onde ele disse que se resolvia —
   no número, na borda e na sombra.

     Search      #D9A441      Flow        #8EBF3F      Project  #05DBF2
     Customizer  #A89BE8      Go-to-Market #07d2d2

   São os valores do registo da marca (`assets/js/paleta.js`), que é onde uma
   cor de produto vive. `--cyan` já é esse valor em cada página; escrevê-lo
   outra vez aqui seria abrir a sexta cópia.

   A TINTA é fixa por produto e medida sobre o próprio acento: entre 5.3:1
   (Customizer) e 11:1 (Project). Sobre papel a pastilha ganha um anel
   interior do próprio acento escurecido, porque um lavanda claro chapado
   sobre branco não tem aresta — 2.5:1 contra o papel.
   ========================================================================== */
body[data-produto="search"]     { --pastilha-tinta:#2b1e07 }
body[data-produto="flow"]       { --pastilha-tinta:#151d09 }
body[data-produto="project"]    { --pastilha-tinta:#0e1125 }
body[data-produto="customizer"] { --pastilha-tinta:#32295b }
body[data-produto="gtm"]        { --pastilha-tinta:#04262b }

/* As sete famílias que a descoberta encontrou nas dez páginas: a legenda das
   cenas, as etapas, a rota, o mapa de fases, o ciclo, os mosaicos do
   Go-to-Market, os entregáveis e a pista das páginas aprofundadas.

   A lista é dupla — `.x.x` — para valer mais do que as regras por chão que
   estão no bloco copiado (`.g-dark .stage__n` e companhia). Não é um truque:
   é a forma de dizer "esta regra é mais forte do que a variante por fundo"
   sem `!important` e sem ter de reescrever dez ficheiros. */
body[data-produto] .leg__n.leg__n,
body[data-produto] .stage__n.stage__n,
body[data-produto] .rota__n.rota__n,
body[data-produto] .mapa__n.mapa__n,
body[data-produto] .ciclo__n.ciclo__n,
body[data-produto] .tile__n.tile__n,
body[data-produto] .entregavel__n.entregavel__n,
body[data-produto] .tstop > b{
  background:var(--cyan);
  color:var(--pastilha-tinta);
  /* Duas camadas e mais nenhuma: a aresta e a elevação. O brilho interior
     branco saiu com os gradientes — era a segunda maneira de fingir um disco
     metálico. */
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--cyan) 58%,#0b1416),
    0 6px 14px -8px color-mix(in srgb,var(--cyan) 85%,transparent);
}

/* O `.entregavel__n` é uma pílula de texto, não um disco: o `padding` e o
   raio são dele e ficam. O que muda é a cor, como em todos os outros. */
body[data-produto] .entregavel .entregavel__n.entregavel__n{
  background:var(--cyan);
  color:var(--pastilha-tinta);
}

/* A CONTAGEM DAS CATEGORIAS NÃO ENTRA AQUI, e é deliberado. No catálogo do
   Project cada aba mostra quantos projectos tem — 10, 4, 11, 9. É um número,
   mas não é uma enumeração: a aba activa é escura e as outras são claras
   porque isso é ESTADO, não deriva de tom. Pintá-las todas do acento apagava
   a diferença entre a aba aberta e as fechadas. */


/* ==========================================================================
   2 · OS TÍTULOS, SEM MINI-TÍTULO POR CIMA

   Saíram trinta e oito mini-títulos das dez páginas — "ECOSSISTEMA" por cima
   de "Procurando outra solução?", "O PRÓXIMO PASSO" por cima do fecho,
   "CONFIANÇA" por cima de "Clientes e Parceiros". Eram classificações da
   secção: quem lê o título já sabe o que a secção é.

   O que fica para trás é a margem que separava o título do mini-título. Com o
   mini-título fora, o título passa a ser o primeiro elemento do bloco e essa
   margem vira um vazio no topo da secção. Aqui zera-se — só quando o título
   é mesmo o primeiro, para que um bloco que ainda tenha mini-título continue
   com o seu respiro.
   ========================================================================== */
.head > .h2:first-child,
.head > .h1:first-child,
.hero .shell > .h1:first-child,
.deephero .shell > .h1:first-child,
.finale .shell > .finale__h:first-child,
.finale .shell > .h2:first-child{ margin-block-start:0 }


/* ==========================================================================
   3 · A MONTRA DE PRODUTOS, À ESCALA DA HOME

   "Procurando outra solução?" usava os mesmos cartões da Home dentro da
   coluna de leitura, e no telemóvel empilhava os quatro em altura. O
   componente era o mesmo; a escala e o comportamento não.

   A secção passou a carregar `site/assets/css/montra.css` e
   `site/assets/js/montra.js` — o contentor largo, a grelha e o carrossel da
   Home, sem cópia. Faltam duas variáveis para que o resultado seja
   IDÊNTICO e não apenas parecido:

   · `--gutter`. A Home vale 20px e as páginas de produto 44px. A montra
     mede-se contra ela — `max(--shell, min(82vw,1560px))` menos duas
     goteiras —, e com 44 a grelha saía 48px mais estreita do que a da Home.
     Reposta ao valor da Home dentro do contentor da montra, e só lá: as
     outras secções desta página continuam com a goteira delas.

   · `--ease`. Não existe nas páginas de produto — o bloco copiado escreve a
     curva à mão onde precisa dela. `montra.css` não: os pontos do carrossel
     animam com `var(--ease)`, e uma variável vazia torna a declaração
     inválida. É o mesmo valor que `vazto.css` declara na Home.
   ========================================================================== */
body[data-produto]{ --ease:cubic-bezier(.2,.7,.3,1) }
.showcase__caixa{ --gutter:20px }

/* Os controlos do carrossel são desta secção, e esta secção é institucional
   — `is-vazto`. Sem isto, os pontos e as setas saíam âmbar no Search e lima
   no Flow, dentro do único bloco da página que não é do produto. */
.is-vazto .montra__seta{ color:#6ef5f5; border-color:rgba(7,210,210,.34); background:rgba(7,210,210,.06) }
.is-vazto .montra__seta:hover:not([disabled]){ border-color:#07d2d2; background:rgba(7,210,210,.14) }
.is-vazto .montra__pontos button[aria-current="true"]{ background:#07d2d2 }


/* ==========================================================================
   4 · OS CTAs NO TELEMÓVEL — a seta é um complemento, não o botão

   "Conhecer outros produtos" a 101px de altura em três linhas. "Conheça os
   projetos que implementamos" a 147px. Não era o botão: era a SETA.

   Um `<svg>` com `viewBox` e sem largura intrínseca é um elemento
   substituído sem dimensões — o navegador dá-lhe 300×150 e, dentro de um
   flex, ele estica-se até ao que a caixa permitir. `vazto.css` dimensiona os
   dois botões há muito; o bloco copiado para dentro das páginas de produto é
   anterior a essa correcção e só tem a regra do botão de contorno. Faltava
   uma linha, e nove CTAs viraram banner por causa dela.

   A seta fica com os mesmos 15px que tem no resto do site, o ícone do
   WhatsApp com os seus 17, e o texto volta a caber numa linha.
   ========================================================================== */
.btn svg{ inline-size:15px; block-size:15px; transition:transform .22s }
.btn:hover svg{ transform:translateX(3px) }

/* O halo por baixo do botão principal é uma mancha desfocada que se estende
   para fora da pílula. No desktop é profundidade; num ecrã de 390 é mais
   largura aparente num elemento que já ocupa quase a linha toda. Metade da
   opacidade e menos desfoque — continua a levantar o botão do fundo. */
@media (max-width:659px){
  .btn::after{ filter:blur(12px); opacity:.1 }
  .btn:hover::after,.btn:focus-visible::after{ opacity:.5 }
}


/* ==========================================================================
   4 · A CTA BLOCK SITTING DIRECTLY IN A SECTION gets the page gutter

   Two product pages close "O que a Vazto … ajuda a construir" with an
   `.actions` block placed after the `.shell`, not inside it. It had no side
   padding, so on a phone a long label stretched the button edge to edge:
   the "giant banner" button. The gutter is the shell's own.
   ========================================================================== */
.section > .actions{ padding-inline:var(--gutter) }


/* ==========================================================================
   5 · ONE TYPE SCALE WITH THE INSTITUTIONAL PAGES

   The product pages carried two scales of their own: h2 at 39px on the
   summary pages and 37px on the detail pages, against 42px on every
   institutional page; ledes topped at 17.5px against 18px. Walking from the
   Home into a product, the section titles shrank for no reason.

   Same values as `site/assets/css/vazto.css`. The h1 is NOT here: a product
   hero sets its title beside the product lockup and scene, and its size is
   part of that composition.
   ========================================================================== */
.h2{ font-size:clamp(26px,5.4vw,42px) }
.h3{ font-size:clamp(18px,4vw,21px) }
.lede{ font-size:clamp(15.5px,3.7vw,18px); line-height:1.58 }