/* Inter (asset do pacote) fica como fallback; o texto do layout é Poppins */
@font-face {
  font-family: "Inter Local";
  src: url("assets/Inter-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #030504;
  --green: #76cd4b;
  --text: #ffffff;
  --font: "Poppins", "Inter Local", system-ui, -apple-system, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
}

/* ---------- Desktop: réplica do artboard do PDF (3000 x 1467) ----------
   O palco cobre a viewport (como background-size: cover), ancorado na base
   para a faixa verde ficar sempre visível. 1 unidade do artboard = --u. */
.stage {
  --w: max(100vw, 100svh * 3000 / 1467);
  --u: calc(var(--w) / 3000);
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--w);
  aspect-ratio: 3000 / 1467;
  transform: translateX(-50%);
  background: url("assets/bg.webp") center / 100% 100% no-repeat;
  overflow: hidden;
}

.stage > * { position: absolute; margin: 0; }

/* faixa verde da base: y 1439 → 1467 */
.stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 1439);
  bottom: 0;
  background: var(--green);
}

.detalhe {
  left: calc(var(--u) * 686);
  top: calc(var(--u) * 990);
  width: calc(var(--u) * 1629);
  pointer-events: none;
}

.logo {
  left: calc(var(--u) * 843);
  top: calc(var(--u) * -7);
  width: calc(var(--u) * 1277);
  pointer-events: none;
}

.id {
  left: calc(var(--u) * 1006);
  top: calc(var(--u) * 751);
  width: calc(var(--u) * 989);
  pointer-events: none;
}
.id img { width: 100%; height: auto; }

.cta {
  left: calc(var(--u) * 1152);
  top: calc(var(--u) * 1025);
  width: calc(var(--u) * 696);
  border-radius: 999px;
  transition: transform .2s ease, filter .2s ease;
}
.cta img { width: 100%; height: auto; }
.cta:hover,
.cta:focus-visible {
  transform: translateY(-2px) scale(1.02);
  filter: drop-shadow(0 0 calc(var(--u) * 24) rgba(118, 205, 75, .55));
}
.cta:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }

.breve {
  left: 0;
  right: 0;
  top: calc(var(--u) * 1175);
  font-size: calc(var(--u) * 53);
  line-height: 1;
  font-weight: 300;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: calc(var(--u) * 0.7);
  white-space: nowrap;
}
.breve strong { font-weight: 700; letter-spacing: 0; }

/* ---------- Mobile/retrato: mesma composição empilhada ---------- */
@media (max-aspect-ratio: 1/1) {
  .hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px 64px;
    background: var(--bg) url("assets/bg.webp") center top / auto 100% no-repeat;
  }
  .hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 14px;
    background: var(--green);
  }

  .stage {
    --u: min(0.13vw, 0.06svh);
    position: static;
    width: 100%;
    aspect-ratio: auto;
    transform: none;
    background: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .stage::after { content: none; }
  .stage > * { position: relative; left: auto; top: auto; right: auto; }

  .detalhe {
    position: absolute;
    left: 50%;
    top: auto;
    bottom: 14px;
    width: 130vw;
    max-width: none;
    transform: translateX(-50%);
  }
  /* logotipo e id têm respiro transparente grande: largura maior + margens negativas */
  .logo { width: min(150vw, 700px); max-width: none; margin: -14% 0 -12%; }
  .id { width: min(105vw, 480px); max-width: none; margin: -9% 0 -8%; }
  .cta { width: min(86vw, 400px); margin-top: 28px; }
  .breve { font-size: clamp(16px, 4.6vw, 22px); margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
}