/* Carril horizontal de proyectos destacados. */
@layer components {
  .featured { padding-block: var(--section-y); overflow: clip; }
  .featured__head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: clamp(1.75rem, 4vw, 3rem);
  }
  .featured__title { font-size: var(--fs-3); max-width: 14em; }

  .rail-controls { display: flex; gap: 0.5rem; }
  .rail-button {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border: 1.5px solid var(--petroleo-hondo);
    border-radius: var(--radius);
    color: var(--petroleo-hondo);
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t-fast);
  }
  .rail-button:hover:not(:disabled) { background: var(--petroleo-hondo); color: var(--blanco); }
  .rail-button:disabled { opacity: 0.35; cursor: default; }

  .rail {
    display: flex;
    gap: 1.25rem;
    margin: 0;
    padding: 0 var(--gutter) 1rem;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: thin;
    scrollbar-color: var(--acero) transparent;
  }
  .rail__item { flex: 0 0 min(82vw, 40rem); scroll-snap-align: start; }

  .feature { display: block; text-decoration: none; }
  .feature__frame { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--concreto); }
  .feature__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale var(--t-slow) var(--ease);
  }
  .feature:hover .feature__img { scale: 1.05; }

  .feature__plate {
    position: absolute;
    left: 0;
    bottom: 0;
    display: grid;
    gap: 0.25rem;
    max-width: min(86%, 26rem);
    padding: 1rem 1.35rem 1.1rem;
    background: color-mix(in srgb, var(--petroleo-hondo) 92%, transparent);
    color: var(--blanco);
    border-top: 3px solid var(--senal);
  }
  .feature__title { font-size: var(--fs-1); font-stretch: 100%; font-weight: 650; line-height: 1.08; letter-spacing: -0.015em; }
  .feature__place { font-size: var(--fs-small); color: var(--acero-claro); }
  .feature__caption {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    margin-top: 0.85rem;
    max-width: 44ch;
    font-size: var(--fs-small);
    color: var(--acero-oscuro);
  }
}