/* Seção 1 — banners alternados.
   Fixos durante a troca: cabeçalho, título, apoio, botão, diferenciais e controles.
   Muda por banner: foto do hotel e a linha do destino. */
.hero { position: relative; background: var(--petroleo-900); overflow: hidden; }

.hero__palco {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(660px, 100svh, 960px);
}

/* Fotos: ocupam a direita e se fundem no petróleo à esquerda e no topo.
   Caixa a 82% (pedido do dono, 19/10): veículos ~18% menores, presa ao canto inferior direito. */
.hero__slides {
  --escala-foto: 0.82;
  position: absolute;
  inset: auto 0 0 auto;
  width: calc(64% * var(--escala-foto));
  height: calc(100% * var(--escala-foto));
}
.hero__slides::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--petroleo-900) 0%, rgba(0, 29, 34, 0.78) 16%, rgba(0, 29, 34, 0.25) 36%, rgba(0, 29, 34, 0) 52%),
    linear-gradient(180deg, var(--petroleo-900) 0%, rgba(0, 29, 34, 0.6) 10%, rgba(0, 29, 34, 0) 28%),
    linear-gradient(0deg, rgba(0, 29, 34, 0.45) 0%, rgba(0, 29, 34, 0) 16%);
}
.hero__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duracao-troca) ease, visibility 0s linear var(--duracao-troca);
}
.hero__slide.is-ativo {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duracao-troca) ease, visibility 0s;
}
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

/* Texto */
.hero__conteudo {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: clamp(7rem, 12vh, 9.5rem) var(--gutter) clamp(5.5rem, 10vh, 7.5rem);
  text-shadow: var(--sombra-texto);
}
/* Troca por banner: as versões ficam empilhadas na mesma célula, então a altura
   é a da maior e botão e diferenciais não pulam de posição. */
.hero__troca { display: grid; }
.hero__troca > [data-slide] {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity calc(var(--duracao-troca) * 0.7) ease, visibility 0s linear var(--duracao-troca);
}
.hero__troca > .is-ativo {
  opacity: 1;
  visibility: visible;
  transition: opacity calc(var(--duracao-troca) * 0.7) ease, visibility 0s;
}
.hero__troca--botao { justify-items: start; }

.hero__titulo { margin: 0; font-weight: var(--peso-titulo); }
.hero__troca--eyebrow { margin-bottom: clamp(0.8rem, 1.4vw, 1.4rem); }
.hero__eyebrow {
  margin: 0;
  font-size: clamp(0.8rem, 0.95vw, 1rem);
  font-weight: var(--peso-medio);
  letter-spacing: 0.42em;
  text-transform: uppercase;
}
.hero__linha,
.hero__destino {
  font-size: clamp(2.6rem, 4.9vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.hero__linha { display: block; }

.hero__destino {
  margin: 0.08em 0 0;
  color: var(--laranja);
  font-weight: var(--peso-titulo);
}

.hero__troca--apoio { margin: 0.55rem 0 clamp(1.6rem, 2.6vw, 2.4rem); align-items: start; }
.hero__apoio {
  margin: 0;
  font-size: clamp(1.1rem, 1.55vw, 1.625rem);
  color: var(--texto-suave);
}

/* Faixa de diferenciais */
.hero__troca--diferenciais { margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.diferenciais {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.diferenciais__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-right: clamp(1rem, 1.6vw, 1.6rem);
  line-height: 1.25;
}
.diferenciais__item + .diferenciais__item {
  padding-left: clamp(1rem, 1.6vw, 1.6rem);
  border-left: 1.5px solid var(--linha-clara);
}
.diferenciais__item .icone { width: 2.4rem; height: 2.4rem; }
.diferenciais__texto { font-size: clamp(1rem, 1.15vw, 1.1875rem); font-weight: var(--peso-medio); }
.diferenciais__destaque {
  display: block;
  color: var(--laranja);
  font-size: clamp(1.35rem, 1.6vw, 1.6875rem);
  font-weight: 600;
  line-height: 1.1;
}
.diferenciais__texto--sob { display: block; font-weight: var(--peso-texto); color: var(--texto-suave); }

/* Domínio (provisório) no canto inferior */
.hero__dominio {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1.5rem, 4vh, 2.6rem);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0;
  font-size: 1.125rem;
  color: var(--texto-suave);
}
.hero__dominio::before { content: ""; width: 2.5rem; height: 1.5px; background: currentColor; }

/* Controles do carrossel */
.hero__controles {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3vh, 2rem);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transform: translateX(-50%);
}
.hero__botao {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.hero__botao svg { width: 1.35rem; height: 1.35rem; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5)); }
.hero__botao:hover { background: rgba(0, 29, 34, 0.45); }
.hero__pontos { display: flex; margin: 0; padding: 0; list-style: none; }
.hero__ponto::before {
  content: "";
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  transition: background-color 0.3s ease;
}
.hero__ponto[aria-current="true"]::before { background: var(--laranja); }
.hero__botao--pausa .icone-play { display: none; }
.hero__botao--pausa[data-estado="pausado"] .icone-pausa { display: none; }
.hero__botao--pausa[data-estado="pausado"] .icone-play { display: block; }

/* Celular: texto em cima, foto inteira embaixo, controles e diferenciais visíveis */
@media (max-width: 760px) {
  .hero__palco { min-height: 0; justify-content: flex-start; }
  .hero__conteudo { order: 1; padding: 6.5rem var(--gutter) 0; }
  .hero__slides {
    order: 2;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 822 / 770;
    margin-top: -2.5rem;
  }
  .hero__slides::before {
    background:
      linear-gradient(180deg, var(--petroleo-900) 0%, rgba(0, 29, 34, 0.55) 14%, rgba(0, 29, 34, 0) 34%),
      linear-gradient(0deg, rgba(0, 29, 34, 0.6) 0%, rgba(0, 29, 34, 0) 14%);
  }
  .hero__linha,
  .hero__destino { font-size: clamp(2rem, 8.6vw, 2.75rem); }
  .hero__eyebrow { letter-spacing: 0.32em; }
  .botao { width: 100%; justify-content: center; }

  .diferenciais { display: grid; grid-template-columns: repeat(3, 1fr); }
  .diferenciais__item,
  .diferenciais__item + .diferenciais__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0 0.6rem;
  }
  .diferenciais__item:first-child { padding-left: 0; }
  .diferenciais__item .icone { width: 1.9rem; height: 1.9rem; }
  .diferenciais__texto { font-size: 0.9375rem; }
  .diferenciais__destaque { font-size: 1.2rem; }

  .hero__controles {
    order: 3;
    position: static;
    justify-content: center;
    margin-top: -0.5rem;
    padding-bottom: 0.75rem;
    transform: none;
  }
  .hero__dominio {
    order: 4;
    position: static;
    justify-content: center;
    padding: 0 var(--gutter) 1.5rem;
    font-size: 1rem;
  }
}

/* Tablet e notebook pequeno: controles à direita para não cobrir o domínio no canto esquerdo */
@media (min-width: 761px) and (max-width: 1100px) {
  .hero__controles { left: auto; right: var(--gutter); transform: none; }
}