/** RIAEJ — Bloque "Destacados" de portada (sustituye al slider ausente)
 *
 * Criterio del rol UX/UI (ver docs/informe-auditoria.md, sección 3): NO es
 * un carrusel autorrotatorio. En pantallas >=768px los destacados se ven
 * todos a la vez (grid asimétrica: uno principal + secundarios). En
 * móvil, un carril de desplazamiento manual con scroll-snap — sin avance
 * automático en ningún ancho.
 */
@layer components {
  .destacados { position: relative; }

  .destacados__carril {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(85%, 22rem);
    gap: var(--esp-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block-end: var(--esp-2);
    scrollbar-width: none;
  }
  .destacados__carril::-webkit-scrollbar { display: none; }
  .destacados__carril > * { scroll-snap-align: start; }

  @media (width >= 48rem) {
    .destacados__carril {
      grid-auto-flow: initial;
      grid-template-columns: 1.4fr 1fr;
      grid-template-rows: auto auto;
      overflow-x: visible;
    }
    .destacados__item--principal { grid-row: 1 / 3; }
  }

  .destacado {
    position: relative;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 14rem;
    border-radius: var(--radio-lg);
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, var(--riaej-azul-800), var(--riaej-azul-600));
  }
  .destacados__item--principal .destacado { min-height: 20rem; }
  .destacado img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    z-index: 0;
  }
  /* Velo de contraste: garantiza >=4.5:1 del texto sobre CUALQUIER
     fotografía, no solo sobre el degradado de respaldo (fix UX/UI #4). */
  .destacado::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(0deg, rgba(0,27,51,0.92) 0%, rgba(0,27,51,0.55) 55%, rgba(0,27,51,0.15) 100%);
  }
  .destacado__contenido { position: relative; z-index: 2; padding: var(--esp-6); }
  .destacado__etiqueta {
    display: inline-block; font-size: var(--texto-xs); font-weight: var(--peso-semi);
    text-transform: uppercase; letter-spacing: var(--tracking-etiqueta);
    color: var(--riaej-azul-100); margin-block-end: var(--esp-2);
  }
  .destacado__titulo {
    font-family: var(--fuente-display); font-weight: var(--peso-semi);
    font-size: var(--texto-xl); color: #fff; margin: 0;
  }
  .destacados__item--principal .destacado__titulo { font-size: var(--texto-2xl); }

  .destacados__nav {
    display: flex; justify-content: flex-end; gap: var(--esp-2);
    margin-block-start: var(--esp-3);
  }
  @media (width >= 48rem) { .destacados__nav { display: none; } }
}