/* Shared facade hero: the same photograph + diagonal composition as /lojas/. */
.local-hero--with-facade,
.hero--with-facade {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(580px, 64svh, 640px);
  overflow: hidden;
  background: #050505;
  color: #fff;
}
.local-hero--with-facade::before,
.hero--with-facade::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: rgba(8,8,8,.98);
  clip-path: polygon(0 0, 34% 0, 50% 100%, 0 100%);
  filter: none;
  transform: none;
  animation: none;
  pointer-events: none;
}
.local-hero--with-facade::after,
.hero--with-facade::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--red);
  clip-path: polygon(30% 0, 34% 0, 50% 100%, 46% 100%);
  pointer-events: none;
}
.store-facade {
  position: absolute;
  z-index: -3;
  inset: 0;
  margin: 0;
  min-width: 0;
  overflow: hidden;
}
.store-facade > a { display: block; width: 100%; height: 100%; }
.store-facade img {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
}
.store-facade > a > span,
.store-facade figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.local-hero--with-facade .hero-inner,
.hero--with-facade .hero-inner { display: block; min-height: 0; padding-block: 64px 48px; }
.local-hero--with-facade .hero-layout { display: block; }
.local-hero--with-facade .hero-layout > div,
.hero--with-facade .hero-copy { width: 48%; max-width: 520px; min-width: 0; }
.local-hero--with-facade h1,
.hero--with-facade h1 { max-width: 100%; font-size: clamp(3rem, 5.8vw, 5.3rem); overflow-wrap: break-word; }
.local-hero--with-facade .hero-lede,
.hero--with-facade .hero-support { width: 100%; max-width: 520px; }
.hero--with-facade .breadcrumbs { position: static; margin: 0 0 34px; }
@media (max-width: 900px) {
  .local-hero--with-facade,
  .hero--with-facade { min-height: auto; }
  .store-facade { inset: 0 0 auto; height: 300px; }
  .store-facade img { position: static; width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: var(--facade-position-mobile, center); }
  .local-hero--with-facade::before,
  .hero--with-facade::before { clip-path: polygon(0 300px, 100% 230px, 100% 100%, 0 100%); }
  .local-hero--with-facade::after,
  .hero--with-facade::after { clip-path: polygon(0 288px, 100% 218px, 100% 230px, 0 300px); }
  .local-hero--with-facade .hero-inner,
  .hero--with-facade .hero-inner { padding-block: 320px 54px; }
  .local-hero--with-facade .hero-layout > div,
  .hero--with-facade .hero-copy { width: 100%; max-width: none; }
  .local-hero--with-facade h1,
  .hero--with-facade h1 { font-size: clamp(2.625rem, 10vw, 5.5rem); }
}
@media (max-width: 680px) {
  .store-facade { height: 255px; }
  .local-hero--with-facade::before,
  .hero--with-facade::before { clip-path: polygon(0 255px, 100% 190px, 100% 100%, 0 100%); }
  .local-hero--with-facade::after,
  .hero--with-facade::after { clip-path: polygon(0 244px, 100% 179px, 100% 190px, 0 255px); }
  .local-hero--with-facade .hero-inner,
  .hero--with-facade .hero-inner { padding-block: 275px 42px; }
  .local-hero--with-facade h1,
  .hero--with-facade h1 { font-size: clamp(2.625rem, 13vw, 4.625rem); }
}