/* =====================================================================================
   REDISEÑO VISUAL 2026-09-27 (mockup "+Pewes nueva cara", aprobado por Inty)
   Objetos 3D propios en vez de íconos genéricos, tipografía con carácter y mapa "arcilla".
   Va después de app.css y solo sobreescribe lo necesario: para volver atrás basta quitar
   este archivo de index.html (y obj3d() en iconos.js).
   ===================================================================================== */
:root{ --sand:#e9dcc6; --clay:#d8c3a2; --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif; --texto:"Figtree","Segoe UI",system-ui,sans-serif; }
body{font-family:var(--texto)}
.logo,.h1,.fzt,.lp-t,.logro-t,.reto-h,.tarjeta h3,.modal h3,.zp .zt,.rank-row .pos,.rank-row .pt{font-family:var(--display);letter-spacing:-.01em}
.logo{font-weight:800;font-size:21px;letter-spacing:-.03em}
.h1{font-size:30px;line-height:1.05;letter-spacing:-.03em;margin-bottom:6px}
.fzt{font-size:30px;line-height:1.05;letter-spacing:-.03em;margin-top:2px}

/* objeto 3D: luz de borde para que los tonos azul marino no se pierdan sobre el fondo oscuro */
.obj3d{display:block;flex:none;object-fit:contain;filter:drop-shadow(0 0 1px rgba(244,239,230,.38)) drop-shadow(0 4px 6px rgba(0,0,0,.35));-webkit-user-drag:none;user-select:none}
.obj3d.flota{animation:obj3dFlota 4.8s ease-in-out infinite}
.obj3d.apagado{filter:grayscale(1) brightness(1.1) opacity(.45)}
.obj3d.secreto{filter:brightness(0) drop-shadow(0 0 1px rgba(233,220,198,.8)) drop-shadow(0 0 10px rgba(242,112,28,.3));opacity:.8}
.obj3d.aparece{animation:obj3dAparece .7s cubic-bezier(.34,1.56,.64,1) both}
@keyframes obj3dFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes obj3dAparece{0%{transform:scale(.3) rotate(-12deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}

/* navegación inferior: objetos 3D que saltan con rebote al elegirlos */
nav button{padding-top:3px;gap:1px;position:relative;font-family:var(--texto);font-weight:600}
nav button .ic{display:flex;height:36px;align-items:flex-end}
nav button .ic .obj3d{width:34px;height:34px;filter:drop-shadow(0 0 1px rgba(244,239,230,.3)) grayscale(.35) brightness(.82);transition:transform .45s cubic-bezier(.34,1.56,.64,1),filter .3s}
nav button.on{color:var(--ink)}
nav button.on .ic .obj3d{transform:translateY(-5px) scale(1.16);filter:drop-shadow(0 0 1px rgba(244,239,230,.5)) drop-shadow(0 7px 8px rgba(0,0,0,.5))}
nav button.on::before{content:"";position:absolute;top:2px;left:50%;width:46px;height:46px;margin-left:-23px;border-radius:50%;background:radial-gradient(circle,rgba(242,112,28,.34),rgba(242,112,28,0) 70%);animation:navBrillo .6s ease-out;pointer-events:none}
@keyframes navBrillo{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}

/* botones del mapa */
/* Sherpa: el rostro ocupa todo el botón (Inty, 2026-10-04: el círculo y el anillo naranjo lo achicaban).
   Sin fondo ni anillo; la sombra sigue el contorno de la cara, y un leve "respiro" reemplaza al pulso. */
.sherpa-fab{width:64px;height:64px;background:none;box-shadow:none;padding:0;overflow:visible}
.sherpa-fab .obj3d{width:64px;height:64px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));animation:sherpaRespira 4s ease-in-out infinite}
@keyframes sherpaRespira{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.cerca-fab{background:rgba(15,26,43,.86);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:0}
.cerca-fab .obj3d{width:34px;height:34px}
#perfilBtn{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fbf5ea,#e0cfb2);border-color:transparent}
#perfilBtn .obj3d{width:28px;height:28px}
.capas-fab .cic .obj3d,.chip .cic .obj3d{width:24px;height:24px}
.chip .cic{margin-right:2px}
.obj3d.en-linea{display:inline-block;vertical-align:-6px;width:22px;height:22px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.tut-badge .obj3d.en-linea{width:48px;height:48px;vertical-align:0;filter:none} /* Sherpa del tutorial: rostro completo, sin círculo (2026-10-04) */
.ztag .obj3d,.tag2 .obj3d{display:inline-block;vertical-align:middle;width:18px;height:18px;filter:none}

/* marcadores: insignia circular arena + objeto 3D (regla: insignias, nunca pines) */
.insignia-zona{position:relative;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fbf5ea,#e0cfb2);box-shadow:0 5px 12px rgba(15,20,30,.45),inset 0 -2px 0 rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;cursor:pointer}
.insignia-zona .obj3d{width:31px;height:31px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.28));transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.insignia-zona:hover .obj3d{transform:scale(1.12) translateY(-1px)}
.insignia-zona.visitada{box-shadow:0 0 0 3px #f2701c,0 5px 12px rgba(15,20,30,.45)}
.insignia-zona.cerrada{filter:grayscale(1);opacity:.78}
.insignia-grupo{border-radius:50%;background:radial-gradient(circle at 35% 30%,#fbf5ea,#e0cfb2);box-shadow:0 0 0 3px rgba(242,112,28,.55),0 6px 14px rgba(15,20,30,.45);display:flex;align-items:center;justify-content:center;color:#1f2a3c;font-family:var(--display);font-weight:800;cursor:pointer}

/* ficha: el objeto de la zona flota arriba */
.ficha-heroe{position:relative;height:132px;display:flex;align-items:center;justify-content:center;margin:-4px 0 4px}
.ficha-heroe .aura{position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(242,112,28,.3),rgba(242,112,28,0) 68%)}
.ficha-heroe .obj3d{position:relative;width:120px;height:120px;filter:drop-shadow(0 0 1px rgba(244,239,230,.4)) drop-shadow(0 14px 16px rgba(0,0,0,.5))}
.ficha-heroe.cerrada .obj3d{filter:grayscale(1) drop-shadow(0 14px 16px rgba(0,0,0,.5));opacity:.7}
.ficha-heroe.cerrada .aura{background:radial-gradient(circle,rgba(226,91,91,.28),rgba(226,91,91,0) 68%)}

/* pasada fina (sin emojis): clima con objeto 3D, punto de mensajes nuevos con CSS, favorito en línea */
.clima-hoy{float:left;margin:-4px 10px 0 -2px}
.clima-hoy .obj3d{width:44px;height:44px}
.punto-nuevo{display:inline-block;width:9px;height:9px;border-radius:50%;background:#e2544a;margin-right:6px;box-shadow:0 0 0 2px rgba(226,84,74,.25);vertical-align:1px}
#favBtn svg{display:block}

/* títulos de las secciones de la ficha */
.fst{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--sand);opacity:.85}

/* títulos de sección con su objeto */
.titulo-sec{display:flex;align-items:center;gap:12px;margin-bottom:2px}
.titulo-sec [data-obj3d] .obj3d{width:68px;height:68px}

/* logros y retos */
.sech{font-family:var(--display);font-weight:700;letter-spacing:-.01em}
/* la barra de logros tenía el fondo crema claro: en 0/14 se veía llena */
.logros-bar{background:rgba(233,220,198,.12)}
.logros-bar i{background:linear-gradient(90deg,var(--accent),#ff9a4d)}
.logro-ic .obj3d{width:56px;height:56px}
.lp-ic .obj3d{width:96px;height:96px}
.reto-h .obj3d{width:34px;height:34px;margin:-6px 0}
@media (prefers-reduced-motion: reduce){ .obj3d.flota,.obj3d.aparece,.sherpa-fab .obj3d,nav button.on::before{animation:none} nav button .ic .obj3d{transition:none} }

/* ---------- Comunidad completa, juego, pulsómetro y voz (traídos de la copia local, 2026-09-27) ---------- */
.cx-vacio{color:var(--muted);font-size:13px}
.cx-nota{color:var(--muted);font-size:12.5px;margin-bottom:10px}
.cx-py{border-top:1px solid var(--edge);padding:11px 0}
.cx-py:first-child{border-top:0;padding-top:2px}
.cx-py-cab{display:flex;align-items:center;gap:8px}
.cx-py-cab b{font-family:var(--display);font-size:15px;line-height:1.2}
.cx-estado{margin-left:auto;font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px;white-space:nowrap;background:rgba(233,220,198,.12);color:var(--sand)}
.cx-estado.cx-en_curso{background:rgba(242,112,28,.18);color:#ffb27a}
.cx-estado.cx-hecho{background:rgba(111,168,102,.2);color:#9fd394}
.cx-py-desc{font-size:14px;margin:4px 0}
.cx-py-zona{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:4px}
.cx-py-zona .obj3d.en-linea{width:18px;height:18px}
.cx-py-pie{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}
.cx-py-pie .pbtn{padding:6px 12px;font-size:13px}
.cx-apoyo.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.cx-autor{font-size:11.5px;color:var(--muted)}
.cx-marca{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--edge);border-radius:14px;margin-bottom:8px;text-decoration:none;color:var(--ink);background:rgba(233,220,198,.05);transition:background .2s}
.cx-marca:hover{background:rgba(233,220,198,.1)}
.cx-marca-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.cx-marca-txt b{font-family:var(--display);font-size:16px}
.cx-marca-txt small{color:var(--muted);font-size:12.5px}
.cx-marca-ir{margin-left:auto;white-space:nowrap;font-size:12.5px;font-weight:700;color:var(--accent)}
.topo-progreso{margin-bottom:8px}
.topo-progreso-t{font-size:12px;color:var(--muted);margin-bottom:4px}
.sh-in button.mic{background:var(--bg);color:var(--ink);border:1px solid var(--edge);padding:0 12px;display:flex;align-items:center}
.sh-in button.mic.on{background:#e0453c;color:#fff;border-color:#e0453c}
.sh-voz{display:flex;align-items:center;gap:6px;align-self:flex-start;cursor:pointer;border:1px solid var(--edge);background:var(--bg);color:var(--muted);border-radius:999px;padding:4px 11px;font-size:12px;font-weight:600;margin:2px 0 8px}
.sh-voz.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.hr-live{display:flex;flex-direction:column;align-items:center;padding:12px 0}
.hr-bpm{font-family:var(--display);font-size:42px;font-weight:800;color:var(--accent);line-height:1}
.hr-lbl{color:var(--muted);font-size:12px;margin-top:2px}
.hr-ses{color:var(--muted);font-size:12px;margin:6px 0;text-align:center}
.hr-disc{color:var(--muted);font-size:11px;margin-top:8px}
.mm-sheet{background:#0b0e14;border-color:#3a4a63}
.mm-px{font-family:'Press Start 2P',monospace;letter-spacing:.5px}
.mm-est{color:#f2c21c;font-family:system-ui,sans-serif;font-size:1.25em} /* la fuente pixelada no trae la estrella */
/* Crédito de la música (artista + enlace a su perfil) */
.mm-musica{text-align:center;font-size:8.5px;line-height:2;color:#f2c21c;margin:6px auto 0;padding:6px 10px;max-width:340px;border:1px dashed #3a4a63;border-radius:8px}
.mm-musica a{display:inline-block;margin-top:2px;padding:4px 8px;color:#0b1220;background:#1db954;border-radius:6px;text-decoration:none}
.mm-musica a:active{transform:scale(.97)}
.mm-nota{font-family:system-ui,sans-serif;font-size:1.3em} /* la fuente pixelada no trae la nota */
.mm-hold{position:absolute;width:15%;padding-bottom:15%;height:0;margin:-7.5% 0 0 -7.5%;border-radius:50%;background:transparent;border:2px solid rgba(255,255,255,.5);cursor:pointer;transition:transform .08s}
.mm-hold:active{transform:scale(1.15)}
.mm-hold:disabled{cursor:default;border-color:transparent}
.mm-chalk{display:block;margin:0;height:28px;padding:0 10px;border-radius:999px;border:2px solid rgba(0,0,0,.35);background:#c8b98a;color:#3a2e10;font-size:8px;font-weight:800;cursor:pointer;transition:transform .12s}

/* Torre de Ritmo (2026-10-01): botones de carril bajo el canvas, uno por color */
.mm-carriles{display:flex;gap:6px;margin-top:8px}
.mm-carril{flex:1;height:52px;border-radius:12px;border:3px solid rgba(0,0,0,.35);cursor:pointer;touch-action:manipulation;box-shadow:inset 0 -6px 0 rgba(0,0,0,.25)}
.mm-carril:active{transform:translateY(2px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}

.mm-cab{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.mm-cab .mm-chalk{margin-left:auto}
.mm-x{width:40px;height:40px;border-radius:50%;border:1px solid #3a4a63;background:rgba(255,255,255,.06);color:#e0e0e0;font-size:24px;line-height:1;cursor:pointer;flex:none}
.mm-sheet{padding-top:calc(12px + env(safe-area-inset-top,0px)) !important} /* la cabecera queda bajo la barra de estado del telefono */
.mm-salir{display:block;width:100%;margin:10px 0 2px;padding:12px;border-radius:12px;border:1px solid #3a4a63;background:transparent;color:#e0e0e0;font-size:9px;letter-spacing:1px;cursor:pointer}
.mm-carril{height:48px}
/* MAGNESIO junto a los botones de colores, con barra de carga (2026-10-04, Inty: "más claro y más cerca") */
.mm-cab #mmRonda{margin-left:auto}
.mm-chalk{position:relative;display:block;width:100%;height:46px;margin:8px 0 0;padding:0;border-radius:12px;border:2px solid #c8b98a;background:#1b2233;color:#1a1408;overflow:hidden;cursor:pointer;touch-action:manipulation}
.mm-chalk-barra{position:absolute;left:0;top:0;bottom:0;width:100%;background:#e9dfc0;transition:width .2s ease,background .2s ease}
.mm-chalk-txt{position:relative;z-index:1;font-size:10px;letter-spacing:1px;color:#1a1408;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.mm-chalk.mm-chalk-bajo{border-color:#e6412d}
.mm-chalk.mm-chalk-bajo .mm-chalk-txt{color:#fff;text-shadow:0 1px 2px #000}
@keyframes mmLateAncho{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(230,65,45,.7)}50%{transform:scale(1.02);box-shadow:0 0 0 6px rgba(230,65,45,0)}}
.mm-chalk.mm-chalk-bajo{animation:mmLateAncho .7s ease-in-out infinite}
/* TODO EL JUEGO CABE EN LA PANTALLA (2026-10-04, Inty: "el botón magnesio está muy abajo"): en su teléfono (643 px útiles)
   el botón quedaba bajo el borde. La torre se achica según el alto para que colores y MAGNESIO queden siempre a la vista. */
.mm-juego{width:min(100%,calc((100vh - 215px)*300/490))}
@supports (height:100dvh){.mm-juego{width:min(100%,calc((100dvh - 215px)*300/490))}}