/* ============================================================
   MinerOS Hub — RESPONSIVE PREMIUM (tablet + móvil)
   TODO está dentro de media queries ≤1024px → el desktop NO se toca.
   Se carga al final (inyectado por core.js) para ganar al resto.
   ============================================================ */

/* ===== TABLET (768–1024px): aprovecha el ancho, 2 columnas ===== */
@media (min-width:768px) and (max-width:1024px){
  .wrap{padding-left:24px;padding-right:24px}
  /* rejillas de 3–4 col → 2 col equilibradas */
  .stat-grid,.block-list,.benefit-grid,.ex-grid,.facts-grid,
  .pro-widgets,.course-grid,.ac-rw-grid,.dia-grid,.hof-grid,
  .rk-grid,.earn-grid,.ac-challenges,.fleet-totals,
  .rw-grid{grid-template-columns:repeat(2,1fr)!important}
  /* 3 mini-stats del perfil (XP · HashPoints · Racha): sin celda vacía */
  .ac-hero-stats{grid-template-columns:repeat(3,1fr)!important}
  .pro-tiers,.pricing-grid{grid-template-columns:repeat(3,1fr)}
  /* paneles a una columna donde el lateral aprieta */
  .co-layout,.inf-layout,.ecalc,.contact-grid,.hist-grid{grid-template-columns:1fr}
  .pro-duo,.cd-grid,.be-box{grid-template-columns:1fr 1fr}
}

/* ===== MÓVIL (≤767px) ===== */
@media (max-width:767px){
  /* sin scroll horizontal, márgenes cómodos */
  html,body{overflow-x:hidden;max-width:100%}
  .wrap{padding-left:16px;padding-right:16px}

  /* tipografía legible sin zoom; títulos sin saltos feos */
  h1{font-size:clamp(1.8rem,7.4vw,2.5rem);line-height:1.12;overflow-wrap:anywhere;text-wrap:balance}
  h2{font-size:clamp(1.4rem,5.6vw,1.95rem);line-height:1.16;overflow-wrap:anywhere}
  h3{font-size:clamp(1.15rem,4.6vw,1.4rem)}
  .page-hero{padding-top:100px;padding-bottom:24px}
  .page-hero p,.page-hero .intro{font-size:1rem;line-height:1.55}
  section{padding-top:clamp(40px,7vh,68px);padding-bottom:clamp(40px,7vh,68px)}

  /* TODAS las rejillas multi-columna → una sola columna */
  .stat-grid,.block-list,.benefit-grid,.ex-grid,.facts-grid,.how-grid,
  .pro-widgets,.course-grid,.ac-rw-grid,.dia-grid,.hof-grid,.rk-grid,
  .earn-grid,.ac-challenges,.fleet-totals,.rw-grid,.pc-grid,.need-grid,
  .photo-grid,.cd-grid,.pro-duo,.ecalc,.co-layout,.inf-layout,.contact-grid,
  .hist-grid,.pro-tiers,.pricing-grid,.why-grid,.steps-row,.dealx-grid,
  .start3,.foot-grid,.md-grid2,.fwd-head,.md-head,.conv-out,.eparts-grid,
  .ev-duo,.loy-table,.calc-grid,.calc-layout,.so-grid,.hp-grid,.hp-pit,.proj-kpis{grid-template-columns:1fr!important}
  /* las mini-stats del perfil: 3 tarjetas, se mantienen en fila */
  .ac-hero-stats{grid-template-columns:repeat(3,1fr)!important}

  /* objetivo táctil mínimo 44px en controles */
  .btn,.tab,.cchip,.nav-drop a,.nav-top,.acct-btn,.lang button,
  .menu-toggle,.theme-toggle,.rb-tab,.hp-toggle button,.co-sort button,
  .pt-cta,.ld-node,.se-cta{min-height:44px}
  .btn{display:inline-flex;align-items:center;justify-content:center}
  .lang button{min-width:40px}

  /* formularios: 16px evita el zoom automático de iOS; ancho completo */
  input,select,textarea{font-size:16px!important;max-width:100%}
  .alert-form{grid-template-columns:1fr!important}
  .alert-form .btn{grid-column:1/-1}
  .news-form,.lead-row{flex-direction:column;align-items:stretch}
  .news-form input,.lead-row input{width:100%}

  /* tablas: scroll horizontal propio, nunca rompen la página */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:560px}

  /* modales: caben y hacen scroll dentro de la pantalla */
  .pro-modal .pro-panel,.auth-modal .pro-panel{
    width:calc(100vw - 28px);max-width:none;max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .pro-backdrop{backdrop-filter:blur(3px)}

  /* hero cinematográfico de la home */
  body.home-cine .rhero{min-height:auto;padding-top:92px;padding-bottom:48px}
  body.home-cine .rhero h1{font-size:clamp(2.3rem,10.5vw,3.2rem);line-height:1.05}
  body.home-cine .rhero .lead{font-size:1rem}
  body.home-cine .hero-cta{flex-wrap:wrap;gap:10px}
  body.home-cine .hero-cta .btn{flex:1 1 100%;justify-content:center}
  .hero3d{width:min(340px,86vw);height:clamp(190px,46vw,250px)}
  .cons-stage{height:clamp(360px,90vw,460px)}
  /* el indicador "desliza para entrar" se monta sobre el contenido del hero alto en móvil */
  .cine-scroll{display:none!important}
  .live-strip{flex-wrap:wrap;gap:7px}

  /* tarjetas de Mi cuenta: apiladas y aireadas */
  .ac-hero,.ac-id{padding:18px 16px}
  .ac-hero-top{flex-wrap:wrap}
  .ac-global{margin-left:0}
  .ev-cup,.ref-card,.mem-status,.ev-raffle,.rb-row{flex-wrap:wrap}
  .rb-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .rb-tab{white-space:nowrap;flex:0 0 auto}

  /* sesiones / filas tipo lista */
  .session{flex-wrap:wrap}
  .session .se-cta{width:100%}
  /* constructor de flota: select + cantidad + botón apilados, sin desbordar */
  .fleet-add{flex-wrap:wrap}
  .fleet-add select{flex:1 1 100%}
  .fleet-add input{flex:1 1 auto;width:auto}
  .fleet-add .fleet-go,.fleet-add .btn{flex:1 1 auto}

  /* footer centrado y legible */
  .foot-bottom{flex-direction:column;gap:8px;text-align:center}
}

/* ===== MÓVIL PEQUEÑO (≤380px): apreturas finales ===== */
@media (max-width:380px){
  .wrap{padding-left:13px;padding-right:13px}
  .ac-hero-stats{grid-template-columns:1fr!important}
  .pt-name{font-size:1.05rem}
}

/* ============================================================
   MENÚ MÓVIL — versión a prueba de fallos (≤980px)
   Todas las secciones SIEMPRE expandidas y visibles (sin adivinar),
   texto forzado legible, sin recuadros vacíos.
   ============================================================ */
@media (max-width:980px){
  /* CAUSA DEL SOLAPE: #navLinks vive dentro de <header>, que es fixed con
     z-index:100. Su z-index:300 solo compite DENTRO de la cabecera, así que
     jamás podía ganar a las barras fijas de la página (z-index 120+). Se
     eleva la cabecera entera mientras el menú está abierto. */
  body.nav-open header{z-index:1200!important}

  /* el panel cubre y hace scroll */
  #navLinks.nav-links{top:68px!important;background:#0f0f12!important;z-index:300!important;
    max-height:calc(100vh - 68px);max-height:calc(100dvh - 68px);overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:10px 8px calc(28px + env(safe-area-inset-bottom,0px))!important;box-shadow:0 24px 60px -18px #000}
  html[data-theme="light"] #navLinks.nav-links{background:#ffffff!important}

  /* cada sección como bloque a lo ancho */
  #navLinks .nav-group{display:block;width:100%;margin:0}
  #navLinks .nav-top,#navLinks .nav-trigger{
    width:100%;text-align:left;padding:13px 14px;min-height:48px;
    font-weight:600;font-size:1rem;color:var(--text)!important;display:flex;align-items:center}
  #navLinks .nav-trigger::after{margin-left:auto;opacity:.5}

  /* Acordeón real: el submenú se despliega al tocar su grupo y se pliega al
     tocar otro. Antes estaban todos abiertos a la vez (32 enlaces, cuatro
     pantallas de scroll); eso venía de cuando el tap no plegaba nada.
     La altura se colapsa con max-height: con grid-template-rows:0fr solo se
     plegaba la PRIMERA fila y los demás enlaces seguían ocupando alto
     invisible, dejando huecos de media pantalla entre grupos. */
  #navLinks .nav-drop{display:block!important;position:static!important;
    max-height:0;opacity:0;visibility:visible!important;transform:none!important;
    background:transparent!important;border:none!important;box-shadow:none!important;
    margin:0!important;padding:0 0 0 10px!important;backdrop-filter:none!important;
    overflow:hidden;transition:max-height .34s cubic-bezier(.16,1,.3,1),opacity .24s,margin .34s}
  #navLinks .nav-group.open>.nav-drop{max-height:1200px;opacity:1;margin:0 0 6px!important}
  #navLinks .nav-drop:empty{display:none!important}
  #navLinks .nav-sec{padding:12px 14px 4px!important;font-size:.62rem!important;opacity:.75}

  /* la cuenta, primera del menú desplegado. `order:-1` porque otra regla del
     sitio le da order:4 a .acct y eso la mandaba al final de la lista. */
  #navLinks .acct.in-menu{display:block!important;width:100%;margin:0 0 8px;padding:0 0 10px;
    order:-1!important;border-bottom:1px solid var(--border);position:static!important}
  #navLinks .acct.in-menu .acct-btn,#navLinks .acct.in-menu .acct-chip{
    width:100%;justify-content:flex-start;gap:10px;min-height:52px;padding:12px 14px;
    font-size:1rem;font-weight:600;border-radius:12px}
  #navLinks .acct.in-menu .acct-name{display:inline!important;max-width:none}
  #navLinks .acct.in-menu .acct-menu{display:flex!important;position:static!important;opacity:1!important;
    visibility:visible!important;transform:none!important;flex-direction:column;width:100%;
    background:transparent!important;border:none!important;box-shadow:none!important;
    margin:4px 0 0!important;padding:0 0 0 10px!important;backdrop-filter:none!important;min-width:0}
  #navLinks .acct.in-menu .am-head{display:none}
  #navLinks .acct.in-menu .acct-menu a,#navLinks .acct.in-menu .acct-menu button{
    display:flex!important;align-items:center;min-height:44px;padding:11px 14px!important;
    width:100%;text-align:left;font-size:.94rem;border-left:2px solid var(--border);margin-left:2px}
  #navLinks .nav-drop a{display:flex!important;align-items:center;min-height:44px;
    padding:11px 14px!important;color:var(--text-2)!important;font-size:.94rem;
    border-left:2px solid var(--border);margin-left:2px}
  #navLinks .nav-drop a:active{color:var(--gold)!important;border-left-color:var(--gold)}
  /* Grupo desplegado. Necesita el #navLinks para ganar a la regla de color
     de .nav-top/.nav-trigger de más arriba, que lleva ID e !important. */
  #navLinks .nav-group.open>.nav-trigger{color:var(--gold)!important;
    background:linear-gradient(90deg,rgba(231,189,90,.22),rgba(231,189,90,.06));
    box-shadow:inset 3px 0 0 var(--gold);border-radius:10px}
  html[data-theme="light"] #navLinks .nav-group.open>.nav-trigger{color:#7a5c14!important;
    background:linear-gradient(90deg,rgba(231,189,90,.3),rgba(231,189,90,.1))}
  html[data-theme="light"] #navLinks .nav-top,
  html[data-theme="light"] #navLinks .nav-trigger{color:#1b1813!important}
  html[data-theme="light"] #navLinks .nav-drop a{color:#5c564b!important}
}

/* ---- fondo del menú móvil ----
   Oscurece la página y permite cerrar tocando fuera. Va por debajo de la
   cabecera elevada y por encima de todo lo demás. */
.nav-backdrop{position:fixed;inset:0;z-index:1100;background:rgba(6,6,8,.72);
  backdrop-filter:blur(3px);opacity:0;transition:opacity .24s ease;pointer-events:auto}
.nav-backdrop.on{opacity:1}
html[data-theme=light] .nav-backdrop{background:rgba(20,18,14,.5)}
/* Mientras el menú está abierto la página de detrás no se mueve. */
body.nav-open{overflow:hidden}
@media(min-width:981px){.nav-backdrop{display:none}body.nav-open{overflow:auto}}


/* ============================================================
   AUDITORÍA MÓVIL + PORTÁTIL — capas, elementos flotantes,
   respiración del hero e iconos del menú.
   Lo que no lleva media query es intencional: corrige el orden
   de apilado, que es igual de erróneo en escritorio.
   ============================================================ */

/* ---- 1. ORDEN DE CAPAS ----
   El menú móvil eleva <header> a 1200 y pone un fondo en 1100. Los modales
   vivían en 140, así que "Iniciar sesión" abierto desde el menú aparecía
   DETRÁS del panel. Todo lo que es una capa modal pasa por encima. */
.pro-modal{z-index:1600}
.pro-modal .pro-panel{z-index:1}
.mos-ipop{z-index:1700}
.pol-toasts,.mk-toasts,.cc-toast,.pro-toast,.mr-toast{z-index:1800}

/* ---- 2. ELEMENTOS FLOTANTES QUE TAPABAN BOTONES ----
   El círculo de rango (.mr-launcher) se sentaba encima de "Explorar
   plataforma" en el hero. En móvil la cuenta ya está dentro del menú, así
   que el círculo no aporta nada y se retira. */
@media (max-width:900px){
  .mr-launcher{display:none!important}
  .cine-sys{display:none!important}   /* etiqueta "red en línea": se montaba sobre el contenido */
}
/* Con el menú o un modal abierto, nada flotante compite por el mismo pixel. */
body.nav-open .mr-launcher,body.nav-open .promo-bar,body.nav-open .stickybar,
body.nav-open .co-fab,body.nav-open .cine-sys{display:none!important}
/* En escritorio el círculo se aparta de la esquina de los CTA del hero. */
@media (min-width:901px){ .mr-launcher{bottom:24px;right:24px} }

/* ---- 3. ICONOS DEL MENÚ ----
   Recuadro fijo para que las etiquetas queden alineadas en columna: sin él
   cada texto empieza a distinta altura y el menú se lee peor que sin iconos. */
.nav-ic{display:inline-grid;place-items:center;width:22px;height:22px;flex:0 0 22px;
  color:var(--gold-2);opacity:.8;transition:opacity .2s,color .2s,transform .2s}
.nav-ic .mos-ic{width:16px;height:16px}
.nav-drop a{display:flex;align-items:center;gap:10px}
.nav-drop a:hover .nav-ic,.nav-drop a.here .nav-ic{opacity:1;color:var(--gold);transform:scale(1.08)}
.nav-drop a.here{color:var(--gold)}
.nav-trigger,.nav-top{gap:8px}
/* En la barra de escritorio el icono del grupo se omite: la fila superior ya
   está ajustada y añadir seis símbolos la desbordaría. */
@media (min-width:981px){ .nav-trigger>.nav-ic,.nav-top>.nav-ic{display:none} }
/* Subsecciones con una línea guía, para que se lean como cabecera y no como
   un enlace más apagado. */
.nav-drop .nav-sec{display:flex;align-items:center;gap:8px}
.nav-drop .nav-sec::after{content:"";flex:1;height:1px;background:var(--border)}

@media (max-width:980px){
  /* En el panel móvil el icono sí manda: es lo primero que se ve al recorrer
     la lista con el pulgar. */
  #navLinks .nav-ic{width:26px;height:26px;flex:0 0 26px;opacity:1;
    border-radius:8px;background:rgba(231,189,90,.09);border:1px solid rgba(231,189,90,.16)}
  #navLinks .nav-ic .mos-ic{width:15px;height:15px}
  #navLinks .nav-trigger>.nav-ic{width:30px;height:30px;flex:0 0 30px;
    background:rgba(231,189,90,.14);border-color:rgba(231,189,90,.26);color:var(--gold)}
  #navLinks .nav-group.open>.nav-trigger>.nav-ic{background:var(--gold);border-color:var(--gold);color:#1a1407}
  #navLinks .nav-drop a{gap:11px}
  #navLinks .nav-drop a.here{color:var(--gold)!important;border-left-color:var(--gold)!important}
  #navLinks .nav-drop a.here .nav-ic{background:rgba(231,189,90,.2);border-color:var(--gold);color:var(--gold)}
  html[data-theme="light"] #navLinks .nav-ic{background:rgba(231,189,90,.18);border-color:rgba(180,140,40,.28);color:#8a6712}
  /* Separación real entre grupos: antes dos filas de 48px se tocaban y
     parecía un solo bloque. */
  #navLinks .nav-group+.nav-group{margin-top:2px}
  #navLinks .nav-group.open{margin-bottom:4px}
}

/* ---- 4. LA TIRA DE DATOS DEL HERO ----
   Cinco cápsulas en flex dejaban la última sola y descentrada. En rejilla de
   dos van parejas y la impar ocupa el ancho: sin huecos negros. */
@media (max-width:767px){
  .live-strip{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;
    margin-bottom:20px;width:100%}
  .live-strip .tick{justify-content:center;padding:9px 8px;font-size:.76rem;gap:6px;min-width:0}
  .live-strip .tick .lab{font-size:.6rem;letter-spacing:.06em;white-space:nowrap}
  .live-strip .tick b{white-space:nowrap}
  .live-strip .tick:last-child:nth-child(odd){grid-column:1/-1}
}

/* ---- 5. HERO SIN HUECOS ----
   El segundo párrafo y los dos relojes dejaban franjas vacías largas en
   pantallas de 390px. Se aprieta el ritmo vertical sin tocar el escritorio. */
@media (max-width:767px){
  body.home-cine .rhero .lead{margin-bottom:14px}
  body.home-cine .rhero .hero-sub2{margin-bottom:18px;font-size:.94rem;line-height:1.55}
  body.home-cine .rhero .hero-sub2:empty{display:none;margin:0}
  .hero3d{margin-bottom:10px}
  .halving-banner{width:100%;margin-top:10px;box-sizing:border-box}
  .halving-banner .hv-label{flex:1 1 100%;margin-bottom:-4px}
  .hero-cta{margin-top:20px}
  /* la cadena decorativa se comía media pantalla en negro */
  .chain{margin-top:22px}
}

/* ---- 6. BARRA SUPERIOR SIN AMONTONAR ----
   Tema + logo + idioma + cuenta + hamburguesa en 390px se tocaban entre sí.
   Se reparte el espacio y se garantiza el área táctil de 44px. */
@media (max-width:767px){
  header .nav{gap:8px}
  header .nav-right{gap:8px;flex-shrink:0}
  header .logo{min-width:0;overflow:hidden;white-space:nowrap}
  header .lang{flex-shrink:0}
  header .lang button{min-width:36px;padding:6px 8px}
  header .nav-right .acct{flex-shrink:0}
  header .nav-right .acct-btn,header .nav-right .acct-chip{padding:6px 10px;min-height:40px}
  header .menu-toggle{flex-shrink:0;width:44px;height:44px;display:grid;place-items:center;
    font-size:1.4rem;line-height:1;padding:0}
}
@media (max-width:400px){
  header .logo{font-size:.92rem}
  header .nav-right{gap:6px}
}

/* ---- 7. DESPLEGABLE DE PERFIL EN PORTÁTIL ----
   .acct-menu salía por el borde derecho en anchos de 1024–1180 y quedaba
   cortado por el overflow de la cabecera. */
@media (min-width:981px) and (max-width:1180px){
  .acct-menu{right:0;min-width:200px;max-width:calc(100vw - 32px)}
}
@media (min-width:981px){
  /* la cabecera no debe recortar ni el desplegable del perfil ni los del menú */
  header{overflow:visible}
  .acct-menu{z-index:400}
  .nav-drop{z-index:350}
}

/* ---- 8. NADA SE SALE A LO ANCHO ----
   Red de seguridad: cualquier tarjeta o cápsula nueva que se pase de ancho
   se recorta al viewport en vez de crear scroll horizontal. */
@media (max-width:767px){
  .wrap>*{max-width:100%}
  .badge,.tick,.chip,.tag{max-width:100%}
  img,svg,canvas,video,iframe{max-width:100%}
}

/* ---- distintivo "próximamente" del menú ----
   Mismo lenguaje que .nav-b-new pero apagado: anuncia sin invitar a entrar. */
.nav-b-soon{padding:2.5px 6px;border-radius:999px;border:1px dashed var(--border-gold);
  color:var(--gold-2);opacity:.85;font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;font-weight:600}
.nav-b-soon::after{content:"PRONTO"}
html:lang(en) .nav-b-soon::after{content:"SOON"}
@media (max-width:980px){ .nav-b-soon{font-size:.58rem;padding:3px 7px} }

/* Centrado a prueba de fallos de los iconos del menú, por el mismo motivo
   que en billing.css: el svg en línea aporta el hueco del descendente. */
.nav-ic{display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:0}
.nav-ic>svg{display:block;flex:0 0 auto}