/* Ruta Elogio: el juego. Usa los tokens de tokens.css y los componentes de elogio.css (btn, filtro, campo-azul, campo-noche). */

.m-ruta{padding-bottom:var(--e-6)}
.ruta-hero{padding-top:calc(var(--cab-alto) + var(--e-4));padding-bottom:var(--e-3)}
.ruta-hero h1{font-size:clamp(4rem,14vw,12rem);line-height:.86;font-weight:900;letter-spacing:-.03em;margin-bottom:var(--e-2)}
.ruta-c{display:grid;gap:var(--e-2)}
.ruta-barra{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:space-between;align-items:center}
.ruta-util{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.filtro[data-bloqueado]::after{content:"";width:.9em;height:.9em;margin-left:.45em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10V8a6 6 0 1 1 12 0v2h1v12H5V10h1Zm2 0h8V8a4 4 0 1 0-8 0v2Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10V8a6 6 0 1 1 12 0v2h1v12H5V10h1Zm2 0h8V8a4 4 0 1 0-8 0v2Z'/%3E%3C/svg%3E") center/contain no-repeat}
.ruta-son{border:2px solid var(--tinta);width:44px;height:44px}
.ruta-son svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.ruta-son .s-off{display:none}
.ruta-son[aria-pressed=false]{opacity:.55}
.ruta-son#r-son[aria-pressed=false] .s-on{display:none}.ruta-son#r-son[aria-pressed=false] .s-off{display:block}
.ruta-son[aria-pressed=true]{background:var(--papel);color:var(--noche);border-color:var(--papel)}

.ruta-hud{display:grid;grid-template-columns:repeat(3,auto) 1fr;gap:var(--e-2) var(--e-3);align-items:end;border-top:2px solid var(--filete);padding-top:var(--e-2)}
.ruta-hud span{display:block;font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.ruta-hud b{font-family:var(--f-titular);font-size:var(--t-l);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.ruta-prog{align-self:center;min-width:0}
.ruta-prog i{display:block;height:6px;width:0;background:var(--papel);transition:width var(--m-medio) var(--curva);box-shadow:0 0 0 1px var(--filete)}
.ruta-prog span{display:block;margin-top:.4rem;text-transform:none;letter-spacing:0;font-size:var(--t-xs)}
@media(max-width:560px){.ruta-hud{grid-template-columns:repeat(3,1fr)}.ruta-prog{grid-column:1/-1}.ruta-hero{padding-top:calc(var(--cab-alto) + var(--e-2))}.ruta-hero h1{font-size:4.25rem}.ruta-hero .lema-sec{font-size:var(--t-s)}.ruta-barra .filtro{min-height:40px;padding:.3rem .7rem}.ruta-son{width:40px;height:40px}}

.ruta-escena{position:relative;display:flex;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none}
#r-lienzo{display:block;outline:none;border:2px solid var(--filete);background:#0A1527;max-width:100%}
#r-lienzo:focus-visible{border-color:var(--papel)}
.r-aviso{position:absolute;left:50%;top:14px;transform:translate(-50%,-8px);opacity:0;pointer-events:none;background:var(--papel);color:var(--noche);
  font-weight:700;font-size:var(--t-s);padding:.4rem .9rem;transition:opacity var(--m-medio),transform var(--m-medio) var(--curva);white-space:nowrap;box-shadow:4px 4px 0 var(--papel)}
.r-aviso.is-on{opacity:1;transform:translate(-50%,0)}

.r-capa{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--e-2);pointer-events:none;z-index:2}
.r-capa[hidden]{display:none}
.r-capa--panel{background:rgba(2,2,28,.72);pointer-events:auto}
.r-tarjeta{pointer-events:auto;width:min(26rem,100%);max-height:100%;overflow:auto;padding:var(--e-3);box-shadow:6px 6px 0 var(--azul);text-align:center;animation:r-pop var(--m-medio) var(--curva)}
@keyframes r-pop{from{transform:translateY(10px) scale(.97)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.r-tarjeta{animation:none}}
.r-tarjeta h2{font-size:var(--t-l);margin:.25rem 0 .5rem}
.r-tarjeta p{font-size:var(--t-s);line-height:1.45}
.r-tarjeta .btn{width:100%}
.r-estrella{width:64px;height:68px;fill:var(--papel);margin:0 auto var(--e-1);display:block;animation:girar 14s linear infinite}
.r-kicker{font-size:var(--t-xs)!important;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.r-teclas{font-size:var(--t-xs)!important;opacity:.75;margin-top:var(--e-2)}
.r-leyenda{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem .9rem;margin:var(--e-2) 0 var(--e-3);font-size:var(--t-xs)}
.r-leyenda li{display:flex;align-items:center;gap:.4em}
.r-leyenda i{width:.85em;height:.9em;display:inline-block;-webkit-mask:var(--m-estrella) center/contain no-repeat;mask:var(--m-estrella) center/contain no-repeat}
.l-papel{background:var(--papel)}.l-limon{background:#AEB8FF}.l-azul{background:#7F88FF}.l-magenta{background:#2A30FF}
.r-leyenda i.l-tranc{-webkit-mask:none;mask:none;background:repeating-linear-gradient(45deg,var(--papel) 0 3px,var(--noche) 3px 6px);width:1.1em;height:.7em}

.r-tarjeta--parada{width:min(28rem,100%);padding-top:0;text-align:left}
.r-foto{margin:0 calc(var(--e-3) * -1) var(--e-3);position:relative;aspect-ratio:7/4;background:var(--noche);overflow:hidden}
.r-foto[hidden]{display:none}
.ruta-util [data-panel] span{margin-left:.4em;font-variant-numeric:tabular-nums}
@media(max-height:820px){.r-foto{aspect-ratio:21/9}.r-tarjeta--parada h2{font-size:var(--t-m)}}
.r-foto img{width:100%;height:100%;object-fit:cover;display:block}
.r-foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .6rem .35rem;font-size:.6875rem;line-height:1.3;text-align:right;color:var(--papel);background:linear-gradient(transparent,rgba(2,8,240,.92))}
.r-etq{display:inline-block;border:2px solid var(--papel);padding:.15rem .6rem;font-size:var(--t-xs)!important;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.r-evento{margin-top:var(--e-2);padding:var(--e-2);background:var(--papel);color:var(--noche);text-align:left}
.r-evento:empty{display:none}
.r-evento small{display:block;font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.r-evento strong{display:block;font-family:var(--f-titular);font-size:var(--t-m);line-height:1.15;margin:.2rem 0}
.r-evento a{color:inherit;font-weight:600}
.r-acc{display:grid;gap:.6rem;margin-top:var(--e-3)}
@media(min-width:480px){.r-tarjeta--parada .r-acc{grid-template-columns:1fr 1fr}}

.r-tarjeta--fin{width:min(30rem,100%)}
.r-lugares{list-style:none;text-align:left;margin-top:var(--e-2);border-top:1px solid var(--filete-claro);max-height:11rem;overflow:auto}
.r-lugares li{display:flex;gap:.6rem;align-items:center;padding:.45rem 0;border-bottom:1px solid var(--filete-claro);font-size:var(--t-s)}
.r-lugares img{width:46px;height:30px;object-fit:cover;flex:none}
.r-lugares span{flex:1}
.r-lugares a{color:inherit;font-weight:600;white-space:nowrap}
.r-nombre{margin-top:var(--e-3);text-align:left}
.r-nombre label{display:block;font-size:var(--t-s);font-weight:600;margin-bottom:.4rem}
.r-nombre div{display:flex;gap:.5rem}
.r-nombre input{flex:1;min-width:0;min-height:48px;padding:.5rem .75rem;border:2px solid var(--papel);background:transparent;color:var(--papel);font:inherit}
.r-nombre .btn{width:auto}
.r-premio{margin-top:var(--e-3);padding-top:var(--e-3);border-top:2px dashed var(--filete-claro);text-align:left}
.r-premio .form-b{margin-top:var(--e-2)}
.r-premio .legal-b{font-size:.75rem!important;opacity:.8;margin-top:.5rem}
.r-premio.is-hecho .form-b,.r-premio.is-hecho .legal-b{display:none}

.r-panel{pointer-events:auto;width:min(40rem,100%);max-height:100%;overflow:auto;padding:var(--e-3);border:2px solid var(--papel);box-shadow:6px 6px 0 var(--azul)}
.r-panel__cab{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:var(--e-2)}
.r-panel h2{font-size:var(--t-l)}
.r-panel h3{font-size:var(--t-s);letter-spacing:.12em;text-transform:uppercase;margin:var(--e-3) 0 .4rem;display:flex;justify-content:space-between}
.r-album{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.4rem}
.r-album li{display:flex;align-items:center;gap:.45rem;padding:.4rem .5rem;border:1px solid var(--filete);font-size:var(--t-xs);line-height:1.2;min-height:2.6rem}
.r-album li i{flex:none;width:1em;height:1.05em;background:var(--filete);-webkit-mask:var(--m-estrella) center/contain no-repeat;mask:var(--m-estrella) center/contain no-repeat}
.r-album li.is-si{border-color:var(--papel)}
.r-album li.is-si i{background:var(--papel)}
.r-album li:not(.is-si){opacity:.55}
.r-tabla{list-style:none;counter-reset:p}
.r-tabla li{counter-increment:p;display:grid;grid-template-columns:2.2rem 1fr auto;gap:.6rem;align-items:baseline;padding:.55rem 0;border-bottom:1px solid var(--filete)}
.r-tabla li::before{content:counter(p);font-family:var(--f-titular);font-weight:800;font-size:var(--t-m)}
.r-tabla b{font-family:var(--f-titular);font-size:var(--t-m)}
.r-tabla small{display:block;opacity:.7;font-size:var(--t-xs)}
.r-tabla li.is-tuyo{background:rgba(230,255,58,.12)}

.ruta-pad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:6px;justify-content:center;margin-top:var(--e-2)}
.ruta-pad button{border:2px solid var(--papel);color:var(--papel);font-size:1.15rem;background:transparent;touch-action:manipulation}
.ruta-pad button:active{background:var(--papel);color:var(--noche);border-color:var(--papel)}
.ruta-pad [data-pausa]{font-size:.85rem;font-weight:700;border-style:dashed}
@media(pointer:fine){.ruta-pad{justify-content:end;grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px);gap:4px}}
.ruta-c .mapa__cred{font-size:var(--t-xs);opacity:.75;margin-top:var(--e-2)}
.ruta-c .mapa__cred a{color:inherit}