/* ==========================================================================

   vsl-carril.css — o CARROSSEL de cartoes de video vertical, por categoria.

   --------------------------------------------------------------------------

   Ordem do dono, 28/09/2026: «elevar o nivel do design da pagina catalogo!

   colocar mais VLS com links e VERTICAIS nas laterais».

   Ordem seguinte, 29/09/2026: «o design deve repercutir no /estoque/ tambem

   seguindo o design da pagina principal e do site inicio».



   PORQUE E' UM FICHEIRO PROPRIO, e nao um bloco dentro do `vsl.css`:

   nasceu INLINE no <head> do `catalogo.html` (e o comentario la' explicava

   por que: subir o `?v=` do `vsl.css` obrigava a mexer em NOVE ficheiros).

   Assim que o desenho teve de valer TAMBEM na loja, a escolha passou a ser

   entre DUAS copias de 70 linhas a divergir ou um ficheiro novo sem cache

   para rebentar. Um URL novo (`?v=1`) nao tem versao velha em lado nenhum,

   por isso `vsl.css?v=3` e `vsl.js?v=2` — o VSL do herói — ficam INTOCADOS.



   UMA FOLHA, DUAS PAGINAS, DUAS LINGUAS DE COR. O catalogo e' CLARO

   (`body.catalog-white`) e a loja e' ESCURA (`nivel.css` poe `#000015`).

   Este ficheiro traz os valores da pagina CLARA e expoe-os como variaveis

   `--vc-*`; quem for escuro re-aponta-os onde ja' re-aponta o resto do tema

   (`nivel.css`). Nao ha' aqui um `@media` de tema nem uma regra por pagina:

   ha' tres valores de cor e quem os troca.



   O QUE NAO ESTA' AQUI, DE PROPOSITO: os dois LIMIARES das laterais.

   A largura da goteira depende do contentor de cada pagina — 1280px no

   catalogo, 1500px na loja (`main`). Uma media query nao aceita `var()`, logo

   o limiar nao pode ser derivado; cada pagina declara o SEU, ao lado do

   `--vs-conteudo` que lhe corresponde. Fica uma linha por pagina em vez de

   uma tabela de excepcoes aqui dentro.



   ADITIVA: reverter = tirar o <link> e o <section>. Nada usa `!important`.

   ========================================================================== */



/* ------------------------------------------------------------- 1. O carril */

.vsl-carril {

  /* A LINGUA DA PAGINA CLARA (catalogo). A loja re-aponta as quatro.

     `--vc-fonte` e' `inherit` de proposito: as duas paginas nao escrevem os

     titulos com a mesma letra — a loja usa `--serif` (Palatino) e o catalogo

     usa a sans da casa. Herdar deixa cada pagina falar a sua. */

  --vc-kicker:   #0040E0;

  --vc-titulo:   #0b1220;

  --vc-destaque: #0040E0;

  --vc-fonte:    inherit;

  /* A SANGRIA — quanto a tira pode sair para fora da almofada do contentor.

     Tem de ser o MENOR valor que essa almofada toma em qualquer largura, senao

     a tira empurra a pagina e NASCE ROLAGEM HORIZONTAL. Medido a 29/09/2026:

     com `-1rem` cego, a loja dava `scrollWidth 1026` para `clientWidth 1024` —

     2px. Esconder o carril fazia-os desaparecer (`1024 == 1024`), logo eram

     dele; a `main` da loja tem `padding: .9rem` abaixo dos 1060px (e 1.25rem

     acima), enquanto o `.container` do catalogo nunca desce de 1rem.

     Nao se deriva: declara-se, como o limiar das laterais. */

  --vc-sangria:  1rem;



  margin: 2.25rem 0 1rem;

}

.vsl-carril-kicker {

  font-family: var(--vc-fonte);

  font-size: .72rem;

  letter-spacing: .16em;

  font-weight: 700;

  color: var(--vc-kicker);

  margin: 0 0 .35rem;

}

.vsl-carril-titulo {

  font-family: var(--vc-fonte);

  font-size: clamp(1.25rem, 2.6vw, 1.75rem);

  line-height: 1.25;

  font-weight: 600;

  color: var(--vc-titulo);

  margin: 0 0 1rem;

}

.vsl-carril-titulo b { color: var(--vc-destaque); }

.vsl-carril-lista {

  display: flex;

  gap: .85rem;

  /* A sangria come a almofada do contentor para a tira chegar ao limite do

     ecra no telemovel. E' o valor que a PAGINA declara (`--vc-sangria`), e nao

     um `-1rem` cego: ver a nota do token, com a medicao dos 2px. */

  margin: 0 calc(-1 * var(--vc-sangria));

  padding: .25rem var(--vc-sangria) 1rem;

  list-style: none;

  overflow-x: auto;

  overflow-y: hidden;

  scroll-snap-type: x mandatory;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;

}

.vsl-cartao-li { flex: 0 0 auto; scroll-snap-align: start; }



/* ------------------------------------------------------------- 2. O cartao */

/* `overflow:hidden` aqui e' seguro — nao ha' nada `sticky` dentro. */

.vsl-cartao {

  position: relative;

  display: block;

  width: clamp(150px, 15vw, 208px);

  aspect-ratio: 9 / 16;

  border-radius: 14px;

  overflow: hidden;

  background: #000a30;

  text-decoration: none;

  box-shadow: 0 8px 26px rgba(0, 20, 80, .16);

  transition: transform .25s ease, box-shadow .25s ease;

}

.vsl-cartao:hover,

.vsl-cartao:focus-visible {

  transform: translateY(-4px);

  box-shadow: 0 16px 36px rgba(0, 20, 80, .28);

}

.vsl-cartao:focus-visible { outline: 3px solid #1A5FFF; outline-offset: 2px; }



/* A imagem E o video ficam EMPILHADOS: a imagem e' o poster e fica por baixo,

   o video por cima. Assim o cartao nunca pisca a preto — nem quando o video

   falha (offline, codec), porque a imagem continua la'.

   O poster tem de ser um `<img>` e nao o atributo `poster=` do `<video>`:

   `poster=` NAO aceita `loading="lazy"`, e os 17 posters (390 KB) carregavam

   so' para abrir a pagina, antes de alguem pedir video nenhum. */

.vsl-cartao-img,

.vsl-cartao-v {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

.vsl-cartao-v { opacity: 0; transition: opacity .35s ease; }

/* `.toca` e' posta pelos EVENTOS do video (`playing`/`pause`), nunca pelo

   pedido de `play()`. No pedido, o cartao mostrava um video ainda vazio e

   piscava a preto a cada passagem do rato. Ver o `vsl-carril.js`. */

.vsl-cartao.toca .vsl-cartao-v { opacity: 1; }



/* O veu fecha a .96 e nao a .86: o poster traz `afritronic.co.ao` a 87% da

   altura, que cai exactamente debaixo do rótulo — medido na 1.a montagem, o

   endereco do poster via-se por tras do nome da categoria e as duas linhas

   de texto pareciam uma gralha. O poster e' o mesmo do video (nao se faz um

   segundo), por isso quem cede e' o veu. */

.vsl-cartao-txt {

  position: absolute;

  inset: auto 0 0 0;

  display: flex;

  flex-direction: column;

  gap: .1rem;

  padding: 2.6rem .8rem .8rem;

  background: linear-gradient(180deg, rgba(0, 0, 21, 0) 0%, rgba(0, 0, 21, .78) 52%,

                              rgba(0, 0, 21, .96) 100%);

  color: #fff;

}

.vsl-cartao-txt b { font-size: .95rem; font-weight: 700; line-height: 1.2; }

.vsl-cartao-txt i {

  font-style: normal;

  font-size: .78rem;

  font-weight: 600;

  color: #7FE9C3;

}

.vsl-cartao-txt i::after { content: " →"; }



/* ---------------------------------------------------- 3. As laterais fixas */

/* So' onde ha' MESMO espaco livre. O `display` esta' em `none` e nao ha' aqui

   media query: quem o liga e' cada pagina, quando a goteira dela abre.

   Um cartao encostado ao texto e' pior do que cartao nenhum.



   `z-index: 15` e' de proposito baixo: fica por baixo da barra fixa do topo

   (20, nas duas paginas) e — na loja — por baixo do modal da ficha do produto

   (40). Um cartao decorativo nunca pode apanhar um clique dirigido a um

   dialogo. `pointer-events` so' no cartao: a faixa inteira nao come o rato. */

.vsl-laterais {

  --vs-conteudo: 1280px;      /* a largura do contentor do CATALOGO */

  display: none;

  position: fixed;

  inset: 0;

  z-index: 15;

  pointer-events: none;

  /* A largura e' o MENOR de dois limites: o que a goteira da', e o que a

     ALTURA do ecra' aguenta para dois cartoes. Sem o segundo, num ecra'

     1920x900 os cartoes saiam com 512px de altura cada e o segundo saia

     do ecra'. */

  --vs-w: min(calc((100vw - var(--vs-conteudo)) / 2 - 32px),

              calc((100vh - 200px) * 9 / 32));

}

.vsl-lateral {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  display: flex;

  flex-direction: column;

  gap: 1rem;

  width: var(--vs-w);

  margin: 0;

  padding: 0;

  list-style: none;

  pointer-events: auto;

}

.vsl-lateral-e { left: calc((100vw - var(--vs-conteudo)) / 4 - var(--vs-w) / 2); }

.vsl-lateral-d { right: calc((100vw - var(--vs-conteudo)) / 4 - var(--vs-w) / 2); }

.vsl-cartao-lat { width: 100%; border-radius: 16px; }

.vsl-cartao-lat .vsl-cartao-txt { padding: 1.8rem .6rem .6rem; }

.vsl-cartao-lat .vsl-cartao-txt b { font-size: .84rem; }

.vsl-cartao-lat .vsl-cartao-txt i { font-size: .72rem; }



/* --------------------------------------- 4. Acessibilidade / movimento reduzido */

/* Sem movimento: fica o poster. Ele JA' e' a capa composta (o nome da

   categoria e as tres fotos), por isso nao se perde informacao nenhuma. */

@media (prefers-reduced-motion: reduce) {

  .vsl-cartao { transition: none; }

  .vsl-cartao:hover,

  .vsl-cartao:focus-visible { transform: none; }

}

@media print {

  .vsl-carril,

  .vsl-laterais { display: none; }

}



/* ==========================================================================

   5. O BLOCO CITAVEL (GEO) — .geo-citavel

   --------------------------------------------------------------------------

   Medido a 06/10/2026: a `class="geo-citavel"` existia no `catalogo.html`

   desde 05/10 e **nao havia uma unica regra CSS para ela em ficheiro nenhum**.

   O bloco — dois paragrafos de texto corrido, ~200 palavras, escritos SO' para

   os motores citarem — caiu na pagina sem desenho, a herdar o que o browser

   da' por omissao: uma parede de texto entre o carril de videos e os cartoes.



   O defeito nao era o texto; era a classe sem regra. E' a familia

   `peca-construida-que-ninguem-liga`, aplicada a CSS: o gancho estava la',

   quem o devia agarrar nunca existiu.



   PORQUE NAO SE ESCONDE: esconder (display:none / clip) mataria o proposito —

   os motores precisam de LER o texto. Ele fica visivel e legivel; o que muda

   e' o PESO visual, nao a presenca.



   A LINGUA DA PAGINA: os mesmos tokens `--vc-*` do carril (nao se inventam

   cores). A loja e' escura e re-aponta as quatro em `nivel.css`, por isso

   isto funciona nas duas paginas sem uma linha por tema.



   ADITIVA: reverter = apagar esta seccao. Nada aqui usa `!important`.

   ========================================================================== */

.geo-citavel {

  /* ⚠️ OS TOKENS REPETEM-SE AQUI, e e' de proposito. O bloco vive DEPOIS do

     `.vsl-carril` no DOM, nao dentro dele — e as `--vc-*` estao declaradas

     DENTRO do `.vsl-carril`. Herança nao chega a um irmao: `var(--vc-destaque)`

     resolvia para NADA, o `color-mix` inteiro tornava-se invalido, e a caixa

     ficava sem fundo e sem borda (medido a 06/10/2026 com getComputedStyle:

     `border: 0px none`).

     Isto e' o MESMO defeito que cura — um gancho sem quem o agarre. A cura

     certa seria promover as `--vc-*` para `:root`; fica para quando mexer nas

     duas paginas ao mesmo tempo. Aqui os valores sao repetidos e ha um teste

     que falha se a heranca voltar a ser assumida. */

  --vc-kicker:   #0040E0;

  --vc-titulo:   #0b1220;

  --vc-destaque: #0040E0;

  --vc-fonte:    inherit;



  /* O que separa o bloco do carril acima e dos cartoes abaixo. Nos 2.25rem

     do carril isto ficaria colado aos dois; le-se como um andaime. */

  margin: 1.75rem 0 2.5rem;

  padding: 1.5rem 1.75rem;

  /* A MESMA SANGRIA do carril, pelo mesmo motivo que ele a declara:

     alinhar a caixa com a grelha sem empurrar a pagina. */

  border-radius: 14px;

  /* Uma faixa discreta, nao um cartao: o bloco e' contexto, nao oferta. */

  background: rgba(0, 64, 224, .04);

  background: color-mix(in srgb, var(--vc-destaque) 4%, transparent);

  border: 1px solid rgba(0, 64, 224, .14);

  border: 1px solid color-mix(in srgb, var(--vc-destaque) 14%, transparent);

  /* `text-wrap: pretty` evita as ultimas linhas de uma so' palavra — num

     bloco de 200 palavras corridas e' o que separa "texto" de "parede". */

  text-wrap: pretty;

}



/* O titulo faz o trabalho de uma pergunta: e' ele que um motor cita como

   cabecalho da passagem. Peso de titulo, tamanho de corpo de texto. */

.geo-citavel h2 {

  font-family: var(--vc-fonte);

  font-size: clamp(1.05rem, 2.1vw, 1.35rem);

  line-height: 1.3;

  font-weight: 700;

  color: var(--vc-titulo);

  margin: 0 0 .85rem;

}



.geo-citavel p {

  font-family: var(--vc-fonte);

  /* 1.65 e' o que torna 200 palavras legiveis sem as transformar num muro:

     abaixo de ~1.5 o bloco fecha; acima de ~1.75 estica demais a coluna. */

  line-height: 1.65;

  font-size: .95rem;

  /* Nao `--vc-titulo` (o titulo e' preto/azul): o CORPO tem de recuar um

     passo para o titulo mandar. A PRIMEIRA linha e' a cor solida — todos os

     browsers a usam. A segunda e' o refinamento, e so' quem souber

     `color-mix` a le'. Se o browser for velho, o texto fica com a cor solida

     em vez de ficar SEM COR NENHUMA: num bloco que existe para ser lido, uma

     cor que nao resolve e' pior que uma cor menos bonita. */

  color: #4a5568;

  color: color-mix(in srgb, var(--vc-titulo) 78%, transparent);

  margin: 0 0 .9rem;

}

.geo-citavel p:last-child { margin-bottom: 0; }



/* Em ecra estreito a caixa perde a almofada lateral: 1.75rem de cada lado

   num telefone come a largura toda e parte as palavras. */

@media (max-width: 640px) {

  .geo-citavel { padding: 1.15rem 1.15rem; margin: 1.4rem 0 2rem; }

}



/* Na impressao o bloco fica (e' a descricao da loja) mas perde os enfeites. */

@media print {

  .geo-citavel { background: none; border: 1px solid #ccc; }

}