/* ==========================================================================
   05 · HERO (primeira dobra)
   --------------------------------------------------------------------------
   MOBILE (padrão): coluna única
     eyebrow → lettering (H1) → foto (sangrando nas laterais) → mensagem → CTAs
   DESKTOP (≥ 1024px): grid de 12 colunas
     texto nas colunas 1–6 · foto ancorada no canto inferior direito
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: calc(var(--header-h) + var(--top-bar-h) + var(--demo-bar-h));
  background: var(--ink-950);
}

/* ---------- Camadas decorativas ---------- */

/* Brilho quente atrás da cama + reflexo suave no canto superior esquerdo */
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 72% 62%, rgb(146 85 24 / 0.32), transparent 70%),
    radial-gradient(40% 40% at 18% 20%, rgb(237 203 125 / 0.07), transparent 70%);
}

/* Luz dourada oficial do KV — mistura em "screen" e deriva lenta */
.hero__light img {
  position: absolute;
  top: 6%;
  right: -30%;
  z-index: -1;
  width: 140vw;
  max-width: none;
  opacity: 0.45;
  mix-blend-mode: screen;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
  mask-image: radial-gradient(closest-side, #000 55%, transparent);
  animation: drift 22s ease-in-out infinite;
}

/* ---------- Grid de conteúdo ---------- */
.hero__grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.hero__intro {
  padding-top: 1.5rem;
}

/* "Black Friday 2026" — sem fio antes e sem espaçamento entre letras */
.hero__eyebrow {
  color: var(--gold-300);
  letter-spacing: 0;
}

.hero__title {
  width: min(100%, 26rem);
  margin-top: 1.25rem;
}

/* ---------- Lettering + selo 70% OFF ---------- */
.hero__brand {
  position: relative;
  width: fit-content;
}

/* Selo oficial "até 70% OFF" (imagem: assets/img/selo-70off-*.png).
   A arte já vem inclinada. Celular: no canto superior direito, acima do
   lettering. Tamanho: width/height · posição: top e right. */
.offer-seal {
  position: absolute;
  top: -4rem;
  right: -0.5rem;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  /* Halo dourado discreto para o disco preto se destacar do fundo escuro */
  box-shadow:
    0 0 0 1px rgb(237 203 125 / 0.35),
    0 0 28px rgb(237 203 125 / 0.22),
    0 14px 30px -12px rgb(0 0 0 / 0.7);
}

.hero__title img {
  width: 100%;
}

/* ---------- Fotografia do protagonista ---------- */
.hero-photo {
  position: relative;
}

.hero-photo__img {
  width: 100%;
  /* Funde a borda esquerda (manta) com o fundo, sem deformar a imagem */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%);
  mask-image: linear-gradient(to right, transparent 0%, #000 26%);
  animation: settle 1.6s var(--ease-silk) both;
}

/* Mobile: a foto sangra até as bordas e sobe levemente sob o lettering */
.hero-photo--mobile {
  margin: -12% calc(var(--gutter) * -1) 0;
}

/* Funde a base da foto com o texto que vem abaixo */
.hero-photo__fade {
  position: absolute;
  inset: auto 0 0;
  height: 33%;
  background: linear-gradient(to bottom, transparent, var(--ink-950));
  pointer-events: none;
}

.hero-photo--desktop {
  display: none;
}

/* ---- Assinatura do Cafu ----
   Dourada, no canto inferior direito da foto (sobre a manta escura), como
   autógrafo na peça. Tamanho: width · posição: right e bottom. */
.hero-photo__signature {
  position: absolute;
  right: 54%;
  bottom: 13%;
  z-index: 1;
  width: 30%;
  max-width: 13rem;
  height: auto;
  opacity: 0.95;
  filter: drop-shadow(0 2px 10px rgb(0 0 0 / 0.6));
  pointer-events: none;
  animation: rise 1s var(--ease-silk) 1.1s both;
}

/* ---- Rota de voo (desktop) ----
   Linha tracejada dourada que sai de cima da cabeça do protagonista e sobe
   até um avião. Posição/tamanho: left, bottom e width de .hero-photo__route. */
.hero-photo__route {
  position: absolute;
  left: 60%;
  bottom: 80%;      /* começa logo acima da cabeça */
  width: 34%;
  aspect-ratio: 3 / 2;
  animation: rise 1s var(--ease-silk) 0.9s both;
}

.hero-photo__route svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-photo__route path {
  fill: none;
  stroke: var(--gold-300);
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-dasharray: 1 10;   /* pontilhado */
  animation: route-flow 2.4s linear infinite;
}

/* O pontilhado "anda" devagar em direção ao avião */
@keyframes route-flow {
  to { stroke-dashoffset: -22; }
}

/* Avião no fim da rota, apontando na direção da linha */
.hero-photo__plane {
  position: absolute;
  top: 12.5%;   /* ponto final da curva (285, 25) */
  left: 95%;
  width: 3.25rem;
  height: 3.25rem;
  translate: -50% -50%;
  rotate: 74deg;
  background: var(--gold-300);
  filter: drop-shadow(0 6px 14px rgb(0 0 0 / 0.5));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Mensagem, mecânica e CTAs ---------- */
.hero__content {
  position: relative;
  z-index: 1;
  margin-top: -1.5rem;
  padding-bottom: 2.5rem;
}

.hero__tagline {
  max-width: 30rem;
  font-family: var(--font-heading); /* sem serifa e sem itálico */
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--cream-100);
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  margin-top: 2rem;
}

/* Botão principal: largo e chamativo */
.hero__cta {
  width: 100%;
  max-width: 28rem;
  min-height: 3.75rem;
  font-size: 1.0625rem;
}

/* "Consultar meus números": link de texto simples, sublinhado */
.hero__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem; /* área de toque confortável */
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--cream-100);
  text-decoration: underline;
  text-decoration-color: rgb(246 232 199 / 0.6);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition:
    color var(--dur-fast),
    text-decoration-color var(--dur-fast);
}

.hero__link:hover {
  color: var(--gold-200);
  text-decoration-color: var(--gold-300);
}

.hero__note {
  margin-top: 1.25rem;
  font-size: var(--fs-xs);
  color: var(--text-on-dark-subtle);
}

/* ==========================================================================
   Tablet (≥ 640px)
   ========================================================================== */
@media (min-width: 40rem) {
  .hero__intro {
    padding-top: 2.5rem;
  }
  .hero__title {
    width: 30rem;
  }
  /* Tablet: selo ao lado direito do lettering */
  .offer-seal {
    top: -1rem;
    right: -7.75rem;
    width: 7rem;
    height: 7rem;
  }
  .hero-photo--mobile {
    margin-top: -9%;
  }
  .hero__content {
    margin-top: -2.5rem;
    padding-bottom: 3.5rem;
  }

}

/* ==========================================================================
   Desktop (≥ 1024px)
   ========================================================================== */
@media (min-width: 64rem) {
  .hero {
    min-height: max(100svh, 46rem);
  }

  .hero__light img {
    top: -4%;
    right: -6%;
    width: 70vw;
    opacity: 0.55;
  }

  .hero__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-content: start;
    column-gap: 2rem;
  }

  .hero__intro {
    grid-column: 1 / span 6;
    grid-row: 1;
    padding-top: clamp(2rem, 7vh, 5rem);
  }

  .hero__title {
    width: min(100%, 36rem);
    margin-top: 1.75rem;
  }
  /* Desktop: selo maior, encostado no canto superior direito do lettering */
  .offer-seal {
    top: 0;
    right: -9.25rem;
    width: 8.5rem;
    height: 8.5rem;
  }

  .hero-photo--mobile {
    display: none;
  }

  .hero__content {
    grid-column: 1 / span 7;
    grid-row: 2;
    margin-top: 0;
    padding-bottom: clamp(2.5rem, 7vh, 4.5rem);
  }

  .hero__tagline {
    margin-top: 2rem;
  }


  /* Foto ancorada no canto inferior direito, cortada pela base da dobra */
  .hero-photo--desktop {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    width: min(64vw, 68rem);
    pointer-events: none;
  }

  .hero-photo--desktop .hero-photo__signature {
    right: 34%;
    bottom: 3%;
    width: 32%;
    max-width: 21rem;
  }

  .hero-photo--desktop .hero-photo__img {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%);
    mask-image: linear-gradient(to right, transparent 0%, #000 30%);
  }
}

@media (min-width: 80rem) {
  .hero__intro {
    grid-column: 1 / span 5;
  }
  .hero__content {
    grid-column: 1 / span 6;
  }
}