/* Kudenix Hero — Scoped under .kudenix-hero
   Valores tomados de propuesta/pages/index.html, sección comp-mal7byr2. */

/* Fuentes de la propuesta. Los nombres de familia son los mismos que usa el
   documento original, y los archivos vienen de propuesta/assets/fonts/. */

@font-face {
  font-family: 'wf_e4d809a2ee93442c987e80358';   /* titular y texto destacado */
  src: url('../fonts/file-2e67dd27.woff2') format('woff2'),
       url('../fonts/file-9c10215e.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'wf_e2607d4fb84048a587dc369eb';   /* cuerpo de texto */
  src: url('../fonts/file-f213e4dc.woff2') format('woff2'),
       url('../fonts/file-8eac8b99.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'wf_b1383440f1c7482ba9607cd70';   /* botón */
  src: url('../fonts/file-94f0f100.woff2') format('woff2'),
       url('../fonts/file-c502fcac.woff') format('woff');
  font-display: swap;
}

.kudenix-hero {
  /* Tokens de la sección, redeclarados aquí para no tocar :root. */
  --kh-bg: #ffffff;
  --kh-title-1: rgb(26, 150, 203);
  --kh-title-2: #1f9e40;
  --kh-body: rgb(102, 102, 102);
  --kh-highlight: rgb(77, 186, 232);
  --kh-button-bg: #606060;
  --kh-button-bg-hover: #1f9e40;
  --kh-button-fg: #ffffff;

  --kh-font-title: 'wf_e4d809a2ee93442c987e80358', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --kh-font-body: 'wf_e2607d4fb84048a587dc369eb', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --kh-font-button: 'wf_b1383440f1c7482ba9607cd70', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Medidas del original: contenedor de 980px y área útil de 1172px. */
  --kh-image-width: 263px;
  --kh-image-overlap: 77px;
  --kh-media-width: calc(var(--kh-image-width) * 3 - var(--kh-image-overlap) * 2);

  background: var(--kh-bg);
  min-height: 650px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}

/* El original coloca todo dentro de una caja de 980px: el texto arranca 94px a
   su izquierda y las imágenes en +442px, de modo que ambos bloques se solapan
   unos píxeles. El área total es 1172px y aquí se reproduce con posicionamiento
   sobre esa caja, que es lo que mantiene el titular en una sola línea. */

.kudenix-hero__inner {
  width: 100%;
  max-width: 1172px;
  min-height: 650px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  box-sizing: border-box;
}

/* ── Columna de texto ── */

.kudenix-hero__content {
  width: min(547px, 48%);
  padding-top: 72px;
  position: relative;
  z-index: 1;
}

.kudenix-hero__title {
  max-width: 485px;
  margin: 0 0 16px;
  font-family: var(--kh-font-title);
  font-size: 51px;
  font-weight: normal;
  line-height: normal;
  letter-spacing: normal;
}

.kudenix-hero__title-line {
  display: block;
}

.kudenix-hero__title-line--1 {
  color: var(--kh-title-1);
}

.kudenix-hero__title-line--2 {
  color: var(--kh-title-2);
}

.kudenix-hero__body {
  margin: 0 0 10px;
  font-family: var(--kh-font-body);
  font-size: 16px;
  line-height: 1.4em;
  color: var(--kh-body);
}

.kudenix-hero__body p {
  margin: 0 0 1em;
}

.kudenix-hero__body p:last-child {
  margin-bottom: 0;
}

.kudenix-hero__highlight {
  margin: 0 0 10px;
  font-family: var(--kh-font-title);
  font-size: 17px;
  line-height: normal;
  color: var(--kh-highlight);
}

/* ── Botón ── */

.kudenix-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 179px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(0, 0, 0, 0);
  background: var(--kh-button-bg);
  color: var(--kh-button-fg);
  font-family: var(--kh-font-button);
  font-size: 15px;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  transition: all 0.2s ease, visibility 0s;
}

.kudenix-hero__button:hover,
.kudenix-hero__button:focus-visible {
  background: var(--kh-button-bg-hover);
  color: var(--kh-button-fg);
}

/* ── Imágenes solapadas ── */

.kudenix-hero__media {
  position: absolute;
  top: 29px;
  right: 0;
  /* En el diseño el bloque mide 635px sobre un área de 1124px: 56.5%. Al
     expresarlo en porcentaje conserva la proporción en cualquier contenedor y
     nunca se monta sobre el texto. */
  width: min(635px, 56.5%);
  display: flex;
  align-items: flex-start;
}

.kudenix-hero__figure {
  /* 263px de 635px = 41.4%; el solapamiento de 77px = 12.1%.
     3 × 41.4 − 2 × 12.1 = 100%. */
  flex: 0 0 41.4%;
  width: 41.4%;
  line-height: 0;
}

.kudenix-hero__figure + .kudenix-hero__figure {
  margin-left: -12.1%;
}

.kudenix-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.kudenix-hero__figure a {
  display: block;
}

/* ── Adaptación a pantallas menores ──
   El original se fija en 980px; aquí las imágenes se reducen primero y
   después el bloque pasa a una sola columna. */

@media (max-width: 1200px) {
  /* Por debajo del ancho del diseño las imágenes se reducen y siguen ancladas
     al borde derecho, en vez de mantener la coordenada fija. */
  .kudenix-hero {
    --kh-image-width: 210px;
    --kh-image-overlap: 60px;
  }

  .kudenix-hero__media {
    left: auto;
    right: 24px;
  }

  .kudenix-hero__content {
    width: 460px;
  }

  .kudenix-hero__title {
    font-size: 42px;
  }
}

@media (max-width: 900px) {
  /* Una sola columna: las imágenes vuelven al flujo, debajo del texto. */
  .kudenix-hero {
    min-height: 0;
  }

  .kudenix-hero__inner {
    min-height: 0;
  }

  .kudenix-hero__content {
    width: 100%;
    padding-top: 48px;
  }

  .kudenix-hero__title {
    max-width: none;
  }

  .kudenix-hero__media {
    position: static;
    padding: 32px 0 48px;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .kudenix-hero {
    --kh-image-width: 150px;
    --kh-image-overlap: 45px;
  }

  .kudenix-hero__title {
    font-size: 34px;
  }
}

/* ── Composición simple ──
   Una sola imagen protagonista junto al texto, para las páginas de producto.
   El texto y la imagen se reparten el ancho en vez de solaparse. */

.kudenix-hero--single .kudenix-hero__inner {
  display: flex;
  align-items: center;
  gap: 48px;
  min-height: 0;
  padding-top: 56px;
  padding-bottom: 56px;
}

.kudenix-hero--single.kudenix-hero--media-left .kudenix-hero__inner {
  flex-direction: row-reverse;
}

.kudenix-hero--single {
  min-height: 0;
}

.kudenix-hero--single .kudenix-hero__content {
  width: auto;
  flex: 1 1 50%;
  padding-top: 0;
}

.kudenix-hero--single .kudenix-hero__title {
  max-width: none;
  font-size: 44px;
}

.kudenix-hero--single .kudenix-hero__media {
  position: static;
  width: auto;
  flex: 1 1 45%;
}

/* Con una sola imagen no hay solapamiento que aplicar. */
.kudenix-hero--single .kudenix-hero__figure {
  flex: 1 1 auto;
  width: 100%;
}

.kudenix-hero--single .kudenix-hero__figure + .kudenix-hero__figure {
  margin-left: 16px;
}

@media (max-width: 900px) {
  .kudenix-hero--single .kudenix-hero__inner,
  .kudenix-hero--single.kudenix-hero--media-left .kudenix-hero__inner {
    flex-direction: column;
    gap: 28px;
  }

  .kudenix-hero--single .kudenix-hero__title { font-size: 32px; }
}

/* ── Composición superpuesta ──
   Imagen de fondo a todo el ancho y una tarjeta con el contenido encima,
   como en la portada de Kudenix Lab. */

.kudenix-hero--overlay {
  background-size: cover;
  background-position: center;
  min-height: 620px;
  display: flex;
  align-items: center;
}

.kudenix-hero--overlay .kudenix-hero__inner {
  min-height: 0;
  padding-top: 56px;
  padding-bottom: 56px;
  display: flex;
}

.kudenix-hero--overlay .kudenix-hero__content {
  width: auto;
  flex: 0 1 560px;
  padding: 34px 38px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 18px 50px rgba(0, 11, 44, 0.22);
}

.kudenix-hero--overlay.kudenix-hero--card-right .kudenix-hero__inner { justify-content: flex-end; }
.kudenix-hero--overlay.kudenix-hero--card-left  .kudenix-hero__inner { justify-content: flex-start; }
.kudenix-hero--overlay.kudenix-hero--card-center .kudenix-hero__inner { justify-content: center; }

.kudenix-hero--overlay .kudenix-hero__title {
  max-width: none;
  font-size: 34px;
}

/* Con fondo propio, las imágenes del repeater no se muestran. */
.kudenix-hero--overlay .kudenix-hero__media { display: none; }

@media (max-width: 700px) {
  .kudenix-hero--overlay { min-height: 0; }
  .kudenix-hero--overlay .kudenix-hero__content { flex: 1 1 auto; padding: 26px 22px; }
  .kudenix-hero--overlay .kudenix-hero__title { font-size: 26px; }
}