/* ==========================================================================
   BANNER PRINCIPAL (carrossel)
   Cada slide: texto à esquerda sobre o carbono com grade de pontos e uma
   foto real à direita, com cantos de visor e uma etiqueta técnica no canto.
   As medidas internas usam "cqw" (1% da largura do carrossel), então tudo
   escala junto em qualquer tela. O "vw" antes do "cqw" é só fallback.
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  container-type: inline-size;
  outline-offset: -3px;
}

.hero__viewport {
  overflow: hidden;
  aspect-ratio: var(--banner-proporcao);
  background: var(--cor-marca);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.hero__viewport:active {
  cursor: grabbing;
}

.hero__track {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  transition: transform var(--transicao-slide);
}

.hero__track.sem-transicao {
  transition: none;
}

/* ---------- Slide ---------- */
.slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-color: var(--cor-marca);
  background-image: var(--camadas-escuro);
  background-size: var(--camadas-tamanho);
  color: var(--cor-branco);
}

.slide__conteudo {
  position: relative;
  z-index: 2;
  width: 47%;
  padding: 0 3vw 0 5vw;
  padding: 0 3cqw 0 5.2cqw;
}

.slide__etiqueta {
  display: flex;
  align-items: center;
  gap: 1cqw;
  margin-bottom: 1.8cqw;
  font-family: var(--fonte-mono);
  font-weight: 500;
  font-size: max(11px, 1.25vw);
  font-size: max(11px, 1.25cqw);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cor-mostarda);
}

/* Retículo: anel com o ponto vermelho no meio, o símbolo da marca */
.slide__etiqueta::before {
  content: '';
  flex: none;
  width: max(12px, 1.5cqw);
  height: max(12px, 1.5cqw);
  border: max(2px, 0.2cqw) solid currentColor;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cor-destaque) 0 30%, transparent 33%);
}

.slide__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-size: 4.4vw;
  font-size: 4.4cqw;
}

.slide__titulo em {
  font-style: normal;
  color: var(--cor-destaque);
}

.slide__sub {
  margin-top: 1.8cqw;
  max-width: 34cqw;
  font-size: max(13px, 1.55vw);
  font-size: max(13px, 1.55cqw);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

.slide__acoes {
  display: flex;
  align-items: center;
  gap: 2cqw;
  margin-top: 2.8cqw;
}

.slide__btn {
  display: inline-block;
  padding: max(12px, 1.35cqw) max(18px, 2.6cqw);
  border-radius: var(--raio-md);
  background: var(--cor-destaque);
  color: var(--cor-texto-no-destaque);
  font-weight: 800;
  font-size: max(14px, 1.45vw);
  font-size: max(14px, 1.45cqw);
  line-height: 1;
  white-space: nowrap;
  transition: background var(--transicao-rapida), transform var(--transicao-rapida);
}

.slide__btn:hover {
  background: var(--cor-destaque-escura);
  transform: translateY(-1px);
}

.slide__preco {
  font-family: var(--fonte-mono);
  font-size: max(11px, 1.2cqw);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.7);
}

.slide__preco strong {
  margin: 0.15em 0;
  display: block;
  font-family: var(--fonte-ui);
  font-size: max(14px, 1.9cqw);
  font-weight: 800;
  color: var(--cor-branco);
}

/* Foto: metade direita, borda reta */
.slide__foto {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 53%;
  margin: 0;
}

.slide__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Cantos de enquadramento, como o visor de uma mira */
.slide__foto::after {
  content: '';
  position: absolute;
  inset: 2.4cqw;
  pointer-events: none;
  opacity: 0.85;
  --canto: 2.4cqw;
  --traco: max(2px, 0.18cqw);
  background:
    linear-gradient(#fff, #fff) top left / var(--canto) var(--traco),
    linear-gradient(#fff, #fff) top left / var(--traco) var(--canto),
    linear-gradient(#fff, #fff) top right / var(--canto) var(--traco),
    linear-gradient(#fff, #fff) top right / var(--traco) var(--canto),
    linear-gradient(#fff, #fff) bottom left / var(--canto) var(--traco),
    linear-gradient(#fff, #fff) bottom left / var(--traco) var(--canto),
    linear-gradient(#fff, #fff) bottom right / var(--canto) var(--traco),
    linear-gradient(#fff, #fff) bottom right / var(--traco) var(--canto);
  background-repeat: no-repeat;
}

/* Etiqueta técnica no canto da foto, como a leitura de um visor */
.slide__fita {
  position: absolute;
  z-index: 1;
  left: 4.2cqw;
  bottom: 4.2cqw;
  padding: 0.8cqw 1.4cqw 0.8cqw 1.2cqw;
  border-left: max(3px, 0.3cqw) solid var(--cor-destaque);
  border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
  background: rgba(10, 11, 13, 0.82);
  color: var(--cor-branco);
  font-family: var(--fonte-mono);
  font-weight: 500;
  font-size: max(10px, 1.1cqw);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Variante clara: fundo cinza gelo, texto carbono */
.slide--claro {
  background-color: var(--cor-papel);
  background-image: var(--camadas-claro);
  background-size: var(--camadas-tamanho);
  color: var(--cor-tinta);
}

.slide--claro .slide__sub {
  color: var(--cor-cinza-texto);
}

.slide--claro .slide__etiqueta {
  color: var(--cor-destaque-escura);
}

.slide--claro .slide__titulo em {
  color: var(--cor-destaque-escura);
}

.slide--claro .slide__btn {
  background: var(--cor-tinta);
  color: var(--cor-branco);
}

.slide--claro .slide__btn:hover {
  background: var(--cor-destaque);
  color: var(--cor-texto-no-destaque);
}

.slide--claro .slide__preco {
  color: var(--cor-cinza-texto);
}

.slide--claro .slide__preco strong {
  color: var(--cor-tinta);
}

/* ---------- Bolinhas: traços curtos ---------- */
.hero__dots {
  position: absolute;
  left: 5.2cqw;
  bottom: calc(2.6cqw - 10px);
  z-index: 5;
  display: flex;
  gap: 6px;
}

.hero__dot {
  width: 22px;
  height: 24px;
  padding: 10px 0;
  background-clip: content-box;
  border-radius: 2px;
  background-color: rgba(140, 134, 124, 0.6);
  transition: background var(--transicao-rapida), width var(--transicao-rapida);
}

.hero__dot.is-active {
  width: 40px;
  background-color: var(--cor-destaque);   /* background-color: o atalho apagaria o background-clip */
}

/* ---------- Setas (só em telas maiores) ---------- */
.hero__seta {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: var(--raio-md);
  background: rgba(26, 25, 23, 0.72);
  color: var(--cor-branco);
  transition: background var(--transicao-rapida), color var(--transicao-rapida);
}

.hero__seta:hover {
  background: var(--cor-destaque);
  color: var(--cor-texto-no-destaque);
}

.hero__seta svg {
  width: 22px;
  height: 22px;
  margin: 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero__seta--prev {
  left: 12px;
}

.hero__seta--next {
  right: 12px;
}

@media (min-width: 768px) {
  .hero__seta {
    display: block;
  }

  .hero__seta--prev {
    left: auto;
    right: 64px;
    top: auto;
    bottom: 16px;
    transform: none;
  }

  .hero__seta--next {
    top: auto;
    bottom: 16px;
    transform: none;
  }
}

@media (min-width: 1024px) {
  .hero {
    margin-top: 20px;
    width: calc(100% - 2 * var(--gutter));
    max-width: calc(var(--largura-max) - 2 * var(--gutter));
  }

  .hero__viewport {
    border-radius: var(--raio-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__track,
  .slide__btn,
  .hero__dot {
    transition: none;
  }
}

/* ---------- Celular: texto em cima, foto embaixo ---------- */
@media (max-width: 639px) {
  .hero__viewport {
    aspect-ratio: 1 / 1.22;
  }

  .slide {
    align-items: flex-start;
  }

  .slide__conteudo {
    width: 100%;
    padding: 7cqw 6cqw 0;
  }

  .slide__etiqueta {
    font-size: 3cqw;
    margin-bottom: 3cqw;
    gap: 2cqw;
  }

  .slide__etiqueta::before {
    width: 3.6cqw;
    height: 3.6cqw;
    border-width: 0.6cqw;
  }

  .slide__titulo {
    font-size: 8.6cqw;
  }

  .slide__sub {
    max-width: none;
    font-size: 3.7cqw;
    margin-top: 2.6cqw;
  }

  .slide__acoes {
    margin-top: 4.4cqw;
    gap: 4cqw;
  }

  .slide__btn {
    font-size: 3.7cqw;
    padding: 3cqw 5cqw;
  }

  .slide__preco {
    font-size: 2.8cqw;
  }

  .slide__preco strong {
    font-size: 4.4cqw;
  }

  .slide__foto {
    top: auto;
    left: 0;
    width: 100%;
    height: 44%;
  }

  .slide__fita {
    left: auto;
    right: 6cqw;
    bottom: 6cqw;
    font-size: 2.7cqw;
    padding: 1.6cqw 2.6cqw 1.6cqw 2.2cqw;
    border-left-width: 0.8cqw;
  }

  .slide__foto::after {
    inset: 4cqw 4cqw 10cqw;   /* cantos de baixo acima das bolinhas do carrossel */
    --canto: 5cqw;
    --traco: 2px;
  }

  .hero__dots {
    left: 6cqw;
    bottom: calc(4cqw - 10px);
  }
}