/* Hero — typewriter (Flowbase / Typed.js)
   - El script inserta <span>texto</span><span class="typed-cursor">|</span>.
   - NO usar inline-block en el span de texto: el cursor queda después del “bloque” y baja a otra línea al haber wrap.
   - .subtitle.sections.styled usa text-fill transparent + background-clip:text; el cursor debe forzar color sólido o hereda “invisible”.
   - No aplicar animaciones CSS con opacity:0 en el <span> padre (fb-typewriter): Typed corre “en invisible”
     y al revelarse el texto ya está escrito; la entrada es el propio tipeo + cursor. */

.hero-page > .subtitle.sections.styled.extrabig {
  display: block;
  text-align: center;
  box-sizing: border-box;
  min-height: calc(64px * 3);
  max-height: calc(64px * 3);
  overflow: hidden;
  max-width: 100%;
}

@supports (min-height: 3lh) {
  .hero-page > .subtitle.sections.styled.extrabig {
    min-height: 3lh;
    max-height: 3lh;
  }
}

/* Desktop: menos altura mínima (menos aire hasta el H1); el máximo permite frases largas en 3 líneas */
@media screen and (min-width: 992px) {
  .hero-page > .subtitle.sections.styled.extrabig {
    min-height: calc(64px * 2);
    max-height: calc(64px * 3);
  }

  @supports (min-height: 2lh) {
    .hero-page > .subtitle.sections.styled.extrabig {
      min-height: 2lh;
      max-height: 3lh;
    }
  }
}

/* Texto que escribe Typed: flujo inline → el cursor sigue al final del texto en 1 o N líneas */
.hero-page > .subtitle.sections.styled.extrabig > span:not(.typed-cursor) {
  display: inline;
  word-break: break-word;
  overflow-wrap: anywhere;
  padding: 0 2px;
  box-sizing: border-box;
}

/* Cursor: color sólido (no heredar text-fill transparent del .styled) + misma caja tipográfica que el párrafo */
.hero-page > .subtitle.sections.styled.extrabig .typed-cursor {
  display: inline;
  color: #262626;
  -webkit-text-fill-color: currentColor;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  font-weight: inherit;
  vertical-align: baseline;
}

/* La animación typedjsBlink la inyecta el script; no duplicar aquí (evita conflictos con toggleBlinking) */

/* Antes de Flowbase (window.load): frases en divs display:none — sin texto visible hasta que Typed arranca */
.hero-page > .subtitle.sections.styled.extrabig > div {
  box-sizing: border-box;
  padding: 0 2px;
}

@media screen and (max-width: 991px) {
  .hero-page .text-badge {
    white-space: normal;
    max-width: 100%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    align-self: stretch;
  }

  .hero-page .text-badge .subtitle.sections.styled {
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 767px) {
  .hero-page .header-badge {
    gap: 10px;
  }
}

@media screen and (max-width: 479px) {
  .hero-page .text-badge.big.suite.opacity {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Desktop: frases del bloque badge (debajo del H1) como mucho 2 líneas — composición más equilibrada */
@media screen and (min-width: 992px) {
  .hero-page .header-badge .text-badge {
    white-space: normal;
    max-width: min(100%, 1080px);
  }

  .hero-page .header-badge .text-badge .subtitle.sections.styled {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
  }
}