/* Hero — Siderum */

#inicio {
  background-color: var(--color-gray-dark);
  background-image: url("../02_ASSETS/fondos/background-hero.webp");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: cover;
  color: var(--color-white);
  padding-top: clamp(2.5rem, 7vw, 5rem);
  /* Espacio libre bajo el CTA + zona que ocupa la mitad superior de las
     Cards al superponerse sobre el Hero (--hero-cards-overlap, definido en
     cards-tecnologia.css). */
  padding-bottom: calc(clamp(4rem, 9vw, 8rem) + var(--hero-cards-overlap));
}

@media (min-width: 1200px) {
  /* El Header es transparente en la parte superior (Desktop): el fondo del
     Hero se extiende detrás de la franja del Header para integrarse
     visualmente con él, sin desplazar el contenido del Hero. */
  #inicio {
    margin-top: calc(-1 * var(--header-height));
    padding-top: calc(var(--header-height) + clamp(2.5rem, 7vw, 5rem));
  }
}

.hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: nowrap;
}

.hero-top h1 {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 640px;
  margin: 0;
  color: var(--color-white);
  font-weight: var(--fw-regular);
  font-size: clamp(2.5rem, 4.2vw, 3.35rem);
}

.hero-line {
  display: inline;
}

@media (max-width: 767.98px) {
  .hero-line {
    display: block;
  }

  /* El H1 conserva el ancho de su renglón más largo para no alterar los
     saltos de línea; en smartphones angostos es el sello el que se reduce
     (proporcionalmente) para ocupar el espacio restante. */
  .hero-top h1 {
    flex-shrink: 0;
  }

  .hero-top .hero-badge {
    flex-shrink: 1;
    min-width: 0;
  }
}

.hero-highlight {
  color: var(--color-turquoise);
}

.hero-badge {
  flex-shrink: 0;
  width: clamp(100px, 13vw, 190px);
  height: auto;
}

.hero-lead {
  max-width: 640px;
  margin-top: clamp(0.5rem, 1.5vw, 0.85rem);
  margin-bottom: 0;
  color: var(--color-white);
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.45;
}

@media (min-width: 1200px) {
  /* La altura de .hero-top la determina el sello (más alto que las 2 líneas
     del H1), por lo que la bajada queda muy separada del título si solo se
     usa un margin-top positivo. Se compensa con un valor negativo que sigue
     la diferencia real entre la altura del sello y la del H1 en este rango,
     sin modificar tamaño/posición del sello ni line-height del H1. */
  .hero-lead {
    margin-top: clamp(-111px, calc(-11px - 5.17vw), -73px);
  }
}

.hero-cta {
  margin-top: clamp(1.5rem, 3.5vw, 2rem);
}

.hero-cta:hover,
.hero-cta:focus-visible {
  background-color: var(--color-white);
  color: var(--color-turquoise);
}

@media (max-width: 767.98px) {
  /* Ancho aproximado al bloque título + sello (h1 + gap + .hero-badge),
     que en este rango varía muy poco (~256px a ~284px). */
  .hero-cta {
    display: block;
    width: 100%;
    max-width: clamp(250px, 70vw, 285px);
    text-align: center;
  }
}