Hero Industry

Contrato del layout

Un layout transporta anatomia, no pintura: se rellena por slots y depende del CSS de los componentes que lista. Instalarlo sin ellos lo deja sin estilos.

Slots

{{mediaDesktop}}{{mediaAlt}}{{mediaMobile}}{{eyebrow}}{{headline}}{{subtitle}}{{cta_primary_href}}{{primaryCta}}{{cta_secondary_href}}{{secondaryCta}}

Componentes requeridos

chipbuttonlink-buttontypography

Anatomía CSS

<div class="layoutHeroIndustry">

</div>

Tokens resueltos

Valores finales tras seguir la cadena de tokens. Derivados del source: si un token cambia, esta tabla cambia sola.

CSS mínimo funcional

Autocontenido: sin imports ni tokens. Para previews y prototipos — en producción se consume el CSS del DS.

/* Layout: hero-industry — structure only */
.l-hero-industry {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: 80px 32px;
  color: #0a0a0a;
}

/* La foto es un elemento, no un background: asi el encuadre es dato del
   consumidor y el mismo bloque sirve para cualquier industria. */
.l-hero-industry__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.l-hero-industry__media--mobile {
  display: none;
}

.l-hero-industry__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, #00000080 0%, transparent 78%);
}

.l-hero-industry__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 40rem;
}

.l-hero-industry__headline {
  margin: 0;
  font-size: 61.04px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.l-hero-industry__subtitle {
  margin: 0;
  max-width: 34rem;
  font-size: 20px;
  line-height: 1.45;
}

.l-hero-industry__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

/* El corte va en 991px, el mismo del breakpoint tablet de Webflow, para que el
   layout se pueda reproducir en el Designer sin inventar un media query. */
@media (max-width: 991px) {
  .l-hero-industry {
    padding: 64px 20px;
    text-align: center;
  }

  .l-hero-industry__media--desktop {
    display: none;
  }

  .l-hero-industry__media--mobile {
    display: block;
  }

  /* Vertical, no horizontal: en el encuadre movil el sujeto ocupa el ancho
     completo y el texto se apoya abajo. */
  .l-hero-industry__scrim {
    background: linear-gradient(180deg, transparent 0%, #00000080 55%, #00000080 100%);
  }

  .l-hero-industry__content {
    align-items: center;
    margin-inline: auto;
  }

  .l-hero-industry__headline {
    font-size: 48.83px;
    line-height: 1.15;
  }
}