/* Diseño de PC. Hasta 1099 px se ve el diseño de celular tal cual:
   los contenedores de abajo no existen para el navegador (display: contents)
   y todo lo que acomoda las pantallas está dentro de @media (min-width: 1100px). */

.cab-pc, .pc-cols, .pc-col, .misiones-pc, .misiones-pc__historia, .misiones-pc__dia,
.banda-pc, .banda-pc__lado, .banda-pc__main, .corcho-pc, .billetera-pc, .billetera-pc__forma,
.vip-pc, .libreta__pag { display: contents; }
.pc-col > .seccion-t:first-child { margin-top: 18px; }

@media (max-width: 1099.98px) {
  .pc-solo { display: none !important; }
  .misiones-pc[data-activa="historia"] .misiones-pc__dia,
  .misiones-pc[data-activa="diarias"] .misiones-pc__historia { display: none; }
  .banda-sec { display: none; }
  .banda-pc[data-activa="pedidos"] .banda-sec--pedidos,
  .banda-pc[data-activa="miembros"] .banda-sec--miembros,
  .banda-pc[data-activa="niveles"] .banda-sec--niveles,
  .banda-pc[data-activa="historial"] .banda-sec--historial { display: contents; }
}

/* ---------- Menú Más: panel horizontal de dos filas, justo arriba del menú de abajo (pantallas anchas) ---------- */
.mas-pop { position: absolute; z-index: 70; left: -3px; right: -3px; bottom: calc(100% + 15px); background: var(--ber-800); border: 3px solid var(--out); border-radius: 18px; box-shadow: 0 6px 0 var(--out), 0 18px 40px rgba(0,0,0,.45); animation: masEntra .16s var(--ease); transform-origin: calc(100% - 50px) 100%; }
.mas-pop::after { content: ''; position: absolute; right: 45px; bottom: -10px; width: 15px; height: 15px; background: var(--ber-800); border-right: 3px solid var(--out); border-bottom: 3px solid var(--out); transform: rotate(45deg); }
@keyframes masEntra { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.mas-pop__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 4px; padding: 7px; max-height: calc(100vh - var(--hud-h) - var(--dock-h) - 44px); overflow-y: auto; }
.mas-pop__item { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; min-width: 0; padding: 9px 6px 8px; text-align: center; border: 3px solid transparent; border-radius: 13px; }
.mas-pop__item:hover { background: rgba(255,255,255,.07); }
.mas-pop__item.is-on { border-color: var(--hoja); background: rgba(139,227,43,.14); }
.mas-pop__item i { display: block; flex: none; width: 46px; height: 46px; }
.mas-pop__item span { display: block; width: 100%; min-width: 0; }
.mas-pop__item b { display: block; font: 400 16.5px/1.15 var(--f-d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mas-pop__item small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.15; color: var(--txt2); }

@media (min-width: 1100px) {
  :root { --pc-gap: clamp(18px, 1.4vw, 24px); --pc-gap-g: clamp(26px, 2.4vw, 40px); --pc-z: 1; --pc-alto: min(calc(100vh / var(--pc-z) - 260px), 680px); }
  .pc-oculto { display: none !important; }

  /* ---------- Página: usa el ancho, pero siempre con margen a los costados ---------- */
  .pagina, .fondo-vip .pagina { zoom: var(--pc-z); max-width: 2100px; padding-left: clamp(28px, calc(13vw - 120px), 110px); padding-right: clamp(28px, calc(13vw - 120px), 110px); padding-top: calc(var(--hud-h) + clamp(14px, 2.5vh, 40px)); }
  .pagina--eventos { padding-top: calc(var(--hud-h) + 50px); }
  .titulo { font-size: clamp(30px, 2.3vw, 36px); }
  .seccion-t { font-size: 24px; margin: 28px 0 13px; }
  .seccion-t i { width: 34px; height: 34px; }
  .pc-col > .seccion-t:first-child { margin-top: 0; }
  .chico { font-size: 14.5px; }
  .sub { font-size: 16.5px; }
  .globo { font-size: 16.5px; padding: 12px 16px; }
  .globo b { font-size: 16px; }
  .cara--grande { width: 96px; height: 96px; }
  .pc-cols, .misiones-pc, .banda-pc, .corcho-pc, .billetera-pc, .vip-pc { display: grid; align-items: start; }
  .pc-col, .billetera-pc__forma { display: block; min-width: 0; }

  /* Cabecera de cada sección: personaje a la izquierda, lo demás a la derecha */
  .cab-pc { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 24px; }
  .cab-pc .cabecera { flex: 1 1 auto; min-width: 0; margin: 0; align-items: center; gap: 16px; }
  .cab-pc .cabecera__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .cab-pc .globo { margin-top: 0 !important; flex: none; max-width: 640px; }
  .cab-pc .pestanias { flex: none; margin: 0; }
  .pestania { min-height: 48px; font-size: 17.5px; padding: 6px 16px; }
  .cab-pc .pestania { min-width: 128px; }

  /* ---------- Mercado ---------- */
  .toldo { width: calc(100vw / var(--pc-z)); margin-left: calc(50% - 50vw / var(--pc-z)); }
  .grilla--tienda { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--pc-gap); }
  .grilla--equipo { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--pc-gap); }
  .producto { padding: 16px; gap: 10px; }
  .producto__img { height: clamp(116px, 8vw, 140px); }
  .producto h4 { font-size: 20px; }
  .producto p { font-size: 15px; }
  .producto p.chico { font-size: 14px; }
  .producto__precio { font-size: 18px; }
  .estrellas { font-size: 15px; }
  .pc-cols--cogollos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pc-gap-g); }
  .pila--lineas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
  .pila--lineas > .btn { grid-column: 1 / -1; }
  .linea-cog { grid-template-columns: 72px minmax(0, 1fr); padding: 11px 13px; }
  .linea-cog__img { width: 72px; height: 72px; }
  .linea-cog h4 { font-size: 19px; }

  /* ---------- Mochila ---------- */
  .pc-cols--mochila { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pc-gap); align-items: stretch; min-height: var(--pc-alto); }
  .pc-cols--mochila .pc-col { padding: 18px 18px 22px; background: var(--ber-850); border: 3px solid var(--out); border-radius: var(--r-l); box-shadow: 0 5px 0 var(--out); }
  .pc-cols--mochila .grilla { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)) !important; gap: 16px; }
  .objeto { padding: 16px 10px; background: var(--ber-800); }
  .objeto__img { height: clamp(88px, 6vw, 104px); }
  .objeto b { font-size: 18px; margin-top: 8px; }
  .objeto small { font-size: 14.5px; }

  /* ---------- Misiones: libreta abierta y las del día al lado ---------- */
  .misiones-pc { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "libreta dia" "capt capt" "caps caps"; gap: var(--pc-gap); }
  .misiones-pc__historia { display: contents; }
  .misiones-pc__dia { display: block; grid-area: dia; min-width: 0; }
  .misiones-pc { align-items: stretch; }
  .misiones-pc .libreta { grid-area: libreta; min-width: 0; }
  .libreta__cap { font-size: 30px; }
  .libreta__sub { font-size: 15.5px; }
  .libreta .globo { font-size: 16.5px; }
  .mision-actual { padding: 14px; }
  .mision-actual h4 { font-size: 21px; }
  .camino li { font-size: 16px; padding: 5px 0 5px 30px; }
  .camino li::before { top: 8px; }
  .seccion-t--caps { grid-area: capt; margin: 12px 0 -4px !important; }
  .caps { grid-area: caps; margin: 0; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
  .cap-fila { padding: 10px 13px; }
  .cap-fila .cara { width: 48px; height: 48px; }
  .cap-fila b { font-size: 17.5px; }
  .cap-fila small { font-size: 14px; }
  .resumen-dia { padding: 14px 16px; margin-bottom: 14px; gap: 14px; }
  .resumen-dia__cofre { width: 66px; height: 66px; }
  .mision { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 14px; padding: 12px 15px; }
  .mision__ico { width: 54px; height: 54px; }
  .mision h4 { font-size: 19px; }
  .mision p { font-size: 14.5px; }
  .mision__prog, .mision__premio, .mision__premio .plata { font-size: 14px; }

  /* ---------- Eventos ---------- */
  .eventos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pc-gap); }
  .evento { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .evento__art { padding: 18px; }
  .tombola { width: min(100%, 290px); }
  .evento__premio svg { width: clamp(56px, 4.4vw, 76px); }
  .evento__premio b { font-size: 26px; }
  .evento__btn { min-height: 54px; font-size: 20px; }
  .pagina--eventos .vacio { padding: 34px 20px; font-size: 17px; }
  .evento__cuerpo { padding: 18px 20px 20px; }
  .evento h2 { font-size: 27px; }
  .evento__cuerpo > p { font-size: 16px; }
  .evento__datos { gap: 10px; }
  .evento__datos > div { padding: 9px 6px; }
  .evento__datos small { font-size: 13px; }
  .evento__datos b { font-size: 19px; }

  /* ---------- Pedidos: corcho a todo el ancho ---------- */
  .cab-pc--corcho { justify-content: flex-start; gap: 24px; }
  .cab-pc--corcho .corcho-titulo { margin: 0; flex: none; font-size: 28px; padding: 9px 18px; }
  .cab-pc--corcho p { margin: 0 !important; max-width: 660px; font-size: 16.5px !important; }
  .corcho-pc { grid-template-columns: minmax(0, 1fr) clamp(260px, 18vw, 320px); gap: 28px; }
  .notas { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
  .nota { padding: 24px 20px 18px; }
  .nota__cli .cara { width: 60px; height: 60px; }
  .nota__cli b { font-size: 20px; }
  .nota__cli small { font-size: 14.5px; }
  .nota__pide { grid-template-columns: clamp(76px, 5vw, 92px) minmax(0, 1fr); padding: 9px 13px; margin: 13px 0 11px; }
  .nota__pide svg { width: 100%; height: auto; }
  .nota__peso { font-size: clamp(26px, 2vw, 32px); }
  .nota__det { font-size: 15px; }
  .nota__prog { font-size: 14px; }
  .nota__paga { margin: 11px 0; }
  .nota__paga .plata { font-size: 25px; }
  .nota__paga small { font-size: 13.5px; }
  .nota--espera { padding: 42px 20px; }
  .nota.nota--mochila { transform: rotate(1deg); background: #E3F0FF; }
  .nota--mochila h3 { font-size: 22px; margin-bottom: 8px; }
  .nota__lista { list-style: none; margin: 0 0 12px; padding: 0; }
  .nota__lista li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 5px 0; border-bottom: 2px solid rgba(51,36,26,.12); }
  .nota__lista li:last-child { border-bottom: 0; }
  .nota__lista b { display: block; font: 400 16px/1.1 var(--f-d); }
  .nota__lista small { display: block; font-size: 13px; color: var(--tinta2); }
  .nota__mini svg { width: 44px; height: 44px; }
  .nota__cuantos { font: 400 21px var(--f-d); }
  .bloqueo { max-width: 560px; margin-top: 6vh; padding: 32px 30px; }
  .bloqueo__ico { width: 104px; height: 104px; }
  .bloqueo h2 { font-size: 32px; }
  .bloqueo p { font-size: 16.5px; }

  /* ---------- Bandas ---------- */
  .cab-pc--banda [data-fundar] { width: auto; flex: none; margin: 0 !important; min-height: 56px; padding: 8px 24px; font-size: 19px; }
  .bandas-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pc-gap); }
  .banda-card { grid-template-columns: clamp(92px, 7vw, 118px) minmax(0, 1fr); gap: 18px; padding: 18px; }
  .banda-card svg { width: 100%; }
  .banda-card h4 { font-size: 22px; }
  .banda-card p { font-size: 15.5px; margin-top: 3px; }
  .banda-card__dat { font-size: 15px; margin: 10px 0 14px; }
  .banda-card .btn { min-height: 42px; min-width: 130px; font-size: 16px; }

  .banda-pc { grid-template-columns: clamp(310px, 21vw, 370px) minmax(0, 1fr); gap: var(--pc-gap-g); }
  .banda-pc__lado { display: block; position: sticky; top: calc(var(--hud-h) + 12px); min-width: 0; }
  .banda-pc__main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pc-gap) var(--pc-gap-g); align-items: start; min-width: 0; }
  .banda-sec { display: block; min-width: 0; }
  .banda-sec--pedidos { grid-column: 1 / -1; }
  .banda-sec > .seccion-t:first-child { margin: 0 0 13px; }
  .banda-sec--miembros > .seccion-t:first-child { margin-top: 18px; }
  .banda-sec--miembros .tarjeta { max-height: calc(100vh / var(--pc-z) - 500px); min-height: 180px; overflow-y: auto; }
  .banda-pc__salir { grid-column: 1 / -1; justify-self: start; margin: 0 !important; }
  .banda-head { grid-template-columns: 96px minmax(0, 1fr); }
  .banda-head__em { width: 96px; }
  .banda-head h2 { font-size: 27px; }
  .perk { padding: 10px 4px; }
  .perk b { font-size: 23px; }
  .perk small { font-size: 13.5px; }
  .encargos { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: var(--pc-gap); align-items: start; }
  .encargo { padding: 16px; }
  .encargo__top { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
  .encargo__top svg { width: 84px; height: 84px; }
  .encargo h4 { font-size: 21px; }
  .encargo__frase { font-size: 14.5px; }
  .encargo__peso { font-size: 25px; }
  .encargo__leyenda { font-size: 14px; }
  .encargo__paga { font-size: 15px; padding: 10px 13px; }
  .miembro b { font-size: 16px; }
  .miembro small { font-size: 13.5px; }
  .nivel-banda { font-size: 14.5px; padding: 9px 8px; }
  .nivel-banda.is-hd { font-size: 13.5px; }

  /* ---------- Vecinos ---------- */
  .vecinos__riegos { flex: none; margin: 0 !important; padding: 9px 15px; font-size: 15.5px; color: #CDEBFF; background: rgba(77,184,255,.14); border: 3px solid var(--agua-d); border-radius: 13px; }
  .vecinos-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pc-gap); }
  .vecino { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 24px 14px 14px; text-align: center; }
  .vecino > * { position: relative; }
  .vecino > .vecino__pared { position: absolute; inset: 0 0 auto 0; height: 72px; border-bottom: 3px solid var(--out); }
  .vecino .cara { flex: none; width: 86px; height: 86px; }
  .vecino > div:not(.cara) { flex: 1; width: 100%; }
  .vecino h4 { font-size: 20px; }
  .vecino p { font-size: 14.5px; margin-top: 3px; }
  .vecino__sed { font-size: 15px; margin-top: 6px; justify-content: center; }
  .vecino .btn { width: 100%; min-height: 42px; font-size: 16px; }

  /* ---------- Billetera ---------- */
  .billetera-pc { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "saldos movs" "forma movs"; grid-template-rows: auto 1fr; gap: var(--pc-gap); align-items: stretch; min-height: var(--pc-alto); }
  .billetera-pc .saldos { grid-area: saldos; margin: 0; gap: var(--pc-gap); }
  .billetera-pc__forma { grid-area: forma; display: flex; flex-direction: column; }
  .billetera-pc__forma > .tarjeta.pila { flex: 1; }
  .billetera-pc__movs { grid-area: movs; min-width: 0; display: flex; flex-direction: column; }
  .billetera-pc__movs .seccion-t { margin: 3px 0 11px; min-height: 42px; }
  .billetera-pc__movs > .tarjeta, .billetera-pc__movs > .vacio { flex: 1 1 0; min-height: 240px; overflow-y: auto; }
  .billetera-pc__movs > .vacio { display: grid; place-items: center; }
  .saldo { display: flex; flex-direction: column; padding: 20px 22px; }
  .saldo .fila svg { width: 46px; height: 46px; }
  .saldo .fila b { font-size: 20px !important; }
  .saldo__n { font-size: clamp(34px, 2.8vw, 44px); margin-top: 6px; }
  .saldo small { font-size: 15px; margin-top: 6px; }
  .tarjeta.pila { padding: 20px; gap: 16px; }
  .mov { font-size: 15.5px; padding: 10px 2px; }
  .mov small { font-size: 13.5px; }

  /* ---------- Perfil ---------- */
  .pc-cols--perfil { grid-template-columns: minmax(0, 2.4fr) minmax(300px, 1fr); gap: var(--pc-gap-g); }
  .pc-cols--perfil .cara--grande { width: 104px; height: 104px; }
  .perfil-xp { margin-bottom: 18px; }
  .perfil-xp .fila { margin-bottom: 6px; }
  .perfil-xp .fila b { font: 400 19px var(--f-d); }
  .perfil-xp .barra { height: 20px; }
  .datos-perfil { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pc-gap); }
  .dato { display: flex; flex-direction: column; justify-content: center; min-height: 96px; padding: 12px 16px; background: var(--ber-800); box-shadow: 0 4px 0 var(--out); }
  .dato b { font-size: clamp(26px, 2vw, 32px); }
  .dato small { font-size: 14px; }
  .pc-cols--perfil .pila .btn { min-height: 52px; }
  .interruptor { font-size: 17px; padding: 10px 2px; }

  /* ---------- Salas y campos: las grandes ocupan más ---------- */
  .cab-pc--salas { justify-content: flex-start; gap: 34px; }
  .cab-pc--salas .fila { flex: none; margin: 0 !important; }
  .cab-pc--salas .charla { flex: 1 1 0; min-width: 0; max-width: 780px; margin: 0 !important; align-items: center; }
  .cab-pc--salas .globo { flex: 1 1 0; min-width: 0; max-width: none; }
  .lugares { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--pc-gap); }
  .lugar { display: flex; flex-direction: column; grid-column: span 2; }
  .lugar:nth-child(n+4) { grid-column: span 3; }
  .lugar__vista { flex: none; aspect-ratio: auto; height: clamp(120px, 9vw, 170px); }
  .lugar__vista .deco-sala { overflow: visible; }
  .lugar__cuerpo { flex: 1; align-items: start; padding: 14px 16px; gap: 14px; }
  .lugar > .btn, .lugar > .barra, .lugar > .lugar__estado { margin-left: 16px; margin-right: 16px; width: calc(100% - 32px); }
  .lugar__txt h3 { font-size: 22px; }
  .lugar__txt p { font-size: 15px; }

  /* ---------- VIP: el cartel a la izquierda y los beneficios a la derecha ---------- */
  .fondo-vip { background: radial-gradient(circle at 17% 26%, rgba(255,201,60,.24), transparent 30%), linear-gradient(180deg, #3A1B57, #1F1230 720px); }
  .vip-pc { grid-template-columns: clamp(300px, 22vw, 380px) minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr; column-gap: var(--pc-gap-g); }
  .vip__cab, .vip__estado, .vip__btn, .vip__nota { grid-column: 1; }
  .vip__corona { width: clamp(100px, 8vw, 124px); height: clamp(100px, 8vw, 124px); }
  .vip__cab .titulo { font-size: clamp(34px, 2.6vw, 42px); }
  .vip__precio { font-size: 19px; }
  .vip__precio .plata { font-size: 34px; }
  .vip__lista { grid-column: 2; grid-row: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--pc-gap); margin: 0; background: none; border: 0; box-shadow: none; }
  .vip__lista li, .vip__lista li:last-child { grid-template-columns: clamp(72px, 5vw, 88px) minmax(0, 1fr); gap: 16px; padding: 18px 20px; background: var(--ber-800); border: 3px solid var(--out); border-radius: var(--r-l); box-shadow: 0 5px 0 var(--out); }
  .vip__lista i { width: 100%; height: clamp(72px, 5.4vw, 92px); }
  .vip__lista i svg { max-width: 100%; }
  .vip__lista b { font-size: clamp(19px, 1.3vw, 22px); }
  .vip__lista small { font-size: 15px; margin-top: 3px; }
  .vip__cab { margin-top: 2vh; }
}

/* Desde 1280 px la libreta se abre en dos páginas y las misiones del día van en dos columnas */
@media (min-width: 1280px) {
  .libreta--abierta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 60px; padding: 24px 28px 26px 46px;
    background-image: linear-gradient(90deg, transparent 31px, rgba(226,63,107,.4) 31px, rgba(226,63,107,.4) 33px, transparent 33px), linear-gradient(90deg, transparent calc(50% - 16px), rgba(51,36,26,.2) 50%, transparent calc(50% + 16px)), repeating-linear-gradient(transparent, transparent 27px, rgba(110,90,66,.16) 27px, rgba(110,90,66,.16) 28px); }
  .libreta--abierta .libreta__pag { display: block; min-width: 0; }
  .camino { margin-top: 0; }
  .misiones-pc__dia .pila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .misiones-pc__dia .mision:first-child { grid-column: 1 / -1; }
}

/* En pantallas más grandes el título va al lado del globo y entran cinco vecinos por fila */
@media (min-width: 1500px) {
  .cab-pc .cabecera__txt { flex-direction: row; align-items: center; gap: 26px; }
  .cab-pc .titulo { flex: none; }
  .vecinos-lista { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Pantallas 4K: toda la página crece en la misma proporción, porque si no se vería muy chica */
@media (min-width: 3000px) { :root { --pc-z: 1.4; } }