/* =====================================================================
   APERTURA DE HEROS · mismo efecto que el hero del index (hp2Rise)
   js/hero-open.js parte el H1 en palabras (.hw > .hw__in): cada palabra
   sube desde detrás de su máscara con el retardo de su línea, y después
   entran eyebrow y summary con un fundido, como el CTA/meta del index.
   Mientras el script no ha corrido (html.js-hero) el hero está oculto;
   sin JS o con movimiento reducido se ve tal cual, sin animación.
   ===================================================================== */
.js-hero :is(.gd-page:not(.home-page) .hero, .bh-hero__content, .ct-header__inner, .hero-legal .container, .blog-hero .container) {
  visibility: hidden;
}

.hw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.1em;   /* descendentes (g, p, y) dentro de la máscara */
  margin-bottom: -0.1em;
}
.hw__in {
  display: inline-block;
  animation: heroRise 1s cubic-bezier(0.19, 1, 0.22, 1) both;
}

/* Partes en brasa: el degradado pasa a cada palabra (el host lo pierde
   para que no quede un "fantasma" del texto en su sitio final) */
.hw-clip-host {
  background-image: none !important;
  animation: none !important;
}
.hw__in--ember {
  color: #FF7B3B;
  background: linear-gradient(100deg, #E8501F 0%, #FF7B3B 45%, #FFB06B 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroRise 1s cubic-bezier(0.19, 1, 0.22, 1) both, heroEmber 5s ease-in-out 1s infinite alternate;
}

/* Lo que acompaña al H1 entra después, como el CTA y la meta del index */
.is-open :is(.hero-meta, .bh-hero__eyebrow, .ct-header__eyebrow) {
  animation: heroFade 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0.45s both;
}
.is-open :is(.hero-summary, .hero-subtitle, .ct-header__text, .bh-hero__meta, .hero-lead) {
  animation: heroFade 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0.6s both;
}

@keyframes heroRise {
  from { transform: translateY(112%); }
  to   { transform: translateY(0); }
}
@keyframes heroFade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroEmber {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .hw__in, .hw__in--ember,
  .is-open :is(.hero-meta, .bh-hero__eyebrow, .ct-header__eyebrow, .hero-summary, .hero-subtitle, .ct-header__text, .bh-hero__meta, .hero-lead) { animation: none; }
}