@font-face{font-family:"Big Shoulders";src:url(fonts/big-shoulders.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Big Shoulders Inline";src:url(fonts/big-shoulders-inline-num.woff2) format("woff2");font-weight:900;font-display:swap;unicode-range:U+2E,U+30-39}
@font-face{font-family:"Schibsted Grotesk";src:url(fonts/schibsted-grotesk.woff2) format("woff2");font-weight:400 900;font-display:swap}

:root{
  /* Plan: cada serie ocupa un campo de color a sangre; el número del episodio es un dorsal
     gigante que se sale por la derecha; papel claro solo para tablas; amarillo solo para acciones. */
  --tinta:#0F1A3C;   /* texto sobre papel, cabecera y pie */
  --tiza:#F3F5EF;    /* papel y texto sobre color */
  --tarjeta:#FFD84D; /* acción principal (el amarillo de los subtítulos de los vídeos) */
  --lima:#C6F432;    /* opción A de las encuestas */
  --violeta:#A879FF; /* opción B */
  --cian:#3EC6FF;    /* opción C */
  --cesped:#0A6B46;  /* campo de la serie de fútbol */
  --grana:#A61E3A;   /* campo de la segunda serie */
  --anil:#2B2A86;    /* campo de la tercera serie */
  --oro:#E2B33C;     /* solo trofeos y el primer cajón del podio (el dorado de la serie de fútbol) */
  --field:var(--tinta);
  --line:rgba(243,245,239,.3);
  --soft:rgba(243,245,239,.78);
  --rule:rgba(15,26,60,.16);
  --display:"Big Shoulders","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --numeral:"Big Shoulders Inline","Big Shoulders","Arial Narrow",Impact,sans-serif;
  --body:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px,5vw,32px);
  --measure:34rem;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--tinta);color:var(--tiza);font:400 1rem/1.5 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,p,ol,ul,figure{margin:0}
h1,h2{overflow-wrap:break-word}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--tarjeta);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[hidden]{display:none!important}

.page{min-height:100vh;display:flex;flex-direction:column;background:var(--field);color:var(--tiza)}
.page > main{flex:1;min-width:0}

/* ── Aviso de contenido de ejemplo ── */
.demo{background:var(--tiza);color:var(--tinta);font:600 .8rem/1.35 var(--body);padding:8px var(--gutter)}

/* ── Cabecera: marca y una pestaña por serie ── */
.top{background:var(--tinta);padding:14px var(--gutter) 0;display:grid;gap:14px}
.mark{font:900 1.9rem/1 var(--display);letter-spacing:.01em;text-decoration:none;display:inline-flex;align-items:baseline;gap:.16em;width:max-content}
.mark__dots{display:inline-flex;gap:.13em}
.mark__dots i{width:.26em;height:.26em;border-radius:50%;background:var(--lima);animation:dot .45s both}
.mark__dots i:nth-child(2){background:var(--violeta);animation-delay:.22s}
@keyframes dot{from{opacity:0;transform:translateY(-.4em)}to{opacity:1;transform:none}}

.tabs{display:flex;align-items:flex-end;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gutter) * -1);padding:4px var(--gutter) 0}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;padding:10px 15px 11px;border-radius:12px 12px 0 0;background:var(--c);color:var(--tiza);font:700 .95rem/1.1 var(--body);text-decoration:none;white-space:nowrap}
.tab[aria-current]{padding-top:14px;padding-bottom:13px}
.page[data-serie] .tab:not([aria-current]){box-shadow:inset 0 -6px 0 rgba(15,26,60,.45)}

/* ── Dorsal: el número de episodio en grande ── */
.num{font:900 1em/.78 var(--numeral);font-size:clamp(8.5rem,44vw,13rem);font-variant-numeric:lining-nums;letter-spacing:-.01em;color:var(--tiza);text-decoration:none;display:block;position:relative}

/* ── Botones y etiquetas ── */
.btn{display:flex;align-items:center;justify-content:center;min-height:54px;padding:14px 20px;border:0;border-radius:14px;background:var(--tarjeta);color:var(--tinta);font:800 1.06rem/1.15 var(--body);text-decoration:none;text-align:center;cursor:pointer}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--tiza);box-shadow:inset 0 0 0 2px var(--tiza)}
.paper .btn--ghost{color:var(--tinta);box-shadow:inset 0 0 0 2px var(--tinta)}
.tag{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--tiza);color:var(--tinta);font:700 .8rem/1.4 var(--body);vertical-align:middle}
.link{font-weight:700;text-underline-offset:3px}

/* ── Inicio ── */
.lead{background:var(--tinta);padding:22px var(--gutter) 26px;display:grid;gap:8px}
.lead__title{font:900 clamp(2.3rem,10vw,4rem)/.92 var(--display);text-transform:uppercase;text-wrap:balance;max-width:14ch}
.lead__sub{color:var(--soft);max-width:var(--measure)}

.bands{display:grid}
.band{background:var(--field);padding:26px var(--gutter) 30px;display:grid;gap:14px;align-content:start;position:relative;overflow:hidden;isolation:isolate}
.band__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px}
.band__text{display:grid;gap:8px;padding-bottom:4px}
.band__title{font:900 clamp(1.9rem,8.4vw,2.7rem)/.94 var(--display);text-transform:uppercase;text-wrap:balance}
.band__title a{text-decoration:none}
.band__hook{color:var(--soft);font-size:.98rem;line-height:1.4}
.band__num{margin-right:-.05em}
.band__new{font-weight:700}
.band__more{display:flex;flex-wrap:wrap;gap:6px 20px}

/* Marcas de cal del campo, solo en la serie de fútbol */
[data-motif="pitch"] .num::before{content:"";position:absolute;z-index:-1;left:50%;top:46%;width:1.18em;height:1.18em;border:2px solid var(--line);border-radius:50%;transform:translate(-50%,-50%)}
[data-motif="pitch"] .num::after{content:"";position:absolute;z-index:-1;left:50%;top:-200vh;bottom:-.14em;border-left:2px solid var(--line)}

/* ── Página de serie ── */
.hero{padding:26px var(--gutter) 30px;display:grid;gap:14px;position:relative;overflow:hidden;isolation:isolate}
.hero__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px}
.hero__name{display:grid;gap:8px;padding-bottom:6px}
.hero__title{font:900 clamp(2.2rem,9.6vw,3.6rem)/.92 var(--display);text-transform:uppercase;text-wrap:balance}
.hero__syn{max-width:var(--measure)}
.hero__new{font-weight:700;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.hero__actions{display:grid;gap:10px}

.block{padding:26px var(--gutter) 30px;border-top:2px solid var(--line);display:grid;gap:14px}
.block__title{font:800 1.75rem/1 var(--display);text-wrap:balance}
.block__note{color:var(--soft);font-size:.95rem}

/* Álbum de episodios: hueco con borde discontinuo = sin ver; relleno = visto */
.album{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:8px}
.slot{display:grid;place-items:center;aspect-ratio:1;border:2px dashed rgba(243,245,239,.5);border-radius:10px;font:800 1.55rem/1 var(--display);color:var(--tiza);text-decoration:none}
.slot--new{border:2px solid var(--tarjeta);color:var(--tarjeta)}
.slot.is-seen{background:var(--tiza);border:2px solid var(--tiza);color:var(--tinta)}
.slot[aria-current="page"]{outline:3px solid var(--tarjeta);outline-offset:2px}
.slot--word{font-size:1rem}

/* Listas de enlaces */
.rows{list-style:none;padding:0;border-top:2px solid var(--line)}
.rows a{display:grid;gap:2px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none}
.rows strong{font:800 1.3rem/1.1 var(--display)}
.rows span{color:var(--soft);font-size:.93rem;line-height:1.4}
.paper .rows{border-top-color:var(--tinta)}
.paper .rows a{border-bottom-color:var(--rule)}
.paper .rows span{color:rgba(15,26,60,.74)}

/* Otras series */
.others{display:grid;border-top:2px solid var(--line)}
.others__title{padding:22px var(--gutter) 12px;font:800 1.75rem/1 var(--display)}
.mini{background:var(--field);padding:16px var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;text-decoration:none;position:relative;overflow:hidden;isolation:isolate}
.mini__title{font:900 1.6rem/1 var(--display);text-transform:uppercase;display:block}
.mini__sub{display:block;color:var(--soft);font-size:.93rem;margin-top:5px}
.mini .num{font-size:5rem}

/* ── Episodio ── */
.ep{padding:18px 0 0;display:grid;gap:0}
.ep__top{padding:0 var(--gutter) 18px;display:grid;gap:10px;position:relative;overflow:hidden;isolation:isolate}
.crumb a{font-weight:700;text-underline-offset:3px}
.ep__head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:14px}
.ep__num{font-size:clamp(5.6rem,27vw,8.5rem)}
.ep__title{font:900 clamp(2rem,9vw,3.2rem)/.92 var(--display);text-transform:uppercase;text-wrap:balance;padding-bottom:4px}
.ep__stage{padding:0 var(--gutter) 22px;display:grid;gap:14px}
.player{--h:min(74vh,calc((100vw - 2 * var(--gutter)) * 16 / 9));height:var(--h);aspect-ratio:9/16;margin:0 auto;border-radius:18px;overflow:hidden;background:var(--tinta);position:relative}
@supports (height:1svh){.player{--h:min(74svh,calc((100vw - 2 * var(--gutter)) * 16 / 9))}}
.player--wide{height:auto;width:100%;aspect-ratio:16/9}
.player iframe,.player video{width:100%;height:100%;border:0;display:block;background:#000}
.player__facade,.player__empty{position:absolute;inset:0;width:100%;border:0;background:var(--tinta);color:var(--tiza);display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}
.player__facade{cursor:pointer;background-size:cover;background-position:center}
.player__play{width:74px;height:74px;border-radius:50%;background:var(--tarjeta);display:grid;place-items:center}
.player__play::before{content:"";border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent var(--tinta);margin-left:5px}
.player__empty .player__play{background:transparent;box-shadow:inset 0 0 0 2px var(--line)}
.player__empty .player__play::before{border-left-color:var(--line)}
.player__label{font-weight:700;max-width:18ch}
.ep__next{display:grid;gap:10px}
.cliff{border:2px solid var(--line);border-radius:20px;padding:20px;display:grid;gap:12px}
.cliff__word{font:900 2.5rem/1 var(--display);text-transform:uppercase}
.ep__tags{display:flex;flex-wrap:wrap;gap:6px}

/* La decisión del capítulo: A lima, B violeta, C cian, como en los vídeos */
.decide{border:2px solid var(--line);border-radius:20px;padding:18px 20px 20px;display:grid;gap:10px}
.decide__title{font:900 2rem/1 var(--display);text-transform:uppercase}
.decide__opts{list-style:none;padding:0;display:grid;gap:8px}
.decide__opts li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;font-weight:700}
.chip{display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:9px;font:900 1.25rem/1 var(--display);color:var(--tinta)}
.chip--a{background:var(--lima)}
.chip--b{background:var(--violeta)}
.chip--c{background:var(--cian)}

/* Tarjetas de «Más de esta serie»: claras y con flecha para que se vea que se tocan */
.tiles{list-style:none;padding:0;display:grid;gap:10px}
.tile{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:15px 14px 16px 18px;border-radius:16px;background:var(--tiza);color:var(--tinta);text-decoration:none}
.tile strong{font:800 1.4rem/1.1 var(--display);display:block}
.tile__sub{display:block;font-size:.93rem;line-height:1.35;color:rgba(15,26,60,.74);margin-top:3px}
.tile__go{width:40px;height:40px;border-radius:50%;background:var(--tinta);display:grid;place-items:center}
.tile__go::before{content:"";width:10px;height:10px;border-top:3px solid var(--tiza);border-right:3px solid var(--tiza);transform:rotate(45deg);margin-right:4px}
.tile:active{transform:translateY(1px)}

/* Portada de la serie como fondo teñido del color de la serie */
.cover{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 30%;opacity:.5;mix-blend-mode:luminosity;-webkit-mask-image:linear-gradient(100deg,transparent 8%,#000 78%);mask-image:linear-gradient(100deg,transparent 8%,#000 78%);pointer-events:none}

/* ── Papel: tablas y datos ── */
.data{padding:18px 0 28px;display:grid;gap:16px}
.data__top{padding:0 var(--gutter) 6px;display:grid;gap:10px;position:relative;overflow:hidden;isolation:isolate}
.data__title{font:900 clamp(2.2rem,9.6vw,3.6rem)/.92 var(--display);text-transform:uppercase;text-wrap:balance}
.data__lede{max-width:var(--measure)}
.note{font-size:.88rem;line-height:1.4;color:var(--soft);max-width:var(--measure)}
.facts{padding-left:1.15em;display:grid;gap:6px}
.data__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px}
.data__head .num{font-size:clamp(6rem,30vw,9rem);margin-top:6px}
.data__actions{padding:0 var(--gutter);display:grid;gap:10px}
.paper{background:var(--tiza);color:var(--tinta);border-radius:20px;margin:0 var(--gutter);padding:20px 18px 22px;display:grid;gap:14px;min-width:0}
.paper__title{font:800 1.6rem/1 var(--display)}
.paper p{max-width:var(--measure)}
.scroll{overflow-x:auto;margin:0 -18px;padding:0 18px}
.table{width:100%;border-collapse:collapse;font-size:.93rem}
.table th{font-weight:700;text-align:right;padding:6px 6px 7px;border-bottom:2px solid var(--tinta);white-space:nowrap}
.table td{padding:9px 6px;text-align:right;border-bottom:1px solid var(--rule);white-space:nowrap;font-variant-numeric:tabular-nums}
.table td.wrap{font-variant-numeric:normal}
.table .l{text-align:left}
.table .wrap{white-space:normal}
.table .is-prota td{font-weight:800}
.table .is-prota td:first-child{box-shadow:inset 4px 0 0 var(--tarjeta)}
.table tfoot td{font-weight:800;border-bottom:0;border-top:2px solid var(--tinta)}
.table--kv th{font-weight:400;color:rgba(15,26,60,.74);white-space:normal;width:38%;vertical-align:top;padding:9px 6px;border-bottom:1px solid var(--rule)}
.table--kv td{vertical-align:top}
.table__key{font-size:.86rem;color:rgba(15,26,60,.74)}
@media (max-width:479px){.table .opt,.opt-text{display:none}}
.final{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;text-align:center}
.final__team{font:800 1.35rem/1.05 var(--display);text-wrap:balance}
.final__score{font:900 2.6rem/1 var(--display);font-variant-numeric:tabular-nums}
.podium{list-style:none;padding:0;display:grid;gap:10px;counter-reset:pos}
.podium li{counter-increment:pos;display:grid;grid-template-columns:1.9rem minmax(0,1fr);align-items:baseline}
.podium li::before{content:counter(pos);font:900 1.7rem/1 var(--display)}
.podium strong{font:800 1.3rem/1.1 var(--display);display:block}
.podium span{font-size:.93rem;color:rgba(15,26,60,.74)}
.pair{display:grid;gap:14px}
.who{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;text-decoration:none}
.who__num{font:900 3.4rem/.8 var(--numeral);min-width:1.1em;text-align:center}
.who strong{font:800 1.35rem/1.05 var(--display);display:block}
.who__sub{font-size:.93rem;line-height:1.4;color:rgba(15,26,60,.74);display:block;margin-top:3px}
.step{display:flex;justify-content:space-between;gap:16px;padding:0 var(--gutter)}

/* Lista de decisiones */
.decs{list-style:none;padding:0;display:grid}
.dec{padding:14px 0;border-bottom:1px solid var(--rule);display:grid;gap:4px}
.dec:first-child{padding-top:0}
.dec:last-child{border-bottom:0;padding-bottom:0}
.dec__cap{font:800 1.3rem/1.1 var(--display)}
.dec__cap a{text-underline-offset:3px}
.dec__pov{font:700 .76rem/1.4 var(--body);padding:2px 8px;border-radius:999px;background:var(--tinta);color:var(--tiza);vertical-align:middle;margin-left:4px}
.dec__ask{color:rgba(15,26,60,.74);font-size:.95rem}
.dec__won{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;font-weight:700;margin-top:4px}
.dec__won > span:only-child{grid-column:1 / -1}
.dec__open{font-weight:700}

/* ── Tanda de penaltis ── */
.pk{display:grid;gap:14px;padding:0 var(--gutter)}
.pk__bar{display:grid;gap:10px}
.pk__dots{list-style:none;padding:0;display:flex;gap:8px}
.pk__dots li{width:26px;height:26px;border-radius:50%;border:2px dashed var(--line)}
.pk__dots li.is-goal{background:var(--tiza);border:2px solid var(--tiza)}
.pk__dots li.is-miss{border:2px solid var(--tiza);background:linear-gradient(135deg,transparent 44%,var(--tiza) 44%,var(--tiza) 56%,transparent 56%)}
.pk__msg{font-weight:700;min-height:3em}
.pk__pitch{position:relative;aspect-ratio:10/9;max-width:520px;width:100%;margin:0 auto;border-radius:18px;overflow:hidden;background:
  linear-gradient(var(--line),var(--line)) 0 58%/100% 2px no-repeat,
  repeating-linear-gradient(90deg,rgba(15,26,60,.12) 0 12.5%,transparent 12.5% 25%)}
.pk__goal{position:absolute;left:8%;top:6%;width:84%;height:52%}
.pk__zones{position:absolute;left:8%;top:6%;width:84%;height:52%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
.pk__zone{border:0;background:transparent;cursor:pointer;display:grid;place-items:center;padding:0}
.pk__zone::before{content:"";width:22px;height:22px;border-radius:50%;border:2px solid rgba(243,245,239,.55)}
.pk__zone:hover::before,.pk__zone:focus-visible::before{background:var(--tarjeta);border-color:var(--tarjeta)}
.pk__zone:disabled{cursor:default}
.pk__zone:disabled::before{opacity:0}
.pk__keeper{position:absolute;left:50%;top:27%;width:15%;height:31%;margin-left:-7.5%;transform-origin:50% 90%;transition:left .32s cubic-bezier(.2,.7,.3,1),top .32s cubic-bezier(.2,.7,.3,1),transform .32s cubic-bezier(.2,.7,.3,1)}
.pk__keeper svg,.pk__ball svg{width:100%;height:100%;display:block}
.pk__ball{position:absolute;left:50%;top:86%;width:11%;aspect-ratio:1;margin:-5.5% 0 0 -5.5%;transition:left .36s cubic-bezier(.3,.6,.4,1),top .36s cubic-bezier(.3,.6,.4,1),transform .36s ease-out}
.pk__spot{position:absolute;left:50%;top:86%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--line)}
.pk__call{position:absolute;left:0;right:0;top:66%;text-align:center;font:900 3rem/1 var(--display);text-transform:uppercase;pointer-events:none}
.pk__end,.quiz__end{display:grid;gap:12px}
.result{display:flex;align-items:flex-end;gap:14px}
.result .num{font-size:7.5rem}
.result__of{font:900 2.2rem/1 var(--display);text-transform:uppercase;padding-bottom:.1em}

/* ── Quiz ── */
.quiz{display:grid;gap:14px;padding:0 var(--gutter)}
.quiz__play{display:grid;gap:14px}
.quiz__count{font-weight:700;color:var(--soft)}
.quiz__q{font:800 clamp(1.7rem,7.4vw,2.3rem)/1.05 var(--display);text-wrap:balance}
.quiz__opts{display:grid;gap:10px}
.opt{display:flex;align-items:center;gap:12px;min-height:54px;padding:13px 16px;border-radius:14px;border:2px solid var(--tiza);background:transparent;color:var(--tiza);font:700 1.02rem/1.25 var(--body);text-align:left;cursor:pointer}
.opt__k{font:900 1.7rem/1 var(--display)}
.opt--a{background:var(--lima);border-color:var(--lima);color:var(--tinta)}
.opt--b{background:var(--violeta);border-color:var(--violeta);color:var(--tinta)}
.opt--c{background:var(--cian);border-color:var(--cian);color:var(--tinta)}
.opt:disabled{cursor:default;opacity:.45}
.opt.is-right{background:var(--tiza);color:var(--tinta);opacity:1}
.opt.is-picked{opacity:1;box-shadow:0 0 0 3px var(--field),0 0 0 6px var(--tiza)}
.opt.is-wrong{opacity:1;text-decoration:line-through;border-style:dashed}
.quiz__fb{font-weight:700;min-height:1.5em}
/* Resultados de la votación: barra con el color de cada opción sobre fondo claro */
.opt--a{--c:var(--lima)}
.opt--b{--c:var(--violeta)}
.opt--c{--c:var(--cian)}
.opt.has-result{position:relative;isolation:isolate;overflow:hidden;background:var(--tiza);border-color:var(--c);color:var(--tinta);opacity:1}
.opt.has-result::before{content:"";position:absolute;z-index:-1;inset:0 auto 0 0;width:var(--p,0%);background:var(--c);transition:width .7s ease-out}
.opt__pct{margin-left:auto;padding-left:10px;font:900 1.5rem/1 var(--display);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.opt.has-result::before{transition:none}}

/* ── Texto corrido (privacidad) ── */
.prose{display:grid;gap:12px}
.prose h2{font:800 1.4rem/1.1 var(--display);margin-top:6px}
.prose ul{padding-left:1.2em;display:grid;gap:6px}

/* ── Pie ── */
.foot{background:var(--tinta);padding:26px var(--gutter) 34px;display:grid;gap:10px}
.foot__mark{font:900 1.5rem/1 var(--display)}
.foot__text{color:var(--soft);font-size:.93rem}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 20px;font-weight:700;font-size:.95rem}
.foot a{text-underline-offset:3px}

/* ── Dibujos de los jugadores ── */
/* Todos están a la misma escala: --u es cuánto mide en pantalla cada píxel del dibujo. */
.fig,.dorsal{display:block;flex:none;width:calc(var(--w) * var(--u,.2px));height:calc(var(--h) * var(--u,.2px));background:center/100% 100% no-repeat}
.cara{display:block;flex:none;width:var(--s,56px);height:var(--s,56px);border-radius:50%;background:var(--cesped) center/cover no-repeat;box-shadow:0 0 0 2px var(--tinta)}

/* Los dos protagonistas, de pie sobre la línea que cierra el bloque */
.hero--duo,.band--duo{padding-bottom:0}
.duo{display:flex;justify-content:space-between;align-items:flex-end;margin-top:6px}
.duo__p{display:flex;align-items:flex-end;gap:10px;text-decoration:none}
.duo__p--r{flex-direction:row-reverse;text-align:right}
.duo .fig{--u:.19px}
.duo__name{display:grid;gap:4px;padding-bottom:12px}
.duo__n{font:900 2.5rem/.8 var(--numeral)}
.duo__name strong{font:900 1.35rem/1 var(--display);text-transform:uppercase;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.band--duo .duo{margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);padding:0 var(--gutter);border-bottom:2px solid var(--line)}

/* Dibujo delante del dorsal en la ficha del jugador */
.data__pic{display:flex;align-items:flex-end}
.data__pic .fig{--u:.23px;position:relative;z-index:1;margin-right:-10px}

/* Banderín con los colores del club y trofeos */
.pen{width:14px;height:18px;flex:none;color:var(--tinta)}
.club{display:inline-flex;align-items:center;gap:7px;max-width:100%;vertical-align:middle}
.club > strong{min-width:0}
.club .cara{--s:26px}
.table .board__note{display:block;margin-top:2px}
.trophy{fill:currentColor;--cut:var(--tiza)}
.trophy .cut{fill:var(--cut)}
.trophy .cut-line{fill:none;stroke:var(--cut);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.paper__title .trophy{width:1.05em;height:1.18em;vertical-align:-.2em;margin-right:.3em}

/* Cara a cara: césped segado, medio campo y marcador */
.duel{margin:0 var(--gutter);border:2px solid var(--line);border-radius:20px;overflow:hidden;background:repeating-linear-gradient(90deg,rgba(243,245,239,.055) 0 12.5%,transparent 12.5% 25%)}
.duel__title{font:900 1.9rem/1 var(--display);text-transform:uppercase;text-align:center;padding:16px 12px 4px}
.duel__pitch{display:grid;grid-template-columns:1fr 1fr;align-items:end;position:relative;isolation:isolate;border-bottom:2px solid var(--line)}
.duel__pitch::before{content:"";position:absolute;z-index:-1;left:50%;top:0;bottom:0;border-left:2px solid var(--line)}
.duel__pitch::after{content:"";position:absolute;z-index:-1;left:50%;top:44%;width:7.5rem;height:7.5rem;border:2px solid var(--line);border-radius:50%;transform:translate(-50%,-50%)}
.duel__side{display:grid;justify-items:center;text-align:center;gap:2px;padding:10px 6px 12px;text-decoration:none;position:relative}
.duel__num{position:absolute;z-index:-1;top:22px;left:50%;transform:translateX(-50%);font:900 clamp(7rem,40vw,11rem)/.8 var(--numeral);opacity:.16}
.duel .fig{--u:.33px;margin-bottom:8px}
.duel__side strong{font:900 1.4rem/1 var(--display);text-transform:uppercase}
.duel__club{font-size:.82rem;line-height:1.3;color:var(--soft)}
.duel__table{width:100%;border-collapse:collapse;background:var(--tinta)}
.duel__table th{font:600 .92rem/1.2 var(--body);color:var(--soft);text-align:center;padding:9px 4px}
.duel__table td{width:27%;text-align:center;padding:7px 4px;font:900 1.9rem/1 var(--display);color:rgba(243,245,239,.42)}
.duel__table td.is-up{color:var(--tiza)}
.duel__table tr + tr > *{border-top:1px solid rgba(243,245,239,.14)}
.duel__key{background:var(--tinta);padding:6px 16px 16px;text-align:center;font-size:.84rem;line-height:1.4;color:var(--soft)}

/* Vitrina: trofeos dorados en baldas de tres */
.cabinets{display:grid;gap:16px;margin:0 var(--gutter)}
.cabinet{border-radius:20px;background:linear-gradient(165deg,#1B2B5E,var(--tinta) 58%);box-shadow:inset 0 0 0 2px rgba(243,245,239,.16);padding:18px 18px 22px;display:grid;gap:14px;min-width:0}
.data > .cabinet{margin:0 var(--gutter)}
.cabinet__who{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;text-decoration:none}
.cabinet .cara{box-shadow:0 0 0 2px var(--tiza)}
.cabinet__title{font:800 1.6rem/1 var(--display)}
a.cabinet__who .cabinet__title{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.cabinet__sub{font-size:.9rem;color:var(--soft);margin-top:3px}
.cabinet__shelf{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px}
.cabinet__shelf li{display:grid;justify-items:center;align-content:start;text-align:center;gap:2px}
.cabinet__cup{width:100%;min-height:64px;display:grid;justify-items:center;align-items:end;border-bottom:3px solid rgba(243,245,239,.3);margin-bottom:7px}
.cabinet__cup .trophy{width:52px;height:58px;color:var(--oro);--cut:var(--tinta)}
.cabinet__shelf strong{font:800 1.12rem/1.05 var(--display);padding:0 4px;text-wrap:balance}
.cabinet__shelf li > span:last-child{font-size:.8rem;color:var(--soft)}

/* Podio: el primero en el centro y más alto */
.gala{display:grid;gap:10px}
.gala + .gala{padding-top:16px;border-top:1px solid var(--rule)}
.gala__year{font:800 1.25rem/1 var(--display)}
.gala__year a{text-underline-offset:3px}
.podio{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1.14fr 1fr;align-items:end;gap:6px;text-align:center;border-bottom:3px solid var(--tinta)}
.podio__p{display:grid;justify-items:center;gap:2px;min-width:0}
.podio__p--1{order:2}
.podio__p--2{order:1}
.podio__p--3{order:3}
.podio .cara{--s:52px;margin-bottom:4px}
.podio__p strong{font:800 1.12rem/1.05 var(--display);text-wrap:balance}
.podio__p span{font-size:.8rem;line-height:1.25;color:rgba(15,26,60,.74)}
.podio__p .podio__pts{font-weight:700;color:var(--tinta)}
.podio__p .podio__step{width:100%;height:48px;margin-top:8px;display:grid;place-items:center;border-radius:10px 10px 0 0;background:var(--tinta);color:var(--tiza);font:900 2.1rem/1 var(--numeral)}
.podio__p--2 .podio__step{height:70px}
.podio__p--1 .podio__step{height:100px;background:var(--oro);color:var(--tinta)}
.podium[start]{padding-top:4px}

/* Cuadro de honor por temporada y otras ligas */
.board{list-style:none;padding:0;border-top:2px solid var(--tinta)}
.board__row{display:grid;grid-template-columns:5.3rem minmax(0,1fr);gap:4px 12px;padding:14px 0;border-bottom:1px solid var(--rule)}
.board__season{display:grid;align-content:start;gap:3px;text-decoration:none}
.board__season strong{font:900 1.35rem/1 var(--display);white-space:nowrap}
.board__season span{font-size:.8rem;color:rgba(15,26,60,.74);text-decoration:underline;text-underline-offset:3px}
.board__list{list-style:none;padding:0;display:grid;gap:9px}
.board__list li{display:grid;gap:1px}
.board__comp,.board__note{font-size:.8rem;line-height:1.3;color:rgba(15,26,60,.74)}
.board .club strong,.leagues .club strong{font:800 1.2rem/1.1 var(--display)}
.leagues{display:grid;gap:18px}
.leagues h3{font:800 1.25rem/1 var(--display);margin:0 0 7px}
.leagues ol{list-style:none;padding:0;border-top:2px solid var(--tinta)}
.leagues li{display:grid;grid-template-columns:4.4rem minmax(0,1fr);align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--rule)}
.leagues li > span:first-child{font-size:.86rem;color:rgba(15,26,60,.74)}
@media (min-width:560px){.leagues{grid-template-columns:1fr 1fr;column-gap:28px}}

/* Camisetas del jugador, de espaldas y con el dorsal */
.shirts{list-style:none;padding:0;display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 8px}
.shirts li{flex:1 1 86px;display:grid;justify-items:center;text-align:center;gap:2px}
.shirts .dorsal{--u:.3px;margin-bottom:6px}
.shirts strong{font:800 1.12rem/1.05 var(--display)}
.shirts span{font-size:.8rem;color:rgba(15,26,60,.74)}

/* Cara del jugador con su dorsal en las listas */
.who--pic{gap:14px}
.who__pic{position:relative;display:block}
.who__pic .cara{--s:64px}
.who__dorsal{position:absolute;right:-6px;bottom:-4px;min-width:1.7em;padding:3px 5px 2px;border-radius:999px;background:var(--tinta);color:var(--tiza);font:900 .95rem/1 var(--display);text-align:center}

/* ── Hueco de anuncio (apagado durante la prueba) ── */
.ad{padding:14px var(--gutter);min-height:120px;display:grid;place-items:center}

/* ── Pantallas anchas ── */
@media (min-width:860px){
  .top{grid-template-columns:auto 1fr;align-items:end;gap:32px;padding-top:18px}
  .tabs{margin:0;padding:0}
  .bands{grid-template-columns:repeat(3,1fr)}
  .band{padding-top:34px;padding-bottom:40px;min-height:30rem}
  .band__head{grid-template-columns:1fr;align-items:start}
  .band__num{order:-1;margin:0 0 8px -.04em}
  .hero,.block,.ep__top,.ep__stage,.data__top,.pk,.quiz,.data__actions,.step,.others__title{padding-left:max(var(--gutter),calc(50% - 30rem));padding-right:max(var(--gutter),calc(50% - 30rem))}
  .paper,.duel,.cabinets,.data > .cabinet{margin-left:max(var(--gutter),calc(50% - 30rem));margin-right:max(var(--gutter),calc(50% - 30rem))}
  .cabinets{grid-template-columns:1fr 1fr}
  .hero--duo .duo{max-width:30rem}
  .band--duo{display:flex;flex-direction:column}
  .band--duo .duo{margin-top:auto;padding-top:12px}
  .duel .fig{--u:.4px}
  .duel__pitch::after{width:11rem;height:11rem}
  .mini{padding-left:max(var(--gutter),calc(50% - 30rem));padding-right:max(var(--gutter),calc(50% - 30rem))}
  .hero__actions,.ep__next,.data__actions{grid-template-columns:repeat(auto-fit,minmax(15rem,max-content))}
  .pair{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .btn{padding-left:28px;padding-right:28px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}
.ep__sum{font-size:1.05rem;line-height:1.55;max-width:60ch}

/* Ranking de penaltis */
.rk__title{font:800 1.5rem/1.05 var(--display)}
.rk__form{display:grid;gap:12px}
.rk__form[hidden]{display:none}
.rk__field{display:grid;gap:5px;font-weight:700;font-size:.95rem}
.rk__name{font:700 1.05rem/1.2 var(--body);padding:13px 14px;border:2px solid var(--tinta);border-radius:12px;background:#fff;color:var(--tinta);min-width:0;width:100%;box-sizing:border-box}
.rk__sides{border:0;padding:0;margin:0;display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.rk__sides legend{font-weight:700;font-size:.95rem;padding:0;margin-bottom:6px}
.rk__side{flex:1 1 0;position:relative;cursor:pointer}
.rk__side input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.rk__side span{display:block;text-align:center;padding:12px;border:2px solid var(--tinta);border-radius:12px;font-weight:800}
.rk__side input:checked+span{background:var(--tinta);color:var(--tiza)}
.rk__side input:focus-visible+span{outline:3px solid var(--tinta);outline-offset:2px}
.rk .btn{background:var(--tinta);color:var(--tiza)}
.rk .btn:disabled{opacity:.55}
.rk__msg,.rk__duel,.rk__me{font-weight:700}
.rk__list{list-style:none;padding:0;margin:0;display:grid}
.rk__list li{display:grid;grid-template-columns:2em minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:9px 8px;border-bottom:1px solid var(--rule)}
.rk__list li.rk__empty{display:block;padding:4px 0;border:0;opacity:.75}
.rk__list li.is-me{background:var(--lima);border-radius:10px;border-bottom-color:transparent}
.rk__pos{font:800 1.2rem/1 var(--display);opacity:.6}
.rk__who{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk__tag{font-weight:600;font-size:.8rem;opacity:.65;margin-left:8px}
.rk__pts{font:800 1.5rem/1 var(--display)}
/* Personajes */
.cast{list-style:none;padding:0;margin:0;display:grid}
.cast__p{padding:12px 0;border-bottom:1px solid var(--rule);display:grid;gap:3px}
.cast__p:first-child{padding-top:0}
.cast__p:last-child{border-bottom:0;padding-bottom:0}
.cast__name strong{font:800 1.3rem/1.1 var(--display)}
.cast__role{font-size:.78rem;font-weight:700;opacity:.65;text-transform:uppercase;letter-spacing:.04em;margin-left:6px}

/* Dibujos de los jugadores (tools/figuras.py) */
.cara--izan-madrid{background-image:url(img/cara-izan-madrid.webp)}
.cara--izan-zaragoza{background-image:url(img/cara-izan-zaragoza.webp)}
.cara--quim-barcelona{background-image:url(img/cara-quim-barcelona.webp)}
.cara--quim-liverpool{background-image:url(img/cara-quim-liverpool.webp)}
.cara--quim-madrid{background-image:url(img/cara-quim-madrid.webp)}
.dorsal--izan-madrid{background-image:url(img/dorsal-izan-madrid.webp);--w:204;--h:504}
.dorsal--izan-zaragoza{background-image:url(img/dorsal-izan-zaragoza.webp);--w:204;--h:504}
.dorsal--quim-barcelona{background-image:url(img/dorsal-quim-barcelona.webp);--w:204;--h:547}
.dorsal--quim-liverpool{background-image:url(img/dorsal-quim-liverpool.webp);--w:204;--h:547}
.dorsal--quim-madrid{background-image:url(img/dorsal-quim-madrid.webp);--w:204;--h:547}
.fig--izan-madrid{background-image:url(img/fig-izan-madrid.webp);--w:271;--h:688}
.fig--izan-zaragoza{background-image:url(img/fig-izan-zaragoza.webp);--w:271;--h:688}
.fig--quim-barcelona{background-image:url(img/fig-quim-barcelona.webp);--w:236;--h:747}
.fig--quim-liverpool{background-image:url(img/fig-quim-liverpool.webp);--w:236;--h:747}
.fig--quim-madrid{background-image:url(img/fig-quim-madrid.webp);--w:236;--h:747}