/* ═══════════════════════════════════════════════════════════════════
   AVENTAL DE PINTURA — especifico deste site
   Carrega depois de base.css. So o que nao existe no sistema.
   ═══════════════════════════════════════════════════════════════════ */

/* ── HERO DE PRODUTO FISICO ──────────────────────────────────────────
   Os outros sites sao de curso e usam foto de fundo com veu. Aqui nao
   serve: quem compra roupa precisa VER a peca, inteira e sem filtro por
   cima. Entao a foto e objeto em coluna propria, nitida, e o texto fica
   ao lado — mesma logica de vitrine. */
.hero--produto{
  min-height:auto;
  padding-top:clamp(132px,13vw,180px);
  padding-bottom:clamp(48px,6vw,84px);
  background:
    radial-gradient(900px 520px at 78% 30%, rgba(201,168,76,.08), transparent 70%),
    var(--ink);
}
.avental__hero{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,72px); align-items:center;
}
.avental__hero-txt .hero__sub{ max-width:52ch }
.avental__hero-img{
  position:relative; border-radius:3px; overflow:hidden;
  aspect-ratio:3/4;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95), inset 0 0 0 1px var(--line-soft);
}
.avental__hero-img img{
  width:100%; height:100%; object-fit:cover; object-position:50% 38%;
  /* produto fisico: quase nada de tratamento. Mexer na cor do preto do
     brim seria entregar uma peca diferente da foto. */
  filter:contrast(1.03);
}

/* ── FOTO DE DETALHE ──────────────────────────────────────────────── */
.avental__foto{
  border-radius:3px; overflow:hidden; aspect-ratio:1;
  box-shadow:0 30px 70px -45px rgba(0,0,0,.9), inset 0 0 0 1px var(--line-soft);
}
.avental__foto img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:contrast(1.03);
}

/* ── FAIXA DA PILHA ───────────────────────────────────────────────── */
.avental__faixa{ margin-top:clamp(28px,3.4vw,48px) }
.avental__faixa img{
  border-radius:3px;
  box-shadow:0 30px 70px -45px rgba(0,0,0,.9), inset 0 0 0 1px var(--line-soft);
}
.avental__faixa img{
  width:100%; display:block;
  /* a foto nasce vertical; 21/9 cortava o bordado da peca de baixo no meio
     da palavra. 3/2 com o foco um pouco acima fecha as duas primeiras pecas
     inteiras e nao parte texto nenhum. */
  aspect-ratio:3/2; object-fit:cover; object-position:50% 34%;
  filter:contrast(1.03);
}
/* a legenda sobreposta caia bem em cima do bordado grande da peca e as duas
   coisas brigavam — desceu para fora da imagem, onde se le */
.avental__faixa figcaption{
  padding:14px 2px 0;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}

/* ── PRAZO DE ENTREGA ─────────────────────────────────────────────────
   Em produto fisico esta e a objecao numero um. Fica logo abaixo do
   botao, com o prazo em destaque, e nao perdido no rodape. */
.avental__envio{
  margin-top:18px; max-width:46ch; margin-inline:auto;
  font-size:13.5px; line-height:1.65; color:var(--paper-dim);
}
.avental__envio b{ color:var(--paper) }

/* o riscado do base.css e vermelho de varejo e briga com o preto/ouro */
.price .price__cupom b{ color:var(--gold-lt) }

/* ═══ RESPONSIVO ═══════════════════════════════════════════════ */
@media (max-width:980px){
  .avental__hero{ grid-template-columns:1fr; gap:clamp(28px,5vw,40px) }
  /* empilhado, a foto abre a pagina: produto fisico vende pelo olho */
  .avental__hero-img{ order:-1; aspect-ratio:4/5; max-height:62vh }
  .avental__hero-img img{ object-position:50% 30% }
  .avental__faixa img{ aspect-ratio:16/10 }
}
@media (max-width:620px){
  .avental__hero-img{ aspect-ratio:1 }
  .avental__faixa img{ aspect-ratio:4/3 }
}