/* ==========================================================================
   MayFlow — hero fiel ao gabarito visual definitivo (computador)
   Coordenadas tiradas do gabarito (1256 × 716, menu incluso) e convertidas
   em % da hero. Só posição, proporção e luz: a lógica do notebook
   (hero-d.js) e as animações da logo (hero-logo-viva.css) não mudam.
   ========================================================================== */
@media (min-width: 941px) {
  .hd { --hd-chao: 12%; min-height: clamp(660px, calc(100svh - 70px), 900px) !important; }

  /* ---------- coluna de texto (5,6% da borda, como no gabarito) ---------- */
  .hd .wrap { max-width: none; padding-left: 5.6vw; padding-right: 0; }
  .hd__texto { width: min(41vw, 600px); display: flex; flex-direction: column; align-items: flex-start; padding: 6.4vw 0 2.6vw; }
  .hd__selo { order: 1; font-size: 0.74rem; letter-spacing: 0.2em; }
  .hd__titulo { order: 2; margin-top: 1.5vw; font-size: 4.95vw; font-weight: 700; line-height: 1.04; letter-spacing: -0.035em; }
  .hd__lead { order: 3; max-width: 33vw; margin-top: 1.4vw; font-size: 1.32vw; line-height: 1.42; color: rgba(234, 244, 255, 0.9); }
  .hd__acoes { order: 4; margin-top: 2vw; gap: 1.6vw; flex-wrap: nowrap; }
  .hd__acoes .mfu-btn--primario { padding: 0.95vw 2vw; font-size: 1.12vw; }
  .hd__acoes .mfu-btn--video { font-size: 1.12vw; }
  .hd-vidros { order: 5; }
  .hd-paginas { order: 6; }
  .hd-nota { order: 7; }

  /* cartões de vidro inclinados, ícone ao lado do texto */
  .hd-vidros { position: static !important; display: flex; gap: 1.1vw; margin-top: 2.4vw; perspective: 700px; }
  .hd-vidro {
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.8vw;
    row-gap: 0.15vw;
    align-items: center;
    width: 10.6vw !important;
    max-width: none !important;
    flex: none !important;
    padding: 1vw 0.9vw !important;
    border: 1px solid rgba(92, 225, 230, 0.55) !important;
    border-radius: 0.9vw;
    font-size: 0.74vw !important;
    line-height: 1.3;
    background: linear-gradient(150deg, rgba(25, 199, 193, 0.24), rgba(3, 18, 30, 0.55) 70%) !important;
    box-shadow: 0 0 1.6vw -0.2vw rgba(47, 210, 138, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  }
  .hd-vidro svg { grid-row: 1 / span 2; width: 2.2vw !important; height: 2.2vw !important; margin: 0 !important; }
  .hd-vidro b { font-size: 0.92vw !important; line-height: 1.15; }
  .hd-vidro:nth-child(1) { transform: rotateY(18deg) rotateX(6deg) rotateZ(5deg) !important; margin-top: 0 !important; }
  .hd-vidro:nth-child(2) { transform: rotateY(10deg) rotateX(6deg) rotateZ(4deg) !important; margin-top: 2.6vw !important; }
  .hd-vidro:nth-child(3) { transform: rotateY(4deg) rotateX(6deg) rotateZ(6deg) !important; margin-top: 0.6vw !important; }

  /* páginas do notebook: linha discreta abaixo dos cartões */
  .hd-paginas { margin-top: 1.6vw; }
  .hd-paginas__rotulo { font-size: 0.62rem; margin-bottom: 6px; }
  .hd-paginas__lista { gap: 5px; max-width: 40vw; }
  .hd-paginas__lista button { padding: 5px 9px; font-size: 0.68rem; }
  .hd-nota { margin-top: 8px; font-size: 0.66rem; }

  /* ---------- palco ocupando a hero inteira ---------- */
  .hd-palco { width: 100% !important; left: 0; right: 0; perspective: 1500px; perspective-origin: 72% 52%; }
  .hd-lap {
    left: 49.8% !important;
    width: 42.6% !important;
    bottom: calc(var(--hd-chao) + 1.6%) !important;
    transform: rotateX(calc(-7deg + var(--my) * -2deg)) rotateY(calc(-30deg + var(--mx) * 5deg)) !important;
  }
  .hd-lap__tampa { transform: rotateX(1deg) !important; border-radius: 1.1vw 1.1vw 0.3vw 0.3vw; }
  .hd-lap__base { transform: rotateX(87deg) !important; padding-bottom: 66% !important; left: -3% !important; right: -3% !important; }
  .hd--foco .hd-lap { left: 26% !important; width: 48% !important; bottom: calc(var(--hd-chao) + 4%) !important; transform: rotateX(-10deg) rotateY(-6deg) !important; }

  /* MAY na borda direita da tela, como no gabarito */
  .hd-may { top: 41% !important; bottom: auto !important; right: 4.2% !important; padding: 0.4vw 1vw 0.4vw 0.4vw; }
  .hd-may img { width: 5.6vw; height: 5.6vw; }

  /* ---------- logo M grande atrás da tampa ---------- */
  .hd-simbolo {
    left: 19.8% !important;
    width: 102% !important;
    top: 4% !important;
    -webkit-mask: linear-gradient(90deg, transparent 13%, #000 27%);
    mask: linear-gradient(90deg, transparent 13%, #000 27%);
  }
  .hd-simbolo::before { left: 33%; right: 33%; top: -6%; bottom: -6%; }
  .hd-raios { left: 52% !important; top: -18% !important; width: 52vw !important; opacity: 0.45; }
  .hd-ico, .hd-ligacoes { display: none; } /* ícones flutuantes não existem no gabarito */

  /* ---------- arcos luminosos de ponta a ponta ---------- */
  .hd-arcos { left: 0 !important; right: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
  .hd-arcos svg { display: none; }
  .hd-arcos .hd-arcos__gab { display: block; }
}

/* arcos desenhados sobre as curvas do gabarito (viewBox = gabarito sem menu) */
.hd-arcos__gab { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hd-arcos__gab path { fill: none; stroke-linecap: round; }
.hd-gab-faixa { stroke-width: 26; opacity: 0.16; filter: blur(10px); }
.hd-gab-fio { stroke-width: 2.2; opacity: 0.9; }
.hd-gab-luz { stroke-width: 3.2; stroke: #effffb; stroke-dasharray: 0.1 0.9; stroke-dashoffset: 1; opacity: 0.95; }
@media (prefers-reduced-motion: no-preference) {
  .hd-gab-luz { animation: hd-corre 8s linear infinite; }
  .hd-gab-luz--2 { animation-duration: 10s; animation-delay: -4s; }
  .hd-gab-luz--3 { animation-duration: 12s; animation-delay: -7s; }
  .hd-gab-grupo { transform-box: view-box; transform-origin: 0 100%; animation: hd-arco-ondula 16s ease-in-out infinite; }
  .hd-gab-grupo--2 { animation-duration: 20s; animation-delay: -6s; }
}
@media (prefers-reduced-motion: reduce) { .hd-gab-luz { display: none; } }

/* ---------- superfície preta reflexiva e luz inferior ---------- */
@media (min-width: 941px) {
  .hd-chao {
    background:
      radial-gradient(40% 120% at 66% 0%, rgba(92, 225, 230, 0.22), transparent 70%),
      radial-gradient(30% 90% at 18% 0%, rgba(47, 210, 138, 0.16), transparent 70%),
      linear-gradient(180deg, #020b14 0%, #01060c 55%, #010307 100%) !important;
  }
  .hd-chao::before { opacity: 0.85 !important; height: 1px; box-shadow: 0 0 22px 3px rgba(92, 225, 230, 0.4) !important; }
  .hd-chao__reflexos {
    opacity: 0.75 !important;
    background:
      repeating-linear-gradient(90deg, transparent 0 38px, rgba(92, 225, 230, 0.4) 38px 41px, transparent 41px 96px, rgba(47, 210, 138, 0.35) 96px 98px, transparent 98px 150px, rgba(120, 170, 255, 0.35) 150px 153px, transparent 153px 210px) !important;
    filter: blur(4px);
    -webkit-mask: linear-gradient(180deg, #000, transparent 90%), radial-gradient(70% 100% at 50% 0%, #000, transparent);
    mask: linear-gradient(180deg, #000, transparent 90%);
  }
  .hd-espelho { opacity: 0.22 !important; }
  .hd-palco::before { left: 24%; right: 6%; bottom: calc(var(--hd-chao) - 4%); height: 9%; }
}

/* ---- rodada 2: altura exata do gabarito e alvos medidos ---- */
@media (min-width: 941px) {
  .hd { height: clamp(660px, calc(100svh - 70px), 900px) !important; min-height: 0 !important; }
  .hd .wrap { height: 100% !important; position: relative; }
  .hd__texto { padding-top: 6.9vw !important; padding-bottom: 0 !important; }
  .hd-paginas { position: absolute; left: 5.6vw; bottom: 1.1vw; margin: 0 !important; pointer-events: auto; }
  .hd-paginas__rotulo { display: none; }
  .hd-nota { position: absolute !important; left: 5.6vw; bottom: 3.6vw; }
  .hd-simbolo { left: 29.2% !important; width: 82% !important; top: 9.2% !important;
    -webkit-mask: linear-gradient(90deg, transparent 6%, #000 20%); mask: linear-gradient(90deg, transparent 6%, #000 20%); }
}
@media (min-width: 941px) {
  .hd { padding: 0 !important; }
  .hd-lap { left: 45.5% !important; width: 48% !important; bottom: calc(var(--hd-chao) + 12.5%) !important; }
}
@media (min-width: 941px) {
  /* a esmaecida da esquerda vai só na imagem (o halo não fica recortado) */
  .hd-simbolo { -webkit-mask: none !important; mask: none !important; top: 7.5% !important; }
  .hd-simbolo__img {
    -webkit-mask: radial-gradient(circle at 49.72% 50.9%, #000 var(--hd-rv), transparent calc(var(--hd-rv) + 2.5cqw)), linear-gradient(90deg, transparent 6%, #000 20%);
    -webkit-mask-composite: source-in;
    mask: radial-gradient(circle at 49.72% 50.9%, #000 var(--hd-rv), transparent calc(var(--hd-rv) + 2.5cqw)) intersect, linear-gradient(90deg, transparent 6%, #000 20%);
  }
  .hd-logo-fluxo--e { -webkit-mask-image: url("mayflow-simbolo-circuito.webp"), radial-gradient(circle at 49.72% 50.9%, transparent 18cqw, #000 19cqw); }
  /* halo forte do anel, como no gabarito */
  .hd-simbolo::before {
    left: 28% !important; right: 28% !important; top: -14% !important; bottom: -14% !important;
    background: radial-gradient(closest-side, transparent 52%, rgba(92, 225, 230, 0.55) 64%, rgba(47, 210, 138, 0.35) 72%, transparent 86%), radial-gradient(closest-side, rgba(42, 125, 225, 0.35), transparent 70%) !important;
    filter: blur(18px) !important;
  }
  .hd-paginas { bottom: 1.6vw; }
  .hd-paginas__lista { max-width: none; flex-wrap: nowrap; }
  .hd-nota { bottom: 0.3vw !important; }
}
@media (min-width: 941px) {
  .hd-palco { perspective-origin: 70% 70% !important; }
  .hd-lap { transform: rotateX(calc(-3deg + var(--my) * -1.5deg)) rotateY(calc(-18deg + var(--mx) * 4deg)) !important; }
  .hd-lap__tampa { transform: rotateX(0deg) !important; }
  .hd-lap__base { transform: rotateX(88deg) !important; }
  /* MAY: avatar redondo na borda direita da tela */
  .hd-may { right: 5.4% !important; top: 34% !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hd-may > span { display: none; }
  .hd-may img { width: 7.4vw !important; height: 7.4vw !important; padding: 3px !important; box-shadow: 0 0 2vw rgba(92, 225, 230, 0.75), 0 0 0 2px rgba(156, 239, 255, 0.6); }
}

/* ---- rodada 3: ajustes medidos contra o gabarito ---- */
@media (min-width: 941px) {
  .hd-lap { left: 43.2% !important; width: 45.5% !important; bottom: calc(var(--hd-chao) + 8.2%) !important;
    transform: rotateX(calc(-3deg + var(--my) * -1.5deg)) rotateY(calc(-22deg + var(--mx) * 4deg)) !important; }
  .hd-may { right: 8.6% !important; top: 37% !important; }
  .hd__titulo { line-height: 0.98; }
  .hd__lead { margin-top: 1.2vw; line-height: 1.3; }
  .hd__acoes { margin-top: 1.9vw; }
  .hd__acoes .mfu-btn--primario { padding: 0.75vw 1.7vw !important; }
  .hd__acoes .mfu-play { width: 2.7vw; height: 2.7vw; }
  .hd-vidros { margin-top: 2.2vw; }
  /* arcos mais intensos, como as fitas de luz do gabarito */
  .hd-gab-faixa { stroke-width: 44; opacity: 0.3; filter: blur(14px); }
  .hd-gab-fio { stroke-width: 3; }
  /* luz da mesa mais presente */
  .hd-chao__reflexos { opacity: 1 !important; }
  .hd-chao { background:
      radial-gradient(45% 140% at 64% 0%, rgba(92, 225, 230, 0.32), transparent 70%),
      radial-gradient(30% 110% at 16% 0%, rgba(47, 210, 138, 0.24), transparent 70%),
      linear-gradient(180deg, #021019 0%, #01070d 55%, #010307 100%) !important; }
}

@media (min-width: 941px) { .hd__titulo { font-size: 4.75vw; } .hd__lead { margin-top: 1vw; } .hd__acoes { margin-top: 1.6vw; } }