[data-component-id="usfq_theme:section_hero"] {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: 89vh;

  @media (max-width: 767px) {
    min-height: 92vh;
  }

  .container-link-button{
    padding: 2rem 4rem;

    @media (max-width: 1024px) {
      padding: 2rem 1.5rem;
    }
  }

  .section-hero__background {
    position: absolute;
    inset: 0;
    z-index: 0;

    div {
      height: 100%;
    }
  }

  .section-hero__background img,
  .section-hero__background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .section-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .section-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .section-hero__text .text-block {
    width: 100%;
  }

  .section-hero__text .text-block .title {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    max-width: 100%;
  }

  .section-hero__text {
    width: 100%;
  }

  /* TABLET */
  @media (min-width: 768px) and (max-width: 1024px) {
    .section-hero__content {
      padding-top: 4.5rem;
      padding-bottom: 4.5rem;
    }
  }

  /* DESKTOP */
  @media (min-width: 1025px) {
    .section-hero__content {
      padding-top: 7.5rem;
      padding-bottom: 4rem;
    }

    .section-hero__text {
      width: 100%;
      max-width: 50%;
    }
  }

  .section-hero__overlay--dark_1 {
    background-color: var(--dark-opacity-20);
  }


  .section-hero__overlay--dark_2 {
    background-color: var(--dark-opacity-60);
  }

  &.section-hero--dark_2 .section-hero__content,
  &.section-hero--dark_1 .section-hero__content {
    color: var(--white);
  }

  .section-hero__overlay--light_1 {
    background-color: var(--light-opacity-60);
  }
  &.section-hero--light_1 .section-hero__content,
  &.section-hero--light_2 .section-hero__content,
  &.section-hero--light_1 .section-hero__content h2, 
  &.section-hero--light_2 .section-hero__content h2,
  &.section-hero--light_1 .section-hero__content p,
  &.section-hero--light_2 .section-hero__content p {
    color: var(--dark);
  }

  .section-hero__overlay--light_2 {
    background-color: var(--light-opacity-20);
  }

  [data-component-id="usfq_theme:link"] {
  /* Variantes color */
    &.link--color-secondary, .link--color-primary, 
    .link--color-light:not(-link--divier){
      color: inherit !important;
    }
  }
}
/* ===========================================================================
   HERO CON VIDEO: degradado en vez de velo plano

   Sobre video el velo plano de dark_1/dark_2 apagaba toda la imagen. Aqui el
   negro sale del pie, es mas fuerte bajo el texto y llega a 0 justo encima
   del titular, de modo que la parte alta del video se ve limpia. El degradado
   cuelga del bloque de texto y no de la seccion: asi sigue al titular en
   cualquier ancho, aunque parta en mas lineas. Los heroes con foto no cambian.
   =========================================================================== */
[data-component-id="usfq_theme:section_hero"]:has(.section-hero__background video):not(.view_mode__compact_hero) {
    .section-hero__overlay {
        background: none;
    }

    /* El bloque de texto ya crea su contexto de apilado (z-index 2): con -1 el
       degradado queda bajo el texto y sobre el video. */
    .section-hero__content::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background-image: linear-gradient(to top,
                rgb(0 0 0 / 85%) 0%,
                rgb(0 0 0 / 65%) 40%,
                rgb(0 0 0 / 30%) 72%,
                rgb(0 0 0 / 0%) 100%);
    }
}

/* ===========================================================================
   HERO CON DEGRADADO — opción "Degradado desde abajo" de field_opacity

   El mismo degradado del hero con video, para heroes con foto que el editor
   elija: negro desde el pie, más fuerte bajo el texto y en 0 sobre el titular,
   así la parte alta de la foto se ve limpia. El texto se ordena en el bloque
   siguiente, compartido con el hero con video.
   =========================================================================== */
[data-component-id="usfq_theme:section_hero"].section-hero--gradient {
    .section-hero__overlay {
        background: none;
    }

    .section-hero__content {
        color: var(--white);
    }

    .section-hero__content::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background-image: linear-gradient(to top,
                rgb(0 0 0 / 85%) 0%,
                rgb(0 0 0 / 70%) 40%,
                rgb(0 0 0 / 45%) 70%,
                rgb(0 0 0 / 0%) 100%);
    }

}

/* Texto de los heroes con degradado (elegido o por video): la bajada va en una
   columna de lectura cómoda, con aire respecto al titular, y se neutraliza el
   `white-space: pre-wrap` que traen los textos pegados desde Google Docs. */
[data-component-id="usfq_theme:section_hero"].section-hero--gradient,
[data-component-id="usfq_theme:section_hero"]:has(.section-hero__background video):not(.view_mode__compact_hero) {
    .section-hero__text .title {
        margin-bottom: 1.5rem;
    }

    .section-hero__text .description {
        max-width: 36rem;
        gap: 0.75rem;
    }

    .section-hero__text .description p {
        margin: 0;
        font-size: 1.0625rem;
        line-height: 1.6;
        color: rgb(255 255 255 / 88%);
        text-wrap: pretty;
    }

    .section-hero__text .description span {
        white-space: normal;
    }

    @media (min-width: 1025px) {
        .section-hero__text .description p {
            font-size: 1.125rem;
        }
    }
}

/* Firma gráfica en la bajada de un hero (p. ej. "More Humans, More Dragons."):
   un párrafo con la clase hero-tagline y una imagen dentro. */
[data-component-id="usfq_theme:section_hero"] .section-hero__text .description .hero-tagline {
    margin-top: 1.25rem;
    line-height: 0;

    /* Ocupa todo el ancho de la bajada, con tope de 32rem en pantallas
       grandes; el SVG escala sin perder nitidez. */
    img {
        display: block;
        width: 100%;
        max-width: 32rem;
        height: auto;
    }
}

/* ===========================================================================
   HERO COMPACTO — view mode `compact_hero`

   Tercer valor de field_viewmode_hero, junto a `hero` y `banner_hero`. Es el
   mismo hero de siempre en una banda baja: la imagen sigue a sangre, el velo
   se refuerza y el texto se pega abajo. Medidas del Figma "FASE 2 -
   Boletines", que rotula la banda a 300px en los tres viewports.

   Todo cuelga de la clase del modificador: la regla base y su `min-height:
   92vh` no se tocan, que es lo que usan institutos, laboratorios, colegios,
   programas, clubes y los bloques de hero del sitio.
   =========================================================================== */
[data-component-id="usfq_theme:section_hero"].view_mode__compact_hero {
    min-height: 300px;

    /* El velo plano de dark_2 es un 50% y no basta: sobre una foto clara -- unas
       batas blancas, un cielo -- el titular cae por debajo del mínimo de
       contraste. La banda es baja y el texto va siempre abajo, así que se
       refuerza con un degradado hacia el pie en vez de oscurecer la foto
       entera. El color plano lo sigue poniendo la clase de opacidad. */
    .section-hero__overlay {
        background-image: linear-gradient(to top,
                rgb(0 0 0 / 70%) 0%,
                rgb(0 0 0 / 35%) 55%,
                rgb(0 0 0 / 0%) 100%);
    }

    .section-hero__content {
        padding-top: 2.5rem;
        padding-bottom: 2rem;
    }

    /* La ceja de este view mode es de una línea larga (ciudad y fecha, o un
       antetítulo): se le deja interlínea para cuando parta en móvil. */
    .section-hero__text .eyebrow {
        line-height: 1.4;
        margin-bottom: 1rem;
    }

    .section-hero__text .title {
        margin-bottom: 1rem;
    }

    /* text_block pinta el subtítulo como h2 con la familia de titulares; en la
       banda compacta es una bajada corrida, con el cuerpo de texto normal. */
    .section-hero__text .subtitle {
        font-family: var(--font-family-base);
        font-weight: var(--fw-body-regular);
        font-size: var(--fs-body-regular);
        line-height: var(--lh-body-regular);
        margin-bottom: 0;
    }

    /* TABLET */
    @media (min-width: 768px) and (max-width: 1024px) {
        .section-hero__content {
            padding-top: 2.5rem;
            padding-bottom: 1.5rem;
        }
    }

    /* DESKTOP */
    @media (min-width: 1025px) {
        .section-hero__content {
            padding-top: 3rem;
            padding-bottom: 2.5rem;
        }

        .section-hero__text {
            max-width: 60%;
        }
    }
}

/* ===========================================================================
   HERO DE TEXTO ANCHO — view mode `wide_hero`

   Mismo hero de siempre con la caja de texto a todo el ancho del contenido, que
   es como lo rotula el Figma de Beneficios: el titular entra en una linea y la
   bajada en dos. La regla base deja el texto en la mitad de la franja, que es
   lo que usan los cientos de heroes del resto del sitio, asi que el cambio
   cuelga solo de la clase del modificador.

   Requiere el valor `wide_hero` en field_viewmode_hero; sin el, esta hoja no
   pinta nada.
   =========================================================================== */
[data-component-id="usfq_theme:section_hero"].view_mode__wide_hero {

    /* DESKTOP */
    @media (min-width: 1025px) {
        .section-hero__text {
            max-width: 100%;
        }
    }
}