/* ---------- 1 · Abertura ----------
   Celular: círculo com as mãos no alto, logo no canto, título sobrepondo a borda de baixo.
   Desktop (≥ 1024px): split assimétrico, texto à esquerda e visual à direita (Desk.png).
   A barra fixa fica por cima do topo do hero; o conteúdo começa abaixo dela. */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-areas:
    'visual'
    'texto';
  padding: var(--barra-altura) var(--gutter) 36px;
  background:
    radial-gradient(90% 60% at 92% 4%, rgb(181 96 58 / 0.62), transparent 62%),
    radial-gradient(70% 45% at 0% 100%, rgb(162 112 111 / 0.22), transparent 70%),
    var(--bordo);
  overflow: clip;
}

.hero__logo {
  position: absolute;
  z-index: 3;
  top: calc(var(--barra-altura) + 12px);
  left: var(--gutter);
  width: 84px;
  height: auto;
}

/* Visual: medidas em função da largura do quadro (--w) para a composição não quebrar.
   No celular o quadro tem a largura da tela (sangra pelas margens); no tablet trava em 520px. */
.hero__visual {
  --w: min(100vw, 520px);
  grid-area: visual;
  position: relative;
  width: var(--w);
  height: calc(var(--w) * 0.72);
  margin: 0 calc((100% - var(--w)) / 2);
}

/* Círculo do KV em PNG, com o desfoque (tilt-shift) já aplicado pela direção de arte.
   No PNG o círculo ocupa 94% da largura e começa a 13% da altura; o resto é brilho. */
.circulo {
  position: absolute;
  left: 56%;
  top: calc(6px - var(--w) * 0.13);
  width: calc(var(--w) * 0.7);
  translate: -51% 0;
}
.circulo__img { width: 100%; height: auto; }

/* Mãos: os antebraços somem no fundo por máscara (não por faixa de cor por cima,
   que marcava um retângulo sobre o degradê do fundo) */
.mao {
  position: absolute;
  z-index: 1;
  bottom: 0;
  width: calc(var(--w) * 0.58);
  height: auto;
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 30%);
  mask-image: linear-gradient(to top, transparent 0, #000 30%);
}
.mao--adventure { left: -8%; }
.mao--femme { right: -8%; }

.hero__texto {
  grid-area: texto;
  position: relative;
  z-index: 3;
  display: grid;
  gap: 14px;
  margin-top: -18px;
  container-type: inline-size;
}

.hero__texto .eyebrow { letter-spacing: 0.16em; line-height: 2; }
.hero__texto .eyebrow span { white-space: nowrap; } /* quebra só no "•" */

/* Título em exatamente 2 linhas: cada linha não quebra e o corpo acompanha a largura da coluna
   ("SUA PRÓXIMA VENDA", a linha mais larga, mede 9,33 em em Vasquz). O teto é 40 no celular e 64
   no desktop, mas quem manda é a coluna: 61px em 1440, 56px em 1280, 36px em 390. */
.hero__titulo {
  font-size: var(--t-32);
  font-size: min(10.4cqi, var(--t-40));
  line-height: 1;
}
@media (min-width: 640px) {
  .hero__titulo { font-size: var(--t-48); font-size: min(10.4cqi, var(--t-64)); }
}
.hero__linha { display: block; white-space: nowrap; }

.hero__lead {
  max-width: 44ch;
  font-size: var(--t-16);
  line-height: 1.5;
  color: var(--texto-suave);
}

/* Endereço na frente, data e hora ao lado */
.hero__info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 18px;
  padding: 14px 0;
  border-block: 1px solid var(--linha);
}
.hero__local { display: grid; line-height: 1.5; }
.hero__rua { font-size: var(--t-16); font-weight: 600; }
.hero__cidade { font-size: var(--t-12); line-height: 1.3333; color: var(--texto-suave); }
.hero__data {
  display: grid;
  justify-items: end;
  padding-left: 18px;
  border-left: 1px solid var(--linha);
  line-height: 1;
}
.hero__dia {
  font-family: var(--fonte-display);
  font-size: var(--t-32);
  color: var(--manteiga);
}
.hero__hora {
  margin-top: 8px;
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero__cta { width: 100%; }

/* ---------- Movimento: as mãos se encontram; ao rolar, círculo e mãos andam em velocidades diferentes ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .mao--adventure { animation: mao-entra-esq 0.9s var(--ease-saida) 0.15s both; }
  .js .mao--femme { animation: mao-entra-dir 0.9s var(--ease-saida) 0.15s both; }

  @supports (animation-timeline: scroll()) {
    .circulo {
      animation: circulo-desce linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
    .js .mao--adventure { animation: mao-entra-esq 0.9s var(--ease-saida) 0.15s both, mao-sobe linear both; }
    .js .mao--femme { animation: mao-entra-dir 0.9s var(--ease-saida) 0.15s both, mao-sobe linear both; }
    /* depois do atalho "animation", que zera a timeline */
    .js .mao--adventure,
    .js .mao--femme {
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 100vh;
    }
  }
}
@keyframes mao-entra-esq { from { transform: translateX(-30%); opacity: 0; } }
@keyframes mao-entra-dir { from { transform: translateX(30%); opacity: 0; } }
@keyframes circulo-desce { to { translate: -51% 12%; } }
@keyframes mao-sobe { to { translate: 0 -10%; } }

/* ---------- Tablet: o quadro trava em 520px e não chega na borda da tela, então os antebraços
   somem também para os lados (senão ficam cortados retos no meio da tela) ---------- */
@media (min-width: 560px) and (max-width: 1023px) {
  .mao--adventure {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%), linear-gradient(to top, transparent 0, #000 30%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 30%), linear-gradient(to top, transparent 0, #000 30%);
    mask-composite: intersect;
  }
  .mao--femme {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 30%), linear-gradient(to top, transparent 0, #000 30%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to left, transparent 0, #000 30%), linear-gradient(to top, transparent 0, #000 30%);
    mask-composite: intersect;
  }
}

/* ---------- Telas baixas: aperta o visual para manter título, endereço e botão na dobra ---------- */
@media (max-width: 1023px) and (max-height: 700px) {
  .hero__visual { --w: min(88vw, 460px); height: calc(var(--w) * 0.66); }
  .hero__texto { gap: 12px; }
  .hero__info { padding: 10px 0; }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-areas: 'texto visual';
    align-items: center;
    column-gap: clamp(32px, 4vw, 72px);
    min-height: min(100dvh, 920px);
    padding: calc(var(--barra-altura) + 32px) var(--gutter) 56px;
    padding-left: max(var(--gutter), calc((100vw - var(--largura)) / 2));
    background:
      radial-gradient(60% 70% at 100% 0%, rgb(181 96 58 / 0.6), transparent 65%),
      radial-gradient(40% 50% at 0% 100%, rgb(162 112 111 / 0.2), transparent 70%),
      var(--bordo);
  }
  .hero__logo {
    position: static;
    grid-area: texto;
    align-self: start;
    width: 150px;
  }
  .hero__texto {
    margin-top: 0;
    padding-top: 120px;
    gap: 22px;
  }
  .hero__texto .eyebrow { letter-spacing: 0.2em; line-height: 1.3333; }
  .hero__info { column-gap: 28px; padding: 18px 0; }
  .hero__cidade { font-size: var(--t-16); line-height: 1.5; }
  .hero__data { padding-left: 28px; }
  .hero__dia { font-size: var(--t-40); }
  .hero__cta { width: auto; justify-self: start; min-width: 280px; }

  .hero__visual {
    --w: min(52vw, 760px);
    height: var(--w);
    margin: 0 calc(var(--gutter) * -1) 0 0;
    justify-self: end;
    align-self: center;
  }
  .circulo {
    left: 50%;
    top: calc(var(--w) * -0.138);
    width: calc(var(--w) * 0.85);
  }
  .mao { width: calc(var(--w) * 0.53); }
  .mao--adventure {
    left: -3%;
    /* antebraço cortado no meio da página: some para a esquerda e para baixo */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34%), linear-gradient(to top, transparent 0, #000 26%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 34%), linear-gradient(to top, transparent 0, #000 26%);
    mask-composite: intersect;
  }
  .mao--femme {
    right: -3%;
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 26%);
    mask-image: linear-gradient(to top, transparent 0, #000 26%);
  }
}