/* QivoN - layout da home
   GERADO por catalogo-sync/gen_home.py - NAO editar a mao.

   Linkada SO na index.html, depois do css/tema.css (que define as
   variaveis usadas aqui) e depois do <style> inline da pagina.
   ------------------------------------------------------------------- */

/* ------------------------------------------------------------
   0. O HERO, SEM FOTO.

   A referencia tem um retrato ocupando a metade direita. Ele nao
   existe: por decisao do dono em 16/10/2026 TODA foto que nao seja
   de produto saiu do site, e as 26 que faltam estao numa lista para
   ele fotografar.

   Entao o hero e tipografia sobre fundo escuro -- que e o que
   sobra quando se tira a foto de um hero editorial, e e por isso
   que ele nao parece quebrado: nao ha moldura vazia nem `<img>`
   sem src, ha um bloco que sempre foi para ser lido.

   Quando a foto chegar, ela entra como `background-image` deste
   mesmo bloco, sem mexer em markup.
   ------------------------------------------------------------ */
.qv-hero {
  background: var(--black, #141414);
  color: #fff;
  padding: 4.5rem 1.5rem 3.5rem;
}
/* A FOTO DO HEROI -- gerada e MEDIDA por `gen_hero_home.py`, que imprime
   este bloco. Ela mora aqui pelo mesmo motivo dos ladrilhos: o gen_home.py
   reescreve o css/home.css inteiro.

   O VEU ESCURECE AS DUAS PONTAS, e isso e exclusivo deste heroi: os quatro
   anteriores tinham texto so a esquerda. Aqui o `.qv-hero-side` ocupa
   x 0,888..0,979, entao o miolo e a unica area que pode ficar clara.

   A ORDEM DOS @media E CRESCENTE, e nao e arrumacao: as duas regras tem a
   mesma especificidade, entao a ultima vence onde as duas valem. Com 1024
   antes de 768, o arquivo do tablet sobrescreveria o de desktop em toda
   tela grande -- e a foto apareceria, so que a errada.

   O CELULAR TEM FOTO DESDE 20/10/2026, e esta nota dizia o contrario.
   A medicao que me fez excluir o celular foi feita sobre a C19, o corte
   retrato gerado para aquela faixa: com veu ela dava brilho 2,9 e desvio
   5,9, mais escura e mais lisa que o fundo chapado. O numero estava
   certo; a conclusao -- "o espaco e do texto, corte nenhum resolve" --
   era larga demais. O assunto da C19 ficava no quarto SUPERIOR, que e
   onde o texto comeca: defeito do prompt, nao da tela.

   O dono reparou que o heroi do celular nao tinha foto. O corte ja
   existia dentro da foto de desktop:

     C17 recortada, veu .74    brilho 12,3   desvio 13,8
     C19 (a gerada), veu .78   brilho  2,9   desvio  5,9
     o fundo chapado           brilho 20     desvio  0

   DESVIO diz se a foto se ve; media nao.

   O VEU DO CELULAR E UNIFORME, nao horizontal: la o texto ocupa a largura
   toda, e o degrade da esquerda deixaria claro justamente o lado direito
   das linhas. `.74` e o piso -- abaixo disso a eyebrow, branca a 62%, cai
   sob 4,5.

   E ELE VEM SEM @media, de proposito: a menor largura da tabela e 360, e
   prende-lo em `min-width: 360px` deixaria 320 e 350 sem foto -- faixa
   estreita, mas real, e o sintoma seria o heroi chapado so nos aparelhos
   pequenos, que e onde ninguem testa. */
.qv-hero {
  background-image:
    linear-gradient(rgba(0,0,0,0.74), rgba(0,0,0,0.74)),
    image-set(url("../imagens/site/hero-home-sm.webp?v=2") type("image/webp"),
              url("../imagens/site/hero-home-sm.jpg?v=2") type("image/jpeg"));
  background-size: cover;
  background-position: center;
}
@media (min-width: 768px) {
  .qv-hero {
    background-image:
      linear-gradient(to right, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.74) 40%, rgba(0,0,0,0.28) 57%, rgba(0,0,0,0.28) 80%, rgba(0,0,0,0.66) 90%, rgba(0,0,0,0.80) 100%),
      image-set(url("../imagens/site/hero-home-md.webp?v=2") type("image/webp"),
                url("../imagens/site/hero-home-md.jpg?v=2") type("image/jpeg"));
    background-size: cover;
    background-position: center;
  }
}
@media (min-width: 1024px) {
  .qv-hero {
    background-image:
      linear-gradient(to right, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.74) 40%, rgba(0,0,0,0.28) 57%, rgba(0,0,0,0.28) 80%, rgba(0,0,0,0.66) 90%, rgba(0,0,0,0.80) 100%),
      image-set(url("../imagens/site/hero-home.webp?v=2") type("image/webp"),
                url("../imagens/site/hero-home.jpg?v=2") type("image/jpeg"));
    background-size: cover;
    background-position: center;
  }
}

/* O FUNDO SANGRA, O CONTEUDO NAO. A primeira versao fez a grade
   direto na <section>, entao o texto nascia colado na borda da
   tela em monitor largo -- e, com `margin-inline:auto 0`, era
   empurrado para a DIREITA, deixando meia tela preta vazia. Na
   referencia o texto e o primeiro elemento a esquerda. O involucro
   limita a largura no mesmo 1380 px do resto do site, para o
   titulo nascer na mesma vertical do catalogo e do rodape. */
.qv-hero-wrap {
  max-width: 1380px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 2rem;
}
.qv-hero-in { max-width: 44rem; }
.qv-hero-eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  margin-bottom: 1.4rem;
}
.qv-hero-h {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.02;
  font-weight: 300;
  margin: 0 0 1.3rem;
  color: #fff;
}
.qv-hero-h em { font-style: normal; color: rgba(255, 255, 255, .80); }
.qv-hero-p {
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 300;
  color: rgba(255, 255, 255, .72);
  max-width: 34ch;
  margin: 0 0 2.1rem;
}

/* Os botoes: um solido claro e um de contorno, como a referencia.
   Branco sobre o fundo escuro da 15,9:1 -- nao e sutil, e e de
   proposito: e a unica acao da dobra. */
.qv-hero-acts { display: flex; flex-wrap: wrap; gap: .9rem; }
.qv-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.7rem;
  background: #fff;
  color: #141414;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  border: 1px solid #fff;
  transition: background .2s, color .2s;
}
.qv-btn:hover { background: #e9e6e0; border-color: #e9e6e0; }
.qv-btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .42);
}
.qv-btn-ghost:hover { background: rgba(255, 255, 255, .10); border-color: #fff; }

.qv-hero-trust {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2.2rem;
}
.qv-hero-trust li {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: rgba(255, 255, 255, .78);
}
.qv-hero-trust span {
  display: block;
  font-size: .76rem;
  line-height: 1.45;
}
.qv-hero-trust strong {
  display: block;
  font-weight: 600;
  color: #fff;
}

/* A coluna vertical da direita. Decorativa: some cedo, e some antes
   de comecar a disputar largura com o titulo. */
/* 11px E .55, E OS DOIS SAO CORRECAO DE LEGIBILIDADE MEDIDA, nao gosto.
   Ele estava em .68rem (10,88px) com branco a 42%, e reprovava SEM foto
   nenhuma -- sobre o #141414 chapado do heroi dava 4,10:1 contra o piso de
   4,5. Sobre preto ABSOLUTO da 3,95: nenhum fundo o salva, porque o texto
   e transparente demais. A opacidade minima que passa sobre preto e 46%;
   .55 mantem o tom de sussurro e da margem (6,25:1 medido sobre a foto do
   heroi, em 1920, 1440 e 1280).
   E 10,88px violava o piso de 11px do projeto -- duas regras no mesmo
   seletor. O `gen_hero_home.py` RECUSA escrever a foto enquanto estes dois
   numeros nao estiverem aqui: ligar a imagem antes deixaria a reprovacao
   parecendo culpa dela. */
.qv-hero-side {
  margin: .5rem 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  line-height: 2.1;
  text-align: right;
  color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 1100px) {
  .qv-hero-wrap { grid-template-columns: 1fr; }
  .qv-hero-side { display: none; }
}
@media (max-width: 600px) {
  .qv-hero { padding: 3.2rem 1.2rem 2.6rem; }
  .qv-hero-trust { gap: 1.3rem 1.8rem; margin-top: 2.2rem; }
}

/* ------------------------------------------------------------
   1. OS CARDS: QUATRO IGUAIS, LADO A LADO.

   O esboco de 17/10/2026 tem QUATRO cards no "Mais Vendidos", nao
   cinco. Quatro e tambem o que a propria pagina ja declara como
   base (`.products-grid2{repeat(4,1fr)}` no <style> inline), entao
   esta regra deixou de disputar com ela e passou a confirma-la.

   A DECLARACAO REDUNDANTE E DE PROPOSITO, E E CONFERIDA.
   Repetir aqui um numero que a pagina ja diz e, normalmente, como
   se cria divergencia silenciosa. O que paga o preco e o gap de
   1.25rem, que so vale neste bloco, e a auditoria: o testar_home.py
   exige que este numero SEJA IGUAL ao da base da pagina. Se alguem
   mexer num dos dois, o teste acusa -- a copia vira invariante
   conferido em vez de duplicata muda.

   A ARITMETICA, nas tres faixas (sao 6 pedidos ao renderizador):
     >=1101px  4 colunas, 2 escondidos -> 4 cards, 1 linha cheia
     769-1100  3 colunas, 0 escondidos -> 6 cards, 2 linhas cheias
     <=768px   2 colunas, 0 escondidos -> 6 cards, 3 linhas cheias
   Nenhuma faixa sobra celula vazia -- e celula vazia no canto nao
   le como respiro, le como card que nao carregou.
   ------------------------------------------------------------ */
@media (min-width: 1101px) {
  .mv-grid.products-grid2 {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
}
/* O 5o e o 6o SOEM acima de 1100 px -- e so ali. Nas faixas de 3 e
   de 2 colunas os seis fecham linha exata, entao escondem-se menos
   cards justamente onde cabe mais rolagem. Esconder aqui nao perde
   venda: "Ver todas" esta no cabecalho do bloco, e a alternativa
   era deixar dois buracos na unica linha do desktop. */
@media (min-width: 1101px) {
  .mv-grid.products-grid2 > .pc2:nth-child(5),
  .mv-grid.products-grid2 > .pc2:nth-child(6) { display: none; }
}

/* ------------------------------------------------------------
   1b. OS LADRILHOS DE CATEGORIA, SEM FOTO.

   Quatro blocos iguais: Masculinas, Femininas, Destaques e
   Todas as Joias -- a ordem do esboco. Era um carrossel de fotos
   que girava sozinho a cada 5 s; as fotos sairam pela decisao de
   16/10/2026 (nenhuma imagem que nao seja de produto), e sem foto
   um carrossel de quatro itens so esconde tres deles.

   O gradiente escuro NAO e invencao desta etapa: era exatamente o
   que o `onerror` de cada ladrilho ja pintava quando o CDN falhava.
   Virou o estado normal.

   4 colunas -> 2 abaixo de 900. Quatro ladrilhos fecham linha
   exata nas duas, entao nao ha o que esconder aqui.
   ------------------------------------------------------------ */
.qv-cats { padding: 3.5rem 0; background: #fff; }
.qv-cats-w { max-width: 1380px; margin: 0 auto; padding: 0 1.5rem; }
.qv-cats-hdr {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.8rem;
}
.qv-cats-all {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--black, #141414);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--border, #E4E1DB);
  padding-bottom: .25rem;
  transition: gap .2s, border-color .2s;
}
.qv-cats-all:hover { gap: .7rem; border-color: var(--black, #141414); }

.qv-cats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.qv-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 5;
  padding: 1.6rem 1.4rem;
  text-decoration: none;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 22% 12%, rgba(168,165,160,.30), transparent 62%),
    linear-gradient(150deg, #2e2d2b, #131212);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.qv-cat:hover { transform: translateY(-3px); }
/* A moldura no hover sai por `box-shadow: inset`, nao por `border`:
   borda muda a caixa e empurra o texto 2 px no hover. */
.qv-cat::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 0 rgba(255,255,255,0);
  transition: box-shadow .25s;
  pointer-events: none;
}
.qv-cat:hover::after { box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
/* A FOTO de cada ladrilho -- escrita por `gen_ladrilho_home.py`, que gera
   os arquivos e IMPRIME este bloco. Ele mora aqui, e nao la, porque o
   `gen_home.py` reescreve o css/home.css INTEIRO: bloco injetado por outro
   script seria apagado na proxima execucao deste.

   O veu e a primeira camada do `background`, nao um pseudo-elemento: o
   `.qv-cat::after` ja esta ocupado pela moldura de hover. As paradas foram
   medidas contra as QUATRO fotos -- o texto do rodape e branco a 72% em
   11px, e sem veu a "Todas as Joias" dava 1,60:1 contra o piso de 4,5.
   Com elas, as quatro ficam entre 7,05 e 10,02:1.

   `background-position` e 50% 50% e isso importa: a imagem e 4/5 e o
   ladrilho declara `aspect-ratio: 4/5`, entao `cover` encaixa exato. Era
   essa a premissa da medicao -- deslocar o fundo mostraria uma faixa que
   ninguem mediu. */
.qvc-masculinas {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.00) 52%, rgba(0,0,0,0.28) 70%, rgba(0,0,0,0.62) 82%, rgba(0,0,0,0.72) 100%),
    image-set(url("../imagens/site/ladrilho-masculinas.webp?v=2") type("image/webp"),
              url("../imagens/site/ladrilho-masculinas.jpg?v=2") type("image/jpeg"));
  background-size: cover;
  background-position: 50% 50%;
}
.qvc-femininas {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.00) 52%, rgba(0,0,0,0.28) 70%, rgba(0,0,0,0.62) 82%, rgba(0,0,0,0.72) 100%),
    image-set(url("../imagens/site/ladrilho-femininas.webp?v=2") type("image/webp"),
              url("../imagens/site/ladrilho-femininas.jpg?v=2") type("image/jpeg"));
  background-size: cover;
  background-position: 50% 50%;
}
.qvc-destaques {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.00) 52%, rgba(0,0,0,0.28) 70%, rgba(0,0,0,0.62) 82%, rgba(0,0,0,0.72) 100%),
    image-set(url("../imagens/site/ladrilho-destaques.webp?v=2") type("image/webp"),
              url("../imagens/site/ladrilho-destaques.jpg?v=2") type("image/jpeg"));
  background-size: cover;
  background-position: 50% 50%;
}
.qvc-todas {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.00) 52%, rgba(0,0,0,0.28) 70%, rgba(0,0,0,0.62) 82%, rgba(0,0,0,0.72) 100%),
    image-set(url("../imagens/site/ladrilho-todas.webp?v=2") type("image/webp"),
              url("../imagens/site/ladrilho-todas.jpg?v=2") type("image/jpeg"));
  background-size: cover;
  background-position: 50% 50%;
}
.qv-cat-sm {
  position: relative;
  z-index: 1;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.qv-cat-lg {
  position: relative;
  z-index: 1;
  font-family: 'Barlow', sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.08;
  margin-top: .25rem;
  color: #fff;
}
@media (max-width: 900px) {
  .qv-cats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .qv-cats { padding: 2.4rem 0; }
  .qv-cats-w { padding: 0 1.2rem; }
  .qv-cats-grid { gap: .7rem; }
  .qv-cat { padding: 1.2rem 1rem; }
  .qv-cat-lg { font-size: 1.25rem; }
}

/* ------------------------------------------------------------
   2. O BOTAO DE COMPRAR, SEMPRE VISIVEL.

   Hoje `.pc2-quick` fica escondido com `translateY(100%)` sobre a
   foto e so sobe no hover. Isso custa duas coisas: no CELULAR nao
   existe hover -- o botao so aparece depois de um toque que o
   visitante nao sabe que precisa dar -- e no desktop a acao
   principal do card fica invisivel ate o mouse passar.

   A referencia poe "Adicionar ao carrinho" fixo ABAIXO do card.
   Aqui ele sai de cima da foto e passa a ser o ultimo elemento do
   card, com a borda separando do preco.

   `position:static` desfaz o `absolute`; sem isso o bloco
   continuaria ancorado na foto mesmo visivel.
   ------------------------------------------------------------ */
.pc2 { display: flex; flex-direction: column; }
.pc2-body { flex: 1 1 auto; }
.pc2-quick {
  position: static;
  transform: none;
  background: transparent;
  padding: 0 .9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.pc2:hover .pc2-quick { transform: none; }
.pc2-btn-cart {
  background: transparent;
  color: #141414;
  border: 1px solid var(--border, #E4E1DB);
  padding: .8rem;
  letter-spacing: .04em;
  text-transform: none;
  font-size: .78rem;
  font-weight: 600;
}
.pc2-btn-cart:hover { background: #141414; color: #fff; border-color: #141414; }

/* O "Tirar duvidas" no WhatsApp sai do card: na referencia o card
   tem UMA acao. O link continua no rodape, no menu e no botao
   flutuante -- nao se perde caminho, perde-se concorrencia com o
   botao que vende. */
.pc2-btn-wa { display: none; }

/* ------------------------------------------------------------
   3. AR EM VOLTA DO BLOCO.

   Medido em 16/10/2026: "Mais Vendidos" ocupava 1.939 px, 45% dos
   4.309 px da home, em 12 cards iguais. Com 9 e o destaque, o bloco
   encolhe e passa a ter um ponto de entrada em vez de uma parede.
   ------------------------------------------------------------ */
.mv-home-sec .cat-grid-title {
  margin-bottom: .35rem;
}
@media (min-width: 769px) {
  .mv-grid.products-grid2 {
    gap: 1.25rem;
  }
}

/* ------------------------------------------------------------
   4. O BANNER COMPLEMENTAR.

   Nasce SEM foto: `.qvb-img` e um campo hachurado escuro. Com a
   foto, so `background-image` aqui muda.

   O VEU (`.qvb-img::after`) JA ESTA NO LUGAR, e e o ponto todo
   deste bloco. Sem ele, medir contraste hoje -- branco sobre o
   hachurado -- aprovaria, e no dia em que a foto entrasse o texto
   cairia em cima de um ceu claro ou de um reflexo e ninguem
   voltaria a medir. O veu e um degrade da esquerda, que e o lado
   do texto: a direita fica quase limpa para a joia aparecer.
   ------------------------------------------------------------ */
.qv-banner {
  position: relative;
  background: #121212;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: center;
}
/* A FOTO ENTROU EM 19/10/2026. Antes daqui o campo era hachurado --
   vaga reservada de proposito, porque o `onerror` dos cards deste
   site APAGA a imagem e foto faltando daria buraco, nao icone
   quebrado.

   SAO TRES ARQUIVOS PORQUE A FAIXA MUDA DE PROPORCAO, nao so de
   tamanho: 1440x477 da 3,02:1 e 390x360 da 1,08:1. Servir o corte
   de 3:1 no celular faria o `cover` comer as laterais e sobrar so
   o meio -- o modelo sairia do quadro, e a composicao (lado do
   texto escuro) nao sobrevive a recorte automatico.

   `image-set` nomeia o NOSSO .webp. Sem isso o CDN da Hostinger
   converte a JPEG por conta propria, na borda, e entrega a
   conversao dele -- medida em 47% mais pesada que a nossa. A
   linha de `url()` logo acima fica como fallback de quem nao
   entende `image-set`, e tem de vir ANTES.

   Falhando o download, sobra o #121212 da `.qv-banner`: fundo
   escuro, e o texto continua legivel. Esse e o modo de falhar
   certo, e e por isso que nao ha `background-color` claro aqui. */
.qvb-img {
  position: absolute;
  inset: 0;
  background-image: url('../imagens/site/banner-home.jpg');
  background-image: image-set(
    url('../imagens/site/banner-home.webp') type('image/webp'),
    url('../imagens/site/banner-home.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center;
}
/* OS NUMEROS DAQUI SAO MEDIDOS CONTRA UMA FOTO BRANCA, nao escolhidos.
   A primeira versao usava .88 -> .72 -> .30 e o `.qvb-eyebrow` caiu
   para 3,60:1 com `.qvb-img` pintado de #fff -- reprova o piso de 4,5
   em 11px. Contra o hachurado de hoje ele dava 5,5:1 e passava: o
   defeito so nasceria no dia em que a foto entrasse, e nesse dia
   ninguem volta a medir.

   O texto todo vive nos primeiros 30% da faixa (medido por Range, nao
   pelo retangulo do elemento -- o eyebrow e um <div> e a caixa dele vai
   a 96% enquanto o texto para em 11%). Entao o veu fica forte ate la e
   so depois abre, deixando a direita quase limpa para a joia. */
.qvb-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(10, 10, 10, .95) 0%,
    rgba(10, 10, 10, .93) 32%,
    rgba(10, 10, 10, .30) 100%);
}
.qvb-in {
  position: relative;
  max-width: 1380px;
  width: 100%;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}
.qvb-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--teal-dk, #8D8B86);
  margin-bottom: 1.1rem;
}
.qvb-h {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.1;
  color: #fff;
  margin: 0 0 1rem;
  max-width: 15ch;
}
.qvb-p {
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255, .82);
  margin: 0 0 2rem;
  max-width: 42ch;
}
/* Contorno claro em vez de bloco preenchido: a faixa ja e escura, e
   botao cheio aqui competiria com o "Comprar" dos cards logo acima. */
.qvb-cta {
  display: inline-block;
  padding: .85rem 2.2rem;
  border: 1px solid rgba(255, 255, 255, .55);
  color: #fff;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.qvb-cta:hover {
  background: #fff;
  border-color: #fff;
  color: #141414;
}

/* ------------------------------------------------------------
   5. O INSTAGRAM.

   Faixa CLARA entre duas escuras (o banner acima e o atacado
   abaixo). As seis celulas fecham linha exata em 6, 3 e 2
   colunas -- as tres contagens dos pontos de quebra daqui.

   Cada celula e um <a> com `aria-label`: sem texto dentro, um
   link vazio nao tem nome acessivel nenhum.
   ------------------------------------------------------------ */
.qv-insta {
  background: var(--bg, #faf9f7);
  padding: 4.5rem 1.5rem;
  border-top: 1px solid var(--border);
}
.qvi-w { max-width: 1380px; margin: 0 auto; }
.qvi-hdr {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.8rem;
}
.qvi-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--teal, #63615F);
  margin-bottom: .4rem;
}
.qvi-h {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.1;
  color: var(--black, #141414);
  margin: 0;
}
.qvi-seguir {
  flex-shrink: 0;
  padding: .7rem 1.7rem;
  border: 1px solid var(--black, #141414);
  color: var(--black, #141414);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.qvi-seguir:hover { background: var(--black, #141414); color: #fff; }
.qvi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .6rem;
}
.qvi-cel {
  display: block;
  aspect-ratio: 1 / 1;
  background:
    repeating-linear-gradient(-45deg,
      #F2F0EC 0 14px, #F8F6F2 14px 28px);
  background-size: cover;
  background-position: center;
  transition: opacity .2s;
}
.qvi-cel:hover { opacity: .82; }

@media (max-width: 1100px) {
  .qvi-grid { grid-template-columns: repeat(3, 1fr); }
  /* 769..1100 a faixa vai de 1,83:1 a 2,62:1 -- o corte de 2,33 e o
     mais proximo nas duas pontas. Nenhum arquivo e exato em toda a
     faixa; um quarto custaria mais bytes do que corrige. */
  .qvb-img {
    background-image: url('../imagens/site/banner-home-tablet.jpg');
    background-image: image-set(
      url('../imagens/site/banner-home-tablet.webp') type('image/webp'),
      url('../imagens/site/banner-home-tablet.jpg') type('image/jpeg'));
  }
}
@media (max-width: 768px) {
  .qv-banner { min-height: 360px; }
  /* Ate 768 a faixa e quase quadrada (390x360 = 1,08:1) e o corte
     13:12 e o unico que mantem o modelo dentro do quadro. */
  .qvb-img {
    background-image: url('../imagens/site/banner-home-mobile.jpg');
    background-image: image-set(
      url('../imagens/site/banner-home-mobile.webp') type('image/webp'),
      url('../imagens/site/banner-home-mobile.jpg') type('image/jpeg'));
  }
  /* A 768 o texto ocupa a largura toda, entao o degrade horizontal
     deixa de servir: ele vira vertical, escuro embaixo do texto.

     O TOPO ERA .60 E NUNCA FOI MEDIDO CONTRA FOTO CLARA. O veu
     horizontal foi (ver o bloco do `.qvb-img::after` acima: .95
     da 4,90:1 com a foto pintada de branco); este nao, e a
     diferenca so apareceu em 19/10/2026, quando a primeira foto
     de verdade entrou. Com .60, o `.qvb-eyebrow` -- que e
     `--teal-dk`, um cinza MEDIO, e cai na primeira linha, onde o
     veu e mais fraco -- dava 1,91:1 contra foto BRANCA e 3,52:1
     contra a foto real. O piso e 4,5 em 11px.

       topo   foto branca   a foto real
       .60      1,91           3,52     <- reprovavam
       .80      3,45           4,66
       .86      4,10           5,00
       .92      4,73           5,15     <- o que entrou

     .92 e o primeiro valor em que foto NENHUMA reprova, que e o
     mesmo criterio do veu horizontal. O custo e o terco superior
     da foto no celular ficar quase opaco -- e ali esta parede e
     folhagem, nao o rosto: no corte 13:12 o modelo fica no meio,
     onde o veu vale .86.

     NAO afrouxe isto porque "a foto atual passa a .80": passar
     com a foto atual e exatamente a armadilha que o veu existe
     para evitar.

     .88/.82 DESDE 20/10/2026, pelo MESMO criterio.
     O dono pediu a foto menos ofuscada. Chegou a entrar um veu com
     a FORMA do texto -- forte so onde a letra cai, cedendo nas
     pontas --, que mostrava quase TRES vezes mais foto pelo mesmo
     contraste (brilho visivel 17,4 contra 6,1). Ele olhou e
     preferiu o uniforme de volta, so mais fraco. A forma saiu.

     O valor nao foi escolhido, e o PISO. Medido contra foto
     BRANCA, que e o criterio desta folha:

       topo/meio   foto branca   brilho visivel
       .92/.86        ok              6,1   <- o anterior
       .90/.84        ok              7,2
       .88/.82        ok              8,3   <- o que entrou
       .86/.80      REPROVA           9,4

     Abaixo de .88 a eyebrow cai sob o piso com foto clara. Quem
     prende e ela, nao as linhas brancas: e `--teal-dk`, cinza
     medio. Clarear mais exige clarear a eyebrow antes, e isso e
     decisao de cor, nao de veu. */
  .qvb-img::after {
    background: linear-gradient(180deg,
      rgba(10, 10, 10, .88) 0%,
      rgba(10, 10, 10, .82) 60%,
      rgba(10, 10, 10, .88) 100%);
  }
  .qvb-in { padding: 3rem 1.2rem; }
  .qvb-h { max-width: none; }
  .qv-insta { padding: 3.2rem 1.2rem; }
  .qvi-hdr { align-items: flex-start; }
  .qvi-grid { grid-template-columns: repeat(2, 1fr); }
}