/* =====================================================
   HERO
===================================================== */
 
.hero {
  position:    relative;
  min-height:  calc(100vh - 85px);
  display:     flex;
  align-items: center;
  overflow:    hidden;
}
 
/* --- Slider --- */
 
.hero-slider {
  position: absolute;
  inset:    0;
  z-index:  1;
}
 
.slide {
  position:   absolute;
  inset:      0;
  opacity:    0;
  transition: opacity 1.2s ease;
}
 
.slide.active {
  opacity: 1;
}
 
.slide-bg {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center;
}
 
/* --- Overlay escuro --- */
 
.hero-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    90deg,
    rgba(15,23,42,.78)  0%,
    rgba(15,23,42,.48) 45%,
    rgba(15,23,42,.18) 100%
  );
  z-index: 2;
}
 
/* --- Conteúdo --- */
 
.hero .container {
  position: relative;
  z-index:  10;
}
 
.hero-content {
  max-width: 680px;
}
 
.hero-tag {
  display:       inline-block;
  padding:       8px 16px;
  background:    rgba(255,255,255,.12);
  border:        1px solid rgba(255,255,255,.2);
  color:         #fff;
  border-radius: 999px;
  font-size:     .8rem;
  font-weight:   600;
  letter-spacing: 1.5px;
  margin-bottom: 22px;
}
 
.hero-content h1 {
  color:         #fff;
  margin-bottom: 20px;
  opacity:       0;
  transform:     translateY(10px);
  transition:    opacity .5s ease, transform .5s ease;
}
 
.hero-content h1.visible {
  opacity:   1;
  transform: translateY(0);
}
 
.hero-content p {
  font-size:     1.1rem;
  color:         rgba(255,255,255,.82);
  margin-bottom: 35px;
  opacity:       0;
  transform:     translateY(10px);
  transition:    opacity .5s ease .1s, transform .5s ease .1s;
}
 
.hero-content p.visible {
  opacity:   1;
  transform: translateY(0);
}
 
.hero-buttons {
  display:   flex;
  gap:       14px;
  flex-wrap: wrap;
}
 
/* Botão outline exclusivo do hero */
.btn-outline {
  display:       inline-flex;
  align-items:   center;
  gap:           10px;
  padding:       14px 28px;
  border-radius: var(--radius-md);
  font-weight:   600;
  cursor:        pointer;
  background:    transparent;
  border:        2px solid rgba(255,255,255,.65);
  color:         #fff;
  transition:    var(--transition);
}
 
.btn-outline:hover {
  background: rgba(255,255,255,.12);
  border-color: #fff;
}
 
/* --- Setas --- */
 
.hero-arrow {
  position:      absolute;
  top:           50%;
  transform:     translateY(-50%);
  z-index:       10;
  background:    rgba(255,255,255,.12);
  border:        1px solid rgba(255,255,255,.25);
  color:         #fff;
  width:         48px;
  height:        48px;
  border-radius: 50%;
  font-size:     1.2rem;
  cursor:        pointer;
  transition:    var(--transition);
  display:       flex;
  align-items:   center;
  justify-content: center;
}
 
.hero-arrow:hover {
  background: rgba(255,255,255,.25);
}
 
.hero-arrow--prev { left:  24px; }
.hero-arrow--next { right: 24px; }
 
/* --- Bolinhas --- */
 
.hero-indicators {
  position:  absolute;
  bottom:    28px;
  left:      50%;
  transform: translateX(-50%);
  display:   flex;
  gap:       10px;
  z-index:   10;
}
 
.indicator {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  border:        none;
  background:    rgba(255,255,255,.4);
  cursor:        pointer;
  padding:       0;
  transition:    var(--transition);
}
 
.indicator.active {
  background: #fff;
  transform:  scale(1.35);
}
 
/* --- Responsive --- */
 
@media (max-width: 768px) {
  .hero-arrow {
    width:     38px;
    height:    38px;
    font-size: 1rem;
  }
 
  .hero-arrow--prev { left:  12px; }
  .hero-arrow--next { right: 12px; }
 
  .hero-buttons {
    flex-direction: column;
  }
}