/* ==========================================================================
   MayFlow — refino final da hero (referência 4)
   Só camada visual: telas de entrada no notebook, arcos de luz atrás dele,
   superfície de vidro preto e composição texto × notebook.
   A lógica do notebook (hero-d.js) não muda.
   ========================================================================== */

/* ---------- tela de entrada dentro do notebook ---------- */
.hd-lap__tela { container-type: inline-size; }
.hd-ent { position: absolute; inset: 0; display: grid; grid-template-columns: 52% 1fr; background: linear-gradient(135deg, #05142a, #0a2550); font-family: var(--body, "Inter"), system-ui, sans-serif; }
.hd-ent__arte { position: relative; overflow: hidden; }
.hd-ent__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hd-ent__img--b { opacity: 0; object-position: 20% 50%; }
.hd-ent__painel {
  display: grid;
  align-content: center;
  gap: 1.5cqw;
  margin: 1.6cqw 1.6cqw 1.6cqw 0;
  padding: 2.6cqw 3cqw;
  border-radius: 1.6cqw;
  color: #102a4c;
  background: linear-gradient(160deg, #ffffff, #eef5ff);
  box-shadow: 0 0 2cqw rgba(92, 160, 255, 0.35);
}
.hd-ent__topo { display: flex; gap: 1.3cqw; align-items: flex-start; }
.hd-ent__ico { flex: none; display: grid; place-items: center; width: 3.8cqw; height: 3.8cqw; border-radius: 50%; color: #1f6fe0; background: #e3eeff; }
.hd-ent__ico svg { width: 55%; height: 55%; }
.hd-ent__topo b { display: block; font-size: 1.9cqw; line-height: 1.15; color: #0b2142; }
.hd-ent__topo small { display: block; margin-top: 0.5cqw; font-size: 1.05cqw; line-height: 1.35; color: #4e6684; }
.hd-ent__rot { margin: 0.6cqw 0 0; font-size: 1.15cqw; font-weight: 700; color: #0b2142; }
.hd-ent__conta { display: flex; justify-content: space-between; align-items: center; gap: 1cqw; padding: 1.3cqw 1.5cqw; border: 0.14cqw solid #2a7de1; border-radius: 0.9cqw; font-size: 1.25cqw; font-weight: 600; color: #0b2142; background: #f5f9ff; }
.hd-ent__conta em { flex: none; padding: 0.35cqw 0.9cqw; border-radius: 99cqw; font-style: normal; font-size: 1cqw; color: #1f6fe0; background: #e3eeff; }
.hd-ent__conta em::before { content: "●"; margin-right: 0.4cqw; }
.hd-ent__status { display: flex; gap: 1.1cqw; align-items: center; padding: 1.2cqw 1.4cqw; border-radius: 0.9cqw; background: #eef7f3; }
.hd-ent__ok { flex: none; display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; font-size: 1.3cqw; font-weight: 800; color: #fff; background: linear-gradient(135deg, #2fd28a, #19c7c1); }
.hd-ent__status b { display: block; font-size: 1.2cqw; color: #0b2142; }
.hd-ent__status small { font-size: 1cqw; color: #4e6684; }
.hd-ent__btn { display: block; padding: 1.4cqw; border-radius: 0.9cqw; text-align: center; font-size: 1.4cqw; font-weight: 700; color: #fff; background: linear-gradient(90deg, #1f8fff, #1f5fe0); box-shadow: 0 0.6cqw 1.6cqw rgba(31, 111, 224, 0.4); }
.hd-ent__nota { font-size: 0.85cqw; line-height: 1.35; color: #7086a3; }
.hd-ent .mf-marca { font-family: inherit; }
.hd-ent .mf-marca .mf-may { color: #0b2142; }
@media (prefers-reduced-motion: no-preference) {
  .hd-ent__img--b { animation: hd-ent-troca 14s ease-in-out infinite; }
}
@keyframes hd-ent-troca { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* ponto amarelo de "em breve" só nas páginas futuras */
.hd-paginas__lista button:not(:first-child)::after { content: none !important; }
@media (min-width: 941px) {
  .hd-paginas__lista button:has(small)::after { content: "" !important; display: inline-block; width: 5px; height: 5px; margin-left: 6px; border-radius: 50%; background: #f0cf7c; vertical-align: middle; }
}

/* ---------- arcos de luz atrás do notebook ---------- */
.hd-arcos { position: absolute; right: -4%; top: 6%; width: 74%; height: 80%; z-index: 1; pointer-events: none; filter: drop-shadow(0 0 6px rgba(92, 225, 230, 0.7)) drop-shadow(0 0 18px rgba(47, 210, 138, 0.35)); }
.hd-arcos svg { width: 100%; height: 100%; overflow: visible; }
.hd-arco__luz { stroke-linecap: round; stroke-dasharray: 0.12 0.88; stroke-dashoffset: 1; opacity: 0.9; }
@media (prefers-reduced-motion: no-preference) {
  .hd-arco { transform-box: view-box; transform-origin: 50% 100%; animation: hd-arco-ondula 14s ease-in-out infinite; }
  .hd-arco--2 { animation-duration: 18s; animation-delay: -4s; }
  .hd-arco--3 { animation-duration: 22s; animation-delay: -9s; }
  .hd-arco--4 { animation-duration: 16s; animation-delay: -2s; }
  .hd-arco__luz { animation: hd-corre 7s linear infinite; }
  .hd-arco--2 .hd-arco__luz { animation-duration: 9s; animation-delay: -3s; }
  .hd-arco--3 .hd-arco__luz { animation-duration: 11s; animation-delay: -6s; }
}
@media (prefers-reduced-motion: reduce) { .hd-arco__luz { display: none; } }
@keyframes hd-arco-ondula { 0%, 100% { transform: scaleY(1) translateY(0); } 50% { transform: scaleY(1.06) translateY(-1.5%); } }
/* brilho mais calmo nos terminais dos circuitos e nos raios */
@keyframes hd-pisca { 0%, 100% { opacity: 0.15; scale: 0.8; } 50% { opacity: 0.9; scale: 1.1; } }
.hd-raios { opacity: 0.6; }

/* ---------- superfície de vidro preto (obsidiana) ---------- */
.hd-chao {
  background:
    radial-gradient(48% 70% at 70% 0%, rgba(25, 199, 193, 0.14), transparent 70%),
    linear-gradient(180deg, #030b14 0%, #02070d 45%, #010409 100%);
}
.hd-chao::before { height: 1px; opacity: 0.55; box-shadow: 0 0 14px 2px rgba(92, 225, 230, 0.3); }
.hd-chao__reflexos { opacity: 0.32; -webkit-mask: radial-gradient(42% 90% at 70% 0%, #000, transparent 80%); mask: radial-gradient(42% 90% at 70% 0%, #000, transparent 80%); }
.hd-chao__onda { display: none; }
.hd-espelho { opacity: 0.16 !important; filter: blur(4px) saturate(1.2); }
/* sombra de contato + luz da tela caindo na mesa */
.hd-palco::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 4%;
  bottom: calc(var(--hd-chao, 22%) - 6%);
  height: 12%;
  z-index: 1;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.4) 55%, transparent),
    radial-gradient(60% 50% at 50% 70%, rgba(92, 225, 230, 0.22), transparent 75%);
  filter: blur(8px);
  pointer-events: none;
}

/* ---------- composição: notebook grande à direita ---------- */
@media (min-width: 941px) {
  .hd-palco { width: 62%; }
  .hd-lap { left: 8%; width: 82%; bottom: calc(var(--hd-chao) + 9vw); }
  .hd-simbolo { left: 44%; top: -4%; width: 52%; }
  .hd-may { top: 22%; right: 1.5%; }
}

/* botões com a marca: texto legível dentro do degradê */
.hd .mfu-btn .mf-marca, .hd .btn .mf-marca { font-family: inherit; font-weight: inherit; }
.hd .mfu-btn .mf-marca .mf-flow, .hd .btn .mf-marca .mf-flow { background: none; -webkit-text-fill-color: currentColor; color: inherit; }

/* ajuste de enquadramento: M inteiro acima da tampa, notebook pousado */
@media (min-width: 941px) {
  .hd-lap { left: 14%; width: 70%; bottom: calc(var(--hd-chao) + 11.5vw); }
  .hd-simbolo { left: 46%; top: -2%; width: 48%; }
  .hd-may { top: auto; bottom: calc(var(--hd-chao) + 1%); right: 2%; }
}
.hd-may { z-index: 7; }
.hd-ent__btn .mf-marca, .hd-ent__btn .mf-marca span { color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; }
.hd-arcos { opacity: 1; }
.hd-arcos path:not(.hd-arco__luz) { stroke-width: 3; }

@media (min-width: 941px) { .hd-lap { left: 19%; width: 68%; } .hd-simbolo { left: 48%; } }

/* a hero cresce com o conteúdo: os cartões nunca ficam cortados */
@media (min-width: 941px) {
  .hd { height: auto !important; min-height: clamp(680px, calc(100svh - 70px), 880px); }
  .hd .wrap { height: auto; }
  .hd__texto { padding-bottom: clamp(28px, 3vw, 44px); }
}