/* menús agrupados: arriba en computadora y hojas que suben en el celular */
header.top nav.ng-arriba{align-items:center;gap:2px}
.ng-grupo{position:relative}
.ng-disparo{display:inline-flex;align-items:center;gap:4px;background:none;border:0;color:var(--gris);font:600 var(--t-3) Archivo,sans-serif;padding:8px 12px;border-radius:var(--radio-1);cursor:pointer}
.ng-disparo svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform var(--dur-2)}
.ng-disparo:hover,.ng-grupo.abierto>.ng-disparo{color:var(--tinta)}
.ng-disparo.on{color:var(--tinta);background:rgba(var(--tinta-rgb),.07)}
.ng-grupo.abierto>.ng-disparo svg{transform:rotate(180deg)}
.ng-menu{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(-4px);min-width:260px;padding:8px;border-radius:var(--radio-2);background:rgba(12,17,24,.97);border:1px solid rgba(var(--tinta-rgb),.12);box-shadow: var(--sombra-3);display:flex;flex-direction:column;gap:2px;opacity:0;pointer-events:none;transition:opacity var(--dur-1),transform var(--dur-1);z-index:30}
.ng-menu::before{content:'';position:absolute;left:0;right:0;top:-8px;height:8px}
.ng-grupo.abierto .ng-menu{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.ng-op{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;background:none;border:0;border-radius:var(--radio-2);padding:8px 12px;cursor:pointer;color:var(--texto);width:100%}
.ng-op b{font:600 var(--t-3) Archivo,sans-serif}
.ng-op small{font-size:var(--t-2);color:var(--gris)}
.ng-op:hover,.ng-op:focus-visible{background:rgba(var(--menta-rgb),.08)}
.ng-op.on{background:rgba(var(--menta-rgb),.1)}.ng-op.on b{color:var(--menta)}
.ng-disparo:focus-visible,.ng-tab:focus-visible,.ng-op:focus-visible{outline:2px solid var(--menta);outline-offset:2px}
.ng-disparo.ng-aviso::after,.ng-tab.ng-aviso::after{content:'';position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:#FF4D4D;box-shadow:0 0 0 2px var(--panel)}
.ng-disparo{position:relative}
/* celular: barra de abajo con grupos */
@media(max-width:900px){
  nav.abajo{grid-template-columns:repeat(5,1fr)!important}
  nav.abajo .ng-tab{background:none;border:0;color:var(--gris2);font-size:11px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 0;cursor:pointer;position:relative}
  nav.abajo .ng-tab svg{width:23px;height:23px}
  nav.abajo .ng-tab.on{color:var(--menta)}
  .ng-hoja{position:fixed;left:10px;right:10px;bottom:calc(76px + env(safe-area-inset-bottom,0px));padding:12px;border-radius:var(--radio-3);background:rgba(12,17,24,.98);border:1px solid rgba(var(--tinta-rgb),.12);box-shadow: var(--sombra-3);display:flex;flex-direction:column;gap:2px;
    transform:translateY(16px);opacity:0;pointer-events:none;transition:transform var(--dur-2) cubic-bezier(.2,.9,.3,1),opacity var(--dur-1);z-index:21}
  .ng-hoja.abierta{transform:none;opacity:1;pointer-events:auto}
  .ng-hoja-t{margin:4px 12px 8px;font:700 var(--t-2) 'Barlow Condensed',Archivo,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--menta)}
  nav.abajo .ng-hoja .ng-op{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:1px;padding:12px;color:var(--texto);font-size:inherit}
  body.ng-hoja-abierta .xamur,body.ng-hoja-abierta .x-globo{opacity:0;pointer-events:none}
  .ng-hoja .ng-op b{font-size:var(--t-4)}
}
@media(min-width:901px){.ng-hoja{display:none}}
@media (prefers-reduced-motion: reduce){.ng-menu,.ng-hoja,.ng-disparo svg{transition:none}}
/* avisos pendientes: discretos y pro (como iOS/Android). Un punto fino o una pastilla con número, con anillo del color del fondo y un solo latido al aparecer */
body .burbuja{top:-3px!important;right:-3px!important;min-width:16px!important;height:16px!important;padding:0 4px!important;border-radius:var(--radio-1)!important;background:#FF453A!important;color:#fff!important;
  font:700 var(--t-1)/var(--t-4) Archivo,sans-serif!important;letter-spacing:.01em;box-shadow:0 0 0 2px var(--panel)!important;animation:avisoEntra var(--dur-3) cubic-bezier(.2,1.5,.4,1) 1!important}
body .burbuja.punto{min-width:8px!important;width:8px!important;height:8px!important;padding:0!important;top:3px!important;right:3px!important}
body .cm-badge{min-width:16px!important;height:16px!important;padding:0 4px!important;border-radius:var(--radio-1)!important;background:#FF453A!important;font:700 var(--t-1)/var(--t-4) Archivo,sans-serif!important;box-shadow:0 0 0 2px var(--panel);animation:avisoEntra var(--dur-3) cubic-bezier(.2,1.5,.4,1) 1}
.ng-disparo.ng-aviso::after,.ng-tab.ng-aviso::after{width:7px!important;height:7px!important;top:5px!important;right:5px!important;background:#FF453A!important;box-shadow:0 0 0 2px var(--panel)!important}
nav.abajo .ng-tab.ng-aviso::after{right:calc(50% - 16px)!important;top:2px!important}
@keyframes avisoEntra{0%{transform:scale(0)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){body .burbuja,body .cm-badge{animation:none!important}}
/* aviso dentro de una opción del menú (p. ej. «Gana $500»): en vez de punto rojo, etiqueta «NUEVO» en amarillo de carreras con brillo que pasa */
.ng-op{position:relative}
/* el grupo que la contiene lleva un punto amarillo fino en vez de rojo cuando lo único pendiente es una novedad */
.ng-disparo.ng-nuevo::after,.ng-tab.ng-nuevo::after{content:'';position:absolute;width:7px;height:7px;top:5px;right:5px;border-radius:50%;background:#FFD60A;box-shadow:0 0 0 2px var(--panel)}
nav.abajo .ng-tab.ng-nuevo::after{right:calc(50% - 16px);top:2px}

/* Juegos: abiertos para todos los clientes (Rodrigo, 21 oct); los km y la tabla de campeones aún son de prueba */

/* cifras de premio ($500) con el mismo estilo que los precios de «Lo nuevo para tu taller»: Barlow condensada, inclinada, sin resplandor fuerte */
body .tj .num,body .premio-hero .cifra,body .pg-txt em{font-family:var(--num)!important;font-style:italic!important;font-weight:700!important;letter-spacing:-.01em;text-shadow:none!important}
body .tj .num{font-size:60px!important;top:14px!important;right:16px!important;line-height:1}
@media(max-width:900px){body .tj .num{font-size:44px!important;top:12px!important;right:12px!important}}

/* secciones que vienen: etiqueta «Pronto» en el menú y aviso con el piloto */
.ng-tag-pronto{font-style:normal;margin-left:8px;vertical-align:2px;font:700 var(--t-1)/1 Archivo,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#0B0F14;background:#C9D0D9;border-radius:var(--radio-pildora);padding:4px 8px}
.ng-op:has(.ng-tag-pronto){opacity:.8}
.ng-pronto-caja{position:fixed!important;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(3,4,6,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ng-pronto-panel{position:relative;width:min(360px,100%);text-align:center;background:linear-gradient(160deg,#141b25,#0a0e14);border:1px solid rgba(var(--menta-rgb),.35);border-radius:var(--radio-3);padding:24px 20px 20px;box-shadow: var(--sombra-3);animation:avisoEntra var(--dur-3) cubic-bezier(.2,1.3,.4,1)}
.ng-pronto-panel img{width:92px;height:auto;margin:-60px auto 8px;display:block;filter:drop-shadow(0 12px 24px rgba(0,0,0,.6))}
.ng-pronto-panel small{display:block;font:700 var(--t-1)/1 Archivo,sans-serif;letter-spacing:.22em;color:var(--menta,#89FF9E)}
.ng-pronto-panel b{display:block;margin:8px 0 8px;font:700 italic var(--t-7)/1 'Barlow Condensed',Archivo,sans-serif;color:var(--tinta)}
.ng-pronto-panel p{margin:0 0 16px;color:var(--texto2);font-size:var(--t-3)}
.ng-pronto-panel .btn{width:auto;margin:0 auto;padding:12px 28px}

/* letras nuevas (Inter + Saira Semi Condensed): Inter es un poco más ancha que Archivo; el titular de la portada se ajusta para no salirse */
body .escena h1{font-size:clamp(38px,8.6vw,88px);letter-spacing:-.035em;max-width:11ch;font-weight:700}
.recomienda.rc-brilla{box-shadow:0 0 0 3px #25D366,0 0 28px rgba(37,211,102,.45);transition:box-shadow var(--dur-3)}

/* cerrar las hojas del menú de abajo: ✕ arriba a la derecha y fondo oscuro que se toca para cerrar */
.ng-velo{display:none}
@media(max-width:900px){
  body.ng-hoja-abierta .ng-velo{display:block;position:fixed;inset:0;z-index:19;background:rgba(0,0,0,.5);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .ng-hoja-cab{display:flex;align-items:center;justify-content:space-between}
  .ng-hoja-x{width:36px;height:36px;margin:0 2px 0 0;border-radius:50%;border:1px solid rgba(var(--tinta-rgb),.16);background:none;color:var(--texto);font-size:var(--t-4);cursor:pointer}
}
/* en celular la página solo se mueve hacia arriba y abajo: lo que se salga unos pixeles de la orilla se recorta
   (clip y no hidden, para no romper lo que va fijo al bajar, como las guías). Solo en body: en iPhone,
   ponerlo también en html (y overscroll-behavior en la raíz) traba el deslizamiento hacia abajo */
body{overflow-x:clip}
/* la hoja del menú nunca pasa del alto visible (iPhone con la barra de Safari): si no cabe, se desliza por dentro */
@media(max-width:900px){.ng-hoja{max-height:calc(100svh - 150px);overflow-y:auto;overscroll-behavior:contain}}
/* menú de abajo oscuro de vidrio (Rodrigo, 21 oct): negro con transparencia y desenfoque, íconos claros, el activo en verde */
@media(max-width:900px){
  nav.abajo{background:rgba(10,13,17,.62)!important;background-image:none!important;-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
    border-top:0!important}
  nav.abajo > button,nav.abajo .ng-tab{color:rgba(238,241,245,.72)!important}
  nav.abajo > button.on,nav.abajo .ng-tab.on,nav.abajo .ng-tab:has(+ .ng-hoja.abierta){color:var(--menta)!important}
  nav.abajo > button.on svg,nav.abajo .ng-tab.on svg{stroke-width:2.2}
  nav.abajo .ng-hoja .ng-hoja-x{width:44px;height:44px;padding:0;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;color:var(--tinta);background:rgba(var(--tinta-rgb),.1);border:1px solid rgba(var(--tinta-rgb),.22);border-radius:50%}
}
/* Inicio en celular: las fotos de equipo de las tarjetas van centradas arriba (antes se corrían a la derecha y se cortaban) */
@media(max-width:900px){
  .tarjetas .tj .prod{left:50%!important;right:auto!important;top:12px!important;bottom:auto!important;width:80%!important;transform:translateX(-50%)!important}
  .tarjetas .tj.e .prod{width:62%!important}
}
/* ---------- movimiento (Rodrigo: «que se vea pro, no lento»). Reglas: como app nativa, rápido (120–260 ms), curvas que
   arrancan de golpe y frenan suave, solo transform y opacity (el celular las dibuja sin trabarse; nada de recortes ni
   desenfoques animados), y cambiar de sección es instantáneo. Con «reducir movimiento» solo aparece ---------- */
:root{--mv-sale:var(--curva-entra);--mv-hoja:var(--curva-entra)} /* las del sistema (sistema.css) */
@media(max-width:900px){
  /* submenú: nace de la pestaña que tocaste, en 240 ms; las opciones llegan casi juntas (escalón de 18 ms) */
  .ng-hoja{transform-origin:var(--ox,50%) 100%;transform:translateY(10px) scale(.94);opacity:0;
    transition:transform var(--dur-2) var(--mv-sale),opacity var(--dur-1) var(--curva-entra)}
  .ng-hoja.abierta{transform:none;opacity:1;transition:transform var(--dur-2) var(--mv-sale),opacity var(--dur-1) var(--curva-entra)}
  .ng-hoja>*{opacity:0;transform:translateY(6px);transition:opacity var(--dur-1) var(--curva-entra),transform var(--dur-2) var(--mv-sale)}
  .ng-hoja.abierta>*{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 18ms)}
  /* fondo oscuro con fundido en vez de aparecer de golpe */
  .ng-velo{display:block;position:fixed!important;inset:0;z-index:19!important;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--curva-entra);-webkit-tap-highlight-color:transparent}
  body.ng-hoja-abierta .ng-velo{opacity:1;pointer-events:auto}
  /* pestañas: respuesta inmediata al dedo y la abierta se marca */
  nav.abajo > button svg,nav.abajo .ng-tab svg{transition:transform var(--dur-2) var(--mv-sale)}
  nav.abajo > button:active svg,nav.abajo .ng-tab:active svg{transform:scale(.86);transition-duration:var(--dur-1)}
  nav.abajo .ng-tab:has(+ .ng-hoja.abierta){color:var(--menta)!important}
  nav.abajo .ng-tab:has(+ .ng-hoja.abierta) svg{transform:translateY(-2px)}
  /* hojas que suben (Configuración, publicar): curva de hoja de iPhone, 300 ms */
  .es-config:not(.oculto) .es-config-caja{animation:mvSube var(--dur-3) var(--mv-hoja) both}
  .cm-nuevo.hoja{animation:mvSube var(--dur-3) var(--mv-hoja)}
}
@keyframes mvSube{from{transform:translateY(100%)}to{transform:none}}
@keyframes mvAparece{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes mvFab{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
/* ventanas: aparecen con un acercamiento corto */
.cm-dlg[open],.avc-ios[open]{animation:mvAparece var(--dur-1) var(--mv-sale)}
/* tarjetas: se hunden al instante al tocar y regresan suave */
#inicio .tarjetas .tj,#inicio .caja[onclick],.avc-tj{transition:transform var(--dur-2) var(--mv-sale)}
#inicio .tarjetas .tj:active,#inicio .caja[onclick]:active{transform:scale(.97);transition-duration:var(--dur-1)}
/* el «+» del muro: aparece con un pop corto, sin esperar */
@media(max-width:900px){body[data-p="comunidad"] .cm-fab{animation:mvFab var(--dur-2) var(--mv-sale)}}
@media(prefers-reduced-motion:reduce){
  .ng-hoja,.ng-hoja.abierta,.ng-hoja>*,.ng-hoja.abierta>*{transform:none!important;transition:opacity var(--dur-1)!important;transition-delay:0s!important}
  .es-config:not(.oculto) .es-config-caja,.cm-nuevo.hoja,.cm-dlg[open],.avc-ios[open],body[data-p="comunidad"] .cm-fab{animation:none!important}
  #inicio .tarjetas .tj:active,#inicio .caja[onclick]:active,nav.abajo .ng-tab svg,nav.abajo > button svg{transform:none!important}
}
/* portada y paneles de vidrio: misma entrada pero ágil (antes 0.9 s y 0.45 s se sentían lentas) */
.sube{transform:translateY(16px);transition:opacity var(--dur-3) var(--curva-entra),transform var(--dur-3) var(--mv-sale)}
.placa.sube{transform:skewX(-14deg) translateY(16px)}
.vidrio{animation-duration:var(--dur-2)!important;animation-timing-function:var(--mv-sale)!important}
@media(max-width:900px){.es-config{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(3,5,8,.78)!important}} /* el desenfoque traba la hoja al subir en iPhone */
/* barra de abajo flotante, como la de Instagram (pedido de Rodrigo): píldora separada de las orillas, con sombra,
   y la sección activa marcada con su propia píldora; mismo color blanco fibra de carbono */
@media(max-width:900px){
  nav.abajo{left:12px!important;right:12px!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
    border-radius:30px!important;border:1px solid rgba(var(--tinta-rgb),.12)!important;padding:6px!important;gap:2px;
    box-shadow:0 10px 30px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.35),inset 0 1px 0 rgba(var(--tinta-rgb),.08)!important}
  nav.abajo > button,nav.abajo .ng-tab{border-radius:24px!important;padding:7px 0 6px!important;white-space:nowrap;font-size:10.5px!important;letter-spacing:-.01em;transition:background-color var(--dur-2) var(--curva-entra),color var(--dur-2) var(--curva-entra)}
  nav.abajo > button.on,nav.abajo .ng-tab.on,nav.abajo .ng-tab:has(+ .ng-hoja.abierta){background:rgba(var(--tinta-rgb),.12)!important}
  /* el submenú sale arriba de la píldora, del mismo ancho */
  .ng-hoja{left:-2px!important;right:-2px!important;bottom:calc(100% + 10px)!important}
  /* el contenido no queda escondido detrás de la barra */
  body.portal main.pg{padding-bottom:124px!important}
}
/* «Lo nuevo para tu taller» en celular: la fila llega a las orillas de la pantalla y la primera tarjeta queda alineada con el texto
   (antes la fila empezaba recortada y las tarjetas se veían corridas a la derecha) */
@media(max-width:520px){main.pg .nv-fila{margin-left:-16px;margin-right:-16px;padding:2px 16px 8px;scroll-padding-inline:16px;grid-auto-columns:100%;gap:16px}}   /* tarjeta completa, sin la siguiente asomando cortada (Rodrigo, 5 nov) */
/* lo nuevo en los menús (p. ej. Gana $500): en vez de un punto suelto, una etiqueta «Nuevo» pegada al nombre, como la de «Pronto», con brillo suave */
body .ng-op > .burbuja.punto{display:none!important}
.ng-op:has(> .burbuja.punto) > b::after{content:'Nuevo';display:inline-block;margin-left:8px;vertical-align:2px;font:700 var(--t-1)/1 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:#06120A;background:var(--menta);border-radius:var(--radio-pildora);padding:4px 8px;box-shadow:0 0 0 0 rgba(137,255,158,.6);animation:ngNuevo 2.4s ease-in-out infinite}
@keyframes ngNuevo{0%,100%{box-shadow:0 0 0 0 rgba(137,255,158,0)}50%{box-shadow:0 0 12px 2px rgba(137,255,158,.55)}}
@media(prefers-reduced-motion:reduce){.ng-op:has(> .burbuja.punto) > b::after{animation:none}}
/* «Gana con un video»: el $500 más grande y llamativo */
body .tj.f .num{font-size:96px!important;top:6px!important;letter-spacing:-.03em}
@media(max-width:900px){body .tj.f .num{font-size:64px!important;top:8px!important;right:10px!important}}
/* mientras navegacion.js arma la barra y el menú, no se dibuja la caja vacía */
#abajo:empty,header.top nav:empty{visibility:hidden}