/* KIWELL · hero v1 (primeira dobra)
   Base: SIX .header/.hero/.btn + ds2 (kiwell-ds.css). Aqui só o que a dobra precisa por cima.
   Prefixo hv1- = peça desta página; o resto é classe do ds2. */

/* ---------- Header: uma linha, menu no centro ---------- */
.header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 1.5rem;
  animation: hv1Drop var(--dur-in) var(--ease-out) both;
}
.header__logo { justify-self: start; }
.header__nav { justify-self: center; gap: 2.5rem; }
.header__nav a {
  font-family: var(--kiwell-font-text);
  font-weight: 500;
  font-size: .625rem;
  white-space: nowrap;
}
.header__nav a::after { transition: width var(--dur-med) var(--ease-out); }
.header .header__cta { justify-self: end; display: block !important; }
.header__cta .btn {
  font-size: .625rem;
  letter-spacing: .18em;
  padding: 0 2rem;
  height: 45px; min-height: 45px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--kw-r-0);
  white-space: nowrap;
}
.header .header__hamburger { display: none !important; }

/* Navbar ao rolar: vidro translúcido puxado pro azul-claro da marca (--kiwell-ice #C1D9E5).
   Substitui a barra marinho .94 do ds2. Blur moderado: o ds2 tirou o blur uma vez porque
   travou a rolagem no Mac do João; se travar de novo, baixar pra 8px. */
.header { transition: background .35s ease, box-shadow .35s ease, border-color .35s ease, padding .35s ease; }
.header.scrolled {
  background: linear-gradient(180deg, rgba(193, 217, 229, .10) 0%, rgba(193, 217, 229, .05) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%);
  border-bottom: 1px solid rgba(193, 217, 229, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px rgba(1, 5, 4, .18);
}

/* vidro sobre seção clara: texto, logo e hambúrguer em marinho (JS em secoes.js põe .header--claro) */
.header.scrolled.header--claro { background: linear-gradient(180deg, rgba(193, 217, 229, .34) 0%, rgba(193, 217, 229, .22) 100%); border-bottom-color: rgba(10, 33, 51, .10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 24px rgba(10, 33, 51, .08); }
.header.scrolled.header--claro .header__logo,
.header.scrolled.header--claro .header__nav a,
.header.scrolled.header--claro .header__nav a:hover,
.header.scrolled.header--claro .header__nav a.active { color: var(--kiwell-navy); }
.header.scrolled.header--claro .header__nav a::after { background: var(--kiwell-navy); }
.header.scrolled.header--claro .header__hamburger > .kw-burger > span { background: var(--kiwell-navy) !important; }

/* entre 1024 e 1279 o menu de 7 itens aperta o espaço entre eles */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .header__nav { gap: clamp(1rem, 1.9vw, 2.5rem); }
  .header__cta .btn { padding: 0 1.4rem; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .header { column-gap: 1rem; }
  .header__nav { gap: 1rem; }
  .header__nav a { letter-spacing: .14em; }
  .header__cta .btn { padding: 0 1.1rem; letter-spacing: .14em; }
}

/* abaixo de 1024: hambúrguer do ds2, botão do topo continua */
@media (max-width: 1023.98px) {
  .header { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: .75rem; }
  .header .header__nav { display: none !important; }
  .header .header__hamburger { display: flex !important; margin-right: -.6rem; }
}
@media (max-width: 420px) {
  .header__logo .kw-logo { width: 96px; }
  .header.scrolled .header__logo .kw-logo { width: 88px; }
  .header__cta .btn { padding: 0 1rem; letter-spacing: .14em; }
}

/* ---------- Hero ---------- */
.hero.kw-hero { min-height: 100vh; min-height: 100svh; }

/* foto: atrás vem o fundo azul da marca (reserva); quando hero-esteira.jpg existir, ela cobre */
.hv1-photo {
  background-color: var(--kiwell-navy);
  background-image:
    url("../assets/midia/Biblioteca/Site/hero-esteira.jpg"),
    url("../assets/midia/Biblioteca/Marca/identidade-visual-criartim/fundo%20azul.png");
  background-size: cover, cover;
  background-position: 70% 0%, 70% center;
  background-repeat: no-repeat;
  transform-origin: 70% 20%;
}

/* heroZoom do ds2 com a entrada pedida pra esta dobra: 1.08 → 1 */
@keyframes heroZoom { 0% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* overlay: marinho vertical + lateral da esquerda + faixa do menu */
.kw-hero .hv1-overlay {
  background:
    linear-gradient(180deg, rgba(1, 5, 4, 0) 55%, rgba(1, 5, 4, .7) 100%),
    radial-gradient(ellipse 60% 55% at 0% 100%, rgba(1, 5, 4, .7) 0%, rgba(1, 5, 4, .45) 55%, rgba(1, 5, 4, 0) 100%);
  z-index: 1;
}

/* aurora: por cima do overlay, bem baixa */

/* conteúdo: canto inferior esquerdo, na margem do logo */
.hv1-content {
  position: absolute;
  left: var(--lado);
  right: var(--lado);
  bottom: 10vh;
  bottom: 10svh;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hv1-sign {
  font-style: italic;
  color: var(--ice-80);
  margin: 0 0 1rem;
  max-width: 28rem;
}
.hv1-cta.btn {
  font-size: .625rem; /* igual ao botão da nav */
  letter-spacing: .18em;
  padding: 0 2rem;
  height: 45px; min-height: 45px; line-height: 1; /* mesma altura do botão da nav */
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--kw-r-0);
  gap: .6rem;
}
.btn-arrow::after { display: inline-block; transition: transform var(--dur-med) var(--ease-out); }
.btn-arrow:hover::after, .btn-arrow:focus-visible::after { transform: translateX(4px); }

/* scroll: margem direita, entra por último */
.kw-hero .hero__scroll {
  right: var(--lado);
  bottom: 10vh;
  bottom: 10svh;
  animation: fadeIn 1.5s var(--ease-out) 1.6s forwards;
}
.kw-hero .hero__scroll-label { font-family: var(--kiwell-font-text); font-size: .5625rem; letter-spacing: .2em; }

/* ---------- Celular ---------- */
@media (max-width: 760px) {
  .hv1-photo { background-position: 75% center, 75% center; transform-origin: 75% 50%; }
  .hv1-content { bottom: 8vh; bottom: 8svh; align-items: stretch; }
  .hv1-sign { font-size: .875rem; }
  .hv1-content { align-items: flex-start; }
  .hv1-cta.btn { width: auto; }
  .kw-hero .hero__scroll { display: none; }
}

@keyframes hv1Drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* ---------- Movimento reduzido: tudo parado e visível ---------- */
@media (prefers-reduced-motion: reduce) {
  .header, .hv1-photo, .hv1-content .ai, .kw-hero .hero__scroll { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}