/* ==========================================================================
   BAAN PHO — hero.css  ·  componente 4 del inventario
   Valores de "Baan Pho - Home v4.dc.html", líneas 233–243 (style=, móvil) y
   bloque @media (min-width:900px) del <helmet> (líneas 90–96, desktop).
   ========================================================================== */

.bp-hero {
  position: relative;
  height: 94vh;
  min-height: 640px;
  max-height: 860px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.bp-hero-fondo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.bp-hero-fondo picture {
  position: absolute;
  inset: 0;
  display: block;
}

.bp-heroimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  animation: bpZoom var(--zoom-dur) ease-in-out infinite alternate;
}

.bp-hero-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(var(--velo-hero), 0.92) 0%,
    rgba(var(--velo-hero), 0.4) 40%,
    rgba(var(--velo-hero), 0.18) 70%,
    rgba(var(--velo-hero), 0.3) 100%);
}

.bp-heroinner {
  position: relative;
  z-index: 2;
  padding: 0 28px 48px;
}

.bp-heroinner h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif-fuerte);
  font-size: var(--fs-hero);
  line-height: 1.04;
  margin: 0 0 18px;
  color: var(--blanco-foto);
  text-shadow: var(--sombra-h1-foto);
}

/* palabra destacada del titular sobre foto/oscuro */
.bp-destacada {
  font-style: italic;
  color: var(--oro-300);
}

.bp-heroinner p {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--texto-foto);
  margin: 0 0 30px;
  max-width: 340px;
  text-shadow: var(--sombra-texto-foto);
}

.bp-hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--oro-500);
  color: var(--sobre-oro);
  padding: 18px;
  font-size: var(--fs-boton-grande);
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  border-radius: var(--r-pastilla);
  box-shadow: var(--sombra-boton-hero);
}
.bp-hero-cta:hover { color: var(--sobre-oro); }

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 900px) {
  .bp-hero {
    height: 96vh;
    max-height: 940px;
  }

  /* Encuadre vertical del hero desktop: 0% = arriba, 100% = abajo */
  .bp-heroimg { object-position: center 70%; }

  .bp-heroinner {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 6vw 11vh;
  }

  .bp-heroinner h1 {
    font-size: var(--fs-hero-desktop);
    margin-bottom: 24px;
  }

  .bp-heroinner p {
    font-size: var(--fs-lg-desktop);
    max-width: 460px;
    margin-bottom: 38px;
  }

  .bp-hero-cta {
    display: inline-flex;
    width: auto;
    padding: 18px 48px;
  }
}