/*
 * Portada editorial compartida.
 *
 * PORTFOLIO es la implementación de referencia. El blog, Contacto y
 * Experiencia usan exactamente la misma geometría y el mismo contrato con el
 * editor visual: una sección de portada, una capa y una única caja de texto.
 */
.portfolio-hero,
.stories-hero,
.contact-hero,
.experience-hero {
  align-items: flex-end;
  background-color: #4a5348;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  display: flex;
  min-height: min(760px, 72vh);
  overflow: hidden;
  padding: 70px max(28px, calc((100% - 1180px) / 2));
  position: relative;
}

.stories-hero {
  min-height: var(--stories-cover-height, min(760px, 72vh));
}

.stories-hero-shade,
.contact-hero-shade,
.experience-hero-shade {
  background: linear-gradient(0deg, rgba(7, 12, 7, 0.58), rgba(7, 12, 7, 0.08));
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.portfolio-hero-content,
.stories-hero-content,
.contact-hero-content,
.experience-hero-content,
.vmf-cover-copy {
  align-items: flex-start;
  color: #fff;
  display: flex;
  flex-direction: column;
  margin: 0;
  max-width: 700px;
  padding: 0;
  position: relative;
  width: min(700px, 100%);
  z-index: 2;
}

.vmf-cover-copy > [data-vmf-cover-text] {
  align-self: stretch;
  box-sizing: border-box;
  text-align: left;
  width: 100%;
}

body .vmf-cover-copy > .vmf-cover-eyebrow {
  color: rgba(255, 255, 255, 0.78) !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  line-height: 1.35 !important;
  margin: 0 0 13px !important;
  text-transform: uppercase !important;
}

body .vmf-cover-copy > .vmf-cover-title {
  color: #fff !important;
  font-family: var(--stories-cover-title-family, var(--site-serif, "Merriweather", Georgia, serif)) !important;
  font-size: clamp(2.5rem, 5vw, 4.8rem) !important;
  font-weight: 300 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.1 !important;
  margin: 0 0 20px !important;
}

body .vmf-cover-copy > .vmf-cover-description {
  color: rgba(255, 255, 255, 0.88) !important;
  font-family: var(--site-sans, "Open Sans", Arial, sans-serif) !important;
  font-size: 1rem !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  max-width: 640px;
  text-transform: none !important;
}

@media (max-width: 767px) {
  .portfolio-hero,
  .stories-hero,
  .contact-hero,
  .experience-hero {
    min-height: calc(72svh - 20px) !important;
    padding: 44px 20px !important;
  }

  .portfolio-hero-content,
  .stories-hero-content,
  .contact-hero-content,
  .experience-hero-content,
  .vmf-cover-copy {
    width: min(700px, 100%);
  }

  body .vmf-cover-copy > .vmf-cover-title {
    font-size: clamp(2.25rem, 10vw, 3.35rem) !important;
  }

  body .vmf-cover-copy > .vmf-cover-description {
    font-size: 0.92rem !important;
    line-height: 1.65 !important;
  }
}