@font-face{font-family:Archivo;font-style:normal;font-weight:500;font-display:swap;src:url('../assets/ranking/archivo-medium.ttf') format('truetype')}
:root{--site-header-base:78px;--site-header-height:78px;--site-orange:#F66227;--site-violet:#9E6FF8;--site-carbon:#202020;--site-black:#1a1a1a}
.site-header.nav,.en-mapa .site-header.nav{box-sizing:border-box;position:fixed;inset:0 0 auto;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto;align-items:center;align-content:center;gap:22px;width:100%;max-width:none;height:var(--site-header-base);margin:0;padding:0 clamp(24px,6.2vw,120px);border:0;border-bottom:1px solid var(--site-violet);background:var(--site-carbon);color:var(--site-orange);font-family:'Space Grotesk',Arial,sans-serif;line-height:1.2;opacity:1;transform:none;pointer-events:auto}
.site-header *{box-sizing:border-box}
.site-header a{color:inherit;text-decoration:none}
.site-header .nav__marca{font-size:20px;font-weight:600;letter-spacing:-.04em;white-space:nowrap;grid-area:auto}
.site-header .nav__links{display:flex;gap:28px;align-items:center;justify-content:center;grid-area:auto;min-height:0;overflow:visible;color:var(--site-violet);font-size:14px;letter-spacing:.05em;white-space:nowrap}
.site-header .nav__links a{min-height:44px;display:inline-flex;align-items:center}
.site-header .nav__pendiente{min-height:44px;display:inline-flex;align-items:center;color:var(--site-violet);cursor:default}
.site-header .nav__links a:hover{color:white}
.site-header .nav__links a[aria-current=page]{color:var(--site-orange)}
.site-header .nav__acciones{display:flex;align-items:center;justify-self:end;grid-area:auto;gap:6px;min-width:0}
.site-header svg{width:20px;height:20px;fill:currentColor;stroke:none;flex-shrink:0;vertical-align:middle}
.site-header .boton-icono{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;min-height:40px;padding:8px;border:0;border-radius:0;background:transparent;color:var(--site-orange);cursor:pointer}
.site-header .boton-audio svg{width:24px;height:24px}
.site-header #abrir-accesibilidad svg{width:22px;height:22px}
.site-header .boton-icono:hover,.site-header .boton-icono[aria-expanded=true]{background:#fff;color:var(--site-black)}
.site-header .nav__menu{display:none}
.site-header .nav__ingresar{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;width:130px;height:40px;flex-shrink:0;margin-left:6px;padding:0 20px;border:0;border-radius:2px;background:var(--site-orange);color:#000;font:500 16px/1.3 Archivo,Arial,sans-serif;letter-spacing:0;cursor:pointer;--pixel-base:var(--site-orange);--pixel-tinta:#000}
.site-header .nav__ingresar svg{width:22px;height:22px}
.site-header .nav__ingresar.nav__perfil{position:relative;width:42px;height:42px;min-width:42px;padding:0;border:2px solid var(--site-orange);background:transparent}
.site-header .nav__perfil:after{content:'';position:absolute;width:7px;height:7px;right:-5px;bottom:-5px;background:#e0ff42}
.site-header .perfil-patron{display:block;width:100%;height:100%;image-rendering:pixelated}
.site-header .perfil-demo{position:absolute;top:calc(100% + 12px);right:clamp(20px,5vw,90px);width:280px;max-width:calc(100vw - 32px);padding:22px;background:var(--site-carbon);border:1px solid #595959;color:white;box-shadow:4px 8px 20px #0005}
.site-header .perfil-demo strong{font-size:18px;font-weight:500}
.site-header .perfil-demo__estado{display:block;color:#e0ff42;font-size:12px;margin-top:6px}
.site-header .perfil-demo p{font-size:13px;line-height:1.55;margin:18px 0;color:#ddd}
.site-header .perfil-demo__salir{border:0;background:var(--site-orange);color:var(--site-black);font:500 12px 'Space Grotesk',Arial,sans-serif;padding:12px 14px;min-height:42px;cursor:pointer}
.site-header .perfil-demo__salir:hover{background:white}
.site-header :is(a,button):focus-visible{outline:3px solid var(--site-violet);outline-offset:4px}
.site-header [hidden]{display:none!important}
.site-iconos{position:absolute!important;width:0!important;height:0!important;overflow:hidden;pointer-events:none}
.site-header~.accesibilidad,.accesibilidad{font-family:'Space Grotesk',Arial,sans-serif}
#menu-accesibilidad,.en-mapa #menu-accesibilidad{z-index:100;top:calc(var(--site-header-height) + 10px);right:24px;max-height:calc(100dvh - var(--site-header-height) - 24px);color:#1a1a1a;background:#fff}
@media(max-width:1100px){
 .site-header.nav,.en-mapa .site-header.nav{grid-template-columns:1fr auto;gap:12px;padding-inline:24px}
 .site-header .nav__marca{font-size:17px}
 .site-header .nav__menu{display:inline-flex}
 .site-header .nav__links{display:none;position:absolute;top:100%;left:0;right:0;padding:12px 24px;background:var(--site-carbon);border-bottom:1px solid var(--site-violet);gap:12px 24px;justify-content:flex-start;flex-wrap:wrap;white-space:normal}
 .site-header.site-header--menu .nav__links{display:flex}
}
@media(max-width:700px){
 :root{--site-header-base:64px;--site-header-height:64px}
 .site-header.nav,.en-mapa .site-header.nav{padding-inline:16px;gap:8px}
 .site-header .nav__marca{font-size:15px}
 .site-header .nav__acciones{gap:2px}
 .site-header .boton-icono{width:36px;min-width:36px;height:40px;min-height:40px;padding:8px}
 .site-header .nav__ingresar{width:36px;min-width:36px;padding:8px;margin-left:2px}
 .site-header .nav__ingresar-texto{display:none}
 .site-header .nav__ingresar.nav__perfil{width:34px;min-width:34px;height:34px;padding:0}
 .site-header .perfil-demo{right:16px}
 #menu-accesibilidad,.en-mapa #menu-accesibilidad{top:calc(var(--site-header-height) + 8px);right:10px;max-height:calc(100dvh - var(--site-header-height) - 18px)}
}
@media(max-width:370px){.site-header.nav,.en-mapa .site-header.nav{padding-inline:12px}.site-header .nav__marca{font-size:13px}.site-header .boton-icono,.site-header .nav__ingresar{width:32px;min-width:32px;padding:6px}.site-header .nav__acciones{gap:0}}
html[data-texto-grande=true] .site-header.nav,html[data-espaciado=true] .site-header.nav{height:auto;min-height:var(--site-header-base);padding-block:12px;grid-template-columns:1fr auto}
html[data-texto-grande=true] .site-header .nav__links{display:none}
html[data-texto-grande=true] .site-header .nav__menu{display:inline-flex}
html[data-texto-grande=true] .site-header.site-header--menu .nav__links{display:flex;position:absolute;top:100%;left:0;right:0;padding:12px 24px;flex-wrap:wrap;background:var(--site-carbon)}
html[data-texto-grande=true] .site-header .nav__marca{white-space:normal}
@media(max-width:700px){html[data-texto-grande=true] .site-header.nav{grid-template-columns:1fr}.site-header .nav__acciones{justify-self:end}html[data-texto-grande=true] .site-header .nav__acciones{justify-self:start}}
html[data-color=contraste] .site-header.nav{background:#000;color:#fff;border-bottom:2px solid white}
html[data-color=contraste] .site-header .nav__links,html[data-color=contraste] .site-header .nav__links a[aria-current],html[data-color=contraste] .site-header .boton-icono{color:white}
.site-header .perfil-demo{border:0;padding:24px;width:320px;max-width:calc(100vw - 32px);box-sizing:border-box;box-shadow:8px 12px 24px #0005}
.site-header .perfil-demo::before{content:'';position:absolute;right:0;top:-12px;width:24px;height:12px;background:#f66227}
.site-header .perfil-demo nav{display:grid;gap:8px}
.site-header .perfil-demo nav button{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:12px 14px;border:0;border-radius:0;background:#363636;color:#fff;font:500 14px 'Space Grotesk',sans-serif;cursor:pointer;text-align:left}
.site-header .perfil-demo nav button:hover{background:#6a40bc;color:#fff}
.site-header .perfil-demo nav .perfil-demo__salir{background:#f66227;color:#1a1a1a}
.site-header .perfil-demo .perfil-canje{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin:18px 0;padding:14px;border:0;border-radius:0;background:#33283f;color:#e4fe44;font:500 14px 'Space Grotesk',sans-serif;text-align:left;cursor:pointer;transition:background .2s ease}.site-header .perfil-demo .perfil-canje svg{width:20px;height:20px;flex:none;fill:currentColor}.site-header .perfil-demo .perfil-canje:hover{background:#43304f}.site-header .perfil-demo .perfil-canje:focus-visible{outline:3px solid #e4fe44;outline-offset:2px}

.cuenta-dialog{box-sizing:border-box;width:520px;max-width:calc(100vw - 40px);max-height:calc(100dvh - 48px);overflow:auto;border:0;border-radius:0;padding:32px;background:#222;color:#fff;box-shadow:8px 16px 32px #0006;font-family:'Space Grotesk',sans-serif}
.cuenta-dialog::backdrop{background:#101010a6;backdrop-filter:blur(5px)}
.cuenta-cabecera{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px;border-bottom:1px solid #645074;padding-bottom:16px}
.cuenta-cabecera h2{font-size:30px;line-height:1.1;font-weight:500;margin:0;color:#e4fe44}
.cuenta-cabecera button{width:44px;height:44px;border:0;background:#f66227;color:#1a1a1a;font-size:28px;cursor:pointer}
.cuenta-avatar{width:88px;height:88px;image-rendering:pixelated;display:block}.cuenta-contenido h3{font-size:20px;font-weight:500;margin:20px 0 8px}.cuenta-handle{color:#c7a4ff;margin:0 0 28px}
.cuenta-territorios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0 28px}
.cuenta-territorios a{padding:14px 8px;text-align:center;background:#39303f;color:#e4fe44;text-decoration:none;font-size:13px}
.cuenta-form{display:grid;gap:24px}.cuenta-form label{display:grid;gap:10px;font-size:14px}.cuenta-form input:not([type=checkbox]){width:100%;box-sizing:border-box;background:#171717;color:#fff;border:1px solid #8c729e;border-radius:0;padding:12px;font:inherit}
.cuenta-form .cuenta-check{display:flex;align-items:center;justify-content:space-between;gap:24px;line-height:1.5}.cuenta-check input{accent-color:#f66227;width:22px;height:22px;flex-shrink:0}
.cuenta-primario,.cuenta-accesibilidad{min-height:44px;padding:12px 20px;border:0;border-radius:0;font:500 14px 'Space Grotesk',sans-serif;cursor:pointer;background:#f66227;color:#1a1a1a}
.cuenta-accesibilidad{background:#fff;color:#1a1a1a}.cuenta-dialog :is(button,a):hover{background:#6a40bc;color:#fff}.cuenta-dialog :focus-visible{outline:3px solid #b58aff;outline-offset:3px}.cuenta-estado{color:#e4fe44;font-size:13px;margin:0;min-height:20px}
#menu-accesibilidad,.en-mapa #menu-accesibilidad{box-sizing:border-box;width:520px;right:var(--site-margin,24px);max-width:calc(100vw - 32px);padding:28px;background:#222;color:#fff;border-radius:0;border:0;border-top:8px solid #f66227;box-shadow:8px 16px 30px #0006;scrollbar-color:#a77cfa #333;scrollbar-width:thin}
#menu-accesibilidad::backdrop{background:#10101099;backdrop-filter:blur(4px)}
#menu-accesibilidad .accesibilidad__cabecera{border-color:#63516d;margin-bottom:24px;padding-bottom:18px}
#menu-accesibilidad h2{font:500 28px/1.15 'Space Grotesk',sans-serif;color:#e4fe44}
#menu-accesibilidad .boton-icono{border-radius:0;background:#f66227;color:#1a1a1a;min-width:40px}
#menu-accesibilidad .ajuste{border-color:#514857;margin-bottom:20px;padding-bottom:20px}
#menu-accesibilidad legend{font:500 12px/1.4 'Space Grotesk',sans-serif;letter-spacing:.06em;color:#cbb0f7}
#menu-accesibilidad .modos-color{gap:12px}
#menu-accesibilidad .modo-color>span{border-radius:0;background:#303030;color:#eee;border-color:#6b5b75;min-height:84px}
#menu-accesibilidad .modo-color input:checked+span{background:#6a40bc;color:#fff;border-color:#c2a0ff}
#menu-accesibilidad .modo-color:hover>span{background:#493858}
#menu-accesibilidad .modo-color input:focus-visible+span{outline:3px solid #e4fe44}
#menu-accesibilidad :is(.ayuda-color,.ayuda-narrador,.texto-ejemplo,.texto-ejemplo output){color:#d5c5e4}
#menu-accesibilidad .fila-ajuste>span svg{color:#ba91f6}
#menu-accesibilidad .switch{border-radius:0;background:#49414f;border-color:#806593}
#menu-accesibilidad .switch:after{border-radius:0;background:#c8b1e2}
#menu-accesibilidad .switch:checked{background:#f66227;border-color:#f66227}
#menu-accesibilidad .switch:checked:after{background:#222}
#menu-accesibilidad .tamano-texto input{accent-color:#f66227}
#menu-accesibilidad :is(.tamano-texto button,.narrador-controles button,.accesibilidad__acciones button){border-radius:0;background:#fff;color:#222;border:0;font-family:'Space Grotesk',sans-serif}
#menu-accesibilidad .narrador-controles button[aria-pressed=true]{background:#6a40bc;color:#fff}
#menu-accesibilidad .accesibilidad__acciones{gap:16px;background:#222}
#menu-accesibilidad .accesibilidad__acciones .aplicar-ajustes{background:#f66227;color:#1a1a1a}
#menu-accesibilidad button:not(:disabled):hover{background:#6a40bc;color:#fff}
#menu-accesibilidad :is(button,input,a):focus-visible{outline:3px solid #e4fe44;outline-offset:3px}
@media(max-width:700px){#menu-accesibilidad,.en-mapa #menu-accesibilidad{right:12px;padding:20px;max-width:calc(100vw - 24px)}.cuenta-dialog{padding:24px}.cuenta-territorios{grid-template-columns:1fr}.cuenta-cabecera h2{font-size:26px}}
html[data-color=contraste] #menu-accesibilidad{background:#000;color:#fff;border:2px solid white}
html[data-color=contraste] #menu-accesibilidad :is(p,label,legend,h2,span,output){color:#fff}
html[data-color=contraste] #menu-accesibilidad button{background:#fff;color:#000}
.cuenta-canje__ayuda{margin:0;color:#d5c5e4;font-size:14px;line-height:1.5}
.cuenta-canje input[name=codigo]{padding:16px;font:500 28px/1.2 'Space Grotesk',Arial,sans-serif;letter-spacing:.32em;text-align:center;text-transform:uppercase;color:#e4fe44;transition:border-color .25s ease,box-shadow .25s ease}
.cuenta-canje--escribiendo input[name=codigo]{border-color:#e4fe44;box-shadow:0 0 0 1px #e4fe44}
.cuenta-dialog .cuenta-primario:disabled{opacity:.45;cursor:not-allowed}
.cuenta-dialog .cuenta-primario:disabled:hover{background:#f66227;color:#1a1a1a}
.cuenta-canje__listo{display:grid;justify-items:center;gap:12px;padding:8px 0;text-align:center}
.cuenta-canje__sello{display:grid;place-items:center;width:88px;height:88px;background:#6a40bc;color:#e4fe44}
.cuenta-canje__sello svg{width:52px;height:52px;fill:currentColor}
.cuenta-canje__codigo{margin:6px 0 0;padding:6px 12px;background:#e4fe44;color:#1a1a1a;font:500 14px/1.2 'Space Grotesk',Arial,sans-serif;letter-spacing:.24em}
.cuenta-canje__listo h3{margin:4px 0 0;font-size:24px;font-weight:500;color:#fff}
.cuenta-canje__listo p:not(.cuenta-canje__codigo){max-width:36ch;margin:0;font-size:14px;line-height:1.5;color:#ddd}
.cuenta-canje__listo .cuenta-primario{min-width:160px;margin-top:12px}
.cuenta-dialog.cuenta-dialog--logro{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:24px;border:0;background:rgb(12 14 12 / .92);box-shadow:none}
.cuenta-dialog.cuenta-dialog--logro[open]{display:grid;place-content:center}
.cuenta-dialog--logro .cuenta-cabecera{display:none}
.cuenta-logro{display:grid;justify-items:center;gap:14px;text-align:center}
.cuenta-logro canvas{width:min(260px,58vw,34vh);height:auto;aspect-ratio:1}
.cuenta-logro .cuenta-canje__codigo{margin-top:6px}
.cuenta-logro h3{margin:4px 0 0;font:500 clamp(30px,2.8vw,44px)/1.06 'Space Grotesk',Arial,sans-serif;letter-spacing:-.02em;color:#7ee2a0}
.cuenta-logro p:not(.cuenta-canje__codigo){max-width:40ch;margin:0;font:400 16px/1.5 Archivo,Arial,sans-serif;color:#ddd}
.cuenta-logro .cuenta-primario{min-width:180px;margin-top:10px}
/* Aviso de código inválido: se abre encima del canje y deja escribirlo de nuevo */
.cuenta-canje--error input[name=codigo]{border-color:#f66227;box-shadow:0 0 0 1px #f66227;color:#f66227}
dialog.cuenta-error{box-sizing:border-box;width:400px;max-width:calc(100vw - 40px);margin:auto;padding:32px 28px;border:0;border-radius:0;background:#2b2b2b;color:#fff;box-shadow:8px 16px 32px #0008;font-family:'Space Grotesk',sans-serif;text-align:center}
dialog.cuenta-error[open]{display:grid;justify-items:center;gap:12px}
dialog.cuenta-error::backdrop{background:#101010b3;backdrop-filter:blur(3px)}
.cuenta-error__icono{display:grid;place-items:center;width:64px;height:64px;background:#f66227;color:#1a1a1a}
.cuenta-error__icono svg{width:40px;height:40px;fill:currentColor}
.cuenta-error h3{margin:6px 0 0;font-size:22px;line-height:1.2;font-weight:500;color:#fff}
.cuenta-error p{max-width:32ch;margin:0;font-size:14px;line-height:1.5;color:#ddd}
.cuenta-error .cuenta-primario{min-width:200px;margin-top:10px}
.cuenta-error .cuenta-primario:hover{background:#6a40bc;color:#fff}
.cuenta-error :focus-visible{outline:3px solid #b58aff;outline-offset:3px}
html[data-color=contraste] dialog.cuenta-error{background:#fff;color:#000;border:2px solid #111}
html[data-color=contraste] .cuenta-error :is(h3,p){color:#000}