/* Whole brand tiles belong to text-led bands, never the artwork's side gutter.
   See Brief K's placement schedule. Narrow screens retain the original layout;
   every reserved slot below is desktop-only. No decoration belongs in the footer. */
.hero::before,
.page-hero::before { display: none; }

@media screen and (min-width: 1000px) {
  /* The index and news heading rows carry in-flow tiles. Flexible title space
     and non-shrinking links keep the forms away from text and focus outlines. */
  .home :is(.document-index, .updates) .section-head {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-block-size: 6.5rem;
  }
  .home :is(.document-index, .updates) .section-head > div { flex: 1; min-inline-size: 0; }
  .home :is(.document-index, .updates) .section-head__link {
    order: 3;
    flex-shrink: 0;
    align-self: flex-end;
  }
  .home .document-index .section-head::before,
  .home .document-index .section-head::after,
  .home .updates .section-head::after {
    content: "";
    display: block;
    position: static;
    pointer-events: none;
    flex: 0 0 auto;
    inline-size: 5rem;
    aspect-ratio: 1;
    border-radius: 0;
    order: 1;
  }
  .home .document-index .section-head::before {
    background-color: var(--cyan);
    -webkit-mask: var(--form-quarter) center / contain no-repeat;
            mask: var(--form-quarter) center / contain no-repeat;
  }
  .home .document-index .section-head::after {
    order: 2;
    background-color: var(--naranja);
    -webkit-mask: var(--form-diamond) center / contain no-repeat;
            mask: var(--form-diamond) center / contain no-repeat;
  }
  .home .updates .section-head::after {
    inline-size: 6.5rem;
    background-color: var(--lavanda);
    -webkit-mask: var(--form-leaf) center / contain no-repeat;
            mask: var(--form-leaf) center / contain no-repeat;
  }

  /* Institutional headings have a reserved end column and enough height for a
     complete tile. Longer text grows the heading; the following prose moves. */
  .institutional-body__content > h2.asidehu-mask-1,
  .institutional-body__content > h2.asidehu-mask-3 {
    position: relative;
    padding-inline-end: 8rem;
    min-block-size: 6rem;
  }
  .institutional-body__content > h2.asidehu-mask-1::after,
  .institutional-body__content > h2.asidehu-mask-3::after {
    content: "";
    display: block;
    position: absolute;
    pointer-events: none;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: 6rem;
    aspect-ratio: 1;
    border-radius: 0;
  }
  .institutional-body__content > h2.asidehu-mask-1::after {
    background-color: var(--naranja);
    -webkit-mask: var(--form-quarter) center / contain no-repeat;
            mask: var(--form-quarter) center / contain no-repeat;
  }
  .institutional-body__content > h2.asidehu-mask-3::after {
    background-color: var(--verde);
    -webkit-mask: var(--form-bow) center / contain no-repeat;
            mask: var(--form-bow) center / contain no-repeat;
  }
}

@media print {
  .home .hero::before,
  .page-hero:has(+ .institutional-body)::before,
  .page-hero--utility:has(+ .utility-section .contacto-content-pattern)::before,
  .home .document-index .section-head::before,
  .home .document-index .section-head::after,
  .home .updates .section-head::after,
  .institutional-body__content > h2.asidehu-mask-1::after,
  .institutional-body__content > h2.asidehu-mask-3::after { display: none !important; }
}