/* ===== HostPlayers · PWA + modo app + pulido movil ===== */

/* Base movil segura */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { overflow-x:hidden; }
img, picture, video, canvas, svg, iframe { max-width:100%; }
* { -webkit-tap-highlight-color:rgba(37,99,235,.18); }
html, body { -webkit-overflow-scrolling:touch; }
pre { overflow-x:auto; max-width:100%; }
@media (max-width:600px){ .dom-result,.domain-name,.hp-break,.text-break{overflow-wrap:anywhere;word-break:break-word;} }

/* Modo app instalada (standalone): respetar notch */
@media (display-mode: standalone), (display-mode: minimal-ui) {
  .pwa-only-hide{display:none!important;}
  body{padding-top:env(safe-area-inset-top,0px);}
}

/* ===== Bottom tab bar FLOTANTE (modo app) ===== */
.hp-tabbar{
  display:none;
  position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:1000;
  align-items:stretch;
  background:rgba(10,15,34,.82);
  -webkit-backdrop-filter:blur(26px) saturate(1.5);
  backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid rgba(139,92,246,.22);
  border-radius:24px;
  box-shadow:0 20px 50px -16px rgba(0,0,0,.85);
  padding:6px;
  transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .3s ease;
}
.hp-tab{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:6px 2px;text-decoration:none;color:#828dae;border-radius:16px;
  font:600 .6rem/1.1 'Inter',system-ui,-apple-system,sans-serif;letter-spacing:.01em;
  position:relative;-webkit-tap-highlight-color:transparent;transition:color .2s ease;
}
.hp-tab-ico{width:46px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:13px;transition:background .28s ease,box-shadow .28s ease,transform .18s ease;}
.hp-tab-ico svg{width:22px;height:22px;display:block}
.hp-tab-lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-tab:active .hp-tab-ico{transform:scale(.85)}
.hp-tab.active{color:#eaf2ff}
.hp-tab.active .hp-tab-ico{background:linear-gradient(135deg,#2563eb,#22d3ee);box-shadow:0 8px 18px -7px rgba(34,211,238,.7)}
.hp-tab.active .hp-tab-ico svg{stroke:#fff}
@media (hover:hover){.hp-tab:hover{color:#c4cef0}}

/* ===== Hoja "Mas" (todos los servicios) ===== */
.hp-more{position:fixed;inset:0;z-index:1400;visibility:hidden;opacity:0;transition:opacity .3s ease,visibility .3s ease}
.hp-more:target{visibility:visible;opacity:1}
.hp-more-backdrop{position:absolute;inset:0;background:rgba(3,5,12,.66);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.hp-more-panel{position:absolute;left:0;right:0;bottom:0;max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(180deg,#0d1530,#070b1a);border-top:1px solid rgba(139,92,246,.28);border-radius:24px 24px 0 0;padding:8px 16px calc(22px + env(safe-area-inset-bottom,0px));box-shadow:0 -26px 70px -22px rgba(0,0,0,.9);transform:translateY(103%);transition:transform .38s cubic-bezier(.22,1,.36,1)}
.hp-more:target .hp-more-panel{transform:translateY(0)}
.hp-more-grip{display:block;width:42px;height:5px;border-radius:3px;background:#2a3358;margin:6px auto 12px}
.hp-more-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.hp-more-brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:800;font-size:.95rem;letter-spacing:.02em}
.hp-more-brand img{height:22px;width:auto}
.hp-more-x{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#9099bd;background:rgba(255,255,255,.05);text-decoration:none}
.hp-more-x svg{width:18px;height:18px}
.hp-more-install{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin:0 0 14px;padding:13px;border-radius:14px;background:linear-gradient(135deg,#2563eb,#22d3ee);color:#fff;font-weight:700;font-size:.95rem;text-decoration:none;box-shadow:0 12px 28px -10px rgba(34,211,238,.6)}
.hp-more-install svg{width:20px;height:20px}
.hp-more-install[hidden]{display:none!important}
.hp-more-label{font:700 .7rem/1 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#5f6e96;margin:2px 2px 12px}
.hp-more-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.hp-more-card{display:flex;flex-direction:column;gap:11px;padding:16px 14px;border-radius:16px;text-decoration:none;background:linear-gradient(160deg,rgba(37,99,235,.10),rgba(34,211,238,.045));border:1px solid rgba(139,92,246,.16);color:#e7edff;font-weight:700;font-size:.92rem;transition:transform .15s ease,border-color .2s ease}
.hp-more-card:active{transform:scale(.97)}
.hp-more-card:hover{border-color:rgba(34,211,238,.4)}
.hp-more-cico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#22d3ee);color:#fff}
.hp-more-cico svg{width:22px;height:22px;stroke:#fff}
.hp-more-grid .hp-more-card:nth-child(5){grid-column:1 / -1}
.hp-more-list{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.hp-more-row{display:flex;align-items:center;gap:14px;padding:13px 12px;border-radius:12px;color:#c2cbe8;text-decoration:none;font-weight:600;font-size:.95rem}
.hp-more-row>svg{width:20px;height:20px;color:#8b5cf6;flex-shrink:0}
.hp-more-row .hp-more-chev{margin-left:auto;width:18px;height:18px;color:#46527d}
.hp-more-row:hover,.hp-more-row:active{background:rgba(139,92,246,.10);color:#fff}
.hp-more-lang{display:flex;gap:8px;justify-content:center;padding-top:12px;border-top:1px solid rgba(255,255,255,.05)}
.hp-more-lang a{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border-radius:10px;color:#9099bd;text-decoration:none;font-weight:700;font-size:.85rem;border:1px solid transparent}
.hp-more-lang a img{width:18px;height:12px;border-radius:2px;object-fit:cover}
.hp-more-lang a.active{color:#fff;background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.3)}
body.hp-more-on{overflow:hidden}

/* Barra superior con logo (solo modo app/movil) · oculta en escritorio */
.hp-appbar{display:none}

/* ===== Movil: mostrar tab bar + quitar navbar superior + ajustar tops ===== */
@media (max-width:768px){
  .hp-tabbar{display:flex}
  .hp-navbar{display:none!important}
  .hp-appbar{display:flex;align-items:center;justify-content:center;position:sticky;top:0;z-index:50;height:52px;background:rgba(6,12,26,.92);-webkit-backdrop-filter:saturate(160%) blur(10px);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid rgba(255,255,255,.07);padding-top:env(safe-area-inset-top,0px)}
  .hp-appbar-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
  .hp-appbar-cloud{height:34px;width:auto;display:block}
  .hp-appbar-brand span{font-family:'Barlow Condensed',Inter,sans-serif;font-weight:800;font-size:22px;letter-spacing:.04em;color:#eaf0ff;line-height:1}
  body{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .hp-hero,.hpp-hero,.hpgl-hero,.games-hero,.domain-hero{padding-top:16px!important}
  .hp-hero{min-height:auto!important}
  body.hp-more-on .hp-tabbar{opacity:0;transform:translateY(20px);pointer-events:none}
}
@media (min-width:769px){ .hp-more,.hp-more:target{display:none} }