/* =========================================================
   HERO · titular, CTA principal y escena 3D
   ========================================================= */

.hero { min-height: 100vh; display: flex; align-items: center; padding: 110px 0 70px; overflow: hidden; }
.hero:before {
  content: ""; position: absolute; right: -10%; top: 10%; width: 900px; height: 900px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--rgb-cta), .20), rgba(var(--rgb-cta), 0));
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(44px, 6.4vw, 84px); margin: 24px 0 24px; }
.hero h1 .serif { font-style: italic; color: var(--color-accent); font-size: 1.1em; }
.hero .lead { margin-bottom: 38px; }

.hero-visual { position: relative; height: 620px; }
.hero-tags {
  position: absolute; left: 0; right: 0; bottom: 6px;
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; pointer-events: none;
}

.scroll-hint {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 22px; height: 36px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-md);
}
.scroll-hint:after {
  content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; border-radius: 2px;
  background: var(--color-accent); transform: translateX(-50%);
  animation: scroll-hint 1.8s infinite;
}
@keyframes scroll-hint {
  0% { opacity: 0; transform: translate(-50%, 0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 12px); }
}

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 100px; }
  .hero-visual { height: 460px; margin: 10px calc(-1 * var(--gutter)) 0; }
}
@media (max-width: 720px) {
  .hero h1 { margin-top: 18px; }
  .hero { min-height: auto; }
  .hero-visual { height: 380px; }
  .hero-tags { display: none; }
  .scroll-hint { display: none; }
}