:root{--ink:#222;--orange:#fc6020;--violet:#b58aff;--table:#e9bd76;--paper:#faf7ef;--muted:#625e55;font-family:'Space Grotesk',sans-serif;color:var(--ink);background:var(--table)}
@font-face{font-family:Archivo;font-style:normal;font-weight:400;font-display:swap;src:url('../assets/ranking/archivo-regular.ttf') format('truetype')}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;border-radius:0;background:none}a{color:inherit;text-underline-offset:4px}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--orange);outline-offset:5px}button:disabled{opacity:.3;cursor:default}[hidden]{display:none!important}.iconos-sitio{position:absolute;width:0;height:0;overflow:hidden}.icon{display:block;width:22px;height:22px;fill:currentColor;flex-shrink:0}
.pixel-button{--pixel-shift:0px;--pixel-cross:0px;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--ink);color:#fff;padding:11px 17px;min-height:39px;font-size:12px;text-decoration:none;box-shadow:4px 7px 10px #16110c26}.pixel-button:before,.pixel-button:after{content:'';position:absolute;width:8px;height:8px;background:inherit;z-index:-1;pointer-events:none;transition:transform .38s cubic-bezier(.16,1,.3,1)}.pixel-button:before{left:12px;top:-8px;transform:translate(var(--pixel-shift),var(--pixel-cross))}.pixel-button:after{right:15px;bottom:-8px;transform:translate(calc(var(--pixel-shift) * -1),calc(var(--pixel-cross) * -.5))}.pixel-button:not(:disabled):hover{background:#333;box-shadow:5px 9px 13px #16110c36}

#archivo-experiencia{height:calc(100svh - var(--site-header-height,78px));margin-top:var(--site-header-height,78px);position:relative;isolation:isolate;overflow:hidden}#mesa-escena{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#mesa-escena.arrastrando{cursor:grabbing}.archivo-titulo{position:absolute;left:3.5%;top:26px;pointer-events:none;transition:opacity .35s}.archivo-titulo p{font-size:10px;margin:0 0 4px;letter-spacing:.08em}.archivo-titulo h1{font-size:clamp(32px,3vw,46px);font-weight:400;line-height:1.1;letter-spacing:-.035em;margin:0}.archivo-titulo h1 span{color:var(--orange)}body:not([data-vista=mesa]) .archivo-titulo{opacity:0}
#categoria-opciones{position:absolute;inset:0;z-index:20;pointer-events:none}.categoria-etiqueta{position:absolute;left:0;top:0;pointer-events:auto;white-space:nowrap;color:var(--category-color);width:var(--button-width,126px);min-height:36px;padding:10px 11px;font-size:12px;will-change:transform;z-index:2}.categoria-etiqueta:before{background:var(--category-color)}.categoria-etiqueta.seleccionada{font-size:28px;font-weight:500;padding:10px 27px;min-height:52px;max-width:47%;letter-spacing:-.025em;z-index:3}.categoria-etiqueta.seleccionada:after{background:var(--category-color)}
#categoria-cabecera{position:absolute;top:22px;left:3.5%;pointer-events:none;z-index:23}#categoria-cabecera button{pointer-events:auto}body[data-vista=lamina] #categoria-cabecera{display:none}#hover-etiqueta{position:absolute;max-width:255px;pointer-events:none;background:var(--ink);color:var(--paper);padding:8px 11px;font-size:11px;box-shadow:3px 5px 10px #0002;z-index:9}
#detalle{position:absolute;right:0;top:0;width:35%;height:100%;padding:28px 3.5% 35px 3%;background:rgba(250,247,239,.97);overflow:auto;scrollbar-width:thin;animation:lectura .5s both;z-index:10}#volver-categoria{margin-bottom:27px}.detalle-contenido{max-width:440px}.rotulo{font-size:10px;letter-spacing:.055em;color:var(--muted);text-transform:uppercase;margin:0 0 9px}#detalle-categoria{font-size:clamp(27px,3vw,42px);font-weight:400;letter-spacing:-.035em;line-height:1.1;margin:0 0 15px}#detalle-contexto{font-size:13px;line-height:1.65;max-width:48ch;margin:0}.ficha-lamina{margin-top:32px;padding-top:23px;border-top:1px solid #b9b3a8}#lamina-titulo{font-size:22px;line-height:1.2;letter-spacing:-.02em;font-weight:500;margin:0 0 14px}#lamina-descripcion{font-size:13px;line-height:1.65}.nota-editorial{font-size:11px;line-height:1.55;color:#625d52}.credito{font-size:10px;line-height:1.5;color:var(--muted);margin:16px 0}#lamina-fuente{font-size:11px}.detalle-navegacion{display:flex;align-items:center;gap:18px;margin-top:25px;font-size:11px}.detalle-navegacion button{width:43px;height:40px;padding:7px}#inspector-controles{position:absolute;bottom:24px;display:flex;gap:16px;align-items:center;left:32.5%;transform:translateX(-50%);z-index:22}#inspector-controles button{width:52px;height:46px;padding:7px}#inspector-controles .icon{width:33px;height:33px}
#archivo-cargando{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-size:12px;background:var(--paper);padding:12px 18px}#archivo-error{position:absolute;left:5%;bottom:10%;max-width:340px;background:var(--paper);padding:24px;z-index:7}#archivo-error h2{font-size:22px;font-weight:500}#archivo-error p{font-size:13px}#archivo-error button{border-bottom:1px solid;padding:8px 0}
.sr-only,.acceso-teclado{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.acceso-teclado:focus-within{width:auto;height:auto;clip:auto;left:24px;bottom:15px;max-width:calc(100% - 48px);display:flex;gap:8px;background:var(--paper);padding:12px;white-space:normal;flex-wrap:wrap;z-index:30}.acceso-teclado button{padding:8px;font-size:12px;border:1px solid #999}
.contexto-fuentes{font-size:11px;line-height:1.5;margin-top:14px;color:#625e55}.contexto-fuentes-rotulo{display:block;font-size:10px;margin-bottom:4px}.contexto-fuentes ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}.contexto-fuentes a{color:#36332e;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}.contexto-fuentes a:hover{color:#9c320b}.contexto-fuentes a:focus-visible{outline-color:#9c320b}
@keyframes lectura{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@media(max-width:700px){.archivo-titulo{left:22px;top:22px}.archivo-titulo h1{font-size:31px}.archivo-titulo p{font-size:8px}.categoria-etiqueta{font-size:10px;min-height:31px;padding:8px 9px}.categoria-etiqueta.seleccionada{font-size:21px;padding:9px 19px;min-height:43px;max-width:54%}.categoria-etiqueta:before,.categoria-etiqueta:after{width:6px;height:6px}.categoria-etiqueta:before{top:-6px}.categoria-etiqueta:after{bottom:-6px}#categoria-cabecera{left:16px;top:18px}#volver-mesa{width:35px;min-height:35px;padding:6px}#volver-mesa span{display:none}#detalle{top:47%;height:53%;width:100%;padding:18px 24px 25px;animation:none}.detalle-contenido{max-width:none}#volver-categoria{margin-bottom:19px}#detalle-categoria{font-size:27px}#detalle-contexto{font-size:12px;line-height:1.5}.ficha-lamina{margin-top:22px;padding-top:18px}#inspector-controles{top:39%;bottom:auto;left:50%}#inspector-controles button{width:44px;height:40px;padding:5px}#inspector-controles .icon{width:27px;height:27px}#hover-etiqueta{display:none!important}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.categoria-etiqueta{will-change:auto}}
.sin-webgl #archivo-experiencia{overflow:auto;padding:30px 6%;height:calc(100svh - var(--site-header-height,78px))}.sin-webgl #archivo-experiencia>button{padding:12px 0;text-decoration:underline}.sin-webgl section{margin:40px 0}.sin-webgl figure{margin:25px 0;max-width:680px}.sin-webgl figure img{display:block;max-width:100%;max-height:550px;object-fit:contain}.sin-webgl figure p{font-size:14px;line-height:1.6;max-width:65ch}
@media(max-height:560px){.archivo-titulo{top:14px}.archivo-titulo h1{font-size:25px}.categoria-etiqueta.seleccionada{font-size:22px;min-height:40px}.categoria-etiqueta{font-size:10px}#detalle{padding-top:14px}#volver-categoria{margin-bottom:12px}}
body[data-vista=categoria] #volver-mesa{display:none}
#detalle .archivo-acciones{position:sticky;top:-28px;z-index:4;margin-top:-28px;padding:28px 0 14px;background:rgb(250,247,239)}@media(max-width:700px){#detalle .archivo-acciones{top:-18px;margin-top:-18px;padding-top:18px}}
/* Celular: al girar o acercar la imagen el texto se pliega y la lámina se centra; queda una barra
   con volver, el título y la flecha para desplegarlo. */
#detalle-plegado,#detalle-toggle{display:none}
@media(max-width:700px){
  body[data-vista=lamina] #detalle-toggle{position:absolute;right:16px;top:calc(47% - 56px);z-index:23;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;background:var(--ink,#171717);color:#fff;box-shadow:4px 7px 10px #16110c26;transition:top .45s cubic-bezier(.22,1,.36,1)}
  #detalle-toggle svg{display:block;width:26px;height:26px;fill:currentColor;transform:rotate(180deg);transition:transform .35s cubic-bezier(.22,1,.36,1)}
  #detalle-toggle:focus-visible{outline:3px solid #fc6020;outline-offset:3px}
  .texto-plegado #detalle-toggle svg{transform:none}
  body[data-vista=lamina] .texto-plegado #detalle-toggle{top:calc(100% - 58px)}
  /* clip y no hidden: el texto plegado queda debajo del borde y no debe volver scrolleable la mesa */
  #archivo-experiencia{overflow:clip}
  #detalle{transition:transform .45s cubic-bezier(.22,1,.36,1)}
  .texto-plegado #detalle{transform:translateY(100%)}
  #inspector-controles{transition:top .45s cubic-bezier(.22,1,.36,1)}
  .texto-plegado #inspector-controles{top:calc(100% - 136px)}
  .texto-plegado #detalle-plegado{position:absolute;left:0;right:0;bottom:0;z-index:22;display:flex;align-items:center;gap:14px;height:72px;padding:0 72px 0 16px;background:rgb(250,247,239);box-shadow:0 -8px 20px #16110c1f;animation:plegado-entra .45s cubic-bezier(.22,1,.36,1) both}
  #plegado-volver{flex:none;width:44px;height:44px;min-height:44px;padding:0}
  #plegado-volver .icon{width:24px;height:24px}
  #plegado-titulo{margin:0;font:500 15px/1.25 'Space Grotesk',sans-serif;color:#171717;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
@keyframes plegado-entra{from{transform:translateY(100%)}to{transform:none}}