/* Hero em carrossel (exemplo). Troca o vídeo por 4 banners com o texto do site por cima. */
.hero { display: block; height: clamp(560px, 46vw, 800px); min-height: 560px; max-height: none; background: #060607; }
.hero::after { display: none; }
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.2s ease, visibility 0s 1.2s; }
.hero-slide.ativo { opacity: 1; visibility: visible; transition: opacity 1.2s ease; }
.hero-slide picture, .hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-slide img { object-fit: cover; transform: scale(1.05); }
.hero-slide.ativo img { transform: none; transition: transform 9s cubic-bezier(.2,.6,.3,1); }
/* o produto fica do lado oposto ao texto: ancora a foto nesse lado para o corte não esconder o produto */
.hero-slide.texto-direita img { object-position: 12% 50%; }
.hero-slide.texto-esquerda img { object-position: 88% 50%; }

/* escurece só a área do texto, conforme o lado */
.hero-slide::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 40%), linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%); }
.hero-slide.texto-direita::after { background: linear-gradient(270deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 30%, transparent 55%), linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 40%), linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%); }
.hero-slide.texto-esquerda::after { background: linear-gradient(90deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 30%, transparent 55%), linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 40%), linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%); }

.hero-texto { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(104px, 9vw, 150px); }
.hero-texto .wrap { display: flex; padding-bottom: 0; }
.texto-direita .hero-texto .wrap { justify-content: flex-end; }
.hero-texto .bloco { max-width: 520px; }
.hero-texto .eyebrow { display: inline-flex; align-items: center; gap: 12px; color: rgba(255,255,255,.78); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.hero-texto .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--cor); }
.hero-texto h1, .hero-texto h2 { margin: 16px 0 14px; max-width: 14ch; font-size: clamp(34px, 3.8vw, 58px); font-weight: 300; line-height: 1.04; letter-spacing: -.02em; animation: none; }
.hero-texto b { font-weight: 700; }
.hero-texto p { max-width: 40ch; color: rgba(255,255,255,.8); font-size: 16px; line-height: 1.55; animation: none; }
.hero-texto .hero-botoes { margin-top: 28px; animation: none; }

.hero-slide .bloco > * { opacity: 0; transform: translateY(16px); }
.hero-slide.ativo .bloco > * { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.hero-slide.ativo .bloco > :nth-child(2) { transition-delay: .1s; }
.hero-slide.ativo .bloco > :nth-child(3) { transition-delay: .2s; }
.hero-slide.ativo .bloco > :nth-child(4) { transition-delay: .3s; }

.hero-indicadores { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(32px, 5vh, 56px); }
.hero-indicadores .wrap { display: grid; grid-template-columns: repeat(5, minmax(0, 150px)); gap: 22px; padding-bottom: 0; }
.hero-indicadores button { all: unset; cursor: pointer; display: grid; gap: 12px; color: rgba(255,255,255,.55); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.hero-indicadores button[aria-current] { color: #fff; }
.hero-indicadores .barra { height: 2px; background: rgba(255,255,255,.22); overflow: hidden; }
.hero-indicadores .barra i { display: block; height: 100%; width: 0; background: #fff; }
.hero-indicadores button[aria-current] .barra i { width: 100%; transition: width var(--tempo, 8s) linear; }
.hero-indicadores button:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }

@media (max-width: 899px) {
  .hero { height: 100svh; min-height: 640px; }
  .hero-slide img, .hero-slide.texto-direita img, .hero-slide.texto-esquerda img { object-position: 50% 100%; }
  .hero-slide::after, .hero-slide.texto-direita::after, .hero-slide.texto-esquerda::after {
    background: linear-gradient(to bottom, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 38%, rgba(0,0,0,0) 62%), linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 22%); }
  .hero-texto { top: calc(var(--header-h) + 22px); bottom: auto; }
  .texto-direita .hero-texto .wrap { justify-content: flex-start; }
  .hero-texto h1, .hero-texto h2 { font-size: 34px; max-width: 13ch; }
  .hero-texto p { font-size: 15px; }
  .hero-texto .hero-botoes { margin-top: 20px; }
  .hero-texto .botao { padding: 13px 18px; font-size: 11.5px; }
  .hero-indicadores { bottom: 26px; }
  .hero-indicadores .wrap { gap: 10px; grid-template-columns: repeat(5, 1fr); }
  .hero-indicadores button { font-size: 10.5px; letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) { .hero-slide, .hero-slide img, .hero-slide .bloco > * { transition: none !important; } }

/* destaque em negrito nunca quebra no meio (evita palavra sozinha na 2a linha) */
.hero-texto b { white-space: nowrap; }