/* 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,
  .hero-page .text-badge .subtitle.sections.ia-gradient {
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Espacio entre los dos badges bajo el H1 */
.hero-page .header-badge {
  gap: 20px;
}

.hero-page .hero-page__primary-cta {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin-top: 4px;
}

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

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

/* Mismo cuerpo tipográfico (24/32) que .styled en badges del hero; ia-gradient no lo fija en Webflow */
.hero-page .text-badge .subtitle.sections.ia-gradient {
  font-size: 24px;
  line-height: 32px;
}

/* 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,
  .hero-page .header-badge .text-badge .subtitle.sections.ia-gradient {
    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%;
  }
}

/* ===========================================================================
   Hero a 2 columnas (show_form_column): contenido izquierda + formulario derecha.
   Misma composición que landing-min-hero-split; el form usa clases de cta-form.
   =========================================================================== */

.hero-page-split {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.hero-page-split .hero-page-split__content.margintop {
  margin-top: 0;
}

.hero-page-split .hero-page-split__content {
  width: 100%;
}

.hero-page-split .hero-page-split__form.cta-form-section.section-5 {
  margin: 0;
  padding: 0 !important;
  max-width: 100%;
  width: 100%;
}

.hero-page-split .cta-form-section--compact .cta-form-section__copy {
  display: none !important;
}

.hero-page-split .cta-form-section .cta-form-layout > *:not(.form-block) {
  display: none !important;
}

@media screen and (min-width: 992px) {
  .hero-page-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: anchor-center;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 64px);
    box-sizing: border-box;
  }

  .hero-page-split .hero-page-split__content,
  .hero-page-split .hero-page-split__content.margintop {
    align-items: flex-start;
    justify-content: center;
    align-self: center;
    margin: 0;
    padding: 0;
    max-width: 100%;
    width: 100%;
  }

  .hero-page-split .hero-page-split__content > .subtitle.sections.styled.extrabig {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  .hero-page-split .hero-page-split__content .heading.sections,
  .hero-page-split .hero-page-split__content .heading.sections.textgradient.ia-text-title.roboto {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  .hero-page-split .hero-page-split__content .header-badge {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .hero-page-split .hero-page-split__content .hero-page__primary-cta {
    justify-content: flex-start;
    align-self: flex-start;
  }

  .hero-page-split .hero-page-split__content .text-badge .subtitle.sections.styled,
  .hero-page-split .hero-page-split__content .text-badge .subtitle.sections.ia-gradient {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  .hero-page-split .hero-page-split__form.cta-form-section.section-5 {
    align-self: start;
    position: sticky;
    top: clamp(80px, 10vh, 112px);
  }

  .hero-page-split .cta-form-section .cta-form-layout {
    flex-direction: column;
    gap: 0;
  }

  .hero-page-split .cta-form-section .form-block {
    padding: clamp(24px, 2.5vw, 32px) clamp(20px, 2.5vw, 32px) !important;
  }
}

@media screen and (max-width: 991px) {
  .hero-page-split .hero-page-split__form.cta-form-section.section-5 {
    padding-top: 0;
  }
}