/* Estilos específicos para a seção hero */
/* .hero { ... } */
/* .headline, .subheadline, .hero-video-container, etc. */

.hero {
  padding: 5rem 0 2.5rem 0;
  background: linear-gradient(180deg, #f8f8fc 60%, #fff 100%);
  text-align: center;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}
.hero .container {
  position: relative;
  z-index: 2;
}
.hero .headline {
  font-size: clamp(1.95rem, 4.6vw, 2.2rem);
  font-weight: 700;
  color: #9B6B9E;
  line-height: 1.35; /* increased for better readability and breathing room */
  letter-spacing: 0.2px;
  margin-bottom: 2.5rem;
}
.hero .headline span {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: #fff;
  background: var(--gradient);
  padding: 0.08em 0.38em;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(155, 107, 158, 0.18);
  letter-spacing: 0.4px;
  font-size: 1.06em;
}
.hero .subheadline {
  font-size: 1.25rem;
  color: #444;
  margin-bottom: 2.2rem;
}
.hero .hero-video-container {
  margin: 2.5rem auto 2.5rem auto;
  max-width: 520px;
  position: relative;
  z-index: 2;
}
.hero .video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden; /* garantir que nada seja cortado */
  border-radius: 18px;
  box-shadow: 0 4px 24px #9B6B9E22;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero .video-responsive {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.hero .video-wrapper iframe,
.hero .video-responsive iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 18px;
  display: block;
  background: #fff;
  object-fit: cover;
}