/* ==========================================================================
   PRIME — a ABERTURA da página inicial (raiz servida).

   PORQUE EXISTE ESTE FICHEIRO
   A raiz de afritronic.co.ao é servida por `catalogo.html` e NÃO pelo
   `index.html` (o `.htaccess` tem `RewriteRule ^$ /catalogo.html` — dito no
   comentário do bloco GEO desta mesma página, e provado por md5 a 06/10/2026:
   `/` = 8def305e9f1f = catalogo.html; `/index.html` = 7f856048ff91, outra
   página). Quem editar o `index.html` a pensar na página inicial mexe num
   ficheiro que ninguém abre — foi o erro cometido e medido a 06/10/2026.

   O QUE FAZ
   O `.vsl` (o vídeo que vende a loja) era um CARTÃO: 960 px, cantos redondos,
   margem, sobre fundo branco. Na captura de 06/10/2026 media 960×333 px num
   ecrã de 1440 — 23 % da altura e 67 % da largura, com um terço do ecrã em
   branco à volta. Passa a ser a ABERTURA: banda de ponta a ponta, ~78 vh de
   altura, tipografia de display, o vídeo maior e com halo, entrada animada.

   PORQUE NÃO É NO `/estoque/css/vsl.css`
   Essa folha é a da LOJA e é a MESMA nas duas páginas de propósito («um só
   sítio, sem deriva», escrito no HTML). Mexer-lhe mudava a loja sem ninguém
   pedir. Esta carrega SÓ no `catalogo.html`, DEPOIS daquela — é uma camada de
   página, não uma regra duplicada. Para que a banda chegue às bordas, o
   `<section class="vsl">` saiu do `div.container` no HTML (2 linhas); sem
   isso, `width:100vw` + `margin-left:50%` era o truque possível e dava barra
   horizontal, porque `100vw` conta a scrollbar e a página tem uma.

   O VÍDEO NÃO VIRA FUNDO
   O texto («382 produtos… preço à vista… entrega em até 24 horas») está
   QUEIMADO no mp4. Como fundo com `object-fit:cover` numa banda de 78 vh, um
   vídeo 16:9 leva um corte vertical de ~28 % e come metade da frase. Fica
   emoldurado a 16:9, que é o formato em que foi feito.

   ACESSIBILIDADE
   Nada aqui muda o contrato da VSL: os botões de play e pausa continuam os
   mesmos, o `controls` continua a ser gerido pelo `vsl.js` e o selo continua
   a pulsar. Tudo o que anime fica desligado em `prefers-reduced-motion`, e o
   estado final de cada animação é o estado normal — quem tiver a preferência
   ligada vê a mesma página, parada.
   ========================================================================== */

/* ------------------------------------------------- 1. A banda, de ponta a ponta */
.vsl {
  max-width: none;
  margin: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

@media (min-width: 900px) {
  .vsl {
    /* 78 vh com tecto de 700 px: num portátil de 800 px de altura dá ~624 px
       (o dobro dos 333 px medidos), e num ecrã de 1440 px de altura não estica
       até ao absurdo. */
    min-height: min(78vh, 700px);
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    /* A banda é de ponta a ponta, mas o CONTEÚDO fica centrado: em ecrãs
       largos o padding cresce sozinho, e num 2560 px o texto não fica
       encostado à margem nem esticado por 2 metros. */
    padding-inline: max(2rem, calc((100vw - 1400px) / 2));
    padding-block: clamp(2.5rem, 7vh, 5rem);
    border-bottom: 1px solid var(--vsl-fio);
  }

  /* O halo do palco. `box-shadow` NÃO é cortado pelo `overflow:hidden` do
     próprio elemento (o overflow corta os filhos, não a sombra de fora) —
     por isso o brilho vive aqui e não num `::after` com `inset` negativo,
     que seria recortado. */
  .vsl-palco {
    box-shadow:
      0 40px 96px -26px rgba(0, 0, 21, .92),
      0 0 0 1px rgba(26, 95, 255, .26),
      0 0 80px -8px rgba(26, 95, 255, .34);
  }
}

/* Em telemóvel a banda também encosta às bordas, mas sem altura forçada: o
   alvo de toque manda mais que a estética. */
@media (max-width: 899px) {
  .vsl {
    padding: 1.1rem 1rem 1.35rem;
    margin: 0;
  }
}

/* ------------------------------------------------------- 2. A tipografia */
.vsl-titulo {
  font-size: clamp(1.6rem, 3.2vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -.022em;
  text-wrap: balance;
}
/* A palavra em destaque ganha o gradiente — é o gesto que separa um título de
   folheto de um título de marca. `background-clip:text` com um `color` de
   reserva: onde o clip não existir, sai a cor sólida em vez de invisível. */
.vsl-titulo b {
  background: linear-gradient(96deg, var(--vsl-verde) 0%, #8FF3CE 46%, var(--vsl-azul-2) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--vsl-verde);
}

@media (min-width: 900px) {
  .vsl-kicker { font-size: .78rem; letter-spacing: .22em; }
  .vsl-provas { font-size: 1.02rem; }
  .vsl-provas li { margin-bottom: .3rem; }
  .vsl-cta { font-size: 1.02rem; padding: .95rem 1.9rem; }
}

/* ------------------------------------------- 3. A entrada (reduced-motion fora) */
@keyframes prime-sobe {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes prime-abre {
  from { opacity: 0; transform: scale(.955); }
  to   { opacity: 1; transform: none; }
}
@keyframes prime-halo {
  0%, 100% { opacity: .55; }
  50%      { opacity: .95; }
}

/* `both` para que o estado de partida (opacity 0) seja aplicado JÁ no primeiro
   frame e não haja um piscar do conteúdo antes de animar. O estado FINAL é o
   normal — quem não correr a animação fica com a página visível. */
.vsl-palco,
.vsl-lado > * {
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}
.vsl-palco {
  animation: prime-abre .85s both cubic-bezier(.22, .61, .36, 1);
}
.vsl-lado > * {
  animation-name: prime-sobe;
  animation-duration: .7s;
}
.vsl-lado > *:nth-child(1) { animation-delay: .12s; }
.vsl-lado > *:nth-child(2) { animation-delay: .20s; }
.vsl-lado > *:nth-child(3) { animation-delay: .28s; }
.vsl-lado > *:nth-child(4) { animation-delay: .36s; }
.vsl-lado > *:nth-child(5) { animation-delay: .44s; }

/* A luz da banda respira devagar. 9 s é lento de propósito: a este ritmo lê-se
   como ambiente, não como um pisca-pisca a pedir atenção. */
.vsl::before { animation: prime-halo 9s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .vsl-palco,
  .vsl-lado > *,
  .vsl::before {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ------------------------------------------------- 4. O botão, com brilho */
/* A varredura passa uma vez no hover. Fica em `::after` porque o `.vsl-cta` já
   é um `<a>` com texto próprio — nada de elementos novos no HTML. */
.vsl-cta { position: relative; overflow: hidden; }
.vsl-cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .vsl-cta:hover::after { animation: prime-brilho .75s ease-out; }
}
@keyframes prime-brilho {
  from { left: -60%; }
  to   { left: 120%; }
}

/* ------------------------------------------- 5. O video ambiente de fundo */
/* Gerado com o AGENTE DO GROK (grok-video, perfil 9256), a 06/10/2026, a
   pedido do dono. NAO mostra produtos: e' atmosfera — um corredor de armazem
   com um feixe de luz azul. Um video GERADO a fingir produtos da loja seria
   uma afirmacao falsa ao cliente; atmosfera nao afirma nada.

   Empilhamento (o `.vsl` ja' e' `position:relative` com `overflow:hidden`):
     video ............ z 0   (por baixo de tudo o que tem texto)
     grade `.vsl::before` ... z 0  (irmao, pinta antes — fica tapada pelo video,
                                   que e' o que se quer: por cima do video manda
                                   o veu, nao a grade)
     veu `.vsl::after` ...... z 1
     conteudo (`> *`, que o vsl.css pos a z 1) sobe a z 2
   O veu e' o que faz o texto ser legivel: o video tem um feixe claro ao centro,
   e sem ele o titulo desaparecia ali. Escurece mais a esquerda (onde esta' o
   texto) do que ao centro. */
.prime-fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: .55;
  pointer-events: none;
}
.vsl::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* O veu fecha do lado do TEXTO, nao do lado do video. Na grelha do `.vsl` o
     palco esta' a' esquerda e o texto a' direita — o primeiro veu que escrevi
     escurecia a esquerda, ou seja, tapava a parte onde o video ambiente se ve'
     e deixava claro o sitio onde tinha de haver contraste. Estava ao contrario;
     medido na captura de 06/10/2026, nao suposto. */
  background:
    linear-gradient(90deg,
      rgba(0, 0, 21, .52) 0%,
      rgba(0, 0, 21, .40) 30%,
      rgba(0, 0, 21, .80) 62%,
      rgba(0, 0, 21, .95) 100%),
    linear-gradient(0deg, rgba(0, 0, 21, .88) 0%, rgba(0, 0, 21, 0) 46%);
}
.vsl > .vsl-palco,
.vsl > .vsl-lado {
  z-index: 2;
}

/* --------------------------------- 6. A costura com o que vem a seguir */
/* O carril de categorias vive agora logo abaixo de uma banda escura; sem uma
   respiração, a mudança para o branco corta a seco. */
.vsl-carril { padding-top: clamp(2rem, 4.5vh, 3.5rem); }