@layer components {
  /* Fila de proyecto: foto 4:3 y ficha breve; alterna lado. */
  .project-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem var(--col-gap);
    padding-block: clamp(1.75rem, 4vw, 3rem);
    border-top: 1px solid var(--acero);
  }
  .project-row__media { display: block; aspect-ratio: 4 / 3; }
  .project-row__body { display: grid; align-content: end; justify-items: start; gap: 0.75rem; }
  .project-row__title { font-size: var(--fs-2); font-stretch: 100%; font-weight: 650; }
  .project-row__link { text-decoration: none; }
  .project-row__link:hover { text-decoration: underline; text-decoration-color: var(--senal); text-decoration-thickness: 3px; text-underline-offset: 0.2em; }
  .project-row__subtitle { color: var(--acero-oscuro); max-width: 40ch; }
  .project-row__meta {
    display: grid;
    gap: 0.15rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
    font-size: var(--fs-small);
    font-weight: 500;
  }

  @media (min-width: 60rem) {
    .project-row { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-block: clamp(2rem, 4vw, 3.5rem); }
    .project-row__media { grid-column: 1 / span 7; }
    .project-row__body { grid-column: 9 / span 4; }
    .project-row--flip .project-row__media { grid-column: 6 / span 7; grid-row: 1; margin-right: calc(var(--gutter) * -1); }
    .project-row--flip .project-row__body { grid-column: 1 / span 4; grid-row: 1; }
    .project-row:not(.project-row--flip) .project-row__media { margin-left: calc(var(--gutter) * -1); }
  }

  /* Seguridad: lista tipográfica, sin fotos. */
  .type-list { margin: 0; padding: 0; list-style: none; }
  .type-list__item {
    display: grid;
    gap: 0.4rem var(--col-gap);
    padding-block: 1.75rem;
    border-top: 1px solid var(--acero);
  }
  .type-list__title { font-size: var(--fs-2); font-stretch: 100%; font-weight: 650; }
  .type-list__place { color: var(--acero-oscuro); font-weight: 500; }
  .type-list__scope { font-weight: 500; }
  @media (min-width: 60rem) {
    .type-list__item { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: baseline; }
    .type-list__title { grid-column: 1 / span 6; }
    .type-list__place { grid-column: 7 / span 3; }
    .type-list__scope { grid-column: 10 / span 3; }
  }

  /* Navegación de categorías, pegada bajo el header. */
  .category-nav {
    position: sticky;
    top: var(--header-h);
    z-index: 40;
    background: var(--cal);
    border-bottom: 1px solid var(--acero);
  }
  .category-nav__list {
    position: relative;
    display: flex;
    gap: 0 clamp(1.25rem, 3vw, 2.5rem);
    margin: 0;
    margin-inline: auto;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
  }
  .category-nav__link {
    position: relative;
    display: block;
    padding-block: 1rem;
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--acero-oscuro);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
  }
  .category-nav__link::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px 0;
    height: 3px;
    background: var(--senal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-base) var(--ease);
  }
  .category-nav__link:hover { color: var(--petroleo-hondo); }
  .category-nav__link[aria-current] { color: var(--petroleo-hondo); font-weight: 650; }
  .category-nav__link[aria-current]::after { transform: scaleX(1); }

  .category { padding-block: clamp(3rem, 7vw, 6rem) 0; }
  .category:last-of-type { padding-bottom: var(--section-y); }
  .category__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); row-gap: 1rem; }
  .category__title { font-size: var(--fs-3); }
  @media (min-width: 60rem) {
    .category__title { grid-column: 1 / span 5; }
    .category__intro { grid-column: 7 / span 6; align-self: end; }
  }

  /* Detalle */
  .detail__head { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(1.75rem, 4vw, 3rem); row-gap: 1rem; }
  .detail__crumb { grid-column: 1 / -1; max-width: none; }
  .back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--petroleo);
    text-decoration: none;
  }
  .detail__title { grid-column: 1 / -1; font-size: var(--fs-4); font-stretch: 100%; max-width: 15em; }
  .detail__subtitle { grid-column: 1 / -1; font-size: var(--fs-1); color: var(--acero-oscuro); max-width: 40ch; }

  .detail__cover { aspect-ratio: 16 / 9; max-height: 78vh; width: 100%; }

  .detail__facts { padding-block: clamp(2rem, 5vw, 4rem); row-gap: 2rem; }
  .facts { margin: 0; }
  .facts__row {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 1rem;
    padding-block: 0.9rem;
    border-top: 1px solid var(--acero);
  }
  .facts__row:last-child { border-bottom: 1px solid var(--acero); }
  .facts dt { font-size: var(--fs-small); font-weight: 500; color: var(--acero-oscuro); }
  .facts dd { margin: 0; font-weight: 500; }
  .facts__scope { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; }
  .detail__description { font-size: var(--fs-1); line-height: 1.4; }
  @media (min-width: 60rem) {
    .facts { grid-column: 1 / span 5; }
    .detail__description { grid-column: 7 / span 6; }
  }

  .gallery { display: grid; gap: var(--col-gap); padding-bottom: clamp(2.5rem, 6vw, 5rem); }
  .gallery__item img { width: 100%; height: auto; }
  @media (min-width: 48rem) {
    .gallery { display: block; columns: 2; column-gap: var(--col-gap); }
    .gallery__item { break-inside: avoid; margin-bottom: var(--col-gap); }
  }

  .pager {
    display: grid;
    border-top: 1px solid var(--acero);
    margin-bottom: var(--section-y);
  }
  .pager__link {
    display: grid;
    gap: 0.5rem;
    padding-block: 1.75rem;
    text-decoration: none;
  }
  .pager__dir { display: inline-flex; align-items: center; gap: 0.75rem; font-size: var(--fs-small); font-weight: 600; color: var(--acero-oscuro); }
  .pager__title { font-size: var(--fs-2); font-stretch: 100%; font-weight: 650; line-height: 1.05; letter-spacing: -0.02em; }
  .pager__link:hover .pager__title { text-decoration: underline; text-decoration-color: var(--senal); text-decoration-thickness: 3px; text-underline-offset: 0.2em; }
  @media (min-width: 48rem) {
    .pager { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
    .pager__link--next { text-align: right; justify-items: end; }
  }
}