/* Extiende legal.css para las páginas estáticas de anime (/anime/…): mismo estilo oscuro, un poco más anchas. Sin scripts. */
body.anime header.site, body.anime main, body.anime footer.site { max-width: 62rem; }
body.anime main { padding-top: .5rem; }
body.anime footer.site { line-height: 1.6; }
body.anime footer.site p { margin: .35rem 0; }
.crumbs { font-size: .82rem; color: #a1a1aa; margin: .75rem 0 0; }
.crumbs a { color: #a1a1aa; }
.crumbs a:hover { color: #fff; }

.hero { display: grid; grid-template-columns: 150px 1fr; gap: 1rem 1.25rem; align-items: start; margin-top: 1rem; }
.hero .cover { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: .75rem; background: #181a24; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.hero-text h1 { margin-top: 0; font-size: 1.65rem; overflow-wrap: anywhere; }
.hero-text p { margin: .5rem 0; }
.alt { font-size: .85rem; color: #a1a1aa; }
.alt span:first-child { color: #71717a; }
.stats { color: #e4e4e7; font-weight: 600; }
@media (min-width: 640px) { .hero { grid-template-columns: 230px 1fr; } .hero-text h1 { font-size: 2.1rem; } }

.chips { list-style: none; padding: 0; margin: .6rem 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.chips li { margin: 0; }
.chips a, .chips span { display: inline-block; padding: .2rem .7rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: #101118; color: #e4e4e7; font-size: .82rem; text-decoration: none; }
.chips a:hover { border-color: #ff8a4c; color: #fff; }

.cta { display: inline-block; background: #ff5500; color: #07070a; font-weight: 800; text-decoration: none; padding: .7rem 1.2rem; border-radius: .75rem; line-height: 1.2; }
.cta:hover { background: #ff6d24; color: #07070a; }
.cta:focus-visible, a:focus-visible { outline: 2px solid #ff8a4c; outline-offset: 2px; }

.syn p { margin: .6rem 0; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .6rem; margin: 1rem 0; }
.facts div { background: #101118; border: 1px solid rgba(255, 255, 255, .08); border-radius: .75rem; padding: .55rem .8rem; }
.facts dt { font-size: .72rem; color: #a1a1aa; text-transform: uppercase; letter-spacing: .04em; }
.facts dd { margin: .1rem 0 0; color: #fff; font-weight: 600; overflow-wrap: anywhere; }
.tags { font-size: .85rem; }

.grid { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .9rem; }
.card { margin: 0; }
.card a { display: block; text-decoration: none; color: #e4e4e7; }
.card img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: .6rem; background: #181a24; border: 1px solid rgba(255, 255, 255, .08); }
.card a:hover img { border-color: #ff8a4c; }
.card .ct { display: block; margin-top: .4rem; font-size: .88rem; font-weight: 700; line-height: 1.3; color: #fff; overflow-wrap: anywhere; }
.card .cm { display: block; font-size: .75rem; color: #a1a1aa; }
.card .cr { display: inline-block; margin-top: .25rem; font-size: .7rem; color: #ff8a4c; }

.all { columns: 2 16rem; column-gap: 2rem; padding-left: 1.5rem; font-size: .9rem; }
.all li { break-inside: avoid; }