/* =========================================
   HERO (home)
   ========================================= */
body.home .hero{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  margin-block-start:calc(var(--nav-h) + var(--sa-top));
  padding-block-end:calc(12px + var(--sa-bottom));
  min-block-size:calc(100svh - (var(--nav-h) + var(--sa-top)));
  padding-inline:12px;
  content-visibility:auto; contain-intrinsic-size:520px 1120px;
}
body.home .hero-title{
  margin:0; padding-block-start:.25rem;
  font-family:Sora,Inter,system-ui,sans-serif; font-weight:800;
  line-height:1.05; letter-spacing:-.02em; text-transform:uppercase; text-wrap:balance; text-align:center;
}
body.home .hero-title .line{ display:block; margin-block:.12em; line-height:1.08; letter-spacing:-.02em; font-size:clamp(2.2rem,6vw,5.2rem); }
body.home .hero-title .no-break{ white-space:nowrap; }

.hero-sub{
  color:var(--text-dim); font-weight:600; line-height:1.35;
  font-size:clamp(1rem,1.6vw,1.25rem); margin:14px auto 24px; text-wrap:balance; max-inline-size:60ch;
}
@media (min-width:1025px){ .hero-sub{ max-inline-size:none; white-space:nowrap; overflow-wrap:normal; text-overflow:clip; } }

@media (max-width:640px){
  .hero-sub{
    font-size:clamp(.9rem,3.3vw,1rem);
    max-inline-size:42ch;
  }

body.home .hero-title {
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: normal;
  letter-spacing: -0.015em;

  /* 👇 Responsividade automática de tamanho */
  font-size: clamp(1.75rem, 6vw + 0.5rem, 3.5rem);
  line-height: 1.1;
}

  body.home .hero-title .line{
    font-size:clamp(1.3rem,7vw,2.8rem); /* reduzido */
    line-height:1.05;
  }

  .hero-title .tagline-final{
    display:inline;
    white-space:normal;
    font-size:clamp(1.4rem,5.5vw,2rem); /* antes 1.6–2.4rem */
    line-height:1.08;
    letter-spacing:-.02em;
    word-spacing:.04em;
  }

  .hero-title .tagline-final .inventado{
    font-weight:800;
  }
}


/* animações sequenciais */
@keyframes fadeUp{ to{ opacity:1; transform:translateY(0) } }
:is(body.home .hero-title .line, .hero-sub, body.home .hero-actions a){
  opacity:0; transform:translateY(20px); animation:fadeUp .9s ease-out var(--delay,0s) forwards;
}
body.home .hero-title .line:nth-child(1){ --delay:.20s; }
body.home .hero-title .line:nth-child(2){ --delay:.40s; }
body.home .hero-title .line:nth-child(3){ --delay:.60s; }
.hero-sub{ --delay:.90s; }
body.home .hero-actions a:nth-child(1){ --delay:1.10s; }
body.home .hero-actions a:nth-child(2){ --delay:1.25s; }