/*
 * Portada: a un lado, qué es y para quién; al otro, la página de tesis.
 * En el celular se apilan: titular, texto, botón y después la hoja.
 */
@layer components {
  .hero {
    padding-block: var(--space-xl);
    /* Las hojas giradas asoman unos píxeles: que no generen scroll horizontal. */
    overflow-x: hidden; /* respaldo para navegadores sin «clip» */
    overflow-x: clip;
  }

  .hero__inner {
    display: grid;
    align-items: center;
    gap: var(--space-xl);
  }

  .hero__lead {
    max-inline-size: 35rem;
    margin-block-start: var(--space-m);
    color: var(--color-ink-soft);
    font-size: var(--step-1);
    line-height: var(--leading-snug);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s) var(--space-m);
    margin-block-start: var(--space-l);
  }

  .hero__more {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    color: var(--color-ink);
    font-weight: 600;
    text-decoration-color: var(--color-accent-text);
  }

  .hero__contact {
    margin-block-start: var(--space-s);
    color: var(--color-ink-soft);
    font-size: var(--step--1);
  }

  .hero__figure {
    justify-self: center;
    inline-size: 100%;
    max-inline-size: 31rem;
  }

  @media (min-width: 62rem) {
    .hero__inner {
      grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
    }

    .hero__figure {
      justify-self: end;
    }
  }
}