/* BON GON V10.3 REV11
   1) El hero de Inicio comparte altura y paleta con Conócenos en móvil y desktop.
   2) Solo en desktop aumenta la escala tipográfica del slogan principal.
   3) Solo en móvil: imagen de Quiénes somos más abajo + texto justificado.
   4) Solo en móvil: slogan de Colección centrado y equilibrado. */

/* -----------------------------------------------------------------
   HERO DE INICIO — mismo lenguaje visual que el hero de CONÓCENOS.
   Este bloque es intencionalmente global: aplica a móvil y desktop.
   ----------------------------------------------------------------- */
.home-hero.home-hero {
  height: 100vh !important;
  min-height: 0 !important;
  max-height: none !important;
  background: radial-gradient(
    ellipse at center,
    rgba(49, 69, 184, .70) 0%,
    rgba(25, 39, 121, .80) 50%,
    rgba(0, 9, 59, .90) 100%
  ) !important;
}

/* Las dos capas antiguas del hero ya no deben alterar la paleta común. */
.home-hero > div:nth-child(1),
.home-hero > div:nth-child(2) {
  background: transparent !important;
}

/* La fotografía permanece reconocible, pero deja respirar el azul del hero. */
.home-hero .home-hero__image {
  opacity: .66;
  filter: saturate(.62) brightness(.92) contrast(.96) !important;
}

.home-hero::before,
.home-hero::after {
  background: transparent !important;
}

/* Desktop: el hero crece, así que el slogan también gana presencia. */
@media (min-width: 768px) {
  .home-hero .home-hero__content {
    width: min(650px, 66vw) !important;
  }
  .home-hero .home-hero__eyebrow {
    font-size: clamp(20px, 1.75vw, 29px) !important;
    letter-spacing: .27em;
  }
  .home-hero .home-hero__word.home-hero__line--2 {
    font-size: clamp(84px, 8.7vw, 118px) !important;
    line-height: .90;
  }
  .home-hero .home-hero__word.home-hero__line--4 {
    font-size: clamp(90px, 9.35vw, 128px) !important;
    line-height: .90;
  }
}

/* -----------------------------------------------------------------
   Ajustes EXCLUSIVAMENTE móviles.
   ----------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Igualar también las proporciones móviles de Conócenos. */
  .home-hero.home-hero {
    height: 54vh !important;
    min-height: 390px !important;
    max-height: 500px !important;
    padding-top: calc(var(--site-header-h, 68px) + 16px);
    box-sizing: border-box;
  }

  /* La compensación ahora la da el propio padding del hero; evita desplazarlo dos veces. */
  .home-hero .home-hero__content {
    transform: none !important;
  }

  /* 1. QUIÉNES SOMOS: imagen un poco más abajo y texto editorial justificado. */
  .home-about .home-about__copy {
    text-align: justify !important;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  .home-about .home-about__media-mobile {
    margin-top: clamp(20px, 5.7vw, 28px) !important;
    margin-right: clamp(11px, 3.2vw, 15px) !important;
    margin-bottom: 8px !important;
    shape-margin: 12px;
    -webkit-shape-margin: 12px;
  }

  /* 2. SLOGAN DE COLECCIÓN: ambas líneas centradas sobre el mismo eje. */
  .home-collection .home-collection__tagline {
    text-align: center !important;
  }
  .home-collection__tagline-mobile {
    width: 100%;
    max-width: 430px;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: center !important;
  }
  .home-collection__tagline-mobile > span {
    width: 100%;
    justify-content: center !important;
    align-items: baseline;
    gap: clamp(9px, 2.7vw, 12px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;
  }
  .home-collection__tagline-mobile > span:last-child {
    padding-left: 0 !important;
  }
}

@media (max-width: 389px) {
  .home-about .home-about__media-mobile {
    margin-top: 18px !important;
    margin-right: 10px !important;
  }
}