/*
 * SharkAnime — Hoja_Home (home-redesign-clone)
 * ============================================
 *
 * Hoja de la portada. Se encola con el handle `sharkanime-home-clone` al final
 * de la Cadena_Hojas_Home (light-theme, typography, download-cards, home-app),
 * así que gana la cascada por orden de encolado y por especificidad, sin usar
 * ni una sola declaración de prioridad forzada (Req 1.6).
 *
 * Ámbito: la clase `sa-home` se emite en dos niveles y solo en la portada —
 * en el `body` (header.php) y en el `main` (index.php) — de modo que todas las
 * reglas de esta hoja empiezan por `.sa-home`. Las únicas excepciones
 * permitidas son el bloque `:root` de Tokens_Diseno, los selectores interiores
 * de `@keyframes` y las reglas dentro de un `@media`, que llevan el prefijo en
 * su propio selector (Req 1.5).
 *
 * Índice
 *   1. Tokens_Diseno (`:root`)
 *   2. Ámbito de página y contenedor
 *   3. Separación entre bloques de la portada
 *   4. Cabecera (marca, Grupo_Nav en pastilla, acciones circulares)
 *   5. Pie_Clon (cuatro columnas, Enlaces_Sociales, copyright)
 *   6. Breakpoints de la capa base (contenedor, Cabecera y Pie_Clon)
 *   7. Piezas compartidas (encabezados de sección, botones, chips de género)
 *   8. Banner_Destacado
 *   9. Barra_Filtros
 *  10. Seccion_Ultimos (`.sa-grid` y paginación)
 *  11. Tarjeta_Anime
 *  12. Fila_Paneles (`.sa-panels`, Populares, Películas, Géneros)
 *  13. Estado_Vacio y foco visible de la portada
 *  14. Carrusel_Destacado (`.sa-hero-slider`)
 *  15. Breakpoints de los componentes de la portada
 *  16. Movimiento reducido
 *  17. Ganchos de la Capa_Ajax (cuadrícula vacía y cuadrícula ocupada)
 *
 * Retículas por breakpoint (móvil <= 640 px, tablet 641–1023 px, escritorio
 * >= 1024 px): `.sa-grid` 2/3/4 columnas, `.sa-movies` 2/3/4, `.sa-genres`
 * 1/2/2 y `.sa-panels` 1 columna / películas a ancho completo sobre dos
 * columnas iguales / 1 : 2 : 1.
 *
 * @package SharkAnime
 * @since   1.2.0
 */

/* ============================================================
   1. TOKENS_DISENO
   Única regla sin el prefijo `.sa-home` (Req 1.5). La hoja solo se
   encola en la portada, así que estos valores no alcanzan otras vistas.
   ============================================================ */

:root {
  /* Paleta: accent sigue --sa-primary de Theme Studio / SharkMovie */
  --sa-accent:        var(--sa-primary, #1a6ef5);
  --sa-accent-strong: var(--sa-primary-hover, color-mix(in srgb, var(--sa-primary, #1a6ef5) 78%, #000));
  --sa-blue:          #2563eb;   /* secundario de la paleta (Req 2.1) */
  --sa-blue-strong:   #1d4ed8;   /* tinte oscuro del secundario: 6,70:1 con blanco */
  --sa-on-blue:       #ffffff;   /* texto sobre chips azules, contraste 5,17:1 (Req 2.5) */
  --sa-page:          #ffffff;
  --sa-surface:       #ffffff;
  --sa-ink:           #1f2430;
  --sa-ink-soft:      #6b7280;
  --sa-border:        #e2e8f0;
  --sa-on-accent:     #ffffff;

  /* Espaciado */
  --sa-space-1: 4px;
  --sa-space-2: 8px;
  --sa-space-3: 12px;
  --sa-space-4: 16px;
  --sa-space-5: 24px;
  --sa-space-6: 32px;
  --sa-space-7: 48px;

  /* Radios (Req 2.2, 2.3) */
  --sa-radius-card: 20px;
  --sa-radius-pill: 999px;
  --sa-radius-mark: 12px;

  /* Sombras — opacidad <= 0,10 (Req 2.2) */
  --sa-shadow-card:  0 8px 24px rgba(31, 36, 48, 0.07);
  --sa-shadow-hover: 0 12px 28px rgba(31, 36, 48, 0.10);

  /* Retícula */
  --sa-container: 1280px;
  --sa-gap:       24px;   /* Viewport_Escritorio y Viewport_Tablet (Req 2.8, 11.5) */
  --sa-gap-sm:    16px;   /* Viewport_Movil */
  --sa-motion:    200ms;  /* dentro de 150–300 ms (Req 7.10) */
}

/* ============================================================
   2. ÁMBITO DE PÁGINA Y CONTENEDOR
   ============================================================ */

body.sa-home {
  background-color: var(--sa-page);
  color: var(--sa-ink);
}

.sa-home .sa-container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--sa-container);   /* 1280 px (Req 1.2) */
  margin-inline: auto;
  padding-inline: var(--sa-space-5);
}

main.sa-home {
  padding: 0;
}

/* ============================================================
   3. SEPARACIÓN ENTRE BLOQUES DE LA PORTADA
   24 px en escritorio y tablet, 16 px en móvil (Req 2.8).
   ============================================================ */

.sa-home .sa-home__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--sa-gap);
  padding-block: var(--sa-gap) var(--sa-space-7);
}

/* ============================================================
   4. CABECERA
   El marcado de header.php no cambia: aquí solo se estila (Req 3.7).
   ============================================================ */

/* ============================================================
   4. CABECERA
   Misma lectura visual que light-theme / ficha de anime:
   barra plana, nav sin pastilla, iconos de acento, acciones mínimas.
   ============================================================ */

.sa-home .sa-header {
  background-color: var(--sa-header-bg, var(--sa-surface, #ffffff));
  border-bottom: 1px solid color-mix(in srgb, var(--sa-header-text, #334155) 14%, transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--sa-header-text, #334155) 10%, transparent);
}

.sa-home .sa-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sa-space-4);
  min-height: 68px;
}

/* ── 4.1 Marca: cuadrado de 36 px, radio 12 px, fondo de acento (Req 3.1) ── */

.sa-home .sa-header__logo {
  justify-self: start;
  min-width: 0;
}

.sa-home .sa-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sa-space-3);
  text-decoration: none;
  color: var(--sa-ink);
}

.sa-home .sa-logo__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--sa-radius-mark);
  background: var(--sa-accent);
  color: var(--sa-accent);          /* el glifo hereda el acento; el tiburón queda en blanco */
  overflow: hidden;
}

.sa-home .sa-logo__icon svg {
  width: 26px;
  height: 26px;
}

.sa-home .sa-logo__text {
  font-weight: 800;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sa-ink);
}

.sa-home .sa-header__logo .custom-logo-link {
  display: inline-flex;
  align-items: center;
}

.sa-home .sa-header__logo .custom-logo {
  height: 36px;
  width: auto;
  border-radius: var(--sa-radius-mark);
}

/* ── 4.2 Grupo_Nav: fila plana centrada (como en ficha de anime) ── */

.sa-home .sa-nav {
  display: flex;
  justify-self: center;
  align-items: center;
  min-width: 0;
  background: transparent;
}

.sa-home .sa-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--sa-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.sa-home .sa-nav__menu li {
  margin: 0;
  padding: 0;
}

.sa-home .sa-nav__menu li a {
  display: inline-flex;
  align-items: center;
  gap: var(--sa-space-2);
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--sa-radius-pill);
  background: transparent;
  color: var(--sa-nav-text, var(--sa-ink-soft, #64748b));
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--sa-motion), color var(--sa-motion);
}

/* Iconos siempre en acento (como light-theme en ficha), no currentColor gris */
.sa-home .sa-nav__menu li a .sa-nav__icon {
  flex: 0 0 auto;
  color: var(--sa-accent, var(--sa-primary, #2563eb));
}

.sa-home .sa-nav__menu li a:hover,
.sa-home .sa-nav__menu li a:focus-visible {
  background: var(--sa-primary-alpha-12, rgba(37, 99, 235, 0.12));
  color: var(--sa-ink, #1f2430);
}

.sa-home .sa-nav__menu li a:hover .sa-nav__icon,
.sa-home .sa-nav__menu li a:focus-visible .sa-nav__icon {
  color: var(--sa-accent, var(--sa-primary, #2563eb));
}

/* Activo: tinte suave + texto oscuro (no pastilla sólida blanca sobre azul) */
.sa-home .sa-nav__menu li.current-menu-item > a,
.sa-home .sa-nav__menu li a[aria-current="page"] {
  background: var(--sa-primary-alpha-12, rgba(37, 99, 235, 0.12));
  color: var(--sa-ink, #1f2430);
}

.sa-home .sa-nav__menu li.current-menu-item > a .sa-nav__icon,
.sa-home .sa-nav__menu li a[aria-current="page"] .sa-nav__icon {
  color: var(--sa-accent, var(--sa-primary, #2563eb));
}

.sa-home .sa-nav__menu li.current-menu-item > a:hover,
.sa-home .sa-nav__menu li a[aria-current="page"]:hover {
  background: var(--sa-primary-alpha-12, rgba(37, 99, 235, 0.12));
  color: var(--sa-ink, #1f2430);
}

.sa-home .sa-nav__menu li.current-menu-item > a::after {
  display: none;
}

/* ── 4.3 Acciones: iconos mínimos sin círculo gris ── */

.sa-home .sa-header__actions {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: var(--sa-space-2);
}

.sa-home .sa-header__search-btn,
.sa-home .sa-header__account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border: 0;
  border-radius: var(--sa-radius-pill);
  background: transparent;
  color: var(--sa-header-text, var(--sa-ink, #334155));
  cursor: pointer;
  text-decoration: none;
  transition: background var(--sa-motion), color var(--sa-motion);
}

.sa-home .sa-header__search-btn:hover,
.sa-home .sa-header__account-btn:hover {
  background: var(--sa-primary-alpha-10, rgba(37, 99, 235, 0.10));
  color: var(--sa-primary, var(--sa-accent));
}

.sa-home .sa-nav-toggle {
  display: none;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-direction: column;
  padding: 0;
  border: 0;
  border-radius: var(--sa-radius-pill);
  background: transparent;
  cursor: pointer;
}

.sa-home .sa-nav-toggle__bar {
  width: 18px;
  height: 2px;
  border-radius: var(--sa-radius-pill);
  background: var(--sa-ink);
}

/* Foco visible en todos los controles de la Cabecera (Req 15.6) */
.sa-home .sa-logo:focus-visible,
.sa-home .sa-nav__menu li a:focus-visible,
.sa-home .sa-header__search-btn:focus-visible,
.sa-home .sa-header__account-btn:focus-visible,
.sa-home .sa-nav-toggle:focus-visible {
  outline: 2px solid var(--sa-accent);
  outline-offset: 2px;
}

/* ============================================================
   5. PIE_CLON
   Fondo tintado, esquinas superiores redondeadas y cuatro columnas.
   ============================================================ */

.sa-home .sa-footer--clone {
  margin-top: var(--sa-space-6);
  padding-block: var(--sa-space-7) var(--sa-space-5);
  border-top: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-card) var(--sa-radius-card) 0 0;
  background-color: var(--sa-page);
  color: var(--sa-ink-soft);
}

.sa-home .sa-footer--clone .sa-footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sa-gap);
  align-items: start;
}

.sa-home .sa-footer__col {
  min-width: 0;
}

/* ── 5.1 Columna de marca ── */

.sa-home .sa-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sa-space-3);
  margin-bottom: var(--sa-space-3);
  text-decoration: none;
  color: var(--sa-ink);
}

.sa-home .sa-footer__logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--sa-radius-mark);
  background: var(--sa-accent);
  color: var(--sa-accent);
  overflow: hidden;
}

.sa-home .sa-footer__logo-icon svg {
  width: 26px;
  height: 26px;
}

.sa-home .sa-footer__logo-img {
  height: 36px;
  width: auto;
  border-radius: var(--sa-radius-mark);
}

.sa-home .sa-footer__logo-text {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sa-ink);
}

.sa-home .sa-footer__tagline {
  margin: 0 0 var(--sa-space-4);
  max-width: 38ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sa-ink-soft);
}

/* ── 5.2 Enlaces_Sociales: botones circulares (Req 2.3, 12.9) ── */

.sa-home .sa-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sa-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sa-home .sa-footer__social-item {
  margin: 0;
}

.sa-home .sa-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-pill);
  background: var(--sa-surface);
  color: var(--sa-ink-soft);
  text-decoration: none;
  transition: background var(--sa-motion), color var(--sa-motion), border-color var(--sa-motion);
}

.sa-home .sa-social:hover {
  background: var(--sa-accent);
  border-color: var(--sa-accent);
  color: var(--sa-on-accent);
}

.sa-home .sa-social__icon {
  flex: 0 0 auto;
}

/* ── 5.3 Columnas de enlaces ── */

.sa-home .sa-footer__title {
  margin: 0 0 var(--sa-space-3);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sa-ink);
}

.sa-home .sa-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--sa-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sa-home .sa-footer__links li {
  margin: 0;
}

.sa-home .sa-footer__links a,
.sa-home .sa-footer__links span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 14px;
  line-height: 1.5;
  color: #000000;
  text-decoration: none;
  transition: color var(--sa-motion);
}

.sa-home .sa-footer__links a:hover {
  color: var(--sa-accent);
}

.sa-home .sa-footer__notice {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #000000;
}

/* ── 5.4 Copyright centrado (Req 12.11) ── */

.sa-home .sa-footer__copyright {
  margin: var(--sa-space-6) 0 0;
  padding-top: var(--sa-space-4);
  border-top: 1px solid var(--sa-border);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  color: var(--sa-ink-soft);
}

.sa-home .sa-footer--clone a:focus-visible {
  outline: 2px solid var(--sa-accent);
  outline-offset: 2px;
}

/* ============================================================
   6. BREAKPOINTS DE ESTA CAPA
   Tres condiciones de disposición: móvil (<= 640 px), tablet
   (641–1023 px) y escritorio (>= 1024 px). Las reglas llevan el
   prefijo `.sa-home` en su propio selector (Req 1.5).
   ============================================================ */

/* ── 6.1 Viewport_Tablet ── */
@media (min-width: 641px) and (max-width: 1023px) {

  .sa-home .sa-container {
    padding-inline: var(--sa-space-5);
  }

  .sa-home .sa-home__inner {
    row-gap: var(--sa-gap);
  }

  /* El Grupo_Nav sigue visible por encima de Viewport_Movil (Req 3.6). */
  .sa-home .sa-nav {
    display: flex;
  }

  .sa-home .sa-nav-toggle {
    display: none;
  }

  .sa-home .sa-footer--clone .sa-footer__cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ── 6.2 Viewport_Escritorio ── */
@media (min-width: 1024px) {

  .sa-home .sa-container {
    max-width: var(--sa-container);
    margin-inline: auto;
  }

  .sa-home .sa-home__inner {
    row-gap: var(--sa-gap);
  }

  .sa-home .sa-nav {
    display: flex;
  }

  .sa-home .sa-nav-toggle {
    display: none;
  }

  .sa-home .sa-footer--clone .sa-footer__cols {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ── 6.3 Viewport_Movil ── */
@media (max-width: 640px) {

  .sa-home .sa-container {
    padding-inline: var(--sa-space-4);
  }

  .sa-home .sa-home__inner {
    row-gap: var(--sa-gap-sm);
    padding-block: var(--sa-gap-sm) var(--sa-space-6);
  }

  .sa-home .sa-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sa-space-2);
  }

  /* Grupo_Nav fuera del flujo y del orden de tabulación con `display: none`
     (nunca con `visibility` ni `opacity`); el hamburguesa toma su lugar
     y conserva la apertura del menú existente (Req 3.6). */
  .sa-home .sa-nav {
    display: none;
  }

  .sa-home .sa-nav.is-open {
    display: block;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 60;
    padding: var(--sa-space-3);
    background: var(--sa-surface);
    border-bottom: 1px solid var(--sa-border);
    box-shadow: var(--sa-shadow-card);
  }

  .sa-home .sa-nav.is-open .sa-nav__menu {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--sa-radius-card);
  }

  .sa-home .sa-nav.is-open .sa-nav__menu li a {
    width: 100%;
    justify-content: flex-start;
  }

  .sa-home .sa-nav-toggle {
    display: inline-flex;
  }

  .sa-home .sa-logo__text {
    font-size: 16px;
  }

  /* Pie_Clon apilado en una sola columna, en el orden del criterio 12.1
     (el orden del DOM ya es el pedido, así que no hace falta `order`). */
  .sa-home .sa-footer--clone .sa-footer__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sa-gap-sm);
  }

  .sa-home .sa-footer--clone {
    padding-block: var(--sa-space-6) var(--sa-space-4);
  }

  .sa-home .sa-footer__copyright {
    margin-top: var(--sa-space-5);
  }
}
/* ============================================================
   7. PIEZAS COMPARTIDAS
   Encabezado de sección, botones y chips de género que reutilizan
   la Seccion_Ultimos y los tres paneles de la Fila_Paneles.
   ============================================================ */

/* ── 7.1 Encabezado de sección: título con icono a la izquierda y acción
   alineada al extremo derecho de la misma fila (Req 6.1, 8.1, 9.1, 10.1) ── */

.sa-home .sa-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sa-space-3);
  min-width: 0;
  margin: 0 0 var(--sa-space-4);
}

/* El título del encabezado es un `h2` y `inc/theme-options.php` inyecta en
   `wp_head` (prioridad 999) `.sa-section-head__title { font-size:
   var(--sa-fs-2xl) }` con prioridad forzada, que ninguna especificidad puede
   ganar. La salida se corrige por el otro extremo: se redefine el token en el
   propio encabezado, porque una custom property se resuelve con el valor
   heredado del ancestro más cercano que la declare y la declaración de `:root`
   —forzada o no— queda por debajo de esta. Así la regla inyectada sigue
   aplicándose, pero resuelve los 19 px de la maqueta. El `font-size` de abajo
   es la reserva para cuando ese bloque no está presente. */
.sa-home .sa-section-head {
  --sa-fs-2xl: 19px;
}

.sa-home .sa-section-head__title {
  display: inline-flex;
  align-items: center;
  gap: var(--sa-space-2);
  min-width: 0;
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--sa-ink);
}

.sa-home .sa-section-head__icon {
  flex: 0 0 auto;
  color: var(--sa-accent);
}

/* ── 7.2 Botones (Req 2.3, 2.4, 15.6: área de activación >= 40 px) ── */

.sa-home .sa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sa-space-2);
  box-sizing: border-box;
  min-width: 40px;
  min-height: 44px;
  padding: 0 var(--sa-space-5);
  border: 1px solid transparent;
  border-radius: var(--sa-radius-pill);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--sa-motion), color var(--sa-motion),
    border-color var(--sa-motion), box-shadow var(--sa-motion);
}

.sa-home .sa-btn__icon {
  flex: 0 0 auto;
}

/* Primario: fondo de acento y texto con contraste >= 4,5:1 (Req 2.4) */
.sa-home .sa-btn--primary {
  background: var(--sa-accent);
  border-color: var(--sa-accent);
  color: var(--sa-on-accent);
}

.sa-home .sa-btn--primary:hover {
  background: var(--sa-accent-strong);
  border-color: var(--sa-accent-strong);
  color: var(--sa-on-accent);
}

/* Delineado: "Ver detalles" del Banner_Destacado (Req 4.6) */
.sa-home .sa-btn--outline {
  background: var(--sa-surface);
  border-color: var(--sa-border);
  color: var(--sa-ink);
}

/* El texto pequeño en color de acento usa el tinte fuerte del mismo acento:
   `--sa-accent-strong` alcanza 5,67:1 sobre superficie y `--sa-accent` se
   queda en 4,11:1, por debajo del umbral de texto normal (Req 15.7). */
.sa-home .sa-btn--outline:hover {
  background: var(--sa-page);
  border-color: var(--sa-accent);
  color: var(--sa-accent-strong);
}

/* Delineado compacto: "Ver todo" de la Seccion_Ultimos (Req 2.3, 6.1) */
.sa-home .sa-btn--ghost {
  min-height: 40px;
  padding: 0 var(--sa-space-4);
  background: var(--sa-surface);
  border-color: var(--sa-border);
  color: var(--sa-ink-soft);
  font-size: 13px;
}

.sa-home .sa-btn--ghost:hover {
  background: var(--sa-page);
  border-color: var(--sa-accent);
  color: var(--sa-accent-strong);
}

/* Enlace de acción de los paneles: "Ver todos", "Ver todas" y "Ver todo".
   Va después de `.sa-btn--ghost` porque el Panel_Peliculas comparte las dos
   clases y aquí manda el color de acento. */
.sa-home .sa-section-head__link,
.sa-home .sa-panel__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sa-space-1);
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 40px;
  min-height: 40px;
  padding: 0 var(--sa-space-2);
  border: 0;
  background: transparent;
  color: var(--sa-accent-strong);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--sa-motion);
}

.sa-home .sa-section-head__link:hover,
.sa-home .sa-panel__more:hover {
  background: transparent;
  color: var(--sa-accent-strong);
  text-decoration: underline;
}

.sa-home .sa-section-head__arrow,
.sa-home .sa-panel__more-icon {
  flex: 0 0 auto;
}

/* ── 7.3 Chips de género: pastilla azul con texto blanco, contraste 5,17:1
   (Req 2.3, 2.5, 7.5) ── */

.sa-home .sa-card__genre-tag,
.sa-home .sa-movie__genre-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px var(--sa-space-2);
  border: 0;
  border-radius: var(--sa-radius-pill);
  background: var(--sa-blue);
  color: var(--sa-on-blue);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sa-home .sa-rank__genre {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px var(--sa-space-2);
  border: 0;
  border-radius: var(--sa-radius-pill);
  background: var(--sa-rank-genre-bg, var(--sa-blue));
  color: var(--sa-rank-genre-text, var(--sa-on-blue));
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Linea_Meta compartida */
.sa-home .sa-card__meta,
.sa-home .sa-movie__meta,
.sa-home .sa-rank__meta {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sa-ink-soft);
}

/* ============================================================
   8. BANNER_DESTACADO
   Dos columnas: texto a la izquierda y arte pegado al borde derecho
   de la tarjeta, fundido con el fondo por un degradado de 160 px
   (Req 4.7, 4.8).
   ============================================================ */

.sa-home .sa-hero-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 300px;                 /* dentro de 280–340 px (Req 4.8) */
  margin: 0;
  padding: 0;
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-card);
  background: var(--sa-surface);
  box-shadow: var(--sa-shadow-card);
  overflow: hidden;
}

.sa-home .sa-hero-banner__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sa-space-3);
  position: relative;
  z-index: 3;
  min-width: 0;
  padding: var(--sa-space-6);
}

.sa-home .sa-hero-banner__badge {
  display: inline-flex;
  align-items: center;
  padding: 6px var(--sa-space-3);
  border-radius: var(--sa-radius-pill);
  background: var(--sa-accent);
  color: var(--sa-on-accent);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Título a 2 líneas con elipsis (Req 4.4) */
.sa-home .sa-hero-banner__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--sa-ink);
}

/* Subtítulo en el color de acento (Req 4.2), en su tinte fuerte para que el
   texto de 14 px supere 4,5:1 sobre la superficie de la tarjeta (Req 15.7). */
.sa-home .sa-hero-banner__subtitle {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--sa-accent-strong);
}

/* Sinopsis limitada visualmente a 2 líneas (Req 4.4) */
.sa-home .sa-hero-banner__synopsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 52ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--sa-ink-soft);
}

.sa-home .sa-hero-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sa-space-3);
  margin-top: var(--sa-space-1);
}

/* Arte a la derecha, a sangre con el borde de la tarjeta (Req 4.7) */
.sa-home .sa-hero-banner__art {
  position: relative;
  align-self: stretch;
  min-width: 0;
  overflow: hidden;
  background: linear-gradient(160deg, var(--sa-blue), var(--sa-blue-strong));
}

/* Degradado de fundido de 160 px (>= 120 px) hacia el fondo de la tarjeta */
.sa-home .sa-hero-banner__art::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 160px;
  background-image: linear-gradient(to right, var(--sa-surface), transparent);
  pointer-events: none;
}

.sa-home .sa-hero-banner__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.sa-home .sa-hero-banner__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--sa-border), var(--sa-blue));
  color: var(--sa-surface);
}

.sa-home .sa-hero-banner__placeholder-icon {
  flex: 0 0 auto;
  opacity: 0.85;
}

/* ============================================================
   9. BARRA_FILTROS
   Cinco controles en una fila, etiqueta sobre su control y alineada
   a su borde izquierdo (Req 5.1, 5.2). El botón "Aplicar" cierra la
   fila y `home-filters.js` lo oculta cuando el script está activo.
   ============================================================ */

.sa-home .sa-filter-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto;
  align-items: end;
  gap: var(--sa-space-4);
  margin: 0;
  padding: var(--sa-space-4) var(--sa-space-5);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-card);
  background: var(--sa-surface);
  box-shadow: var(--sa-shadow-card);
}

.sa-home .sa-filter-bar__group,
.sa-home .sa-filter-bar__sort {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sa-space-2);
  min-width: 0;
  margin: 0;
}

/* Etiqueta con un único icono a la izquierda del texto y sin sangrado
   respecto al control que la sigue (Req 5.1, 5.2) */
.sa-home .sa-filter-bar__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sa-space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: #000000;
}

.sa-home .sa-filter-bar__icon {
  flex: 0 0 auto;
  color: var(--sa-accent);
}

.sa-home .sa-filter-bar__label-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Control con área de activación de 42 px de alto (Req 15.6) */
.sa-home .sa-filter-bar__select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 42px;
  min-height: 42px;
  padding: 0 var(--sa-space-6) 0 var(--sa-space-3);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-pill);
  background-color: var(--sa-page);
  background-image: none;
  color: var(--sa-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--sa-motion), background-color var(--sa-motion);
}

.sa-home .sa-filter-bar__select:hover {
  border-color: var(--sa-accent);
}

.sa-home .sa-filter-bar__select:disabled {
  color: var(--sa-ink-soft);
  cursor: default;
}

/* Cursor del `select`, dibujado sin imágenes para no fijar ningún color
   literal fuera de los Tokens_Diseno. */
.sa-home .sa-filter-bar__group::after,
.sa-home .sa-filter-bar__sort::after {
  content: "";
  position: absolute;
  right: var(--sa-space-4);
  bottom: 17px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--sa-ink-soft);
  border-bottom: 2px solid var(--sa-ink-soft);
  transform: rotate(45deg);
  pointer-events: none;
}

.sa-home .sa-filter-bar__select--sort {
  min-width: 160px;
}

.sa-home .sa-filter-bar__submit {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: end;
  min-width: 40px;
  min-height: 42px;
  padding: 0 var(--sa-space-5);
  border: 1px solid var(--sa-accent);
  border-radius: var(--sa-radius-pill);
  background: var(--sa-accent);
  color: var(--sa-on-accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background var(--sa-motion), border-color var(--sa-motion);
}

.sa-home .sa-filter-bar__submit:hover {
  background: var(--sa-accent-strong);
  border-color: var(--sa-accent-strong);
}

/* `home-filters.js` marca el botón con el atributo `hidden` cuando el envío
   pasa a ser automático: el `display` de arriba no debe reactivarlo. */
.sa-home .sa-filter-bar__submit[hidden] {
  display: none;
}

/* ============================================================
   10. SECCION_ULTIMOS
   Cuadrícula de 6 columnas idénticas en escritorio y
   paginación en pastillas.
   ============================================================ */

.sa-home .sa-latest {
  min-width: 0;
}

.sa-home .sa-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sa-gap);
  margin: 0;
}

.sa-home .sa-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sa-space-2);
  margin: var(--sa-space-5) 0 0;
  padding: 0;
  border: 0;
}

.sa-home .sa-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 40px;
  min-height: 40px;
  padding: 0 var(--sa-space-3);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-pill);
  background: var(--sa-surface);
  color: var(--sa-ink-soft);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background var(--sa-motion), color var(--sa-motion), border-color var(--sa-motion);
}

.sa-home .sa-pagination .page-numbers:hover {
  background: var(--sa-page);
  border-color: var(--sa-accent);
  color: var(--sa-accent-strong);
}

.sa-home .sa-pagination .page-numbers.current {
  background: var(--sa-accent);
  border-color: var(--sa-accent);
  color: var(--sa-on-accent);
  box-shadow: none;
}

/* ============================================================
   11. TARJETA_ANIME
   Póster 2:3 con esquinas superiores de 20 px, badge de estado sobre
   la esquina superior izquierda, título a 2 líneas, chips, Linea_Meta
   y botón "Descargar" a todo el ancho interior (Req 7.1–7.10).
   ============================================================ */

.sa-home .sa-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  padding: 0 0 var(--sa-space-3);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-card);
  background: var(--sa-surface);
  box-shadow: var(--sa-shadow-card);
  overflow: hidden;                 /* el hover no sale de la tarjeta (Req 7.10) */
  transition: transform var(--sa-motion), box-shadow var(--sa-motion), border-color var(--sa-motion);
}

/* Resaltado de 200 ms, dentro del margen de 150–300 ms (Req 7.10) */
.sa-home .sa-card:hover {
  transform: translateY(-2px);
  border-color: var(--sa-blue);
  box-shadow: var(--sa-shadow-hover);
}

.sa-home .sa-card__link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* Póster con relación 2:3 y esquinas superiores de 20 px (Req 7.2) */
.sa-home .sa-card__poster {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: var(--sa-radius-card) var(--sa-radius-card) 0 0;
  background: linear-gradient(160deg, var(--sa-blue), var(--sa-blue-strong));
  overflow: hidden;
}

.sa-home .sa-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sa-motion);
}

.sa-home .sa-card:hover .sa-card__img {
  transform: scale(1.04);
}

/* Reserva sin imagen: misma relación 2:3, mismo radio e indicador visual
   de ausencia de imagen (Req 7.7) */
.sa-home .sa-card__img-placeholder {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, var(--sa-border), var(--sa-blue));
}

.sa-home .sa-card__img-placeholder::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--sa-surface);
  border-radius: 6px;
  opacity: 0.8;
}

/* Badge de estado sobre la esquina superior izquierda del póster (Req 7.3) */
.sa-home .sa-card__status-badge {
  position: absolute;
  top: var(--sa-space-2);
  left: var(--sa-space-2);
  z-index: 2;
  padding: 5px var(--sa-space-2);
  border-radius: var(--sa-radius-pill);
  background: var(--sa-rank-genre-bg, var(--sa-blue));
  color: var(--sa-rank-genre-text, var(--sa-on-blue));
  box-shadow: none;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Finalizado: acento con texto de contraste >= 4,5:1 (Req 2.4, 7.3) */
.sa-home .sa-card__status-badge--finished {
  background: var(--sa-accent);
  color: var(--sa-on-accent);
  box-shadow: none;
}

/* Resto de estados: azul secundario con texto blanco, 5,17:1 (Req 2.5, 7.3) */
.sa-home .sa-card__status-badge--airing {
  background: var(--sa-blue);
  color: var(--sa-on-blue);
}

.sa-home .sa-card__info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--sa-space-2);
  min-width: 0;
  padding: var(--sa-space-3) var(--sa-space-3) var(--sa-space-2);
}

/* Título a 2 líneas con elipsis; el nombre accesible completo lo aporta el
   atributo `title` del enlace (Req 7.4) */
.sa-home .sa-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--sa-ink);
  transition: color var(--sa-motion);
}

.sa-home .sa-card:hover .sa-card__title {
  color: var(--sa-accent-strong);
}

.sa-home .sa-card__genres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sa-space-1);
  min-width: 0;
}

/* Botón "Descargar": hermano del enlace principal, ocupa el ancho interior
   completo de la tarjeta y mantiene un área de activación de 40 px
   (Req 7.6, 15.6) */
.sa-home .sa-card__btn-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  gap: var(--sa-space-2);
  box-sizing: border-box;
  width: auto;
  min-height: 40px;
  height: auto;
  margin: auto var(--sa-space-3) 0;
  padding: 0 var(--sa-space-3);
  border: 0;
  border-radius: var(--sa-radius-pill);
  background: var(--sa-accent);
  color: var(--sa-on-accent);
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background var(--sa-motion);
}

.sa-home .sa-card__btn-download:hover,
.sa-home .sa-card:hover .sa-card__btn-download {
  background: var(--sa-accent-strong);
  box-shadow: none;
}

/* ============================================================
   12. FILA_PANELES
   Retícula 1 : 2 : 1 con paneles de igual altura y `min-width: 0`
   para que ningún contenido desborde su columna (Req 11.1, 11.2, 11.6).
   ============================================================ */

.sa-home .sa-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--sa-gap);
}

.sa-home .sa-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  padding: var(--sa-space-5);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-card);
  background: var(--sa-surface);
  box-shadow: var(--sa-shadow-card);
}

/* ── 12.1 Panel_Populares ──
   El panel vive en la columna estrecha de la Fila_Paneles (1 : 2 : 1), así que
   a 1280 px de contenedor le quedan ~296 px de ancho y ~248 px de caja
   interior. Con la retícula original (22 px + 44 px + texto + 40 px y tres
   huecos de 12 px) el bloque de texto se quedaba en ~90 px y recortaba tanto
   los chips ("COMEDI") como el título ("Ghost C…"). Aquí se recuperan ~24 px
   para el texto reduciendo el hueco del número y de la miniatura, y los chips
   pasan a envolverse en vez de recortarse.

   Tamaños tipográficos: el título de fila es un `h3` y `inc/theme-options.php`
   inyecta en `wp_head` (prioridad 999) `h3 { font-size: var(--sa-fs-xl) }` con
   prioridad forzada, que por defecto vale el tamaño de los H3 del tema y hace
   que los títulos salgan enormes. Ninguna especificidad gana a una declaración
   forzada, así que se corrige por el token: se redefine `--sa-fs-xl` en el
   ámbito del panel y la regla inyectada resuelve los 14 px de la maqueta. El
   `font-size: 14px` de `.sa-rank__title` sigue siendo la reserva para cuando
   ese bloque no está presente. El título del panel se resuelve igual en la
   sección 7.1 con `--sa-fs-2xl`. */

.sa-home .sa-panel--popular {
  --sa-fs-xl: 14px;   /* título de fila (`h3.sa-rank__title`) */
}

.sa-home .sa-rank {
  display: flex;
  flex-direction: column;
  gap: var(--sa-space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

/* Retícula comprimida: 18 px de número, 36 px de miniatura, texto flexible y
   el botón de descarga. Con huecos de 8 px el bloque de texto gana ~24 px
   respecto a la versión de 22 px + 44 px con huecos de 12 px. */
.sa-home .sa-rank__item {
  display: grid;
  grid-template-columns: 18px 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sa-space-2);
  min-width: 0;
  margin: 0;
  padding: var(--sa-space-1) var(--sa-space-2);
  border-radius: var(--sa-radius-mark);
  transition: background var(--sa-motion);
}

.sa-home .sa-rank__item:hover {
  background: var(--sa-page);
}

/* Número de posición: 15 px en una columna de 18 px, con el tinte fuerte del
   acento para superar 4,5:1 sobre la superficie del panel (Req 15.7). */
.sa-home .sa-rank__pos {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  color: var(--sa-accent-strong);
}

.sa-home .sa-rank__thumb {
  position: relative;
  width: 36px;
  aspect-ratio: 2 / 3;
  border-radius: var(--sa-radius-mark);
  background: linear-gradient(160deg, var(--sa-blue), var(--sa-blue-strong));
  overflow: hidden;
}

.sa-home .sa-rank__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sa-home .sa-rank__img--placeholder {
  background: linear-gradient(160deg, var(--sa-border), var(--sa-blue));
}

.sa-home .sa-rank__body {
  display: flex;
  flex-direction: column;
  gap: var(--sa-space-1);
  min-width: 0;
}

/* Título de la fila a 1 línea con elipsis (Req 8.6, 11.6). Se queda en una
   línea por requisito: lo que se amplía es el ancho disponible, no el número
   de líneas. */
.sa-home .sa-rank__title {
  min-width: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--sa-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sa-home .sa-rank__link {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--sa-motion);
}

.sa-home .sa-rank__link:hover {
  color: var(--sa-accent-strong);
}

/* El recorte de los chips venía de aquí: `overflow: hidden` sobre una fila que
   no cabía en la columna estrecha cortaba el segundo chip por la mitad
   ("COMEDI", "ROMANI"). Con `flex-wrap: wrap` el segundo chip baja a una
   segunda línea y el contenido deja de desbordar, sin tocar el marcado. */
.sa-home .sa-rank__genres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sa-space-1);
  min-width: 0;
}

/* Chips del Panel_Populares: fondo azul del token con texto blanco centrado,
   y algo más compactos que los de la tarjeta para que quepan dos por fila
   cuando la columna lo permite. */
.sa-home .sa-rank__genre {
  justify-content: center;
  max-width: 100%;
  padding: 2px 6px;
  background: var(--sa-blue);
  color: var(--sa-on-blue);
  font-size: 10px;
  letter-spacing: 0.02em;
  text-align: center;
}

/* Linea_Meta del panel: 11 px, por debajo del `font-size` que la hoja de
   opciones aplica a `p` (sin prioridad forzada, así que esta regla gana). */
.sa-home .sa-rank__meta {
  font-size: 11px;
}

/* Botón circular de descarga con área de 40 px (Req 8.4, 15.6) */
.sa-home .sa-rank__dl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border: 0;
  border-radius: var(--sa-radius-pill);
  background: var(--sa-accent);
  color: var(--sa-on-accent);
  text-decoration: none;
  transition: background var(--sa-motion);
}

.sa-home .sa-rank__dl:hover {
  background: var(--sa-accent-strong);
  color: var(--sa-on-accent);
}

.sa-home .sa-rank__dl-icon {
  flex: 0 0 auto;
}

/* ── 12.2 Panel_Peliculas: 4 columnas idénticas en escritorio (Req 9.6) ── */

.sa-home .sa-movies {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sa-space-4);
  min-width: 0;
}

.sa-home .sa-movie {
  display: flex;
  flex-direction: column;
  gap: var(--sa-space-2);
  min-width: 0;
}

.sa-home .sa-movie__poster {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: var(--sa-radius-mark);
  background: linear-gradient(160deg, var(--sa-blue), var(--sa-blue-strong));
  overflow: hidden;
}

.sa-home .sa-movie__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sa-motion);
}

.sa-home .sa-movie__poster:hover .sa-movie__img {
  transform: scale(1.04);
}

.sa-home .sa-movie__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--sa-border), var(--sa-blue));
  color: var(--sa-surface);
}

.sa-home .sa-movie__placeholder-icon {
  flex: 0 0 auto;
  opacity: 0.85;
}

.sa-home .sa-movie__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--sa-ink);
}

.sa-home .sa-movie__title-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--sa-motion);
}

.sa-home .sa-movie__title-link:hover {
  color: var(--sa-accent-strong);
}

.sa-home .sa-movie__genres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sa-space-1);
  min-width: 0;
}

/* ── 12.3 Panel_Generos: 2 columnas idénticas en escritorio (Req 10.6) ── */

.sa-home .sa-genres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sa-space-1) var(--sa-space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sa-home .sa-genres__item {
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* Fila con cuadrado de color, nombre y recuento al extremo derecho, y un
   área de activación de 40 px (Req 10.3, 15.6) */
.sa-home .sa-genres__row {
  display: flex;
  align-items: center;
  gap: var(--sa-space-2);
  box-sizing: border-box;
  min-width: 0;
  min-height: 40px;
  padding: 0 var(--sa-space-2);
  border-radius: var(--sa-radius-mark);
  color: var(--sa-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background var(--sa-motion), color var(--sa-motion);
}

.sa-home .sa-genres__row:hover {
  background: var(--sa-page);
  color: var(--sa-accent-strong);
}

.sa-home .sa-genres__dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--sa-blue);
}

.sa-home .sa-genres__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sa-home .sa-genres__count {
  flex: 0 0 auto;
  margin-inline-start: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--sa-ink-soft);
}

/* ============================================================
   13. ESTADO_VACIO Y FOCO VISIBLE
   Los selectores llevan dos clases para ganar la cascada a
   `light-theme.css`, `home-app.css` y `download-cards.css` sin
   declaraciones de prioridad forzada (Req 1.6).
   ============================================================ */

.sa-home .sa-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  padding: var(--sa-space-6) var(--sa-space-5);
  border: 1px dashed var(--sa-border);
  border-radius: var(--sa-radius-card);
  background: var(--sa-surface);
  text-align: center;
}

.sa-home .sa-empty-state--compact {
  padding: var(--sa-space-4);
  border-radius: var(--sa-radius-mark);
  background: var(--sa-page);
}

.sa-home .sa-empty-state__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sa-ink-soft);
}

/* El aviso de portada es un `h1`: mismo aspecto que el resto de avisos. */
.sa-home .sa-empty-state__title {
  font-size: 16px;
  font-weight: 600;
}

/* Indicador de foco visible en todos los controles de la portada (Req 15.6) */
.sa-home a:focus-visible,
.sa-home button:focus-visible,
.sa-home select:focus-visible {
  outline: 2px solid var(--sa-accent);
  outline-offset: 2px;
}

.sa-home .sa-filter-bar__select:focus-visible,
.sa-home .sa-filter-bar__submit:focus-visible,
.sa-home .sa-card__link:focus-visible,
.sa-home .sa-card__btn-download:focus-visible,
.sa-home .sa-rank__link:focus-visible,
.sa-home .sa-rank__dl:focus-visible,
.sa-home .sa-movie__poster:focus-visible,
.sa-home .sa-movie__title-link:focus-visible,
.sa-home .sa-genres__row:focus-visible,
.sa-home .sa-section-head__link:focus-visible,
.sa-home .sa-panel__more:focus-visible,
.sa-home .sa-btn:focus-visible,
.sa-home .sa-pagination .page-numbers:focus-visible {
  outline: 2px solid var(--sa-accent);
  outline-offset: 2px;
}

/* ============================================================
   14. CARRUSEL_DESTACADO
   El Carrusel_Destacado sustituye al banner de un solo anime y
   reutiliza el interior de la tarjeta: cada Diapositiva conserva las
   clases `sa-hero-banner__body`, `__badge`, `__title`, `__subtitle`,
   `__synopsis`, `__actions`, `__art` e `__img` de la sección 8, así
   que aquí solo se estilan la tarjeta, la Pista, la Diapositiva y el
   título de las Diapositivas 2 a 5. El ancho máximo de 1280 px lo
   sigue fijando `.sa-container` (Req 3.12).
   ============================================================ */

/* Tarjeta del carrusel: los mismos tokens de superficie, radio de 20 px y
   sombra de opacidad 0,07 que la tarjeta del banner anterior (Req 9.4).
   `position: relative` es el contexto de la Barra_Controles superpuesta y
   `overflow: hidden` recorta el arte a sangre con el radio del borde. */
.sa-home .sa-hero-slider {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-card);
  background: var(--sa-surface);
  box-shadow: var(--sa-shadow-card);
}

/* Pista: la altura del bloque la reserva su `min-height`, no el contenido de
   la Diapositiva_Activa. Así el cambio de Diapositiva no altera la altura y
   las imágenes diferidas de las Diapositivas 2 a 5 no desplazan nada al
   cargarse (Req 8.6). */
.sa-home .sa-hero-slider__track {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 300px;
  overflow: hidden;
}

/* Diapositiva: la retícula de dos columnas que la sección 8 declara para
   `.sa-hero-banner`, texto a la izquierda y arte pegado al borde derecho.
   Todas las Diapositivas comparten la misma celda de la Pista, de modo que
   la que está visible ocupa siempre el bloque completo. */
.sa-home .sa-hero-slider__slide {
  display: grid;
  grid-area: 1 / 1;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* Las Diapositivas no activas no salen del documento: las oculta el atributo
   `hidden`, y hace falta declararlo porque `display: grid` gana a la regla
   del agente de usuario (Req 3.3). */
.sa-home .sa-hero-slider__slide[hidden] {
  display: none;
}

/* Título de las Diapositivas 2 a 5: mismo peso, mismo interlineado y mismo
   recorte a 2 líneas que el `h1` de la Diapositiva_Inicial (Req 9.11). El
   tamaño se toma de `--sa-fs-3xl`, que es la única vía para igualar los dos
   títulos: el Bloque_Vars_Tema fuerza `h1 { font-size: var(--sa-fs-3xl) }` y
   ninguna especificidad vence a esa declaración, mientras que la regla
   genérica de `p` no la lleva y esta la gana por especificidad. Con la misma
   variable resuelta en el mismo ámbito los dos computan el mismo píxel para
   cualquier valor del panel de opciones (Req 4.10, 9.9). */
.sa-home .sa-hero-slider__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: var(--sa-fs-3xl);
  font-weight: 800;
  line-height: 1.15;
  color: var(--sa-ink);
}

/* ── 14.1 Barra_Controles ──
   Superpuesta al borde inferior de la tarjeta en Viewport_Escritorio y
   Viewport_Tablet gracias al `position: relative` de `.sa-hero-slider`, y
   reubicada bajo la columna de texto en Viewport_Movil por el bloque 15.3
   (Req 9.8). `box-sizing` y `max-width: 100%` dejan la fila contenida en la
   tarjeta, y `flex-wrap` evita el desbordamiento horizontal cuando las dos
   flechas, los cinco puntos y el contador no caben en una línea (Req 9.7). */
.sa-home .sa-hero-slider__controls {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sa-space-2);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: var(--sa-space-3) var(--sa-space-5);
}

/* La barra nace con el atributo `hidden` en el marcado y solo el
   Script_Carrusel lo retira. Hay que declarar la ocultación porque
   `display: flex` gana a la regla del agente de usuario: sin script el
   Visitante ve 0 controles sin efecto (Req 8.2). */
.sa-home .sa-hero-slider__controls[hidden] {
  display: none;
}

/* Boton_Anterior y Boton_Siguiente: área de activación de 40 × 40 px y radio
   de pastilla (Req 7.9). En reposo son superficie con borde suave y el glifo
   en el color de texto principal, 15,3:1 sobre blanco, así que ningún icono
   se apoya en el acento (Req 7.12). */
.sa-home .sa-hero-slider__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-pill);
  background: var(--sa-surface);
  color: var(--sa-ink);
  cursor: pointer;
  transition: background-color var(--sa-motion) ease, border-color var(--sa-motion) ease, color var(--sa-motion) ease;
}

/* Estado sobre el que hay un glifo blanco: el fondo rojo es el
   Tinte_Acento_Oscuro `#c81f36` (`--sa-accent-strong`, 5,67:1 con blanco) y
   nunca `#e8384f`, que solo alcanza 4,11:1 (Req 7.11, 7.12). */
.sa-home .sa-hero-slider__nav:hover,
.sa-home .sa-hero-slider__nav:focus-visible {
  border-color: var(--sa-accent-strong);
  background: var(--sa-accent-strong);
  color: var(--sa-on-accent);
}

.sa-home .sa-hero-slider__nav-icon {
  flex: 0 0 auto;
  pointer-events: none;
}

.sa-home .sa-hero-slider__dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sa-space-1);
  min-width: 0;
}

/* Punto_Indicador: 24 × 24 px de área de activación con un indicador visible
   de 8 px. `background-clip: content-box` deja el relleno transparente, así
   que el área táctil cumple el mínimo sin engordar el punto (Req 7.9). */
.sa-home .sa-hero-slider__dot {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 8px;
  border: 0;
  border-radius: var(--sa-radius-pill);
  background-color: var(--sa-border);
  background-clip: content-box;
  cursor: pointer;
  transition: background-color var(--sa-motion) ease;
}

.sa-home .sa-hero-slider__dot:hover {
  background-color: var(--sa-ink-soft);
}

/* Punto de la Diapositiva_Activa en el color de acento y los restantes en el
   token de borde suave (Req 9.9). Es un fondo sin texto encima: el único uso
   admitido de `#e8384f` dentro del carrusel (Req 7.12). */
.sa-home .sa-hero-slider__dot.is-active {
  background-color: var(--sa-accent);
}

/* Contador_Diapositivas: token de texto secundario `#6b7280` sobre la
   superficie `#ffffff`, 4,83:1 (Req 7.10). El tamaño se toma del token con
   reserva absoluta en píxeles y el selector es una clase, no `p`, de forma
   que la hoja conserva 0 declaraciones `font-size` sobre `h1`, `h2`, `h3` y
   `p` (Req 9.10). */
.sa-home .sa-hero-slider__count {
  flex: 0 0 auto;
  margin: 0;
  color: var(--sa-ink-soft);
  font-size: var(--sa-fs-xs, 13px);
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

/* Contorno de foco de 2 px con 2 px de desplazamiento en las flechas, en los
   puntos y en los dos botones de la Diapositiva (Req 7.8). Solo añade el
   indicador: los colores del badge y de los dos botones se quedan como los
   fija la sección 8 (Req 7.14). */
.sa-home .sa-hero-slider__nav:focus-visible,
.sa-home .sa-hero-slider__dot:focus-visible,
.sa-home .sa-hero-slider__slide .sa-hero-banner__action:focus-visible {
  outline: 2px solid var(--sa-accent);
  outline-offset: 2px;
}

/* Cambio de Diapositiva: 240 ms, por debajo del máximo de 400 ms (Req 5.12).
   La Diapositiva que entra se funde con el fotograma clave, que es la única
   regla de la hoja sin el prefijo `.sa-home` admitida por el criterio 9.1. */
.sa-home .sa-hero-slider__track,
.sa-home .sa-hero-slider__slide {
  transition-property: opacity;
  transition-duration: 240ms;
  transition-timing-function: ease;
}

.sa-home .sa-hero-slider__slide.is-active {
  animation-name: sa-hero-slide-in;
  animation-duration: 240ms;
  animation-timing-function: ease;
  animation-fill-mode: both;
}

@keyframes sa-hero-slide-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   15. BREAKPOINTS DE LOS COMPONENTES
   Móvil (<= 640 px), tablet (641–1023 px) y escritorio (>= 1024 px).
   Cada regla lleva el prefijo `.sa-home` en su propio selector (Req 1.5).
   ============================================================ */

/* ── 15.1 Viewport_Escritorio ── */
@media (min-width: 1024px) {

  /* Banner de dos columnas con altura entre 280 y 340 px (Req 4.8) */
  .sa-home .sa-hero-banner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    min-height: 300px;
  }

  .sa-home .sa-hero-banner__art {
    display: block;
  }

  /* Carrusel_Destacado: dos columnas y altura de 320 px, dentro del rango
     300–360 px que fija la tabla de disposición (Req 9.5) */
  .sa-home .sa-hero-slider__track {
    min-height: 320px;
  }

  .sa-home .sa-hero-slider__slide {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }

  /* Hueco para la Barra_Controles superpuesta: el contenido de la columna de
     texto está centrado, así que el relleno inferior evita que los dos
     botones queden debajo de los controles (Req 9.8) */
  .sa-home .sa-hero-slider__slide .sa-hero-banner__body {
    padding-bottom: var(--sa-space-7);
  }

  /* Barra alineada al inicio de la columna de texto, con el mismo relleno
     lateral que el cuerpo de la Diapositiva (Req 9.8) */
  .sa-home .sa-hero-slider__controls {
    padding: var(--sa-space-4) var(--sa-space-6);
  }

  .sa-home .sa-filter-bar {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto;
  }

  /* Cuadrícula de 6 columnas de ancho idéntico */
  .sa-home .sa-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--sa-gap);
  }

  /* Fila_Paneles 1 : 2 : 1, bordes superiores alineados y paneles de la
     misma altura (Req 11.1, 11.2, 11.5) */
  .sa-home .sa-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas: none;
    align-items: stretch;
    gap: var(--sa-gap);
  }

  .sa-home .sa-panel {
    height: 100%;
    min-width: 0;
  }

  .sa-home .sa-panel--popular,
  .sa-home .sa-panel--movies,
  .sa-home .sa-panel--genres {
    grid-area: auto;
  }

  /* Películas en 4 columnas y géneros en 2 (Req 9.6, 10.6) */
  .sa-home .sa-movies {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sa-home .sa-genres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── 15.2 Viewport_Tablet ── */
@media (min-width: 641px) and (max-width: 1023px) {

  .sa-home .sa-hero-banner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    min-height: 280px;
  }

  .sa-home .sa-hero-banner__body {
    padding: var(--sa-space-5);
  }

  /* El tamaño del título se redefine sobre la variable en el ámbito del
     carrusel, no sobre el `font-size` del selector: la declaración forzada
     `h1 { font-size: var(--sa-fs-3xl) }` del Bloque_Vars_Tema no admite
     rival, así que rebajar el selector solo encogía el `p` de las
     Diapositivas 2 a 5 y los dos títulos divergían (Req 4.10, 9.9, 9.10). */
  .sa-home .sa-hero-slider {
    --sa-fs-3xl: 28px;
  }

  /* Dos columnas y altura de 300 px, dentro del rango 280–340 px (Req 9.6) */
  .sa-home .sa-hero-slider__track {
    min-height: 300px;
  }

  .sa-home .sa-hero-slider__slide {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  .sa-home .sa-hero-slider__slide .sa-hero-banner__body {
    padding-bottom: var(--sa-space-6);
  }

  /* Barra superpuesta también en tablet (Req 9.8) */
  .sa-home .sa-hero-slider__controls {
    padding: var(--sa-space-3) var(--sa-space-5);
  }

  .sa-home .sa-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sa-home .sa-filter-bar__select--sort {
    min-width: 0;
  }

  /* Cuadrícula de 3 columnas de ancho idéntico (Req 6.5) */
  .sa-home .sa-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sa-gap);
  }

  /* Panel_Peliculas a ancho completo sobre dos columnas iguales; el orden
     visual se resuelve con áreas de retícula (Req 11.3) */
  .sa-home .sa-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "movies  movies"
      "popular genres";
    align-items: stretch;
    gap: var(--sa-gap);
  }

  .sa-home .sa-panel--popular {
    grid-area: popular;
  }

  .sa-home .sa-panel--movies {
    grid-area: movies;
  }

  .sa-home .sa-panel--genres {
    grid-area: genres;
  }

  .sa-home .sa-movies {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sa-home .sa-genres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── 15.3 Viewport_Movil ── */
@media (max-width: 640px) {

  /* Una columna: el arte sale del flujo y la columna de texto ocupa el
     100 % del ancho de la tarjeta (Req 4.9) */
  .sa-home .sa-hero-banner {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .sa-home .sa-hero-banner__art {
    display: none;
  }

  .sa-home .sa-hero-banner__body {
    width: 100%;
    padding: var(--sa-space-5) var(--sa-space-4);
  }

  /* Misma sustitución que en tablet, un escalón más pequeña (Req 9.9, 9.10) */
  .sa-home .sa-hero-slider {
    --sa-fs-3xl: 24px;
  }

  /* Una columna: el arte de cada Diapositiva sale del flujo y la columna de
     texto ocupa el 100 % del ancho de la tarjeta. La altura pasa a ser
     automática, así que la pista suelta su reserva de 300 px (Req 9.7) */
  .sa-home .sa-hero-slider__track {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .sa-home .sa-hero-slider__slide {
    grid-template-columns: minmax(0, 1fr);
  }

  .sa-home .sa-hero-slider__slide .sa-hero-banner__art {
    display: none;
  }

  .sa-home .sa-hero-slider__slide .sa-hero-banner__body {
    width: 100%;
  }

  /* La Barra_Controles deja de estar superpuesta y pasa a una fila bajo la
     columna de texto; `flex-wrap` y el ancho contenido evitan cualquier
     desbordamiento horizontal (Req 9.7, 9.8) */
  .sa-home .sa-hero-slider__controls {
    position: static;
    width: 100%;
    padding: 0 var(--sa-space-4) var(--sa-space-4);
  }

  .sa-home .sa-hero-banner__synopsis {
    font-size: 14px;
  }

  .sa-home .sa-hero-banner__actions .sa-btn {
    flex: 1 1 auto;
  }

  /* Cinco controles apilados al 100 % del ancho y sin desbordamiento
     horizontal (Req 5.11) */
  .sa-home .sa-filter-bar {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sa-space-3);
    padding: var(--sa-space-4);
  }

  .sa-home .sa-filter-bar__select,
  .sa-home .sa-filter-bar__select--sort {
    width: 100%;
    min-width: 0;
  }

  .sa-home .sa-filter-bar__submit {
    width: 100%;
  }

  /* Cuadrícula de 2 columnas de ancho idéntico y sin desbordamiento
     horizontal (Req 6.6) */
  .sa-home .sa-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sa-gap-sm);
  }

  .sa-home .sa-section-head {
    flex-wrap: wrap;
    margin-bottom: var(--sa-space-3);
  }

  .sa-home .sa-section-head__title {
    font-size: 17px;
  }

  /* Tres paneles apilados en una columna en el orden del DOM: Populares,
     Películas y Géneros (Req 11.4), con 16 px de separación (Req 11.5) */
  .sa-home .sa-panels {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    gap: var(--sa-gap-sm);
  }

  .sa-home .sa-panel {
    padding: var(--sa-space-4);
  }

  /* Películas en 2 columnas y géneros en 1 (Req 9.7, 10.7) */
  .sa-home .sa-movies {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sa-space-3);
  }

  .sa-home .sa-genres {
    grid-template-columns: minmax(0, 1fr);
  }

  .sa-home .sa-card__title {
    font-size: 13px;
  }
}

/* ============================================================
   16. MOVIMIENTO REDUCIDO
   Con `prefers-reduced-motion: reduce` se anulan las transiciones y
   los desplazamientos de hover; el resaltado se mantiene solo con
   color y sombra.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .sa-home .sa-btn,
  .sa-home .sa-card,
  .sa-home .sa-card__img,
  .sa-home .sa-card__title,
  .sa-home .sa-card__btn-download,
  .sa-home .sa-filter-bar__select,
  .sa-home .sa-rank__item,
  .sa-home .sa-rank__link,
  .sa-home .sa-rank__dl,
  .sa-home .sa-movie__img,
  .sa-home .sa-movie__title-link,
  .sa-home .sa-genres__row,
  .sa-home .sa-section-head__link,
  .sa-home .sa-panel__more,
  .sa-home .sa-pagination .page-numbers {
    transition: none;
  }

  .sa-home .sa-card:hover {
    transform: none;
  }

  .sa-home .sa-card:hover .sa-card__img,
  .sa-home .sa-movie__poster:hover .sa-movie__img {
    transform: none;
  }

  /* Cambio de Diapositiva sin desplazamiento ni desvanecimiento: duración de
     transición de 0 s y 0 animaciones. El selector con `.is-active` es
     necesario porque la regla del fundido de la sección 14 lleva esa clase y
     gana por especificidad (Req 6.8). */
  .sa-home .sa-hero-slider__track,
  .sa-home .sa-hero-slider__slide,
  .sa-home .sa-hero-slider__slide.is-active {
    transition-duration: 0s;
    animation: none;
  }

  .sa-home .sa-hero-slider__nav,
  .sa-home .sa-hero-slider__dot {
    transition: none;
  }
}

/* ============================================================
   17. GANCHOS DE LA CAPA_AJAX
   Dos reglas para los dos estados que la Capa_Ajax introduce en
   `div.sa-grid#sa-anime-grid`: la cuadrícula que aloja el
   Estado_Vacio y la cuadrícula ocupada por una Peticion_Vigente.
   Ambas ganan a la sección 10 por orden de cascada, así que no
   necesitan ninguna declaración de prioridad forzada (Req 1.6).
   0 declaraciones de color: solo `display` y `opacity`.
   ============================================================ */

/* La cuadrícula aloja el Estado_Vacio cuando la consulta devuelve 0
   resultados, en lugar de emitirlo como bloque hermano. En ese caso deja de
   repartir columnas y vuelve al flujo de bloque, para que el aviso ocupe todo
   el ancho del contenedor (Req 7.15). */
.sa-home .sa-grid--empty {
  display: block;
}

/* Indicador de carga: mientras existe una Peticion_Vigente, la Capa_Ajax marca
   la cuadrícula con `aria-busy="true"`. Los resultados anteriores siguen en el
   DOM y solo se atenúan a 0,55 —dentro del margen de 0,4 a 0,7 del criterio
   9.4—, con 0 bloques de marcador de posición. Al retirarse el atributo, la
   opacidad vuelve por sí sola a su valor completo (Req 9.10). */
.sa-home .sa-grid[aria-busy="true"] {
  opacity: 0.55;
  transition: opacity var(--sa-motion);
}

/* Movimiento reducido: la atenuación se aplica sin transición animada
   (Req 9.12). La regla lleva el prefijo `.sa-home` en su propio selector. */
@media (prefers-reduced-motion: reduce) {

  .sa-home .sa-grid[aria-busy="true"] {
    transition: none;
  }
}