/* Temas da loja.
   ============================================================================
   ⚠️ ARQUIVO COMPARTILHADO PELAS DUAS PONTAS: a vitrine pública (`pagina()` em
   `functions/_vitrine.js`) e a PRÉVIA dentro do app do lojista (`/app/`). É de
   propósito, e é o ponto todo — prévia com paleta própria é prévia que mente, e o
   lojista só descobre a diferença depois de divulgar o link.

   O tema é um SLUG no banco (`lojas.tema`), nunca cores. Deixar o lojista escolher
   cor livre acabaria em texto cinza sobre fundo cinza: ninguém faz isso por má fé,
   faz por azar de combinação — e o anúncio simplesmente para de ser lido.

   ---------------------------------------------------------------------------
   COMO ESCOLHI ESTAS SEIS

   Fundo NEUTRO, não azulado. A primeira leva tinha `--bg: #120a0e` (vinho) e
   `#14100c` (laranja): fundo colorido some com a cor do carro. Lataria vermelha
   sobre fundo vinho, prata sobre grafite — o produto é foto de veículo, e o fundo
   existe para o carro aparecer, não para ter personalidade própria.

   ACENTOS DE MATIZ SEPARADA. `--acento` é o PREÇO (`.preco` no vitrine.css), o
   botão e o link. Se ele encostar em `--txt`, o preço deixa de saltar — foi o
   defeito do tema "escuro" antigo, que tinha acento branco: o número mais
   importante da página ficava com a mesma cor do resto.

   SEIS E NÃO OITO. Tirei "vinho" (rosa-neon sobre quase-preto, ilegível) e
   "dourado" (encostava no champanhe do grafite). Menos opção com mais diferença
   entre elas decide mais rápido que um leque que se confunde.

   ---------------------------------------------------------------------------
   `--vidro` É O FUNDO DA BARRA FIXA, e existe porque a barra tinha
   `rgba(11,15,23,.86)` cravado no `style.css`: no tema Claro, o nome da loja (que usa
   `--txt`, quase preto) ficava sobre uma barra ESCURA e sumia. O bug apareceu no
   único tema de fundo claro, que é como se descobre que uma cor foi escrita à mão.

   Cada bloco redefine as MESMAS nove variáveis, para que um tema novo seja nove
   linhas e não uma revisão de layout. */

/* Esmeralda — o padrão, e a paleta do produto */
[data-tema="verde"] {
  --bg: #0a0e12; --bg-2: #141b22; --linha: #24303c;
  --txt: #eaf1f8; --txt-2: #92a3b4; --acento: #2ee6a8;
  --acento-fraco: rgba(46, 230, 168, .13); --acento-linha: #1d6a51;
  --vidro: rgba(10, 14, 18, .88);
}

/* Claro — o único de fundo claro, e o que mais parece "site sério" para quem
   compara com portal grande. Acento mais fechado de propósito: verde-neon sobre
   branco vibra e cansa; sobre escuro, não. */
[data-tema="claro"] {
  --bg: #ffffff; --bg-2: #f5f8fb; --linha: #e3e9f1;
  --txt: #0c1420; --txt-2: #58687c; --acento: #0d9d6d;
  --acento-fraco: rgba(13, 157, 109, .10); --acento-linha: #9fd9c4;
  --vidro: rgba(255, 255, 255, .90);
}

/* Grafite — preto de verdade, para lataria escura e foto noturna não sumirem no
   fundo. Acento champanhe: dá ar de seminovo premium e, principalmente, faz o
   preço saltar num tema que de resto é monocromático. */
[data-tema="escuro"] {
  --bg: #08080a; --bg-2: #131316; --linha: #27272c;
  --txt: #f4f4f6; --txt-2: #9a9aa4; --acento: #f0c14b;
  --acento-fraco: rgba(240, 193, 75, .12); --acento-linha: #6b552170;
  --vidro: rgba(8, 8, 10, .90);
}

/* Azul */
[data-tema="azul"] {
  --bg: #090c12; --bg-2: #141924; --linha: #262f42;
  --txt: #eaeffa; --txt-2: #94a3bd; --acento: #4c8dff;
  --acento-fraco: rgba(76, 141, 255, .13); --acento-linha: #2b4a86;
  --vidro: rgba(9, 12, 18, .88);
}

/* Violeta — entrou no lugar do vinho. Mesma família de "cor quente escura", sem o
   rosa-neon que brigava com tudo. */
[data-tema="violeta"] {
  --bg: #0b0910; --bg-2: #17141f; --linha: #2c2639;
  --txt: #f0ecf8; --txt-2: #a297b8; --acento: #a175ff;
  --acento-fraco: rgba(161, 117, 255, .14); --acento-linha: #4d3b80;
  --vidro: rgba(11, 9, 16, .88);
}

/* Coral — o antigo "laranja", puxado para terracota. Laranja puro sobre escuro
   pisca; terracota fica quente sem gritar. */
[data-tema="coral"] {
  --bg: #0d0a09; --bg-2: #1a1513; --linha: #322824;
  --txt: #f7efeb; --txt-2: #b2a099; --acento: #ff7a52;
  --acento-fraco: rgba(255, 122, 82, .13); --acento-linha: #7a3c28;
  --vidro: rgba(13, 10, 9, .88);
}

/* ===================================================== cabeçalho com marca */
/* Capa e logo aparecem no catálogo E no anúncio. A regra é a mesma dos perfis de
   rede social, e é a que o lojista já entende sem explicação: faixa larga atrás,
   logo à frente, nome ao lado. */
.marca-capa { position: relative; height: clamp(110px, 24vw, 210px); overflow: hidden;
              background: var(--bg-2); }
.marca-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Véu por cima da capa: foto de pátio ensolarada apaga texto claro, e a loja não
   controla a foto que subiu. */
.marca-capa::after { content: ""; position: absolute; inset: 0;
                     background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.5)); }

.marca-linha { display: flex; gap: 14px; align-items: center; min-width: 0; }
.marca-logo { flex: none; width: 54px; height: 54px; border-radius: 15px;
              object-fit: cover; background: var(--bg-2);
              border: 2px solid var(--bg); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
/* Com capa, a logo sobe e encosta na borda dela — é o encaixe que faz o conjunto
   parecer um perfil, e não duas imagens soltas. */
.marca-capa + .topo .marca-logo { margin-top: -30px; }