/* Lava-jato: quadro de preços.
   Decisão rápida e de valor baixo: o que a pessoa quer saber é quanto custa
   para o carro dela e se dá para ir agora. Por isso o PREÇO é o maior
   elemento da linha, os blocos são chapados (sem sombra, sem gradiente) e o
   azul entra como faixa cheia, não como detalhe. Claro e de alto contraste,
   o oposto da estética automotiva, que é escura e fina. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;800&display=swap');

.vitrine-lavajato {
  --vt-raio: 10px;
  --vt-raio-p: 8px;
  --vt-sombra: none;
  --vt-fonte-titulo: 'Archivo', -apple-system, sans-serif;
  --vt-capa-padrao:
    linear-gradient(180deg, color-mix(in srgb, var(--cor) 88%, white) 0%, var(--cor) 60%, color-mix(in srgb, var(--cor) 70%, black) 100%);
  font-family: 'Archivo', -apple-system, sans-serif;
}

.vitrine-lavajato h1, .vitrine-lavajato h2, .vitrine-lavajato h3,
.vitrine-lavajato .vt-titulo, .vitrine-lavajato .vt-agenda-topo h2,
.vitrine-lavajato .vt-etapa-titulo h3, .vitrine-lavajato .vt-pacote-topo h3 {
  font-family: var(--vt-fonte-titulo); font-weight: 800; letter-spacing: -.6px;
}
.vitrine-lavajato .vt-identidade h1 { font-size: 29px; }

/* O preço é o que decide: sai maior que o nome do serviço. */
.vitrine-lavajato .opcao .preco {
  font-size: 22px; font-weight: 800; color: var(--cor-escura); letter-spacing: -1px;
}
.vitrine-lavajato .vt-pacote-preco { font-size: 30px; font-weight: 800; letter-spacing: -1.4px; }

/* Blocos chapados: sem sombra e com borda firme. Parece placa, não cartão. */
.vitrine-lavajato .vt-agenda, .vitrine-lavajato .vt-bloco,
.vitrine-lavajato .opcao, .vitrine-lavajato .vt-pacote {
  box-shadow: none; border-width: 2px;
}
.vitrine-lavajato .opcao-marcada, .vitrine-lavajato .opcao:hover {
  border-color: var(--cor); background: color-mix(in srgb, var(--cor) 8%, white);
}

/* Faixa cheia da cor nos títulos de seção e no rodapé. */
.vitrine-lavajato .vt-titulo-icone, .vitrine-lavajato .vt-fato-icone,
.vitrine-lavajato .vt-servico-icone {
  background: var(--cor); color: var(--cor-texto-sobre); border-radius: 8px;
}
/* Faixa grossa, não fundo chapado: fundo cheio da cor obriga a reescrever a
   cor de cada texto do rodapé, e o que escapa fica ilegível. */
.vitrine-lavajato .vt-rodape { border-top: 8px solid var(--cor); }

/* Horário como botão grande: se decide com o polegar, no pátio. */
.vitrine-lavajato .horario { font-size: 16px; font-weight: 600; padding: 13px 8px; border-width: 2px; }
.vitrine-lavajato .vt-dia { border-width: 2px; }
.vitrine-lavajato .botao { font-weight: 700; }