/* NOSSO.ELO — secoes exclusivas da home. Carrega depois de base.css. */

/* ---------- Circulos de marca ---------- */

.marcas {
  background: var(--carta);
  border-bottom: 1px solid var(--linha);
}
.marcas .envoltorio {
  display: flex; gap: 22px;
  padding-top: 16px; padding-bottom: 16px;
  overflow-x: auto; scrollbar-width: none;
}
.marcas .envoltorio::-webkit-scrollbar { display: none; }

.marca-bolha {
  flex: none;
  display: grid; justify-items: center; gap: 7px;
  width: 76px;
  text-decoration: none; color: var(--tinta);
  font-size: 12px; text-align: center; line-height: 1.25;
}
/* Disco branco com a foto contida, e nao preto com a foto cortada: as fotos
   do catalogo vem em proporcoes diferentes e com fundo branco, entao "cover"
   decapita frasco alto e "contain" sobre preto deixa um quadrado branco no
   meio do circulo. O anel dourado e o que amarra a bolha a marca. */
.marca-bolha-disco {
  width: 62px; height: 62px;
  display: grid; place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #fff; color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--linha), 0 0 0 1px var(--ouro);
  font: 400 20px var(--serifa);
}
.marca-bolha:hover .marca-bolha-disco { box-shadow: inset 0 0 0 1px var(--ouro), 0 0 0 2px var(--ouro); }

/* Marca sem nenhuma foto no catalogo vira monograma: inicial dourada sobre
   preto. Uma letra solta num disco branco parece imagem que nao carregou. */
.marca-bolha-disco.sem-foto {
  background: var(--preto); color: var(--ouro-luz);
  box-shadow: 0 0 0 1px var(--ouro);
  font-size: 24px;
}
.marca-bolha-disco img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }

/* ---------- Banner ---------- */

/* A foto da loja nao fica pendurada num retangulo: ela e recortada num arco e
   abracada por um fio dourado, que e o que amarra foto e painel numa coisa so
   — e o mesmo recurso que a referencia do cliente usa. O arco e desenhado com
   border-radius e border, nao com imagem: fica nitido em qualquer tela e nao
   pesa um byte. */

.banner { padding: 18px 0 6px; }

.banner-painel {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: var(--raio-g);
  background:
    radial-gradient(120% 90% at 8% 0%, #fffdfa 0%, #f6efe4 46%, #efe4d4 100%);
  box-shadow: inset 0 0 0 1px rgba(184, 135, 58, .22);
}
@media (min-width: 900px) {
  .banner-painel { grid-template-columns: 1fr .82fr; align-items: stretch; }
}

.banner-texto { padding: 22px 18px 20px; }
@media (min-width: 900px) { .banner-texto { padding: 44px 40px; align-self: center; } }

.banner-texto h1 {
  margin: 0;
  font: 400 23px/1.14 var(--serifa);
  color: var(--tinta); letter-spacing: -.02em;
}
@media (min-width: 900px) { .banner-texto h1 { font-size: 40px; } }
.banner-texto h1 em { display: block; font-style: normal; color: var(--ouro); }

/* Os quatro destaques, com fio fino entre eles como numa vitrine. */
.banner-props {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 22px 0 0; padding: 0; list-style: none;
}
.banner-props li {
  display: grid; justify-items: center; gap: 5px;
  padding: 0 4px;
  font-size: 11px; line-height: 1.25; text-align: center; color: var(--tinta-2);
}
.banner-props li + li { border-left: 1px solid rgba(184, 135, 58, .3); }
.banner-props b {
  display: block; font-size: 12px; font-weight: 600; color: var(--tinta);
}
.banner-props svg { width: 24px; height: 24px; color: var(--ouro); }
@media (min-width: 900px) {
  .banner-props { margin-top: 28px; }
  .banner-props li { font-size: 12.5px; gap: 7px; }
  .banner-props b { font-size: 13.5px; }
  .banner-props svg { width: 28px; height: 28px; }
}

/* Cartao branco dos servicos, como a faixa da referencia. */
.banner-servicos {
  display: grid; gap: 2px;
  margin-top: 20px; padding: 12px 14px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 2px 10px rgba(21, 17, 14, .07);
}
@media (min-width: 560px) {
  .banner-servicos { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .banner-servicos > * + * { border-left: 1px solid var(--linha); }
}
.banner-servicos > * {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 10px;
  padding: 5px 12px;
  font-size: 11.5px; line-height: 1.3; color: var(--tinta-2);
  text-decoration: none;
}
.banner-servicos b {
  grid-column: 2; font-size: 13px; font-weight: 600; color: var(--tinta);
}
.banner-servicos span:not([data-icone]), .banner-servicos > *::after { grid-column: 2; }
.banner-servicos svg {
  grid-row: span 2; width: 21px; height: 21px; color: var(--ouro);
}
.banner-servicos a:hover b { color: var(--ouro); }

/* A foto e RECORTADA no arco, em vez de receber uma forma pintada por cima:
   assim o fundo do painel aparece atras da curva e a foto fica dentro da
   composicao, nao pendurada nela.
   A faixa dourada e o FUNDO do contentor aparecendo pela folga do padding —
   e nao um border de 1px, que some contra a foto escura. Assim ela e grossa,
   tem gradiente e acompanha a curva sozinha em qualquer tamanho de tela. */
.banner-foto {
  position: relative;
  order: -1;
  height: 190px;
  /* Celular: curva na base, apontando para o conteudo que vem abaixo. */
  border-radius: 0 0 50% 50% / 0 0 20% 20%;
  padding-bottom: 9px;
  background: linear-gradient(100deg, #b8873a 0%, #fdd09e 38%, #e7b86f 62%, #b8873a 100%);
}
.banner-foto img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 34%;
  border-radius: inherit;
}

@media (min-width: 900px) {
  .banner-foto {
    order: 0;
    height: auto; min-height: 370px;
    /* Desktop: a curva abraca a foto pela esquerda. */
    border-radius: 42% 0 0 42% / 50% 0 0 50%;
    padding-bottom: 0;
    padding-left: 16px;
    background: linear-gradient(170deg, #b8873a 0%, #fdd09e 34%, #e7b86f 58%, #a9792f 100%);
    /* A curva come a lateral esquerda, entao a foto avanca sobre o conteudo
       para a fachada nao se perder no recorte. */
    margin-left: -48px;
  }
}

/* ---------- Cards de categoria ---------- */

.categorias-grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 680px) { .categorias-grade { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .categorias-grade { grid-template-columns: repeat(4, 1fr); } }

.categoria-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: var(--carta);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  text-decoration: none; color: inherit;
}
.categoria-card:hover { border-color: var(--ouro); }
.categoria-card-foto {
  flex: none;
  width: 54px; height: 54px;
  border-radius: 9px; background: #f3efe9; overflow: hidden;
}
.categoria-card-foto img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.categoria-card b { display: block; font: 400 15px/1.2 var(--serifa); }
.categoria-card small { color: var(--tinta-2); font-size: 12.5px; }

/* ---------- A loja ---------- */

.loja { background: var(--carta); border-top: 1px solid var(--linha); }
.loja .envoltorio {
  display: grid; gap: 24px;
  padding-top: 44px; padding-bottom: 44px;
}
@media (min-width: 820px) {
  .loja .envoltorio { grid-template-columns: .85fr 1fr; align-items: center; gap: 44px; }
}
/* A foto da fachada e retrato (900x1014). Solta, ela estica a secao para mais
   de mil pixels e o texto ao lado fica boiando no meio de um vazio. */
.loja-foto img {
  width: 100%; max-height: 420px;
  object-fit: cover; object-position: center 28%;
  border-radius: var(--raio-g);
}
.loja h2 { margin: 0 0 12px; font: 400 28px/1.15 var(--serifa); }
.loja p { margin: 0 0 16px; color: #433c34; max-width: 52ch; }

.loja-horario {
  display: flex; align-items: center; gap: 11px;
  margin: 0 0 18px; font-size: 15px; color: var(--tinta-2);
}
.loja-horario svg { flex: none; width: 19px; height: 19px; color: var(--ouro); }

/* Endereco e WhatsApp eram texto com icone e ninguem percebia que davam para
   clicar. Agora sao linhas de toque: moldura, area grande, seta e hover. */
.loja-acoes { display: grid; gap: 10px; margin-bottom: 18px; }
@media (min-width: 560px) { .loja-acoes { grid-template-columns: 1fr 1fr; } }

.loja-acao {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px;
  min-height: 62px; padding: 10px 14px;
  background: var(--papel);
  border: 1px solid var(--linha); border-radius: 14px;
  text-decoration: none; color: inherit;
}
.loja-acao:hover { border-color: var(--ouro); background: #fdfaf5; }
.loja-acao > [data-icone] { display: flex; }
.loja-acao svg { width: 22px; height: 22px; color: var(--ouro); }

.loja-acao-texto { display: grid; gap: 1px; min-width: 0; }
.loja-acao-texto b { font-size: 15px; font-weight: 600; }
.loja-acao-texto small {
  font-size: 12.5px; color: var(--tinta-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.loja-acao-seta { width: 18px !important; height: 18px !important; color: var(--tinta-2) !important; }
.loja-acao:hover .loja-acao-seta { color: var(--ouro) !important; }

/* O do WhatsApp usa o verde do proprio WhatsApp: e a acao que fecha venda. */
.loja-acao-zap {
  background: #eefaf3; border-color: #bfe8d3;
}
.loja-acao-zap svg:not(.loja-acao-seta) { color: var(--zap); }
.loja-acao-zap:hover { background: #e4f6ec; border-color: var(--zap); }

.loja-ver { width: 100%; }
@media (min-width: 560px) { .loja-ver { width: auto; } }