/*
 * SharkAnime — Hoja_Ficha del rediseño de la página de anime
 * ---------------------------------------------------------------------------
 * Ámbito: todas las reglas cuelgan de `.sa-anime-page` y usan clases `sa-ap-*`.
 * El bloque `:root` de Tokens_Diseno es la única excepción permitida al prefijo.
 * La precedencia se obtiene por especificidad y por el orden de encolado (esta
 * hoja es la última de la cadena de la ficha), nunca forzando la cascada.
 *
 * Secciones del archivo (en este orden):
 *   1. Tokens_Diseno            → :root
 *   2. Componentes              → tarea 9.2
 *   3. Disposición responsive   → tarea 9.3
 *   4. Contención, foco y movimiento reducido → tarea 9.4
 */

/* ═══════════════ 1. TOKENS_DISENO ═══════════════ */

:root {
  /* Color — exactamente 6 tokens (Req 10.1) */
  --sa-ap-accent:    #e8384f;   /* 4.11:1 sobre blanco → válido para foco y texto ≥18.66px bold */
  --sa-ap-bg:        #ffffff;
  --sa-ap-surface:   #ffffff;
  --sa-ap-border:    #8c94a3;   /* 3.05:1 sobre --sa-ap-surface */
  --sa-ap-text:      #1f2430;   /* 14.6:1 */
  --sa-ap-text-soft: #4b5563;   /*  7.5:1 */

  /* Forma (Req 10.2) */
  --sa-ap-radius-card: 16px;
  --sa-ap-radius-btn:  999px;
  --sa-ap-shadow-card: 0 10px 28px rgba(15, 23, 42, 0.10);

  /* Tipografía (Req 10.6) */
  --sa-ap-font: var(--sa-font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
}

/* ═══════════════ 2. COMPONENTES ═══════════════ */
/*
 * Reglas de los cinco bloques del rediseño. Convenciones de esta sección:
 *
 *  - Cada regla arranca por `.sa-anime-page`, así que su especificidad mínima
 *    es 0,2,0 y bate a los selectores de elemento de las hojas previas.
 *  - Todo color, radio y sombra se escribe como `var(--token, reserva)`: la
 *    reserva vive dentro de la referencia, nunca como literal suelto
 *    (Req 10.3, 10.8). Los tintes pastel se calculan con `color-mix()` sobre
 *    los mismos tokens y van precedidos de una declaración de reserva para
 *    los navegadores que no la soportan.
 *  - Los tamaños de texto se declaran solo en clases `sa-ap-*` que no son
 *    `h1`, `h2` ni `p`: los encabezados y los párrafos conservan la escala
 *    del panel de opciones, de modo que la hoja no compite con el bloque
 *    inline de `wp_head` y no necesita forzar la cascada.
 *  - `--sa-ap-brand` (tarjeta de servidor) y `--sa-ap-dot` (punto de estado)
 *    llegan como custom properties inline desde PHP; aquí solo se consumen
 *    con su cadena de reserva.
 *  - La disposición base es de una sola columna; las variantes de dos y tres
 *    columnas viven en los bloques de consulta de medios de la sección 3.
 */

/* ── Contenedor_Ficha ── */

.sa-anime-page {
  background-color: var(--sa-ap-bg, #ffffff);
  color: var(--sa-ap-text, #1f2430);
}

/* Req 10.5: la familia tipográfica alcanza todo el texto del contenedor. */
.sa-anime-page,
.sa-anime-page * {
  font-family: var(--sa-ap-font, 'Plus Jakarta Sans', system-ui, sans-serif);
}

.sa-anime-page > .sa-anime-page__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  width: 100%;
}

.sa-anime-page .sa-anime-page__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* ── Hero ── */

.sa-anime-page .sa-ap-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin: 0;
  padding: 20px;
  background-color: var(--sa-ap-surface, #ffffff);
  border: 1px solid var(--sa-ap-border, #8c94a3);
  border-radius: var(--sa-ap-radius-card, 16px);
  box-shadow: var(--sa-ap-shadow-card, 0 10px 28px rgba(15, 23, 42, 0.10));
}

.sa-anime-page .sa-ap-hero__poster {
  margin: 0;
}

.sa-anime-page .sa-ap-hero__img {
  display: block;
  width: 100%;
  border-radius: var(--sa-ap-radius-card, 16px);
  box-shadow: var(--sa-ap-shadow-card, 0 10px 28px rgba(15, 23, 42, 0.10));
}

/* Req 3.3: hueco con la misma proporción y radio que el póster. */
.sa-anime-page .sa-ap-hero__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 2 / 3;
  background-color: var(--sa-ap-surface, #ffffff);
  background-color: color-mix(in srgb, var(--sa-ap-text-soft, #4b5563) 8%, var(--sa-ap-surface, #ffffff));
  border: 1px solid var(--sa-ap-border, #8c94a3);
  border-radius: var(--sa-ap-radius-card, 16px);
}

.sa-anime-page .sa-ap-hero__placeholder-icon {
  color: var(--sa-ap-text-soft, #4b5563);
}

.sa-anime-page .sa-ap-hero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.sa-anime-page .sa-ap-hero__type {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sa-ap-text, #1f2430);
  background-color: var(--sa-ap-surface, #ffffff);
  background-color: color-mix(in srgb, var(--sa-ap-accent, #e8384f) 15%, var(--sa-ap-surface, #ffffff));
  border-radius: var(--sa-ap-radius-btn, 999px);
}

.sa-anime-page .sa-ap-hero__title {
  margin: 0;
  font-weight: 800;
  line-height: 1.18;
  color: var(--sa-ap-text, #1f2430);
}

.sa-anime-page .sa-ap-hero__genres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sa-anime-page .sa-ap-hero__genre {
  display: inline-flex;
}

.sa-anime-page .sa-ap-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  color: var(--sa-ap-text, #1f2430);
  background-color: var(--sa-ap-surface, #ffffff);
  border: 1px solid var(--sa-ap-border, #8c94a3);
  border-radius: var(--sa-ap-radius-btn, 999px);
  transition: background-color 160ms ease, border-color 160ms ease;
}

.sa-anime-page a.sa-ap-chip:hover {
  background-color: var(--sa-ap-surface, #ffffff);
  background-color: color-mix(in srgb, var(--sa-ap-accent, #e8384f) 12%, var(--sa-ap-surface, #ffffff));
  border-color: var(--sa-ap-accent, #e8384f);
}

.sa-anime-page .sa-ap-hero__synopsis {
  margin: 0;
  line-height: 1.65;
  color: var(--sa-ap-text-soft, #4b5563);
}

/*
 * CTA primario: texto blanco de 19px y peso 700 sobre el acento. Al superar
 * 18.66px en negrita, el umbral de contraste aplicable es 3:1 y la relación
 * real del acento sobre blanco es 4.11:1 (Req 9.5).
 */
.sa-anime-page .sa-ap-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  color: var(--sa-ap-surface, #ffffff);
  background-color: var(--sa-ap-accent, #e8384f);
  border-radius: var(--sa-ap-radius-btn, 999px);
  transition: transform 160ms ease, filter 160ms ease;
}

.sa-anime-page a.sa-ap-cta:hover {
  transform: translateY(-1px);
  filter: brightness(0.94);
}

.sa-anime-page .sa-ap-cta__icon {
  flex: 0 0 auto;
}

.sa-anime-page .sa-ap-cta--disabled,
.sa-anime-page .sa-ap-cta[disabled] {
  cursor: not-allowed;
  transform: none;
  color: var(--sa-ap-surface, #ffffff);
  background-color: var(--sa-ap-text-soft, #4b5563);
}

/* ── Panel_Metadatos (Req 4.10) ── */

.sa-anime-page .sa-ap-meta {
  padding: 16px 18px;
  background-color: var(--sa-ap-surface, #ffffff);
  border: 1px solid var(--sa-ap-border, #8c94a3);
  border-radius: var(--sa-ap-radius-card, 16px);
  box-shadow: var(--sa-ap-shadow-card, 0 10px 28px rgba(15, 23, 42, 0.10));
}

.sa-anime-page .sa-ap-meta__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}

.sa-anime-page .sa-ap-meta__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px;
  border-block-end: 1px solid var(--sa-ap-border, #8c94a3);
  border-block-end-color: color-mix(in srgb, var(--sa-ap-border, #8c94a3) 55%, var(--sa-ap-surface, #ffffff));
}

.sa-anime-page .sa-ap-meta__row:last-child {
  border-block-end-width: 0;
}

.sa-anime-page .sa-ap-meta__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--sa-ap-text-soft, #4b5563);
}

.sa-anime-page .sa-ap-meta__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--sa-ap-accent, #e8384f);
}

.sa-anime-page .sa-ap-meta__icon svg {
  display: block;
}

.sa-anime-page .sa-ap-meta__value {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  text-align: right;
  color: var(--sa-ap-text, #1f2430);
}

/* ── Seccion_Descargas ── */

.sa-anime-page .sa-ap-dl {
  padding: 20px;
  background-color: var(--sa-ap-surface, #ffffff);
  border: 1px solid var(--sa-ap-border, #8c94a3);
  border-radius: var(--sa-ap-radius-card, 16px);
  box-shadow: var(--sa-ap-shadow-card, 0 10px 28px rgba(15, 23, 42, 0.10));
}

.sa-anime-page .sa-ap-dl__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: 18px;
}

.sa-anime-page .sa-ap-dl__title {
  margin: 0;
  font-weight: 800;
  line-height: 1.25;
  color: var(--sa-ap-text, #1f2430);
}

.sa-anime-page .sa-ap-dl__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 3px 11px;
  font-size: 14px;
  font-weight: 700;
  color: var(--sa-ap-text, #1f2430);
  background-color: var(--sa-ap-surface, #ffffff);
  background-color: color-mix(in srgb, var(--sa-ap-accent, #e8384f) 16%, var(--sa-ap-surface, #ffffff));
  border-radius: var(--sa-ap-radius-btn, 999px);
}

.sa-anime-page .sa-ap-dl__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* Selector_Episodios: pestañas verticales, la activa en acento. */
.sa-anime-page .sa-ap-eps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sa-anime-page .sa-ap-ep {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 15px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  color: var(--sa-ap-text, #1f2430);
  background-color: var(--sa-ap-surface, #ffffff);
  border: 1px solid var(--sa-ap-border, #8c94a3);
  border-radius: var(--sa-ap-radius-btn, 999px);
  transition: background-color 160ms ease, border-color 160ms ease;
}

.sa-anime-page .sa-ap-ep:hover {
  background-color: var(--sa-ap-surface, #ffffff);
  background-color: color-mix(in srgb, var(--sa-ap-accent, #e8384f) 8%, var(--sa-ap-surface, #ffffff));
}

/*
 * Estado activo: borde y tinte de acento con el texto en el token de texto
 * primario. El acento queda como señal visual sin usarse como color de texto
 * pequeño, que no alcanzaría 4.5:1 (Req 9.5).
 */
.sa-anime-page .sa-ap-ep.is-active,
.sa-anime-page .sa-ap-ep[aria-selected="true"] {
  font-weight: 700;
  color: var(--sa-ap-text, #1f2430);
  background-color: var(--sa-ap-surface, #ffffff);
  background-color: color-mix(in srgb, var(--sa-ap-accent, #e8384f) 18%, var(--sa-ap-surface, #ffffff));
  border-color: var(--sa-ap-accent, #e8384f);
}

.sa-anime-page .sa-ap-ep__label {
  display: inline-block;
}

.sa-anime-page .sa-ap-ep__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 26px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sa-ap-text, #1f2430);
  background-color: var(--sa-ap-surface, #ffffff);
  background-color: color-mix(in srgb, var(--sa-ap-text-soft, #4b5563) 14%, var(--sa-ap-surface, #ffffff));
  border-radius: var(--sa-ap-radius-btn, 999px);
}

/*
 * Los paneles no declaran `display`: así el atributo `hidden` del markup
 * sigue ocultándolos y el `<noscript>` de la sección puede revelarlos.
 */
.sa-anime-page .sa-ap-panel {
  padding: 0;
}

.sa-anime-page .sa-ap-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sa-anime-page .sa-ap-grid__item {
  display: flex;
}

/* Tarjeta_Servidor: el color de marca llega inline como `--sa-ap-brand`. */
.sa-anime-page .sa-ap-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    'mark name'
    'mark sub'
    'btn  btn';
  column-gap: 12px;
  row-gap: 2px;
  width: 100%;
  padding: 14px;
  background-color: var(--sa-ap-surface, #ffffff);
  border: 1px solid var(--sa-ap-border, #8c94a3);
  border-radius: var(--sa-ap-radius-card, 16px);
  box-shadow: var(--sa-ap-shadow-card, 0 10px 28px rgba(15, 23, 42, 0.10));
}

.sa-anime-page .sa-ap-card__mark {
  grid-area: mark;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 46px;
  height: 46px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--sa-ap-text, #1f2430);
  background-color: var(--sa-ap-surface, #ffffff);
  background-color: color-mix(in srgb, var(--sa-ap-brand, var(--sa-ap-text-soft, #4b5563)) 16%, var(--sa-ap-surface, #ffffff));
  border: 1px solid var(--sa-ap-brand, var(--sa-ap-text-soft, #4b5563));
  border-radius: var(--sa-ap-radius-card, 16px);
}

.sa-anime-page .sa-ap-card__name {
  grid-area: name;
  align-self: end;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sa-ap-text, #1f2430);
}

.sa-anime-page .sa-ap-card__sub {
  grid-area: sub;
  align-self: start;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--sa-ap-text-soft, #4b5563);
}

.sa-anime-page .sa-ap-card__btn {
  grid-area: btn;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-block-start: 12px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  color: var(--sa-ap-text, #1f2430);
  background-color: var(--sa-ap-surface, #ffffff);
  border: 1px solid var(--sa-ap-brand, var(--sa-ap-text-soft, #4b5563));
  border-radius: var(--sa-ap-radius-btn, 999px);
  transition: background-color 160ms ease;
}

.sa-anime-page .sa-ap-card__btn:hover {
  background-color: var(--sa-ap-surface, #ffffff);
  background-color: color-mix(in srgb, var(--sa-ap-brand, var(--sa-ap-text-soft, #4b5563)) 12%, var(--sa-ap-surface, #ffffff));
}

.sa-anime-page .sa-ap-panel__empty {
  margin: 0;
  padding: 18px;
  line-height: 1.6;
  color: var(--sa-ap-text-soft, #4b5563);
  background-color: var(--sa-ap-surface, #ffffff);
  background-color: color-mix(in srgb, var(--sa-ap-text-soft, #4b5563) 6%, var(--sa-ap-surface, #ffffff));
  border-radius: var(--sa-ap-radius-card, 16px);
}

/* ── Información Adicional ── */

.sa-anime-page .sa-ap-extra {
  padding: 20px;
  background-color: var(--sa-ap-surface, #ffffff);
  border: 1px solid var(--sa-ap-border, #8c94a3);
  border-radius: var(--sa-ap-radius-card, 16px);
  box-shadow: var(--sa-ap-shadow-card, 0 10px 28px rgba(15, 23, 42, 0.10));
}

.sa-anime-page .sa-ap-extra__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--sa-ap-text, #1f2430);
}

.sa-anime-page .sa-ap-extra__icon {
  flex: 0 0 auto;
  color: var(--sa-ap-accent, #e8384f);
}

.sa-anime-page .sa-ap-extra__body {
  line-height: 1.7;
  color: var(--sa-ap-text-soft, #4b5563);
}

.sa-anime-page .sa-ap-extra__body a {
  color: var(--sa-ap-text, #1f2430);
  text-decoration: underline;
}

/* ── Panel_Publicacion ── */

.sa-anime-page .sa-ap-release {
  padding: 18px;
  background-color: var(--sa-ap-surface, #ffffff);
  border: 1px solid var(--sa-ap-border, #8c94a3);
  border-radius: var(--sa-ap-radius-card, 16px);
  box-shadow: var(--sa-ap-shadow-card, 0 10px 28px rgba(15, 23, 42, 0.10));
}

.sa-anime-page .sa-ap-release__title {
  margin: 0 0 10px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--sa-ap-text, #1f2430);
}

.sa-anime-page .sa-ap-release__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}

.sa-anime-page .sa-ap-release__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px;
  border-block-end: 1px solid var(--sa-ap-border, #8c94a3);
  border-block-end-color: color-mix(in srgb, var(--sa-ap-border, #8c94a3) 55%, var(--sa-ap-surface, #ffffff));
}

.sa-anime-page .sa-ap-release__row:last-child {
  border-block-end-width: 0;
}

.sa-anime-page .sa-ap-release__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--sa-ap-text-soft, #4b5563);
}

.sa-anime-page .sa-ap-release__icon {
  flex: 0 0 auto;
  color: var(--sa-ap-accent, #e8384f);
}

.sa-anime-page .sa-ap-release__value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  text-align: right;
  color: var(--sa-ap-text, #1f2430);
}

/* Req 7.1: el valor se recorta en una sola línea sin desbordar el panel. */
.sa-anime-page .sa-ap-release__value-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* El color del punto llega inline como `--sa-ap-dot` desde PHP. */
.sa-anime-page .sa-ap-release__dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  background-color: var(--sa-ap-dot, var(--sa-ap-text-soft, #4b5563));
  border-radius: var(--sa-ap-radius-btn, 999px);
}

/* ═══════════════ 3. DISPOSICIÓN RESPONSIVE ═══════════════ */
/*
 * Tres modos de disposición y solo tres condiciones de consulta de medios en
 * esta sección (Req 8.1):
 *
 *   Viewport_Movil      → (max-width: 767px)
 *   Viewport_Tablet     → (min-width: 768px) and (max-width: 1023px)
 *   Viewport_Escritorio → (min-width: 1024px)
 *
 * Los intervalos son disjuntos y su unión cubre 320–2560 px sin huecos: para
 * cualquier ancho de ese rango se cumple exactamente una condición. Todas las
 * reglas de disposición (columnas, paddings de página, límites de altura y
 * dirección de los ejes) viven dentro de estos bloques; color y tipografía
 * quedan en la sección 2, que es común a los tres modos. Cada regla conserva
 * el prefijo `.sa-anime-page`, de modo que la especificidad mínima sigue
 * siendo 0,2,0 y no hace falta forzar la cascada.
 */

/* ── Viewport_Movil: una sola columna en toda la ficha ── */

@media (max-width: 767px) {

  .sa-anime-page > .sa-anime-page__inner {
    padding: 16px;
  }

  /* Req 3.10: póster, texto y Panel_Metadatos apilados en ese orden. */
  .sa-anime-page .sa-ap-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .sa-anime-page .sa-ap-hero__poster {
    max-width: 220px;
  }

  .sa-anime-page .sa-ap-dl__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /*
   * Req 5.14: el Selector_Episodios se coloca sobre la Grilla_Servidores en
   * una sola fila con desplazamiento horizontal propio. Los controles pierden
   * el ancho completo del modo vertical para poder alinearse en la fila.
   */
  .sa-anime-page .sa-ap-eps {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-block-end: 4px;
  }

  .sa-anime-page .sa-ap-ep {
    flex: 0 0 auto;
    width: auto;
  }

  /* Req 5.15: una tarjeta por fila. */
  .sa-anime-page .sa-ap-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Req 8.5: Información Adicional arriba, Panel_Publicacion debajo. */
  .sa-anime-page .sa-anime-page__bottom {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Viewport_Tablet: hero a dos columnas con metadatos a ancho completo ── */

@media (min-width: 768px) and (max-width: 1023px) {

  .sa-anime-page > .sa-anime-page__inner {
    padding: 20px;
  }

  /* Req 8.3: póster a la izquierda, texto a la derecha, metadatos debajo. */
  .sa-anime-page .sa-ap-hero {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .sa-anime-page .sa-ap-meta {
    grid-column: 1 / -1;
  }

  .sa-anime-page .sa-ap-dl__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sa-anime-page .sa-ap-eps {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-block-end: 4px;
  }

  .sa-anime-page .sa-ap-ep {
    flex: 0 0 auto;
    width: auto;
  }

  .sa-anime-page .sa-ap-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  .sa-anime-page .sa-anime-page__bottom {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Viewport_Escritorio: contenido centrado a 1200 px y hero a tres columnas ── */

@media (min-width: 1024px) {

  /* Req 8.4: ancho máximo del contenido y márgenes laterales iguales. */
  .sa-anime-page > .sa-anime-page__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding: 24px;
  }

  /* Req 3.1: póster 240 px, texto fluido y Panel_Metadatos 300 px. */
  .sa-anime-page .sa-ap-hero {
    grid-template-columns: 240px minmax(0, 1fr) 300px;
  }

  /*
   * Req 5.13: columna fija de 260 px para el Selector_Episodios, con altura
   * máxima de 520 px y desplazamiento vertical propio cuando la lista de
   * controles la excede; la Grilla_Servidores ocupa el resto del ancho.
   */
  .sa-anime-page .sa-ap-dl__layout {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .sa-anime-page .sa-ap-eps {
    flex-direction: column;
    max-height: 520px;
    overflow-y: auto;
  }

  /*
   * Con 1200 px de contenido, 24 px de padding lateral, la columna de 260 px
   * y los espacios entre pistas, la Grilla_Servidores dispone de unos 860 px:
   * un mínimo de 240 px por tarjeta garantiza dos o más por fila (Req 5.13).
   */
  .sa-anime-page .sa-ap-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  .sa-anime-page .sa-anime-page__bottom {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

/* ═══════════════ 4. CONTENCIÓN, FOCO Y MOVIMIENTO REDUCIDO ═══════════════ */
/*
 * Esta sección no declara disposición: no añade ni modifica columnas, ni
 * paddings de página, ni límites de altura. Solo contiene el ancho, hace
 * fluidas las imágenes, dibuja el anillo de foco y respeta la preferencia de
 * movimiento reducido. Por eso todas sus reglas viven fuera de los tres
 * bloques de la sección 3 y son comunes a los tres modos.
 *
 * Convenciones mantenidas: prefijo `.sa-anime-page` en cada regla, colores
 * siempre como `var(--token, reserva)` y ninguna declaración que fuerce la
 * cascada.
 */

/* ── Contención del ancho (Req 8.2) ── */

/*
 * El contenedor nunca excede el ancho de su bloque contenedor, así que el
 * documento no gana desplazamiento horizontal por su culpa en ningún ancho
 * entre 320 px y 2560 px.
 */
.sa-anime-page {
  max-inline-size: 100%;
}

/*
 * `border-box` en todo el subárbol: los paddings y los bordes de 1 px de las
 * tarjetas y los paneles se descuentan del ancho declarado en lugar de
 * sumarse a él, que es la causa habitual de desbordes de unos pocos píxeles.
 */
.sa-anime-page,
.sa-anime-page *,
.sa-anime-page *::before,
.sa-anime-page *::after {
  box-sizing: border-box;
}

/*
 * Req 8.8 (segunda mitad): los hijos de una pista de grid o de un contenedor
 * flex tienen `min-width: auto` por defecto, de modo que se niegan a
 * encogerse por debajo del ancho de su contenido y empujan la fila. Con
 * `min-width: 0` la pista manda y el contenido se parte.
 */
.sa-anime-page > .sa-anime-page__inner > *,
.sa-anime-page .sa-anime-page__bottom > *,
.sa-anime-page .sa-ap-hero > *,
.sa-anime-page .sa-ap-hero__body > *,
.sa-anime-page .sa-ap-meta__row > *,
.sa-anime-page .sa-ap-dl__layout > *,
.sa-anime-page .sa-ap-grid > *,
.sa-anime-page .sa-ap-card > *,
.sa-anime-page .sa-ap-release__row > * {
  min-width: 0;
}

/*
 * Req 8.8: las cadenas sin espacios (títulos importados, nombres de archivo,
 * URLs mostradas como texto) se parten en el punto exacto en que alcanzan el
 * borde del contenedor, así que ninguna porción queda fuera ni oculta.
 */
.sa-anime-page > .sa-anime-page__inner,
.sa-anime-page .sa-ap-hero__title,
.sa-anime-page .sa-ap-hero__synopsis,
.sa-anime-page .sa-ap-chip,
.sa-anime-page .sa-ap-meta__label,
.sa-anime-page .sa-ap-meta__value,
.sa-anime-page .sa-ap-dl__title,
.sa-anime-page .sa-ap-ep__label,
.sa-anime-page .sa-ap-card__name,
.sa-anime-page .sa-ap-card__sub,
.sa-anime-page .sa-ap-panel__empty,
.sa-anime-page .sa-ap-extra__title,
.sa-anime-page .sa-ap-extra__body,
.sa-anime-page .sa-ap-release__label {
  overflow-wrap: anywhere;
}

/*
 * Req 8.7: el único desplazamiento horizontal admitido es el interno de la
 * fila de pestañas (declarado en los modos móvil y tablet de la sección 3).
 * `overscroll-behavior-x: contain` evita que al llegar a su extremo el gesto
 * se propague al documento o active la navegación por deslizamiento.
 */
.sa-anime-page .sa-ap-eps {
  overscroll-behavior-x: contain;
}

/* ── Imágenes fluidas (Req 8.6, 3.2) ── */

/*
 * Regla genérica para cualquier imagen del contenedor, incluidas las que el
 * editor inserte en "Información Adicional": nunca superan el ancho
 * disponible y conservan su proporción original, porque la altura se calcula
 * a partir del ancho renderizado.
 */
.sa-anime-page img {
  max-width: 100%;
  height: auto;
}

/*
 * Req 3.2: la proporción 2 / 3 y el recorte centrado se aplican solo al
 * póster del Hero y a su hueco de reserva, que son los dos únicos elementos
 * con proporción de cartel conocida. Extenderlo a `img` deformaría las
 * imágenes del contenido del editor.
 */
.sa-anime-page .sa-ap-hero__img,
.sa-anime-page .sa-ap-hero__placeholder {
  max-width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

/* ── Foco visible (Req 9.4) ── */

/*
 * Anillo de 2 px en todo el perímetro con el color de acento, separado 2 px
 * del borde del elemento para que se distinga del borde propio de chips,
 * pestañas y botones. El acento mantiene 4.11:1 sobre la superficie blanca,
 * por encima del mínimo de 3:1 exigido al indicador.
 *
 * Ninguna de las listas de propiedades animadas de la sección 2 incluye
 * `outline`: son `background-color` y `border-color` en los chips y las
 * pestañas, `background-color` en el botón de la tarjeta, y `transform` con
 * `filter` en el CTA. El anillo aparece por tanto de forma inmediata al
 * recibir el foco y permanece visible mientras esas transiciones se ejecutan
 * (Req 9.4). El foco tampoco se retira del flujo con `outline: 0` en ningún
 * punto de la hoja.
 */
.sa-anime-page :focus-visible {
  outline: 2px solid var(--sa-ap-accent, #e8384f);
  outline-offset: 2px;
}

/* ── Movimiento reducido (Req 9.4, complemento del scroll suave del script) ── */

/*
 * Consulta de preferencia (prefers-reduced-motion), no de disposición.
 * No participa en los tres modos de la sección 3 y debe excluirse del
 * análisis de anchos de 320–2560 px.
 */
@media (prefers-reduced-motion: reduce) {

  /*
   * Se anulan transiciones y animaciones de todo el subárbol dejando una
   * duración residual de 0.01 ms en lugar de `none`, para que los eventos
   * `transitionend`/`animationend` sigan disparándose si algún script los
   * espera. `outline` no aparece en ninguna lista de transición, así que el
   * anillo de foco de la regla anterior no se ve afectado por este bloque.
   */
  .sa-anime-page,
  .sa-anime-page *,
  .sa-anime-page *::before,
  .sa-anime-page *::after {
    transition-duration: 0.01ms;
    transition-delay: 0s;
    animation-duration: 0.01ms;
    animation-delay: 0s;
    animation-iteration-count: 1;
    scroll-behavior: auto;
  }

  /* El CTA pierde el desplazamiento vertical del hover y conserva el tinte. */
  .sa-anime-page a.sa-ap-cta:hover {
    transform: none;
  }
}