.hero {
  position: relative;
  background: var(--brand-primary);
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Wrappers de la imagen. En desktop son transparentes (display:contents) para
   que la <img> se posicione absolute respecto a .hero como hasta ahora.
   En mobile, .hero__media genera caja y aloja el degradé inferior (::after). */
.hero__media,
.hero__pic {
  display: contents;
}

/* Imagen de fondo a sangre completa (sin fade en el archivo). */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* Degradé que funde la imagen con el panel azul, totalmente desde el lado
   izq y transparente en el centro/der. Reutilizable para cualquier foto.
   z-index 1 para que pinte ENCIMA de la imagen (.hero__bg está en z 0). */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right,
      var(--brand-primary) 0%,
      var(--brand-primary) 35%,
      rgba(0, 45, 114, 0.85) 45%,
      rgba(0, 45, 114, 0.4) 60%,
      rgba(0, 45, 114, 0) 80%);
  pointer-events: none;
}

/* Panel izquierdo
   gap-24 entre Content / Buttons / Differentiator
   padding: pl-120 pr-36 py-96
   z-index 2 para quedar ENCIMA del gradiente (.hero::before está en z 1). */
.hero__panel {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 58.4%;
  /* En diseño 1440: pad-izq 120 + contenido 685 + pad-der 36 = 841px.
     Con --page-pad-x el borde izq del contenido se alinea al contenedor
     centrado de 1200px en pantallas anchas, manteniendo el ancho de contenido. */
  max-width: calc(var(--page-pad-x) + 721px);
  padding: 96px 36px 96px var(--page-pad-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Gap reducido (84→40) para dar más aire al párrafo largo del hero. */
  gap: 40px;
}

/* Intro: contenido + botones agrupados, separados 24px entre sí (gap original).
   El gap de 64px del panel queda entre este bloque y el diferenciador. */
.hero__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

/* Content Container
   gap-12 entre title-block y lead, pr-101 propio (no afecta a botones/diff) */
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-right: 101px;
}

/* Title Container · gap-8 entre eyebrow y h1 */
.hero__title-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero__eyebrow {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--fw-regular);
  line-height: 14px;
  letter-spacing: 3.64px;
  text-transform: uppercase;
  color: var(--color-blue-100);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-regular);
  line-height: 56px;
  letter-spacing: 0;
  color: #fff;
}

.hero__lead {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 24px;
  letter-spacing: 0.27px;
  color: #fff;
}

.hero__lead strong {
  font-weight: 700;
  letter-spacing: -0.36px;
}

/* Button Container · gap-16; ancho natural según botones; va entre contenido y diff */
.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

/* Differentiator Container · gap-20 entre subtítulo y row de cards.
   Sin border-left ni padding-left: ahora es el subtítulo + 2 cards traslúcidas. */
.hero__diff {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}

/* Paragraph Bold: Open Sans Bold 18/24, tracking -0.36, sin uppercase. */
.hero__diff-eyebrow {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.36px;
  color: var(--color-blue-100);
  white-space: nowrap;
}

.hero__diff-row {
  display: flex;
  gap: 36px;
  align-items: stretch;
}

.hero-diff-card {
  background: var(--color-blue-card-bg);
  border-radius: var(--radius-lg);
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 273px;
  flex: 0 0 273px;
}

.hero-diff-card__num {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 32px;
  line-height: 41px;
  letter-spacing: -0.32px;
  color: var(--color-blue-50);
}

.hero-diff-card__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.21px;
  color: var(--color-blue-50);
}

/* Variante de 4 cards (trust-bar del insumo del cliente): grid 2×2 alineado a la
   izquierda (con el resto del contenido del hero). grid-auto-rows: 1fr iguala el
   alto de las dos filas, así las 4 cards quedan del mismo tamaño. */
.hero__diff-row--quad {
  display: grid;
  grid-template-columns: repeat(2, 273px);
  grid-auto-rows: 1fr;
  gap: 16px;
  justify-content: start;
}

/* Contenido centrado (vertical y horizontal) dentro de cada caja. */
.hero__diff-row--quad .hero-diff-card {
  width: auto;
  flex: initial;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Para las tarjetas cuyo "número" es texto (Alta complejidad / Atención integral):
   reduce la tipografía para que entren en una línea sin romper la retícula. */
.hero-diff-card__num--sm {
  font-size: 22px;
  line-height: 28px;
}

@media (min-width: 992px) {
.hero {
    min-height: min(calc(100vh - 126px), 800px);
  }
}

@media (max-width: 1199px) {
.hero__panel {
    padding: 64px 60px;
  }
}

@media (max-width: 991px) {
/* En mobile el hero apila imagen (arriba) + panel (abajo). Sin 100vh. */
.hero {
    flex-direction: column;
    align-items: stretch;
  }

.hero::before {
    display: none;
  }

/* el degradé no aplica con layout apilado */
/* En mobile la imagen se apila arriba; .hero__media genera caja para el fade. */
.hero__media {
    display: block;
    position: relative;
    z-index: 0;
  }

.hero__media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 112px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 45, 114, 0) 0%, var(--brand-primary) 100%);
  }

/* Scrim superior: protege el contraste del breadcrumb blanco que flota sobre
     la imagen, sin importar qué muestre la foto en esa zona. */
.hero__media::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 96px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 27, 69, 0.65) 0%, rgba(0, 27, 69, 0) 100%);
  }

.hero__bg {
    position: relative;
    inset: auto;
    z-index: 0;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    display: block;
    object-position: center;
  }

.hero__panel {
    width: 100%;
    max-width: none;
    padding: 0 24px 40px;
    gap: 24px;
  }

.hero__content {
    padding-right: 0;
  }

.hero__title {
    font-size: 34px;
    line-height: 41px;
  }

.hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

.hero__actions .lc-btn {
    width: 100%;
  }

.hero__diff-row {
    flex-direction: column;
    gap: 12px;
  }

/* En mobile las 4 cards van en grid 2×2 a todo el ancho. */
.hero__diff-row--quad {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    justify-content: stretch;
  }

.hero-diff-card {
    width: 100%;
    flex: 0 0 auto;
  }
}