/* p-personaje.css · página /personaje/ · prefijo pj- · solo tokens.
   El personaje va siempre sobre Blanco o Papel, también con el sitio en oscuro: cada lienzo que lo lleva declara
   data-theme="light" y sus roles (--texto, --superficie, --borde…) vuelven a claro dentro de él. */

/* ---- ritmo de la página: secciones más juntas y bajadas cortas ---- */
.sec{padding:var(--s-48) 0}
.sec-head{max-width:none;margin-bottom:var(--s-24)}
.sec-head .lede{margin-top:var(--s-8)}
.pj-gap{margin-top:var(--s-32)}
h3.pj-gap{margin-top:var(--s-48)}

.pj-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:var(--r-pill);background:var(--tinta);color:var(--blanco);font-size:var(--t-12);font-weight:var(--bold);font-style:normal;line-height:1;flex:none}
.pj-n.p{background:var(--texto);color:var(--fondo)}

/* ---- hero ---- */
.hero.pj-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-48);align-items:center;padding:var(--s-48) 0 var(--s-32)}
.pj-hero h1{font-size:var(--t-58);letter-spacing:var(--trk-58);max-width:none}
.pj-hero-fig{position:relative;background:var(--papel);border-radius:var(--r-tarjeta);height:clamp(420px,60vh,520px);display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;color:var(--tinta)}
.pj-hero-tag{position:absolute;left:var(--s-16);top:var(--s-16);z-index:1;background:var(--blanco);color:var(--pizarra)}
.pj-hero-esc{min-height:0;display:flex;align-items:flex-end;justify-content:center;padding:var(--s-48) var(--s-24) 0}
.pj-big{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:bottom}
.pj-hero-th{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s-4);padding:var(--s-8);border-top:var(--borde-ancho) solid var(--linea);background:var(--blanco)}
.pj-th{height:48px;border:var(--borde-ancho) solid transparent;background:transparent;border-radius:var(--r-campo);cursor:pointer;display:grid;place-items:center;padding:4px;min-width:0}
.pj-th{overflow:hidden}
.pj-th img{width:100%;height:100%;object-fit:contain}
.pj-th:hover{background:var(--papel)}
.pj-th[aria-pressed="true"]{border-color:var(--tinta);background:var(--papel)}
@media (max-width:900px){.hero.pj-hero{grid-template-columns:minmax(0,1fr)}.pj-hero-fig{height:480px}}

/* ---- la idea ---- */
.pj-idea{align-items:start}
.pj-ficha{grid-template-columns:max-content 1fr;gap:var(--s-12) var(--s-24);font-size:var(--t-17)}
.pj-ficha dt{font-weight:var(--bold);color:var(--texto)}
.pj-ficha dd{color:var(--texto-2)}
.pj-idea details.mas{margin-top:var(--s-16)}
.pj-cotas{--h:380px;--fw:calc(var(--h)*.57);display:flex;gap:var(--s-16);background:var(--papel);border-radius:var(--r-tarjeta);padding:var(--s-24);color:var(--tinta);overflow:hidden}
.pj-cotas>img{height:var(--h);width:var(--fw);flex:none}
.pj-cotas-reg{position:relative;flex:1;min-width:0;height:var(--h)}
.pj-cota{position:absolute;right:0;left:calc(var(--fw) * -1 - var(--s-16));border-top:var(--borde-ancho) solid var(--apagado)}
.pj-cota:last-child{border-bottom:var(--borde-ancho) solid var(--apagado)}
.pj-cota span{position:absolute;left:calc(var(--fw) + var(--s-16) + var(--s-12));top:50%;transform:translateY(-50%);font-size:var(--t-12);color:var(--pizarra);line-height:1.35}
.pj-cota b{display:block;font-size:var(--t-15);color:var(--tinta)}
@media (max-width:620px){.pj-cotas{--h:300px;padding:var(--s-16)}}
.pj-lienzo{background:var(--papel);border-radius:var(--r-tarjeta);color:var(--tinta)}
.pj-duo{height:300px;display:flex;align-items:flex-end;justify-content:center;gap:var(--s-24);padding:var(--s-16) var(--s-16) 0;overflow:hidden}
.pj-duo img{height:92%;width:auto;min-width:0;flex:0 1 auto;object-fit:contain;object-position:bottom}
.pj-duo.chico{height:260px;gap:var(--s-16)}
.pj-duo.chico img{height:94%;max-width:100%}

/* ---- galería: cinco por fila, el botón junto al nombre ---- */
.pj-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--s-32) var(--medianil)}
.pj-pose{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;align-items:center;gap:var(--s-8);min-width:0}
.pj-pose[hidden]{display:none}
.pj-pose>.pj-pose-fig{grid-row:1;grid-column:1/-1}
.pj-pose>.pj-uso{grid-column:1/-1}
.pj-pose>.pj-tit{grid-row:2;grid-column:1/-1;min-width:0}
/* el botón de descarga va sobre la esquina de la pose: solo el icono; el nombre accesible lo da aria-label */
.pj-pose>.acciones{grid-row:1;grid-column:1/-1;justify-self:end;align-self:start;margin:var(--s-8) var(--s-8) 0 0;padding:0;z-index:1}
.pj-pose .btn-dl{width:36px;min-height:36px;padding:0;gap:0;font-size:0;background:var(--blanco);border-color:var(--linea);color:var(--tinta)}
.pj-pose .btn-dl:hover{background:var(--tinta);border-color:var(--tinta);color:var(--blanco)}
.pj-pose h3{font-size:var(--t-17);letter-spacing:var(--trk-17);line-height:1.2}
.pj-pose-fig{background:var(--papel);border-radius:var(--r-tarjeta);height:176px;display:flex;align-items:flex-end;justify-content:center;padding:var(--s-12) var(--s-8) 0;overflow:hidden}
.pj-pose-fig.cara{align-items:center;padding-bottom:var(--s-12)}
.pj-pose-fig img{height:100%;width:100%;object-fit:contain;object-position:center bottom;cursor:zoom-in;transition:opacity var(--dur-micro) var(--mov-micro)}
.pj-pose-fig.cara img{object-position:center}
.pj-pose-fig img:hover{opacity:.92}
.pj-num{margin:0;text-transform:uppercase;letter-spacing:var(--trk-eyebrow);font-weight:var(--bold)}
.pj-uso{margin:0;font-size:var(--t-15);color:var(--texto-2);line-height:1.4}
.pj-uso b{display:inline-block;min-width:26px;color:var(--texto);margin-right:var(--s-4)}
@media (max-width:620px){.pj-galeria{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- cuándo sí, cuándo no ---- */
.pj-reglas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-12)}
.pj-reglas li{font-size:var(--t-15);color:var(--texto-2);padding-left:var(--s-16);border-left:var(--borde-ancho) solid var(--borde)}
.pj-reglas li b{color:var(--texto)}
.pj-sino .badge{font-size:var(--t-17)}
.pj-sino+details.mas{margin-top:var(--s-32)}
.pj-quien{align-items:stretch}
.pj-q{background:var(--papel);border-radius:var(--r-tarjeta);padding:var(--s-24);display:flex;flex-direction:column;gap:var(--s-12);color:var(--tinta)}
.pj-q h4{font-size:var(--t-19);margin:0}
.pj-q ul{margin:0;padding-left:var(--s-16);font-size:var(--t-15);color:var(--pizarra);display:flex;flex-direction:column;gap:var(--s-8)}
.pj-q-fig{height:200px;display:flex;align-items:flex-end;justify-content:center}
.pj-q-fig img{max-height:100%;width:auto;object-fit:contain}
.pj-q-fig.foto img{border-radius:var(--r-captura);max-height:100%}
.pj-q-fig.vacio{align-items:center;border:var(--borde-ancho) dashed var(--apagado);border-radius:var(--r-captura);color:var(--apagado);font-size:var(--t-24);font-weight:var(--bold)}

/* ---- tamaños, aire, proporción, fondos ---- */
.pj-tam{display:flex;align-items:flex-end;gap:var(--s-24);flex-wrap:wrap;background:var(--papel);border-radius:var(--r-tarjeta);padding:var(--s-24);color:var(--tinta)}
.pj-tam figure{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-12)}
.pj-tam img{width:auto;max-width:none}
.pj-tam figcaption{max-width:112px;font-size:var(--t-12);color:var(--pizarra);line-height:1.35;display:flex;flex-direction:column;gap:2px}
.pj-tam figcaption b{font-size:var(--t-15);color:var(--tinta)}
.pj-tam figcaption em{font-style:normal}
.pj-v{font-size:var(--t-12);font-weight:var(--bold);color:var(--tinta)}
.pj-v.no{color:var(--pizarra)}
.pj-sep{align-self:stretch;width:var(--borde-ancho);background:var(--linea)}
.pj-aire{background:var(--papel);border-radius:var(--r-tarjeta);height:340px;display:grid;place-items:center;color:var(--tinta)}
.pj-aire-in{padding:42px 42px 0;outline:var(--borde-encendido) dashed var(--apagado);outline-offset:-1px;line-height:0}
.pj-aire-in img{width:auto}
.pj-fr{position:relative;background:var(--blanco);border:var(--borde-ancho) solid var(--linea);border-radius:var(--r-captura);overflow:hidden}
.pj-fr img{position:absolute;right:8%;bottom:0;width:auto;height:40%}
.pj-fr.f45{aspect-ratio:4/5;height:340px;margin-inline:auto}
.pj-fr.f169{aspect-ratio:16/9;width:100%}
.pj-fr.f169 img{height:60%;right:6%}
.pj-prop{grid-template-columns:minmax(0,.8fr) minmax(0,.9fr) minmax(0,1.3fr);align-items:end}
.pj-fondos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--medianil)}
@media (max-width:760px){.pj-prop{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.pj-fondos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.pj-fondos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pj-ff{height:190px;border-radius:var(--r-captura);border:var(--borde-ancho) solid var(--linea);display:flex;align-items:flex-end;justify-content:center;padding:var(--s-12) var(--s-8) 0;overflow:hidden}
.pj-ff img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:bottom}
.f-blanco{background:var(--blanco)}.f-papel{background:var(--papel)}.f-azul{background:var(--encendido);border-color:var(--encendido)}.f-tinta{background:var(--tinta);border-color:var(--tinta)}
.f-foto{background:var(--papel) url("/img/personaje/fondo-foto.webp") center/cover no-repeat}

/* ---- piezas ---- */
.pj-piezas .tabs{margin-bottom:var(--s-24)}
.pj-pieza{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-48);align-items:start}
.pj-pieza.ancha{grid-template-columns:minmax(0,1fr)}
.pj-pieza.ancho-16{grid-template-columns:minmax(0,1fr)}
.pj-lado{min-width:0}
.pj-shot{position:relative;width:var(--w,340px);max-width:100%}
.pj-car .pj-shot{width:100%}
.pj-car{--w:calc((100% - 48px) / 4)}
.pj-cap{margin:var(--s-8) 0 0}
.pj-guias{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--dur-fundido) var(--mov-micro)}
.pj-guias.on{opacity:1}
.pj-g{position:absolute;outline:var(--borde-encendido) dashed var(--pizarra);outline-offset:-1px}
.pj-g.linea{outline:0;height:0;border-top:var(--borde-encendido) dashed var(--pizarra)}
.pj-guias .pj-n{position:absolute;transform:translate(-50%,-50%)}
.pj-info{min-width:0;max-width:34em}
.pj-pieza.ancha .pj-info,.pj-pieza.ancho-16 .pj-info{max-width:none}
.pj-info h3{margin:0 0 var(--s-12)}
.pj-pose-uso{color:var(--texto-2);font-size:var(--t-15)}
.pj-pose-uso b{color:var(--texto)}
.pj-info details.mas{margin:var(--s-16) 0}
.pj-notas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-12)}
.pj-notas li{display:grid;grid-template-columns:22px 1fr;gap:var(--s-12);align-items:start;font-size:var(--t-15);color:var(--texto);line-height:1.4}
.pj-notas .pj-n{margin-top:1px}
.pj-stage-video{padding:var(--s-24) var(--s-24) 52px;width:fit-content;max-width:100%;place-items:start}
.pj-lado .acciones{margin-top:var(--s-16)}
.pj-medidas[aria-pressed="true"]{background:var(--texto);border-color:var(--texto);color:var(--fondo)}
.pj-piezas .pj-car .car-track>*{flex:0 0 var(--w)}
@media (max-width:1100px){.pj-pieza{grid-template-columns:minmax(0,1fr)}.pj-car{--w:78%}}

/* ---- armador ---- */
.pj-arm{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s-32);align-items:start}
.pj-ctl{display:flex;flex-direction:column;gap:var(--s-16)}
.pj-h{display:flex;align-items:center;gap:var(--s-8);font-size:var(--t-15);margin:0 0 var(--s-8)}
.pj-poses{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s-4)}
.pj-poses .pj-th{height:60px;padding:5px;background:var(--papel);border-color:var(--papel)}
.pj-poses .pj-th[aria-pressed="true"]{border-color:var(--texto);background:var(--papel)}
.pj-ctl .filtros{margin-bottom:var(--s-8)}
.pj-ctl .filtros button{min-height:36px}
.pj-rango{display:flex;justify-content:space-between;font-size:var(--t-15);margin:var(--s-8) 0 var(--s-4)}
.pj-rango output{font-variant-numeric:tabular-nums;font-weight:var(--bold)}
#pj-alto{width:100%;accent-color:var(--acento);min-height:var(--tocable)}
.pj-check{display:flex;align-items:center;gap:var(--s-8);font-size:var(--t-15);cursor:pointer}
.pj-check input{width:18px;height:18px;accent-color:var(--acento)}
.pj-ctl .acciones{align-items:center}
.pj-estado{min-height:2.8em;font-size:var(--t-15);color:var(--texto-2);border-left:var(--borde-encendido) solid var(--borde);padding-left:var(--s-12)}
.pj-estado.aviso{border-left-color:var(--texto);color:var(--texto)}
.pj-estado b{color:var(--texto)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn[disabled]:hover{background:transparent;color:var(--texto)}
.btn-primary[disabled]:hover{background:var(--acento);color:var(--sobre-acento);opacity:.4}
.pj-prev{position:sticky;top:calc(var(--cabecera) + 24px);border:var(--borde-ancho) solid var(--linea);border-radius:var(--r-tarjeta);min-height:400px;display:grid;place-items:center;padding:var(--s-24);background:var(--papel)}
.pj-prev canvas{max-width:100%;max-height:460px;width:auto;height:auto;outline:var(--borde-ancho) solid var(--linea)}
@media (max-width:900px){.pj-arm{grid-template-columns:minmax(0,1fr)}.pj-prev{position:static;min-height:320px;order:-1}}

/* ---- si habla ---- */
.pj-hab{height:220px;display:flex;align-items:flex-end;justify-content:center;gap:var(--s-16);padding:var(--s-16) var(--s-24) 0;overflow:hidden}
.pj-hab img{height:92%;width:auto;flex:none}
.pj-burbuja{align-self:center;background:var(--blanco);border:2px solid var(--linea);border-radius:var(--r-tarjeta) var(--r-tarjeta) 4px var(--r-tarjeta);padding:var(--s-12) var(--s-16);font-size:var(--t-17);font-weight:var(--bold);max-width:15em;line-height:1.3;margin-bottom:var(--s-32)}

/* ---- movimiento ---- */
.pj-st{padding:var(--s-16) var(--s-16) 48px}
.pj-cuadro{position:relative;width:min(100%,420px);aspect-ratio:16/9;container-type:size;background:var(--blanco);border:var(--borde-ancho) solid var(--linea);border-radius:var(--r-captura);overflow:hidden;color:var(--tinta)}
.pj-cuadro-ey{position:absolute;left:6.25%;top:9%;margin:0;font-size:2cqw;text-transform:uppercase;letter-spacing:.1em;font-weight:var(--bold);color:var(--pizarra)}
.pj-cuadro h4{position:absolute;left:6.25%;top:26%;width:50%;margin:0;font-size:4.6cqw;letter-spacing:-.035em;line-height:1.05;font-weight:var(--bold)}
.pj-fig-mov{position:absolute;right:6.25%;bottom:8.9%;height:60%;aspect-ratio:.57}
.pj-fig-mov img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom}
.pj-fig-mov .b{opacity:0}
@keyframes pj-o{0%{opacity:0}5%{opacity:1}92.5%{opacity:1}99.2%,100%{opacity:0}}
@keyframes pj-t{0%{transform:translateY(2.1cqw);animation-timing-function:var(--mov-entrada)}11.7%,100%{transform:none}}
@keyframes pj-a{0%,52.4%{opacity:1}52.5%,100%{opacity:0}}
@keyframes pj-b{0%,52.4%{opacity:0}52.5%,100%{opacity:1}}
.stage.is-playing .pj-fig-mov.ok{animation:pj-o 4000ms linear both,pj-t 4000ms linear both}
.stage.is-playing .pj-fig-mov.ok .a{animation:pj-a 4000ms linear both}
.stage.is-playing .pj-fig-mov.ok .b{animation:pj-b 4000ms linear both}
@keyframes pj-mal{0%{transform:translateY(16cqh);opacity:0}6%{opacity:1}16%{transform:translateY(-12cqh)}26%{transform:translateY(5cqh)}36%{transform:translateY(-6cqh)}46%{transform:translateY(0)}62%{transform:translateY(-6cqh)}82%{transform:translateY(0)}100%{transform:translateY(-6cqh)}}
.stage.is-playing .pj-fig-mov.mal{animation:pj-mal 4000ms ease-in-out both}
@media (prefers-reduced-motion:reduce){.stage.is-playing .pj-fig-mov{animation:none}}

/* ---- lo que no se hace: dos pares a la vista, el resto dentro de «Ver…» ---- */
.pj-no-par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-32) var(--s-32)}
.pj-no-par.uno{grid-template-columns:minmax(0,1fr)}
.pj-no-par .pair{gap:var(--s-16)}
.pj-no-par.uno .pair{gap:var(--medianil)}
@media (max-width:900px){.pj-no-par{grid-template-columns:minmax(0,1fr)}}
.pj-marco{display:grid;place-items:center;padding:var(--s-16);height:300px;background:var(--superficie);border-radius:var(--r-tarjeta)}
.pj-marco .shot{width:auto;height:auto;max-width:100%;max-height:calc(300px - var(--s-32))}
.pj-espejo{position:relative;height:94%;display:inline-block}
.pj-espejo img{height:100%;width:auto;max-width:none}
.pj-espejo img.esp{transform:scaleX(-1)}
.pj-anillo{position:absolute;width:19%;aspect-ratio:1;border:2.5px solid var(--tinta);border-radius:var(--r-pill);transform:translate(-50%,-50%)}
.pj-tiles .shot{background:var(--blanco)}
.pj-tiles .dont>.badge{font-size:var(--t-15)}
.pj-pieza .shot{max-width:none}
.pj-no-par.uno,.pj-tiles{margin-bottom:var(--s-32)}
.pj-no-par .pj-duo.chico{height:300px}

/* ---- referencias: imagen al lado del texto ---- */
.pj-refs .ref{margin:0;display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);grid-template-rows:auto 1fr;gap:var(--s-8) var(--s-16);align-items:start;align-content:start}
.pj-refs .ref img{grid-row:1/3;height:200px;object-fit:cover;object-position:top}
.pj-refs .ref .ref-credit,.pj-refs .ref .ref-take{margin:0}
@media (max-width:620px){.pj-refs .ref{grid-template-columns:minmax(0,1fr)}.pj-refs .ref img{grid-row:auto}}

/* ---- descargas ---- */
.pj-dl h3{margin-bottom:var(--s-12)}
.pj-dl .acciones{margin-top:0}