/* Roboto Black para los encabezados de todo el sitio. */
h1, h2, h3 {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 900 !important;
  zoom: .8;
  letter-spacing: .012em !important;
}

h1 span, h2 span, h3 span {
  letter-spacing: .012em !important;
}

/* Evita que el borde del degradado recorte la última letra. */
.hero h1 span,
.about-hero h1 span,
.projects-page-hero h1 .title-gradient,
.lab-page-hero h1 span,
.gallery-page-hero h1 .gallery-title-gradient,
.academic-page-hero h1 .academic-title-gradient {
  padding-right: .1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* En vertical, el collage queda arriba y el bloque de texto descansa abajo. */
@media (orientation: portrait) {
  .hero,
  .about-hero,
  .projects-page-hero,
  .lab-page-hero,
  .gallery-page-hero,
  .academic-page-hero {
    min-height: 0;
    align-items: flex-start;
    padding: calc(50svh + 12px) 7% 34px;
    background-position: center top;
    background-size: auto 50svh;
  }

  .hero {
    background-color: #e9ebef;
  }

  .about-hero,
  .projects-page-hero,
  .lab-page-hero,
  .gallery-page-hero,
  .academic-page-hero {
    background-color: #fff;
  }

  .hero:before {
    background: linear-gradient(180deg, transparent 0%, transparent 34svh, rgba(233, 235, 239, .12) 43svh, rgba(233, 235, 239, .76) 50svh, #e9ebef 58svh);
  }

  .about-hero:before,
  .projects-page-hero:before,
  .lab-page-hero:before,
  .gallery-page-hero:before,
  .academic-page-hero:before {
    background: linear-gradient(180deg, transparent 0%, transparent 34svh, rgba(255, 255, 255, .12) 43svh, rgba(255, 255, 255, .82) 50svh, #fff 58svh);
  }

  .hero-copy,
  .about-hero-copy,
  .projects-hero-copy,
  .lab-page-copy,
  .gallery-hero-copy,
  .academic-hero-copy {
    width: 100%;
    max-width: 600px;
    margin-inline: auto;
  }

  .hero-note {
    display: none;
  }
}

/* En apaisado, cada collage se centra dentro de un área recortada a la derecha. */
@media (orientation: landscape) {
  .hero {
    min-height: max(70svh, 420px);
  }

  .hero,
  .about-hero,
  .projects-page-hero,
  .lab-page-hero,
  .gallery-page-hero,
  .academic-page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-image: none !important;
  }

  .hero::after,
  .about-hero::after,
  .projects-page-hero::after,
  .lab-page-hero::after,
  .gallery-page-hero::after,
  .academic-page-hero::after {
    content: "";
    position: absolute;
    z-index: -2;
    top: 0;
    right: 0;
    bottom: auto;
    left: 25%;
    height: 70svh;
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .12) 10%, #000 32%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .12) 10%, #000 32%, #000 100%);
    pointer-events: none;
  }

  .hero::after { background-image: url('../images/inicio.png'); }
  .about-hero::after { background-image: url('../images/somos.png'); }
  .projects-page-hero::after { background-image: url('../images/proyectos.png'); }
  .lab-page-hero::after { background-image: url('../images/laboratorio.png'); }
  .gallery-page-hero::after { background-image: url('../images/galeria.png'); }
  .academic-page-hero::after { background-image: url('../images/academico.png'); }

  .hero-copy,
  .about-hero-copy,
  .projects-hero-copy,
  .lab-page-copy,
  .gallery-hero-copy,
  .academic-hero-copy {
    position: relative;
    z-index: 1;
  }

  .hero:before {
    background: linear-gradient(90deg, #e9ebef 0%, rgba(233, 235, 239, .96) 20%, rgba(233, 235, 239, .76) 32%, rgba(233, 235, 239, 0) 56%);
  }

  .about-hero:before,
  .projects-page-hero:before,
  .lab-page-hero:before,
  .gallery-page-hero:before,
  .academic-page-hero:before {
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .96) 20%, rgba(255, 255, 255, .76) 32%, rgba(255, 255, 255, 0) 56%);
  }
}