:root{--ink:#10121e;--paper:#f8f5ec;--gold:#ffd66b;--cyan:#8ee6ed;--purple:#d9adff;--muted:#aeaeb9;--line:#454559;--display:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;--body:"Segoe UI",Arial,sans-serif;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:18px}body{margin:0;background:var(--ink);color:var(--paper);font:16px/1.5 var(--body)}button,a{font:inherit}button{color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,video:focus-visible{outline:3px solid #ffe392;outline-offset:4px}.wrap{max-width:1340px;width:calc(100% - 9vw);margin:auto}.skip{position:absolute;left:10px;top:-80px;background:var(--paper);color:var(--ink);padding:9px;z-index:10}.skip:focus{top:10px}header{background:#131520;border-bottom:1px solid #363647}.top,.brand,header nav,footer .wrap{display:flex;align-items:center}.top{justify-content:space-between;min-height:64px}.brand{gap:12px;font-size:18px;font-weight:750;letter-spacing:.025em}.brand img{width:34px;height:34px;object-fit:contain}.brand i{color:#626879;padding:0 .25em;font-weight:400}.brand strong{font-size:14px;letter-spacing:.13em}header nav{gap:25px}header nav a{color:#e2e0e6;font-weight:600;font-size:14px}header nav a:hover,.actions a:hover,.link:hover{color:var(--gold)}
.cover{display:grid;grid-template-columns:38% 62%;margin-block:25px 28px;align-items:center;position:relative}.cover-copy{position:relative;z-index:1;padding:28px 0 30px}.series{color:var(--gold);font-size:13px;letter-spacing:.12em;font-weight:730;text-transform:uppercase;margin:0 0 12px}.cover h1{font:normal clamp(48px,5.45vw,86px)/.99 var(--display);letter-spacing:.005em;margin:0;text-transform:uppercase}.cover h1 em{font:inherit;color:var(--gold)}.lead{max-width:390px;color:#e0dde3;font-size:17px;line-height:1.55;margin:21px 26px 24px 0}.cover figure{height:clamp(355px,32vw,470px);margin:0;position:relative;overflow:hidden;border:1px solid #575066;box-shadow:5px 6px 0 #212130}.cover figure img{height:100%;width:100%;object-fit:cover;display:block}.cover figcaption{position:absolute;bottom:12px;right:12px;padding:3px 10px;background:var(--paper);color:var(--ink);font-size:12px;letter-spacing:.04em;font-weight:750;transform:rotate(-2deg);box-shadow:2px 2px 0 #141322}.actions{display:flex;gap:12px 20px;flex-wrap:wrap;align-items:center}.actions button{border:0;border-radius:3px;background:var(--gold);color:#161526;font-weight:700;padding:11px 16px}.actions button:hover{background:#ffe5a1}.actions button span{font-size:13px;padding-right:4px}.actions a{font-size:14px;text-decoration:underline;text-underline-offset:4px}.selector{border-block:1px solid #343546;background:#171927}.selector nav{display:flex;gap:30px;min-height:49px;align-items:center}.selector a{display:inline-flex;align-items:center;gap:9px;font-weight:650;font-size:14px}.selector a i{background:var(--cyan);width:10px;height:10px;transform:skew(-11deg)}.selector a:nth-child(2) i{background:var(--purple)}.selector a:nth-child(3) i{background:var(--gold)}.selector a:hover{text-decoration:underline;text-underline-offset:4px}
.gallery{padding-bottom:35px}.roster,#episodios{padding:32px 0 34px;scroll-margin-top:8px;border-bottom:1px solid #383847}.roster{--accent:var(--cyan)}#legion{--accent:var(--purple)}#oficina{--accent:var(--gold)}.block-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 18px}.block-head h2,.detail h2,#cine h2{font:normal clamp(30px,3vw,46px)/1.08 var(--display);text-transform:uppercase;margin:0;letter-spacing:.012em}.block-head p{margin:6px 0 0;color:#c0bfcb;font-size:15px}.count{color:#c1bfcb;font-size:13px;white-space:nowrap}.cards{display:grid;gap:13px;grid-template-columns:repeat(5,minmax(0,1fr))}.card{appearance:none;padding:0;text-align:left;border:1px solid #474757;border-radius:4px;overflow:hidden;background:#1c1f30;display:flex;flex-direction:column;transition:transform .16s ease,border-color .16s ease}.card:hover{transform:translateY(-3px);border-color:var(--accent)}.portrait{position:relative;width:100%;overflow:hidden;border-bottom:2px solid var(--accent);background:#373747}.portrait img{display:block;width:100%;aspect-ratio:1.72;object-fit:cover}.plus{position:absolute;bottom:6px;right:6px;display:grid;place-items:center;width:26px;height:26px;background:#171927ed;border:1px solid #b5b3b7;border-radius:50%;color:white;font:500 21px/1 Arial}.info{padding:12px 13px 15px}.info h3{font:normal clamp(21px,1.8vw,29px)/1.05 var(--display);text-transform:uppercase;letter-spacing:.025em;margin:0 0 6px}.info p{font-size:14px;line-height:1.37;color:#e0dfe7;margin:0}#legion .cards{grid-template-columns:repeat(15,minmax(0,1fr));gap:13px}#legion .card{grid-column:span 3}#legion .card:nth-child(-n+3){grid-column:span 5;display:grid;grid-template-columns:41% 59%;align-items:stretch}#legion .card:nth-child(-n+3) .portrait{height:100%;min-height:134px;border-bottom:0;border-right:2px solid var(--accent)}#legion .card:nth-child(-n+3) img{position:absolute;height:100%;object-fit:cover}#legion .card:nth-child(-n+3) .info{align-self:center}#legion .card:first-child{background:#30233a;border-color:#ac83bd}#oficina .cards{grid-template-columns:repeat(3,minmax(0,1fr))}#oficina .card{display:grid;grid-template-columns:38% 62%;align-items:center}#oficina .portrait{height:100%;border-bottom:0;border-right:2px solid var(--accent);min-height:120px}#oficina img{position:absolute;height:100%;object-fit:cover}.episodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.episode{display:flex;align-items:center;gap:10px;background:#1d1e2c;border:1px solid #393b4a;padding:7px;border-radius:3px}.episode:hover{border-color:var(--gold)}.episode img{width:72px;aspect-ratio:16/10;object-fit:cover}.episode small,.episode strong{display:block}.episode small{font-size:12px;color:#c6c8d1}.episode strong{font-size:14px}.episode b{margin-left:auto;padding:0 7px;color:var(--gold)}footer{background:#161824;color:#c1c2cd}footer .wrap{justify-content:space-between;gap:15px;padding-block:20px;font-size:13px}
dialog{box-sizing:border-box;background:#1c2030;border:1px solid #666576;border-radius:7px;padding:0;color:var(--paper);width:min(445px,calc(100vw - 32px));max-height:90dvh;overflow:auto;box-shadow:0 24px 90px #000c}dialog::backdrop{background:#090a13c9}dialog>img{width:100%;display:block;max-height:32vh;object-fit:cover}.detail{padding:22px 24px 26px}.detail h2{font-size:40px}.detail .series{margin-bottom:5px}.detail #bio{margin:12px 0 18px}.link{display:inline-block;color:var(--cyan);font-weight:700;text-decoration:underline;text-underline-offset:4px}.close{position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;border-radius:50%;background:#141521f0;color:white;border:1px solid #aaa;font:26px/1 Arial}.close:hover{background:#3b3646}body:has(dialog[open]){overflow:hidden}#cine{width:min(850px,calc(100vw - 24px));padding:16px}#cine h2{font-size:26px;padding:0 40px 16px 0}#cine video{width:100%;display:block}
@media(max-width:1020px){.wrap{width:92%}.cover{grid-template-columns:42% 58%}.cover h1{font-size:clamp(44px,5.7vw,63px)}.actions{gap:12px}.cards{gap:9px}.info{padding:10px}.info p{font-size:13.5px}#legion .card:nth-child(-n+3){grid-template-columns:37% 63%}#oficina .card{display:flex}#oficina .portrait{min-height:0;aspect-ratio:2.3;border-right:0;border-bottom:2px solid var(--accent)}#oficina img{object-position:50% 35%}.episodes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:740px){.wrap{width:calc(100% - 32px)}.top{min-height:52px}.brand{gap:7px;font-size:15px}.brand img{width:27px;height:27px}.brand strong{font-size:12px}.top nav{gap:12px}.top nav a{font-size:12px}.cover{display:flex;flex-direction:column;align-items:stretch;margin:0 auto 17px}.cover-copy{padding:21px 0 16px}.cover h1{font-size:clamp(39px,9vw,61px);line-height:.98}.cover h1 br{display:none}.cover h1 em:before{content:" "}.series{font-size:11px;margin-bottom:6px}.lead{margin:10px 0 12px;max-width:560px;font-size:14px;line-height:1.4}.actions button{font-size:13px;padding:9px 11px}.actions a{font-size:12px}.cover figure{height:auto;aspect-ratio:1.86}.cover figure img{object-fit:cover}.cover figcaption{font-size:10px;bottom:6px;right:6px}.selector nav{min-height:44px;justify-content:space-between;gap:6px}.selector a{font-size:12px;gap:6px}.selector a i{width:8px;height:8px}.roster,#episodios{padding:23px 0}.block-head{margin:0 0 12px}.block-head h2{font-size:clamp(26px,6.5vw,38px)}.block-head p{font-size:14px;line-height:1.4}.count{font-size:11px}#equipo .cards,#legion .cards,#oficina .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#legion .card,#legion .card:nth-child(-n+3),#oficina .card{display:flex;grid-column:auto}#legion .card:nth-child(-n+3) .portrait,#oficina .portrait{height:auto;min-height:0;aspect-ratio:1.72;border-right:0;border-bottom:2px solid var(--accent)}#legion .card:nth-child(-n+3) img,#oficina img{position:static}#legion .card:first-child{display:grid;grid-column:span 2;grid-template-columns:46% 54%;align-items:center}#legion .card:first-child .portrait{border:0;border-right:2px solid var(--accent)}.plus{width:22px;height:22px;font-size:17px}.info h3{font-size:22px}.info p{font-size:13px}.episodes{grid-template-columns:1fr}.episode img{width:78px}footer .wrap{display:block}footer span{display:block}.gallery{padding-bottom:12px}}
@media(max-width:355px){.wrap{width:calc(100% - 20px)}.count{display:none}.top nav{gap:8px}.top nav a{font-size:11px}.info{padding:8px}.info p{font-size:12.5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card{transition:none}}
#civiles{--accent:#faad79}#civiles .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
#civiles .card{display:grid;grid-template-columns:38% 62%;align-items:center}#civiles .portrait{border-bottom:0;border-right:2px solid var(--accent)}#civiles .portrait img{aspect-ratio:1.55}
.selector a[href="#civiles"] i{background:#faad79}.selector a[href="#oficina"] i{background:var(--gold)}
.especial small{color:var(--gold);font-weight:700}.episode.especial{border-left:3px solid var(--gold)}
#identidad:not([hidden]){display:block;background:transparent;border:1px solid #8398a5;border-radius:4px;color:var(--paper);padding:6px 12px;margin:12px 0;font-weight:650}#identidad:hover{border-color:var(--cyan)}
@media(max-width:740px){#civiles .card{display:flex;align-items:stretch}#civiles .portrait{border:0;border-bottom:2px solid var(--accent)}#civiles .portrait img{aspect-ratio:1.72}.selector nav{flex-wrap:wrap;gap:5px 10px;padding-block:5px}.selector a{min-height:32px}}