/* Usa SOLO tus variables existentes del :root */
.xp-hero {
  background: var(
    --color-bg
  ); /* o var(--color-green) si prefieres más oscuro */
  color: var(--color-text-paragraph);
  padding: var(--padding-sections-pc);
}

.xp-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: stretch; /* Ambas columnas igual altura */
}

/* ===== Columna izquierda (texto) ===== */
.xp-hero__content {
  max-width: 640px; /* Controla el ancho del bloque de texto en desktop */
  width: 100%;
}

.xp-hero__title {
  font-family: var(--font-helvetica-nue);
  font-size: calc(var(--font-size-title) * 1.4);
  line-height: var(--font-lh-title);
  color: var(--color-text-green);
  letter-spacing: 0.2px;
  margin: 0 0 18px 0;
}

/* Intro: ya no hay bloque de “years”, dejamos el lead en bloque */
.xp-hero__lead {
  display: block;
}

.xp-hero__paragraph {
  font-family: var(--font-helvetica-nue);
  font-size: var(--font-size-paragraph);
  line-height: var(--font-lh-paragraph);
  margin: 2px 0 18px 0;
}

/* Lista numerada con divisores */
.xp-hero__list {
  list-style: none;
  margin: 18px 0 26px 0;
  padding: 0;
  counter-reset: steps;
  display: grid;
  gap: 14px;
}

.xp-hero__list li {
  counter-increment: steps;
  padding: 12px 0 10px 0;
  position: relative;
  font-family: var(--font-helvetica-nue);
  font-size: var(--font-size-paragraph);
  line-height: var(--font-lh-paragraph);
}

.xp-hero__list li::before {
  content: counter(steps, decimal-leading-zero) ".";
  color: var(--color-text-green);
  margin-right: 5px;
}

#spacewrong::before {
  margin-right: 0px;
}

.xp-hero__list li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 40%;
  bottom: 0;
  height: 1px;
}

/* ===== Columna derecha (imagen) ===== */
.xp-hero__media {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: #0e141b;
  min-height: 420px; /* Presencia visual en desktop */
  height: 100%; /* Igualar altura de la fila del grid */
  align-self: stretch;
  display: block;
}

.xp-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Rellena sin deformar */
}

.xp-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#image_movil {
  display: none;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  #image_pc {
    display: none;
  }
  #image_movil {
    display: flex;
  }
  .xp-hero {
    padding: var(--padding-sections-mobile);
  }
  .xp-hero__inner {
    grid-template-columns: 1fr; /* Una columna */
  }
  /* Importante: primero textos, luego imagen (DOM order); NO usamos order:-1 */
  .xp-hero__media {
    aspect-ratio: 4/3; /* Controla altura en móvil */
    min-height: auto;
    height: auto;
    margin-top: 12px;
  }
  .xp-hero__content {
    max-width: none;
  }
  .xp-hero__list li {
    counter-increment: steps;
    padding: 0;
    position: relative;
  }

  .xp-hero__list {
    margin: 5px;
  }
}

@media (max-width: 600px) {
  .xp-hero {
    padding: var(--padding-sections-mobile-bottom);
  }
  .xp-hero__list li::after {
    right: 0;
  }
}