/* ===== AeroWorld v3 — sistema Make × Frutiger Aero ===== */
*{box-sizing:border-box}
:root{
  --sky:#49C9F5; --ocean:#087FB8; --deep:#075B91; --nature:#75D83F;
  --ink:#f2faff; --muted:rgba(255,255,255,.72); --deep-text:#054a6e;
  --r:16px;
  --shadow-aero:0 8px 32px rgba(7,91,145,.25), 0 2px 8px rgba(73,201,245,.15);
}
html{scroll-behavior:smooth}
body{margin:0; color:var(--ink);
  font-family:"Nunito Sans","Segoe UI","Trebuchet MS",Verdana,sans-serif;
  min-height:100vh; overflow-x:hidden}
h1,h2,h3,.logo-text,.btn-primary,.btn-secondary,.navlink{font-family:Nunito,"Segoe UI",sans-serif}
/* --- Fondo foto océano (diseño Make) + degradado de respaldo --- */
.ocean-bg{position:fixed; inset:0; z-index:-5; background:linear-gradient(180deg,#3db9f5 0%,#1a7fa8 55%,#075B91 100%)}
.photo-bg{position:fixed; inset:0; z-index:-4; background:#1a7fa8 url("https://images.unsplash.com/photo-1579622754173-e2a9aad270e3?w=1920&h=1080&fit=crop&auto=format") center 40%/cover no-repeat}
.photo-bg::after{content:""; position:absolute; inset:0; background:rgba(7,91,145,.35)}
.caustics{display:none}
.light-leak{position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(600px 300px at 50% -60px, rgba(255,255,255,.35), transparent 70%)}
#bubbles{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
#bubbles span{position:absolute; bottom:-40px; border-radius:50%; border:1.5px solid rgba(255,255,255,.7);
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.08) 60%);
  animation:rise linear infinite; opacity:.7}
@keyframes rise{to{transform:translateY(-115vh)}}

/* --- Landing primera pantalla (foto a pantalla completa) --- */
.hero{min-height:100vh; display:flex; flex-direction:column; padding:18px 40px 48px; position:relative}
.landing-nav{display:flex; align-items:center; justify-content:space-between; gap:12px}
.landing-brand{display:flex; align-items:center; gap:10px; font-weight:900; font-size:18px; color:#fff; letter-spacing:-.3px; text-shadow:0 1px 6px rgba(7,91,145,.5)}
.landing-orb{width:32px; height:32px; border-radius:10px; display:grid; place-items:center; font-size:18px;
  background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(73,201,245,.8));
  box-shadow:0 2px 8px rgba(7,91,145,.3), inset 0 1px 0 rgba(255,255,255,.8)}
.landing-actions{display:flex; gap:10px}
.btn-glass.small{padding:8px 22px; font-size:13px}
.landing-center{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:36px 20px 28px}
.landing-badges{display:flex; flex-direction:column; gap:8px; align-items:center; margin-bottom:28px}
.landing-title{font-weight:900; font-size:clamp(42px,7vw,80px); line-height:1.08; letter-spacing:-1.5px; margin:0 0 20px; color:#fff; text-shadow:0 2px 20px rgba(7,91,145,.4)}
.landing-name{color:var(--sky)}
.landing-sub{font-size:16px; font-weight:500; color:rgba(255,255,255,.85); max-width:520px; line-height:1.65; margin:0 0 32px; text-shadow:0 1px 4px rgba(7,91,145,.3)}
.landing-ctas{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
.landing-live{display:flex; align-items:center; gap:10px; margin-top:22px; font-size:13px; font-weight:700; color:rgba(255,255,255,.92); text-shadow:0 1px 4px rgba(7,91,145,.4)}
.landing-live .avatar-stack{margin:0}
.landing-live .avatar-stack span{width:28px; height:28px; font-size:16px}
.landing-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:900px; width:100%; margin:0 auto}
.landing-card{padding:20px 22px; cursor:pointer; transition:.22s}
.landing-card:hover{background:rgba(255,255,255,.22); transform:translateY(-4px)}
.landing-ico{font-size:22px; margin-bottom:10px}
.landing-card strong{display:block; font-size:14px; font-weight:800; color:#fff; margin-bottom:6px; text-shadow:0 1px 4px rgba(7,91,145,.3)}
.landing-card p{font-size:12px; color:rgba(255,255,255,.75); line-height:1.55; margin:0}

/* --- Paneles cristal oscuro (Make) con línea de luz superior --- */
.glass-card,.glass-panel{position:relative; overflow:hidden;
  background:linear-gradient(145deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.05) 100%);
  border:1px solid rgba(255,255,255,.5); border-bottom-color:rgba(255,255,255,.18);
  border-radius:var(--r); box-shadow:var(--shadow-aero), inset 0 1px 0 rgba(255,255,255,.65);
  backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4)}
.glass-card::before,.glass-panel::before{content:""; position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent); border-radius:999px; pointer-events:none}
.glass-card{padding:14px 16px}
.glass-card h2{margin:0 0 6px; color:#fff; font-size:20px; font-weight:900; text-shadow:0 1px 6px rgba(7,91,145,.4)}
.glass-card p{margin:6px 0; font-size:14px; line-height:1.5; color:rgba(255,255,255,.88)}
/* Iconos aero: cristal semitransparente con glifo blanco */
.aero-ico{--tint:73,201,245;
  position:relative; overflow:hidden; display:grid; place-items:center; flex-shrink:0;
  width:46px; height:46px; margin:0 auto 4px; transition:.15s; color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.14) 48%, rgba(var(--tint),.38) 100%);
  border:1px solid rgba(255,255,255,.9); border-radius:15px;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.8), inset 0 -3px 6px rgba(4,60,100,.25), 0 4px 12px rgba(7,91,145,.3);
  backdrop-filter:blur(8px) saturate(1.5); -webkit-backdrop-filter:blur(8px) saturate(1.5)}
.aero-ico::after{content:""; position:absolute; left:10%; right:10%; top:2px; height:44%; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.7), transparent); pointer-events:none}
.aero-ico svg{width:58%; height:58%; fill:currentColor; filter:drop-shadow(0 1px 3px rgba(4,60,100,.8)); position:relative; z-index:1}
.aero-ico svg.stroke{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.aero-ico.sm{width:30px; height:30px; border-radius:10px; margin:0}
.aero-ico.xs{width:24px; height:24px; border-radius:8px; margin:0}
.aero-ico.green{--tint:117,216,63}
.aero-ico.pink{--tint:240,98,146}
.aero-ico.purple{--tint:123,97,255}
.aero-ico.orange{--tint:255,159,46}
.explore small{color:var(--muted); font-size:11px}
/* Live pulse + avatares (landing) */
.pulse{width:10px; height:10px; border-radius:50%; background:#75D83F; box-shadow:0 0 0 0 rgba(117,216,63,.6); animation:pulse 1.8s infinite; flex-shrink:0}
@keyframes pulse{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.avatar-stack{display:flex; justify-content:center; margin:10px 0}
.avatar-stack span{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:20px; border:2.5px solid rgba(255,255,255,.7); margin-left:-10px; background:linear-gradient(135deg,#49C9F5,#087FB8); box-shadow:0 3px 8px rgba(7,91,145,.4)}
.avatar-stack span:first-child{margin-left:0}
.float-sticker{position:absolute; font-size:22px; filter:drop-shadow(0 3px 6px rgba(7,91,145,.5)); animation:floaty 3.4s ease-in-out infinite; pointer-events:none}
@keyframes floaty{50%{transform:translateY(-7px) rotate(8deg)}}

/* --- Ventana + header sticky (Make) --- */
.main-window{max-width:1180px; margin:10px auto 90px; border-radius:20px; overflow:hidden;
  background:rgba(7,91,145,.08);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 24px 70px rgba(7,91,145,.4), inset 0 1px 0 rgba(255,255,255,.5);
  backdrop-filter:blur(24px) saturate(1.5); -webkit-backdrop-filter:blur(24px) saturate(1.5)}
.titlebar{position:sticky; top:0; z-index:100; display:flex; align-items:center; gap:10px; padding:8px 16px;
  background:linear-gradient(180deg, rgba(7,91,145,.55) 0%, rgba(7,127,184,.4) 100%);
  border-bottom:1px solid rgba(255,255,255,.35);
  box-shadow:0 4px 24px rgba(7,91,145,.25), inset 0 1px 0 rgba(255,255,255,.5);
  backdrop-filter:blur(24px) saturate(1.6); -webkit-backdrop-filter:blur(24px) saturate(1.6)}
.titlebar::after{content:""; position:absolute; top:0; left:5%; right:5%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent)}
.traffic{display:flex; gap:6px}
.t{width:12px; height:12px; border-radius:50%; border:1px solid rgba(0,0,0,.2); box-shadow:inset 0 1px 0 #fff}
.t.red{background:radial-gradient(circle at 30% 30%,#ffb3ab,#e94f3d)} .t.yellow{background:radial-gradient(circle at 30% 30%,#ffe9a8,#e6b800)} .t.green{background:radial-gradient(circle at 30% 30%,#c6ffab,#2eb82e)}
.titlebar-logo{white-space:nowrap; color:#fff; font-weight:900}
.topnav{display:flex; gap:2px; flex:1; overflow-x:auto; scrollbar-width:none}
.navlink{border:0; background:transparent; padding:6px 13px; border-radius:999px; font-weight:600; font-size:13px; color:rgba(255,255,255,.92); cursor:pointer; white-space:nowrap; font-family:inherit; transition:.15s}
.navlink.active,.navlink:hover{background:rgba(255,255,255,.2); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.searchbox{display:flex; align-items:center; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:3px 4px 3px 12px; min-width:170px; backdrop-filter:blur(8px)}
.searchbox input{border:0; outline:0; background:transparent; width:100%; font-size:13px; color:#fff; font-family:inherit}
.searchbox input::placeholder{color:rgba(255,255,255,.6)}
.searchbox button{border:0; border-radius:50%; width:28px; height:28px; cursor:pointer; background:linear-gradient(180deg,#aee6ff,#087FB8); color:#fff; display:grid; place-items:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.searchbox button svg{width:15px; height:15px; fill:#fff; filter:drop-shadow(0 1px 1px rgba(4,60,100,.6))}
.alerts-pill svg{width:14px; height:14px; fill:#0b4f84; vertical-align:-2px}
.titlebar-cta{flex-shrink:0}
.hamburger{display:none; border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.18); color:#fff; border-radius:10px; padding:6px 10px; cursor:pointer}

/* --- Layout 3 columnas --- */
.layout{display:grid; grid-template-columns:210px minmax(0,1fr) 240px; gap:14px; padding:16px; align-items:start}
.sidebar{padding:14px; position:sticky; top:74px}
.me-card{display:flex; gap:10px; align-items:center; padding:10px; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.me-card strong{color:#fff}
.avatar{position:relative; overflow:hidden; width:42px; height:42px; display:grid; place-items:center; font-size:26px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#49C9F5,#16BFD1,#075B91);
  border:2px solid rgba(255,255,255,.65); box-shadow:0 4px 12px rgba(7,91,145,.35)}
.avatar::after{content:""; position:absolute; left:18%; top:6%; width:42%; height:30%; border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0)); transform:rotate(-18deg)}
.avatar.xl{width:52px;height:52px;font-size:32px}
.avatar.huge{width:72px;height:72px;font-size:44px}
.status{font-size:12px; color:#75D83F; display:flex; gap:6px; align-items:center; font-weight:700}
.dot{width:8px;height:8px;border-radius:50%;background:#75D83F;box-shadow:0 0 6px #75D83F; display:inline-block}
.icon-btn{border:1px solid rgba(255,255,255,.5); border-radius:10px; background:rgba(255,255,255,.18); color:#fff; cursor:pointer; padding:5px 8px}
.sidemenu{list-style:none; padding:0; margin:12px 0}
.sidemenu button{width:100%; text-align:left; border:0; background:transparent; padding:8px 10px; border-radius:12px; font-weight:600; color:rgba(255,255,255,.85); cursor:pointer; font-size:13px; font-family:inherit; transition:.15s; display:flex; align-items:center; gap:10px}
.sidemenu button:hover,.sidemenu button.active{background:rgba(255,255,255,.22); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.badge{background:#ff4444; color:#fff; font-size:11px; border-radius:999px; padding:1px 7px; font-style:normal; margin-left:4px}
.sidebar h4{margin:12px 0 8px; font-size:11px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:1px}
.online-list{list-style:none; margin:0; padding:0; display:grid; gap:6px; max-height:300px; overflow:auto}
.online-list li{display:flex; gap:8px; align-items:center; font-size:13px; font-weight:600; color:rgba(255,255,255,.9); padding:5px 8px; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.2)}
.online-list li:hover{background:rgba(255,255,255,.2)}
.online-list .avatar{width:28px;height:28px;font-size:17px}
.online-list.compact{max-height:170px}
.good-vibes{margin-top:12px; text-align:center; font-weight:900; font-style:italic; color:#fff; font-size:20px; line-height:1;
  text-shadow:0 1px 8px rgba(7,91,145,.6); transform:rotate(-6deg)}

/* --- Centro --- */
.center{display:flex; flex-direction:column; gap:14px; min-width:0}
.page{display:none; flex-direction:column; gap:14px}
.page.active{display:flex}
/* Inicio post-login estilo FrutiChat */
.welcome-pill{display:flex; gap:14px; align-items:center; padding:16px 20px}
.welcome-name{color:var(--sky); font-size:17px; font-weight:900}
.ambient-card{padding:18px 20px}
.ambient-top{display:flex; gap:10px; align-items:center}
.ambient-ico{width:38px; height:38px; display:grid; place-items:center; font-size:19px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.4)}
.ambient-top small{display:block; font-size:10px; letter-spacing:2px; color:var(--muted); font-weight:700}
.ambient-top strong{color:#fff}
.ambient-player{margin-top:12px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); border-radius:14px; padding:14px 16px; text-align:center}
.track-name{font-weight:900; color:#fff; margin-bottom:10px}
.progress{height:6px; border-radius:999px; background:rgba(255,255,255,.2); overflow:hidden}
.progress span{display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#aee6ff,#49C9F5); transition:width 1s linear}
.times{display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin:4px 0 8px}
.controls{display:flex; gap:14px; justify-content:center}
.controls button{width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.14); color:#fff; font-size:16px; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.controls button:hover{background:rgba(255,255,255,.3)}
.ambient-player .tiny{margin:8px 0 0}
.stories-row{display:flex; gap:12px; margin-top:10px; overflow-x:auto; padding-bottom:4px}
.story{border:0; background:transparent; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; color:#fff; font-family:inherit; font-size:11px; font-weight:600}
.story .avatar{width:52px; height:52px; font-size:30px}
.story.new .avatar{background:rgba(255,255,255,.12); border-style:dashed}
.quick-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.quick-card{cursor:pointer; text-align:left; font-family:inherit; transition:.2s; color:#fff}
.quick-card:hover{background:rgba(255,255,255,.22); transform:translateY(-3px)}
.quick-card .aero-ico{margin:0 0 8px}
.quick-card strong{display:block; font-size:13px}
.quick-card small{color:var(--muted); font-size:11px}
.early-card{font-size:13px}
.early-card strong{color:#fff}
/* Buddy MSN */
.buddy{position:fixed; right:18px; bottom:18px; z-index:90; display:flex; flex-direction:column; align-items:flex-end; gap:6px; cursor:pointer}
.buddy-bubble{background:rgba(255,255,255,.88); color:#054a6e; font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px; border:1px solid #fff; box-shadow:0 4px 14px rgba(7,91,145,.4)}
.buddy-avatar{font-size:54px; line-height:1; filter:drop-shadow(0 6px 14px rgba(7,91,145,.5))}
@media (max-width:820px){ .buddy{display:none} .quick-grid{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .quick-grid{grid-template-columns:1fr} }
.hero-badges{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.glass-pill{display:inline-flex; align-items:center; gap:6px; padding:7px 18px; border-radius:999px;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.5); backdrop-filter:blur(16px);
  color:rgba(255,255,255,.95); font-size:13px; font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 2px 8px rgba(0,0,0,.1)}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.glass-panel{padding:14px 16px}
.glass-panel h3{margin:0 0 4px; color:#fff; font-weight:800; text-shadow:0 1px 4px rgba(7,91,145,.35)}
.muted{color:var(--muted); font-size:13px; margin:2px 0 8px}
.section-label{font-weight:800; font-size:13px; color:rgba(255,255,255,.75); text-transform:uppercase; letter-spacing:1px; margin:0 0 0 2px}
.panel-head{display:flex; justify-content:space-between; align-items:center}
.mini-dolphin{font-size:22px; filter:drop-shadow(0 2px 4px rgba(7,91,145,.5))}
.room-list{list-style:none; margin:8px 0; padding:0; display:grid; gap:8px}
.room-list li{position:relative; display:flex; gap:10px; align-items:center; border-radius:12px; padding:8px 10px; cursor:pointer; transition:.15s;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.3)}
.room-list li:hover{background:rgba(255,255,255,.22); transform:translateY(-1px)}
.room-list .avatar{width:34px;height:34px;font-size:20px}
.room-list strong{color:#fff} .room-list small{color:var(--muted); display:block}
.room-list .n{margin-left:auto; background:rgba(73,201,245,.25); border-radius:999px; padding:2px 9px; font-size:12px; font-weight:700; color:#aee6ff}
.link{border:0; background:transparent; color:#aee6ff; font-weight:700; cursor:pointer; padding:4px 0; font-family:inherit}
.stats{display:grid; grid-template-columns:repeat(4,1fr); text-align:center; margin:10px 0; border-radius:14px; padding:12px 8px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.3)}
.stat-ico{font-size:18px}
.stats strong{font-size:20px; font-weight:900; display:block;
  background:linear-gradient(135deg,#aee6ff,#fff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.stats small{color:var(--muted); font-size:11px; font-weight:600}
.cta-box{background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(117,216,63,.14)); border:1px solid rgba(255,255,255,.35); border-radius:14px; padding:12px; text-align:center}
.cta-box p{margin:0 0 8px; font-weight:600; color:#fff}
.explore{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; text-align:center}
.explore button{position:relative; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.05); border-radius:14px; padding:12px 6px; cursor:pointer; font-family:inherit; color:#fff; transition:.2s}
.explore button:hover{background:rgba(255,255,255,.22); transform:translateY(-3px)}
.explore strong{display:block; font-size:13px; color:#fff}

/* Botones gel divididos (Make) */
.btn-primary{position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.75); border-bottom-color:rgba(7,91,145,.6);
  background:linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.6) 49%, rgba(73,201,245,.85) 50%, rgba(8,127,184,.95) 100%);
  color:var(--deep-text); font-weight:800; border-radius:999px; padding:12px 28px; cursor:pointer; font-family:inherit; font-size:15px;
  box-shadow:0 4px 16px rgba(7,91,145,.4), inset 0 1px 0 rgba(255,255,255,.95); text-shadow:0 1px 0 rgba(255,255,255,.8);
  transition:.18s; white-space:nowrap}
.btn-primary:hover{filter:brightness(1.06); transform:translateY(-1px)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary.small{padding:8px 18px; font-size:13px}
.btn-glass{border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.15); color:#fff; border-radius:999px; padding:11px 24px; font-weight:700; cursor:pointer; backdrop-filter:blur(12px); font-family:inherit; font-size:15px; box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.btn-glass:hover{background:rgba(255,255,255,.28)}
.btn-secondary{border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.15); color:#fff; border-radius:999px; padding:9px 18px; font-weight:700; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.35); font-family:inherit; backdrop-filter:blur(12px)}
.btn-secondary:hover{background:rgba(255,255,255,.28)}
.btn-secondary.small{padding:7px 14px; font-size:13px}

/* Derecha */
.rightbar{display:flex; flex-direction:column; gap:12px; position:sticky; top:74px}
.now-number{font-weight:900; font-size:30px; line-height:1;
  background:linear-gradient(135deg,#49C9F5,#fff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.latest ul,.top-card ul,.trending-card ul{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:8px}
.latest li,.top-card li{display:flex; gap:10px; align-items:center; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.2); padding:8px; border-radius:12px; font-size:13px; color:#fff}
.latest .avatar,.top-card .avatar{width:30px;height:30px;font-size:18px; flex-shrink:0}
.latest small{color:var(--muted)}
.hot-badge{font-size:9px; font-weight:800; color:#FF7043; background:rgba(255,112,67,.2); border-radius:4px; padding:1px 5px; margin-right:4px}
.top-card .pts{margin-left:auto; font-size:11px; font-weight:800; color:#75D83F; background:rgba(117,216,63,.18); padding:2px 8px; border-radius:999px}
.trending-card li{display:flex; gap:8px; align-items:center; font-size:12px; font-weight:600; color:rgba(255,255,255,.85); padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.08); cursor:pointer}
.trending-card li:last-child{border-bottom:0; padding-bottom:0}
.rank{font-weight:900; font-size:12px; color:rgba(73,201,245,.8)}
.event-card{position:relative; overflow:hidden; background:linear-gradient(145deg, rgba(117,216,63,.12) 0%, rgba(255,255,255,.05) 100%)}
.event-tag{display:inline-block; font-size:11px; font-weight:800; color:#1a4a05; background:linear-gradient(180deg,#fff3c4,#ffd75e); border:1px solid #fff; padding:3px 10px; border-radius:999px; margin-bottom:6px}
.event-card p{color:rgba(255,255,255,.8)}
.banner-bottom{text-align:center; color:#fff; font-size:21px; overflow:hidden; position:relative}
.banner-bottom::before{content:"🐬"; position:absolute; left:14px; bottom:4px; font-size:42px; opacity:.9}
.quote-panel{text-align:center; font-size:18px; color:#fff}

/* Foro */
.page-head{position:relative; overflow:hidden; display:flex; justify-content:space-between; align-items:center; gap:10px; border-radius:14px; padding:10px 14px;
  background:linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.5); backdrop-filter:blur(20px) saturate(1.4)}
.page-head h2{margin:0; font-size:18px; color:#fff}
.crumbs{color:#fff} .crumbs span{margin:0 6px; color:var(--muted)}
.forum-list{display:grid; gap:8px}
.forum-row{position:relative; display:flex; gap:12px; align-items:center; padding:10px; border-radius:14px; cursor:pointer; transition:.15s;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.25)}
.forum-row:hover{background:rgba(255,255,255,.2)}
.forum-icon{position:relative; overflow:hidden; width:46px; height:46px; display:grid; place-items:center; font-size:22px; border-radius:14px; color:#fff; flex-shrink:0;
  border:1px solid rgba(255,255,255,.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.forum-icon::after{content:""; position:absolute; left:12%; right:12%; top:2px; height:42%; background:linear-gradient(180deg, rgba(255,255,255,.6), transparent); border-radius:999px}
.forum-row strong{color:#fff} .forum-row small{color:var(--muted); display:block; font-size:12px}
.forum-row .n{margin-left:auto; font-size:11px; color:var(--muted); white-space:nowrap; text-align:right; font-weight:700}
.forum-row .n .on{color:#75D83F}
.hidden{display:none!important}
#topicTitle{color:#fff}
#topicPosts{display:grid; gap:8px; margin:10px 0}
.post{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.3); border-radius:12px; padding:10px; font-size:14px; color:#fff}
.post .meta{font-size:12px; color:var(--muted); margin-bottom:4px}
.reply-row{display:flex; gap:8px}
.reply-row input{flex:1; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.14); color:#fff; border-radius:999px; padding:9px 14px; outline:0; font-family:inherit}
.reply-row input::placeholder{color:rgba(255,255,255,.55)}

/* Chat */
.chat-grid{display:grid; grid-template-columns:200px minmax(0,1fr); gap:14px}
.chat-side h4{font-size:11px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:1px}
.room-list.compact li{padding:6px 8px; font-size:13px}
.chat-main{display:flex; flex-direction:column; min-height:480px}
.chat-head{display:flex; gap:10px; align-items:center; border-bottom:1px solid rgba(255,255,255,.2); padding-bottom:10px}
.chat-head strong{color:#fff} .chat-head small{color:var(--muted)}
.chat-mode{margin-left:auto; font-size:11px; font-weight:800; color:#75D83F; white-space:nowrap}
.search-mini{margin-left:0}
.messages{flex:1; display:flex; flex-direction:column; gap:8px; padding:12px 4px; max-height:380px; overflow:auto}
.msg{max-width:78%; border-radius:14px 14px 14px 4px; padding:8px 12px; font-size:14px; color:#fff;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.35)}
.msg.me{align-self:flex-end; border-radius:14px 14px 4px 14px;
  background:linear-gradient(180deg, rgba(168,221,255,.3), rgba(125,204,247,.18))}
.msg .meta{font-size:11px; color:var(--muted)}
.chat-input{display:flex; gap:8px; margin-top:8px}
.chat-input input{flex:1; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.14); color:#fff; border-radius:999px; padding:10px 14px; outline:0; min-width:0; font-family:inherit}
.chat-input input::placeholder{color:rgba(255,255,255,.55)}
.emoji-tray{background:rgba(7,91,145,.5); border-radius:12px; padding:8px; margin-top:8px; border:1px solid rgba(255,255,255,.35); display:flex; gap:4px; flex-wrap:wrap; backdrop-filter:blur(12px)}
.emoji-tray button{border:1px solid transparent; background:rgba(255,255,255,.14); border-radius:10px; font-size:22px; cursor:pointer; padding:4px 6px}
.emoji-tray button:hover{background:rgba(255,255,255,.3); transform:scale(1.12)}

/* Miembros y perfil */
#memberSearch,.page-head input{border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.14); color:#fff; border-radius:999px; padding:8px 14px; outline:0; min-width:160px; font-family:inherit}
#memberSearch::placeholder,.page-head input::placeholder{color:rgba(255,255,255,.55)}
.member-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:10px}
.member-card{text-align:center; padding:14px 10px; cursor:pointer; transition:.15s; color:#fff}
.member-card:hover{transform:translateY(-2px); background:rgba(255,255,255,.2)}
.member-card strong{color:#fff}
.profile-hero{overflow:hidden; padding:0}
.profile-cover{height:130px; border-bottom:1px solid rgba(255,255,255,.5); position:relative; transition:.3s;
  background:linear-gradient(180deg,#7ddcff,#2aa9e0 45%, #75D83F 46%, #2a9e4f 100%)}
.profile-cover.wp2{background:linear-gradient(180deg,#eaffd0,#75D83F 40%, #2a9e4f 70%, #145e2e)}
.profile-cover.wp3{background:linear-gradient(180deg,#ffe9a8 0%, #49C9F5 45%, #087FB8 75%, #075B91)}
.profile-cover.wp4{background:radial-gradient(circle at 30% 20%, #fff, #49C9F5 30%, #075B91 80%)}
.cover-hint{position:absolute; right:12px; bottom:8px; font-size:11px; color:#fff; background:rgba(7,91,145,.5); padding:3px 10px; border-radius:999px}
.profile-row{display:flex; gap:14px; align-items:center; padding:12px 16px; flex-wrap:wrap}
.profile-row h2{color:#fff; margin:0}
.profile-stats{display:grid; grid-template-columns:repeat(3,1fr); text-align:center; padding:10px; border-top:1px solid rgba(255,255,255,.2)}
.profile-stats strong{color:#fff; display:block; font-size:18px}
.profile-stats small{color:var(--muted)}
.profile-stats.small{border:0}
.wallpapers{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:8px}
.wp{height:80px; border-radius:12px; border:2px solid rgba(255,255,255,.7); cursor:pointer; transition:.15s}
.wp:hover{transform:scale(1.04)} .wp.selected{outline:3px solid var(--sky); outline-offset:2px}
.wp1{background:linear-gradient(180deg,#49C9F5,#075B91)} .wp2{background:linear-gradient(180deg,#c9f27e,#2a9e4f)}
.wp3{background:linear-gradient(180deg,#ffe9a8,#087FB8)} .wp4{background:radial-gradient(circle,#fff,#49C9F5)}
.stickers{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.stickers button{border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.14); border-radius:12px; font-size:26px; cursor:pointer; padding:4px 8px; transition:.15s}
.stickers button:hover{background:rgba(255,255,255,.3); transform:scale(1.12) rotate(-4deg)}

.modal{position:fixed; inset:0; background:rgba(7,91,145,.55); display:grid; place-items:center; z-index:200; padding:16px; backdrop-filter:blur(6px)}
.modal-card{max-width:340px; width:100%; text-align:center; position:relative; padding:22px}
.modal-card h3{color:#fff}
.close{position:absolute; top:10px; right:10px; border:0; background:#ff4444; color:#fff; border-radius:50%; width:28px; height:28px; cursor:pointer}
.toast{position:fixed; bottom:90px; left:50%; transform:translateX(-50%); background:linear-gradient(180deg,#087FB8,#075B91); color:#fff; padding:10px 20px; border-radius:999px; border:1px solid rgba(255,255,255,.6); box-shadow:0 8px 24px rgba(0,0,0,.35); z-index:300; font-weight:700; max-width:90vw; text-align:center}
/* Puerta: landing y app son pantallas separadas, sin scroll entre ellas */
body.locked .main-window,body.locked .mobile-tabbar,body.locked .buddy{display:none!important}
body:not(.locked) .hero{display:none!important}
body:not(.locked) .main-window{margin-top:14px}
body.locked footer{padding-bottom:24px}
/* Auth modal */
.auth-card{max-width:360px; text-align:center; padding:24px 22px}
.auth-card .avatar{margin:0 auto 6px}
.auth-card h3{font-size:20px}
.auth-card input{display:block; width:100%; margin:8px 0; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.14); color:#fff; border-radius:999px; padding:10px 16px; outline:0; font-family:inherit; font-size:14px}
.auth-card input::placeholder{color:rgba(255,255,255,.55)}
.auth-card .btn-primary{width:100%; margin-top:6px}
.auth-tabs{display:flex; gap:6px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:4px; margin:10px 0}
.auth-tabs button{flex:1; border:0; background:transparent; color:rgba(255,255,255,.75); font-weight:800; font-size:13px; padding:8px; border-radius:999px; cursor:pointer; font-family:inherit}
.auth-tabs button.active{background:rgba(255,255,255,.28); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.auth-err{color:#ffb3ab; background:rgba(255,68,68,.15); border:1px solid rgba(255,68,68,.4); border-radius:10px; padding:8px; font-size:13px; font-weight:600}
.small-pick{justify-content:center}
.small-pick button{font-size:24px!important}
.tiny{font-size:11px; color:var(--muted); margin-top:8px}
/* Barra superior mini (logo + alerts) solo en inicio logueado */
.app-top{display:none; align-items:center; justify-content:space-between; padding:16px 22px 0}
body[data-page="inicio"]:not(.locked) .app-top{display:flex}
.alerts-pill{border:1px solid rgba(255,255,255,.85); background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.35)); color:#0b4f84; font-weight:800; font-size:12px; border-radius:999px; padding:8px 16px; cursor:pointer; font-family:inherit; box-shadow:inset 0 1px 0 #fff, 0 4px 12px rgba(7,91,145,.25)}
/* Inicio: sin cromado de ventana, columna centrada flotante */
body[data-page="inicio"] .titlebar,body[data-page="inicio"] .sidebar,body[data-page="inicio"] .rightbar{display:none}
body[data-page="inicio"] .layout{grid-template-columns:minmax(0,620px); justify-content:center}
body[data-page="inicio"] .main-window{background:transparent; border-color:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none}
body[data-page="inicio"] .two-col,body[data-page="inicio"] .explore{display:none}
/* Tema claro escarchado solo en inicio (estilo captura) */
body[data-page="inicio"] .welcome-pill,body[data-page="inicio"] .ambient-card,body[data-page="inicio"] .stories-card,body[data-page="inicio"] .quick-card,body[data-page="inicio"] .early-card{
  background:linear-gradient(145deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.18) 100%);
  border:1px solid rgba(255,255,255,.85); box-shadow:0 8px 28px rgba(7,91,145,.22), inset 0 1px 0 #fff}
body[data-page="inicio"] .glass-panel h3,body[data-page="inicio"] .quick-card strong,body[data-page="inicio"] .track-name,body[data-page="inicio"] .ambient-top strong,body[data-page="inicio"] .early-card strong{color:#123a5c; text-shadow:none}
body[data-page="inicio"] .muted,body[data-page="inicio"] .quick-card small,body[data-page="inicio"] .times,body[data-page="inicio"] .ambient-top small{color:#3d5a76}
body[data-page="inicio"] .story{color:#123a5c}
body[data-page="inicio"] .ambient-player{background:rgba(255,255,255,.35); border-color:rgba(255,255,255,.7)}
body[data-page="inicio"] .progress{background:rgba(18,58,92,.15)}
body[data-page="inicio"] .controls button{background:rgba(255,255,255,.5); color:#123a5c; border-color:rgba(255,255,255,.9)}
body[data-page="inicio"] .ambient-ico{background:rgba(255,255,255,.5); border-color:rgba(255,255,255,.8)}
body[data-page="inicio"] .quick-card .aero-ico{box-shadow:inset 0 2px 3px rgba(255,255,255,.9), inset 0 -4px 8px rgba(4,60,100,.25), 0 4px 12px rgba(7,91,145,.3)}
body[data-page="inicio"] .btn-secondary{background:linear-gradient(180deg,#fff, rgba(230,247,255,.85)); color:#0b4f84}
/* Dock inferior siempre visible logueado (como la captura) */
.mobile-tabbar{display:none}
body:not(.locked) .mobile-tabbar{display:flex; position:fixed; bottom:14px; left:50%; transform:translateX(-50%); z-index:150;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.6));
  border:1px solid rgba(255,255,255,.95); border-radius:999px; padding:10px 18px; gap:4px;
  box-shadow:0 10px 30px rgba(7,91,145,.35), inset 0 1px 0 #fff;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px)}
body:not(.locked) .mobile-tabbar button{position:relative; border:0; background:transparent; display:grid; place-items:center; color:#0b4f84; padding:9px 11px 7px; border-radius:999px; cursor:pointer; font-family:inherit; transition:.15s}
body:not(.locked) .mobile-tabbar button:hover{background:rgba(255,255,255,.6)}
body:not(.locked) .mobile-tabbar button.active{background:rgba(73,201,245,.22)}
body:not(.locked) .mobile-tabbar button.active::after{content:""; position:absolute; top:1px; width:5px; height:5px; border-radius:50%; background:#49C9F5; box-shadow:0 0 6px #49C9F5}
.dock-ico{width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
footer{text-align:center; color:#fff; font-size:13px; padding:6px 12px 90px; text-shadow:0 1px 6px rgba(7,91,145,.6)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.15); border-radius:999px}
::-webkit-scrollbar-thumb{background:rgba(73,201,245,.5); border-radius:999px; border:2px solid rgba(255,255,255,.3)}

@media (max-width:1080px){
  .hero{padding:18px 24px 40px}
  .layout{grid-template-columns:210px minmax(0,1fr)}
  .rightbar{grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; align-items:start}
}
@media (max-width:820px){
  .hero{padding:14px 16px 36px}
  .landing-cards{grid-template-columns:1fr; max-width:440px}
  .landing-actions .btn-glass{display:none}
  .layout{grid-template-columns:1fr; padding:10px}
  .sidebar,.rightbar{position:static}
  .sidebar{order:2}
  .rightbar{grid-template-columns:1fr}
  .two-col,.chat-grid,.explore{grid-template-columns:1fr 1fr}
  .searchbox,.titlebar-cta{display:none}
  .hamburger{display:block}
  .topnav{display:none; position:absolute; top:56px; left:10px; right:10px; z-index:200; background:rgba(7,91,145,.95); border-radius:14px; padding:8px; flex-direction:column; border:1px solid rgba(255,255,255,.4)}
  .topnav.open{display:flex}
  .main-window{margin:8px 8px 90px; border-radius:16px}
  .landing-title{font-size:44px}
  body:not(.locked) .mobile-tabbar{max-width:calc(100vw - 20px); overflow-x:auto}
  footer{padding-bottom:100px}
}
@media (max-width:480px){ .two-col,.chat-grid,.explore,.stats{grid-template-columns:1fr 1fr} }
@media (prefers-reduced-motion:reduce){ #bubbles,.float-sticker{display:none} *{animation:none!important} }