/* Hero — composición centrada. El título se dimensiona por ancho Y alto de pantalla
   para no pisar nunca la cabecera ni el botón. */
.hero {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  place-items: center;
  min-height: 640px;
  height: 100vh;
  height: 100svh;
  padding: calc(var(--nav-h) + 2svh) var(--gutter) 5svh;
  text-align: center;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.4svh, 28px);
}
.hero__cta { margin-top: clamp(10px, 2.6svh, 30px); }

.hero__title {
  font: var(--w-semibold) clamp(64px, min(11.5vw, 26svh), 208px) / 0.88 var(--font-display);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.hero__line { display: block; white-space: nowrap; }

/* Vertical (móvil): el ancho manda; "SANGRE &" ocupa ~90 % */
@media (max-width: 700px) {
  .hero__title { font-size: min(17.5vw, 26svh); }
}
.hero__space { display: inline-block; width: 0.22em; }

/* Cada letra se revela con una máscara radial que sube desde abajo (--r la anima GSAP) */
.hero__letter {
  --r: -30%;
  display: inline-block;
  transform-origin: 50% 100%;
  -webkit-mask-image: radial-gradient(130% 120% at 50% 118%, #000 var(--r), transparent calc(var(--r) + 24%));
  mask-image: radial-gradient(130% 120% at 50% 118%, #000 var(--r), transparent calc(var(--r) + 24%));
}
/* Salida líquida (hero-exit.js): la letra cuelga de su borde superior, así al estirarse escurre hacia abajo
   mientras la máscara la vacía desde arriba. Solo se activa tras la intro, con las letras en reposo */
.hero__title.is-liquid .hero__letter { transform-origin: 50% 0; }

.hero__rule {
  width: min(240px, 40vw);
  height: 1px;
  background: var(--blood);
}

.hero__sub {
  max-width: 40ch;
  font-style: italic;
  font-weight: var(--w-light);
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.4;
  color: var(--bone);
  text-wrap: balance;
}

/* Estados previos a la intro (solo con JS) */
.js .hero__title,
.js .hero__sub,
.js .btn[data-cta] { opacity: 0; }
.js .hero__rule { transform: scaleX(0); }

.hero__word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 0.1em 0.12em;                 /* no recortar los remates de la cursiva */
  margin: 0 -0.1em -0.12em;
}
.hero__word-mask > span { display: inline-block; }

/* Si el arranque falla tras trocear el título, no dejar las letras enmascaradas */
.no-js .hero__letter { -webkit-mask-image: none; mask-image: none; }