:root{--ink:#fff;--muted:rgba(255,255,255,.7);--line:#fff;--glass:rgba(255,255,255,.18)}
*{box-sizing:border-box;margin:0}
body{background:#000;color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.page{
  min-height:100vh;position:relative;overflow:hidden;padding:0 0 14px;
  background:
    radial-gradient(circle at 12% 9%,rgba(190,225,255,.55) 0 3px,rgba(190,225,255,.15) 4px 6px,transparent 7px),
    radial-gradient(circle at 80% 6%,rgba(190,225,255,.5) 0 5px,rgba(190,225,255,.12) 6px 9px,transparent 10px),
    radial-gradient(circle at 36% 15%,rgba(190,225,255,.4) 0 2px,transparent 3px),
    radial-gradient(circle at 90% 26%,rgba(190,225,255,.45) 0 4px,rgba(190,225,255,.1) 5px 8px,transparent 9px),
    radial-gradient(circle at 6% 30%,rgba(190,225,255,.35) 0 6px,rgba(190,225,255,.08) 7px 11px,transparent 12px),
    radial-gradient(ellipse at 70% 18%,rgba(255,255,255,.18),transparent 45%),
    linear-gradient(180deg,#5b9ccf 0%,#2f6a9e 14%,#12395f 34%,#06182b 52%,#02060c 72%,#000 100%)}
.page.has-bg{background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.25) 30%,rgba(0,0,0,.85) 62%,#000 82%),var(--bg-image) top center/cover no-repeat,#000}
.loading{text-align:center;margin-top:40vh;color:var(--muted)}
.icon-btn{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#111;display:grid;place-items:center;cursor:pointer}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.avatar{width:84px;height:84px;border-radius:50%;margin:0 auto 8px;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(135deg,#d6a13a,#7a4c10);font:400 30px "Archivo Black",Inter,system-ui,sans-serif}
.avatar img{width:100%;height:100%;object-fit:cover}
h1{font:400 19px/1.2 "Archivo Black",Inter,system-ui,sans-serif;text-align:center;margin-bottom:4px}
.bio{font:400 13.5px/1.35 "Archivo Black",Inter,system-ui,sans-serif;text-align:center;margin:0 2px 10px;white-space:pre-line}
.socials{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.socials a{width:30px;height:30px;color:#fff;display:grid;place-items:center}
.socials svg{width:28px;height:28px}
.chip{display:table;margin:0 auto 12px;background:var(--glass);border-radius:999px;padding:5px 12px;font-size:12px;color:var(--muted);backdrop-filter:blur(8px)}
.block{position:relative;display:block;border:1px solid var(--line);border-radius:28px;color:#fff;text-decoration:none;margin-bottom:12px;background:rgba(0,0,0,.12);backdrop-filter:blur(2px)}
.video{padding:10px 10px 10px}
.thumb{aspect-ratio:16/8;border-radius:18px;background:#0b1522 center/cover;position:relative;display:grid;place-items:center;overflow:hidden}
.play{width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center}
.play::after{content:"";border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
.vt{text-align:center;padding:8px 28px 0}
.vt b{display:block;font:400 16px "Archivo Black",Inter,system-ui,sans-serif}
.vt span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:3px}
.vt svg{width:13px;height:13px}
.dots{position:absolute;right:14px;width:22px;height:22px;display:grid;place-items:center;color:var(--muted)}
.dots::before{content:"";width:3px;height:3px;border-radius:50%;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
.video .dots{bottom:16px}
.btn{display:flex;align-items:center;min-height:50px;padding:0 52px;font:400 15px "Archivo Black",Inter,system-ui,sans-serif;text-align:center;justify-content:center;transition:background .15s}
.btn:hover,.video:hover{background:rgba(255,255,255,.1)}
.btn .ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:block}
.btn .ico svg{width:28px;height:28px}
.btn .dots{top:50%;transform:translateY(-50%)}
footer{text-align:center;margin-top:28px;font:400 13px "Archivo Black",Inter,system-ui,sans-serif;opacity:.9}
a:focus-visible,button:focus-visible{outline:2px solid #fff;outline-offset:3px}

.page>*{position:relative;z-index:1}
.page.has-video{background:#000}
.page>.bgvid,.page>.bgshade{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.bgvid{object-fit:cover}
.bgshade{background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.25) 30%,rgba(0,0,0,.85) 62%,#000 82%)}
.extras{margin-top:30px}
.extras h2{font:400 15px/1.3 "Archivo Black",Inter,system-ui,sans-serif;text-align:center;margin-bottom:14px}

/* ---- lista de reproducción estilo YouTube ---- */
.yt{margin:0;padding:0;color:#f1f1f1;font-family:Inter,system-ui,sans-serif;background:linear-gradient(180deg,#000 0,#0f0f0f 140px,#0f0f0f 100%)}
.yt[hidden]{display:none}
.yt-wrap{display:grid;gap:20px;max-width:1700px;margin:0 auto;padding:36px 14px 48px}
.yt-main{min-width:0}
.yt-frame{aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden}
.yt-frame iframe,.yt-frame #vf-player{width:100%;height:100%;border:0;display:block}
.yt-now{font:700 18px/1.35 Inter,system-ui,sans-serif;margin:12px 0 14px}
.yt-info{background:rgba(255,255,255,.1);border-radius:14px;padding:14px 16px;display:grid;gap:6px;font-size:14px}
.yt-info>b{font-size:15px}
.yt-stats{color:#aaa;font-size:12px}
.yt-desc{white-space:pre-line;line-height:1.45;max-height:4.4em;overflow:hidden;margin-top:6px}
.yt-desc.open{max-height:none}
.yt-more{justify-self:start;background:none;border:0;color:#f1f1f1;font:700 13px Inter,system-ui,sans-serif;padding:2px 0;cursor:pointer}
.yt-open{justify-self:start;margin-top:6px;color:#3ea6ff;text-decoration:none;font-weight:700;font-size:13px}
.yt-side{border:1px solid #3f3f3f;border-radius:14px;overflow:hidden;max-height:440px;display:flex;flex-direction:column}
.yt-in{display:flex;flex-direction:column;min-height:0;height:100%}
.yt-side>.yt-in{max-height:inherit}
.yt-head{background:#212121;padding:12px 14px;display:flex;align-items:center;gap:10px;justify-content:space-between}
.yt-ht{min-width:0;display:grid;gap:3px}
.yt-ht b{font-size:16px;line-height:1.3}
.yt-ht span{color:#aaa;font-size:12px}
.yt-nav{display:flex;gap:4px}
.yt-nav button{width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:15px;cursor:pointer}
.yt-nav button:hover{background:rgba(255,255,255,.2)}
.yt-list{list-style:none;margin:0;padding:6px 0;overflow-y:auto;position:relative;flex:1}
.yt-item{width:100%;display:flex;align-items:center;gap:8px;padding:6px 10px 6px 4px;background:none;border:0;color:inherit;text-align:left;cursor:pointer;font:inherit}
.yt-item:hover{background:rgba(255,255,255,.1)}
.on .yt-item{background:rgba(255,255,255,.18)}
.yt-idx{width:22px;flex:none;text-align:center;font-size:12px;color:#aaa}
.yt-idx .eq{display:none;color:#fff}
.on .yt-idx .n{display:none}.on .yt-idx .eq{display:inline}
.yt-th{position:relative;width:110px;flex:none;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#222}
.yt-th img{width:100%;height:100%;object-fit:cover;display:block}
.yt-th em{position:absolute;right:4px;bottom:4px;background:rgba(0,0,0,.8);border-radius:4px;padding:1px 4px;font:700 11px Inter,system-ui,sans-serif;font-style:normal}
.yt-meta{min-width:0;display:grid;gap:3px}
.yt-meta b{font-size:13px;line-height:1.3;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yt-meta small{color:#aaa;font-size:12px}
@media(min-width:900px){
  .yt-wrap{grid-template-columns:minmax(0,1fr) 420px;gap:28px;padding:44px 40px 64px}
  .yt-side{max-height:none;min-height:420px;position:relative;display:block}
  .yt-side>.yt-in{position:absolute;inset:0}
}


.yt-facade{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer}
.yt-facade img{width:100%;height:100%;object-fit:cover;display:block}
.yt-play{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;border-radius:14px;background:rgba(0,0,0,.72);transition:background .15s}
.yt-play::after{content:"";position:absolute;left:27px;top:14px;border-left:18px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.yt-facade:hover .yt-play{background:#f00}

/* ---------- estructura: columna central, barra superior, pestañas y menú lateral ---------- */
.col{max-width:450px;margin:0 auto;padding:0 20px}
.bar{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:12px 0;pointer-events:none}
.bar>*{pointer-events:auto}
.icon-btn{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#111;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn.home svg{width:24px;height:24px}
.page{--g1:linear-gradient(135deg,#1d8fe1,#7c3aed);--g2:linear-gradient(135deg,#f59e0b,#ef4444);--g3:linear-gradient(135deg,#10b981,#1d8fe1);--g4:linear-gradient(135deg,#ec4899,#f59e0b);--g5:linear-gradient(135deg,#6366f1,#ec4899);--g6:linear-gradient(135deg,#94a3b8,#f1f5f9)}
.bar{position:sticky}
.isl{position:absolute;top:4px;bottom:4px;left:-8px;right:-8px;border-radius:28px;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 6px 18px rgba(0,0,0,.4);opacity:0;clip-path:inset(0 100% 0 0 round 28px);pointer-events:none;transition:clip-path .3s cubic-bezier(.65,0,.35,1),opacity .12s .2s}
.ib{position:relative;isolation:isolate;transition:background-color .3s,color .3s,transform .3s,opacity .3s,scale .3s cubic-bezier(.34,1.56,.64,1)}
.ib::before,.ib::after{content:"";position:absolute;border-radius:50%;opacity:0;transition:opacity .3s;pointer-events:none}
.ib::before{inset:-2px;background:var(--ring);z-index:-2}
.ib::after{inset:0;background:#07111d;z-index:-1}
.ib.mid{width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:#fff;font-size:20px;line-height:1;display:grid;place-items:center;cursor:pointer;opacity:0;transform:scale(.4);pointer-events:none}
.ib.mid::before,.ib.mid::after{opacity:1}
.ib.mid,.ib.home{--ring:rgba(255,255,255,.85)}
.ib.mid svg{width:26px;height:26px;display:block}
.ib.mid.on{scale:1.1}
.ib.mid.on::before,.ib.home.on::before{inset:-3px;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.75)}
.ib.home.on{scale:1.06}
body.open .isl{opacity:1;clip-path:inset(0 0 0 0 round 28px)}
body.open .icon-btn.ib{background-color:transparent;color:#fff;box-shadow:none}
body.open .ib::before,body.open .ib::after{opacity:1}
body.open .share{transition-delay:.4s}
body.open .ib.mid{opacity:1;transform:none;pointer-events:auto;transition-delay:calc(.12s + var(--i) * .08s),calc(.12s + var(--i) * .08s),calc(.12s + var(--i) * .08s),calc(.12s + var(--i) * .08s),0s}
@media(prefers-reduced-motion:reduce){.isl,.ib{transition:none!important}}
.side{display:none}

/* secciones */
.page{--ch:490px}
.sec{border:1px solid rgba(255,255,255,.85);border-radius:28px;background:rgba(0,0,0,.28);backdrop-filter:blur(6px);padding:18px 20px 14px;text-align:center;margin:0 -8px 12px;height:var(--ch);display:flex;flex-direction:column;overflow:hidden}
.sec h2{font:400 20px/1.25 "Archivo Black",Inter,system-ui,sans-serif;margin-bottom:10px}
.sec .big{font-size:44px;line-height:1.1;margin-bottom:6px}
.sec .sub{color:var(--muted);font-size:14px;margin:4px 0}
.sec .txt{font:500 15px/1.5 Inter,system-ui,sans-serif;white-space:pre-line;text-align:left;margin:8px 0 14px}
.sec .avatar.sm{width:56px;height:56px;margin:0;font-size:20px}
.shead{display:grid;justify-items:center;align-content:start;gap:6px;height:103px;flex:none}
.shead h2{font:400 19px/31px "Archivo Black",Inter,system-ui,sans-serif;height:31px;margin:0;white-space:nowrap}
.eico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:30px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4)}
.sbody{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.sec>.form{flex:1;min-height:0;margin:0;display:flex;flex-direction:column;gap:8px}
.sec .cta{margin-top:0;flex:none}
.sec .pill{height:44px;padding:0 22px}.sec .pill.wide{width:100%}
.sec.done{justify-content:center}
.socials.two{display:grid;grid-template-columns:repeat(4,1fr);justify-items:center;row-gap:16px;gap:16px 0;margin:6px 0 0}
.socials .shr{width:30px;height:30px;border:0;background:none;color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}.socials .shr svg{width:26px;height:26px}
.sec .num{font-size:15px;color:var(--muted);margin-top:8px}.sec .num b{font:400 40px "Archivo Black",Inter,system-ui,sans-serif;color:#fff}
.meter{height:14px;background:rgba(255,255,255,.2);border-radius:99px;overflow:hidden;margin:10px 0 6px}
.meter i{display:block;height:100%;background:linear-gradient(90deg,#4aa3ff,#22c55e);border-radius:99px}
.cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.pill{border:0;border-radius:999px;background:#fff;color:#111;font:700 14px Inter,system-ui,sans-serif;padding:11px 20px;cursor:pointer}
.pill.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.7)}
.pill.wide{width:100%;padding:14px}
.pill:disabled{opacity:.5;cursor:default}
.form{display:grid;gap:10px;text-align:left;margin-top:12px}
.tgs{display:flex;gap:6px}.tg{flex:1;border:1px solid rgba(255,255,255,.35);background:transparent;color:var(--muted);border-radius:999px;padding:9px 6px;font:700 12.5px Inter,system-ui,sans-serif;cursor:pointer}.tg.on{background:#fff;color:#111;border-color:#fff}
.who .tg{border-color:#ccc;color:#666}.who .tg.on{background:#13233a;color:#fff;border-color:#13233a}
.form [hidden],.who [hidden]{display:none!important}
.form input[type=tel],.form input[type=email],.form input[type=text],.who input[type=tel],.who input[type=email],.who input[type=text]{width:100%;font:500 15px Inter,system-ui,sans-serif;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff}
.form input::placeholder{color:rgba(255,255,255,.45)}
.ck{display:flex;gap:10px;align-items:center;font-size:12.5px;line-height:1.3;color:var(--muted);white-space:nowrap}
.ck input{margin-top:2px;width:18px;height:18px;flex:none}
.err{color:#ff9d94;font-size:13px;min-height:1.2em;text-align:left}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}

/* chat (panel blanco, como el de Linktree) */
.panel{position:relative;background:#fbfaf8;color:#111;border-radius:28px;height:var(--ch);display:flex;flex-direction:column;overflow:hidden;margin:0 -8px 12px}
.phead{display:grid;justify-items:center;align-content:start;gap:6px;height:124px;padding:19px 0 0;border-bottom:1px solid #eee;flex:none}
.phead img{width:56px;height:56px;border-radius:50%;object-fit:cover}.phead b{font:700 15px Inter,system-ui,sans-serif;background:#fff;border-radius:999px;padding:0 14px;height:31px;display:grid;align-items:center;box-shadow:0 2px 10px rgba(0,0,0,.1)}
.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:0}
.brow{display:flex;gap:8px;align-items:flex-end}.brow.me{justify-content:flex-end}
.bav{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none}
.bub{max-width:80%;padding:10px 14px;border-radius:18px;font:500 15px/1.4 Inter,system-ui,sans-serif;white-space:pre-wrap;word-break:break-word;background:#ececec;color:#111}
.me .bub{background:#13233a;color:#fff;border-bottom-right-radius:4px}.them .bub{border-bottom-left-radius:4px}
.only{display:flex;gap:6px;align-items:center;justify-content:flex-end;font-size:12px;color:#777}.only svg{width:15px;height:15px}
.panel .err{padding:0 16px}
.inputbar{display:flex;gap:8px;padding:10px 12px 15px;border-top:1px solid #eee}
.inputbar input{flex:1;font:500 15px Inter,system-ui,sans-serif;padding:12px 16px;border-radius:999px;border:1px solid #ddd;background:#fff;color:#111}
.sendbtn{width:44px;height:44px;border-radius:50%;border:0;background:#13233a;color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.sendbtn svg{width:20px;height:20px}.sendbtn:disabled{opacity:.5}
.whowrap{position:absolute;inset:0;background:rgba(255,255,255,.7);backdrop-filter:blur(2px);display:flex;align-items:flex-end;padding:12px}
.who{background:#fff;border-radius:22px;padding:18px;width:100%;box-shadow:0 6px 30px rgba(0,0,0,.18);display:grid;gap:10px;color:#111}
.who h3{font:700 16px/1.3 Inter,system-ui,sans-serif;text-align:center}
.who .ck{color:#666}
.who input[type=tel],.who input[type=email],.who input[type=text]{background:#f1f1f1;border-color:#e2e2e2;color:#111}
.who .pill{background:#13233a;color:#fff}

/* compartir (ventana blanca) */
.modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center}
.sheet{background:#fff;color:#111;width:100%;max-width:480px;max-height:92vh;overflow:auto;border-radius:24px 24px 0 0;padding:16px 0 22px;font-family:Inter,system-ui,sans-serif}
.sh-head{display:flex;align-items:center;justify-content:center;position:relative;padding:4px 16px 12px;font-size:16px}
.sh-head .x{position:absolute;right:14px;top:0;width:34px;height:34px;border:0;background:none;color:#111;cursor:pointer}.sh-head .x svg{width:22px;height:22px}
.sh-card{margin:6px 20px 16px;background:#2f6a9e;color:#fff;border-radius:20px;padding:22px 10px;display:grid;justify-items:center;gap:4px}
.sh-card img{width:84px;height:84px;border-radius:50%;object-fit:cover;margin-bottom:6px}.sh-card b{font:800 20px "Archivo Black",Inter,sans-serif}.sh-card small{opacity:.85}
.sh-row{display:flex;gap:14px;overflow-x:auto;padding:4px 20px 16px;border-bottom:1px solid #e5e5e5;scrollbar-width:none}.sh-row::-webkit-scrollbar{display:none}
.sh-t{flex:none;width:68px;display:grid;justify-items:center;gap:6px;background:none;border:0;font:500 12px Inter,system-ui,sans-serif;color:#111;cursor:pointer;text-align:center}
.sh-t .dot{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff}.sh-t .dot.dk{color:#111}.sh-t .dot svg{width:28px;height:28px}
.sh-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 20px;border-bottom:1px solid #e5e5e5;font-weight:600;font-size:15px}
.sh-join{padding:16px 20px 0;display:grid;gap:6px}.sh-join b{font-size:16px}.sh-join p{color:#666;font-size:14px;line-height:1.4}
.sh-join .cta{justify-content:stretch;flex-wrap:nowrap}.sh-join .cta .pill{flex:1}
.pill.dk{color:#111;border-color:#111}.pill.dk2{background:#111;color:#fff}
.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);opacity:0;transition:.25s;background:#111;color:#fff;font:600 14px Inter,system-ui,sans-serif;padding:11px 18px;border-radius:999px;z-index:200;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media(min-width:900px){.modal{align-items:center}.sheet{border-radius:24px;max-width:460px}}

.hfoot{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0 2px;font:400 13px "Archivo Black",Inter,system-ui,sans-serif}
.hfoot img{width:24px;height:24px;border-radius:50%;object-fit:cover}.hfoot .fl2{font-size:15px;letter-spacing:2px}
.pill .pl{width:15px;height:15px;vertical-align:-2px;margin-right:6px}
.tg:first-child{flex:2.2;white-space:nowrap}
.sec .form{gap:8px}.sec .form .tg{padding:9px 4px}
.sec .form .sbody{gap:8px}.sec .form .txt{margin:0 0 4px}
.sec .big{font-size:38px}
.sec.done .txt{text-align:center}

/* teléfono con país */
.ph{display:flex;gap:8px;position:relative}
.ph input{flex:1;min-width:0}
.ccb{flex:none;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;border-radius:12px;padding:0 10px;font:600 15px Inter,system-ui,sans-serif;white-space:nowrap;cursor:pointer}
.who .ccb{background:#f1f1f1;border-color:#e2e2e2;color:#111}
.ccl{position:absolute;z-index:6;left:0;right:0;top:calc(100% + 4px);max-height:200px;overflow-y:auto;list-style:none;padding:4px;margin:0;background:#fff;color:#111;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.35);text-align:left}
.who .ccl{top:auto;bottom:calc(100% + 4px)}
.ccl[hidden]{display:none}
.ccl button{width:100%;display:flex;gap:6px;align-items:center;border:0;background:none;padding:9px 10px;border-radius:8px;font:500 14px Inter,system-ui,sans-serif;color:#111;text-align:left;cursor:pointer}
.ccl button b{margin-left:auto;color:#666;font-weight:700}
.ccl button:hover{background:#f1f1f1}

/* menú abierto sobre la portada: letras bajo la isla, logo grande y redes en círculos */
.lb{position:absolute;left:50%;top:calc(100% + 12px);transform:translate(-50%,-14px);opacity:0;pointer-events:none;white-space:nowrap;font:600 8px Inter,system-ui,sans-serif;letter-spacing:.2px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7);transition:opacity .2s,transform .2s}
body.menu .lb{opacity:1;transform:translate(-50%,0);transition:opacity .45s calc(.8s + var(--li) * .07s),transform .6s calc(.8s + var(--li) * .07s) cubic-bezier(.2,.9,.3,1.15)}
.mtop{height:var(--htop,380px);padding:12px 0 14px;display:flex;flex-direction:column;align-items:center}
.mlw{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.mlogo{flex:none;width:min(100%,calc(var(--htop,380px) - 12px - 14px - 40px - 20px));aspect-ratio:1;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#d6a13a,#7a4c10);font:400 64px "Archivo Black",Inter,system-ui,sans-serif;box-shadow:0 10px 34px rgba(0,0,0,.45)}
.mlogo img{width:100%;height:100%;object-fit:cover}
.socials.circ{flex:none;margin-top:auto!important;width:100%;flex-wrap:nowrap;justify-content:space-between;gap:0;margin:0}
.socials.circ a{width:40px;height:40px;border-radius:50%;background:#fff;color:#111;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.socials.circ svg{width:22px;height:22px}
.view.menu .mlogo,.view.menu .circ{animation:mrise .65s .85s both cubic-bezier(.2,.9,.3,1)}
@keyframes mrise{from{opacity:0;transform:translateY(-16px) scale(.92)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.view.menu .mlogo,.view.menu .circ{animation:none}.lb{transition:none!important}}

/* selector de idioma (abajo a la derecha, en la línea del pie) */
.hfoot{position:relative}
.langbox{position:absolute;right:0;top:50%;transform:translateY(-50%)}
.lang{border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.25);color:#fff;border-radius:999px;padding:4px 9px;font:700 11px Inter,system-ui,sans-serif;cursor:pointer}
.langmenu{position:absolute;right:0;bottom:calc(100% + 8px);background:#fff;border-radius:14px;padding:4px;box-shadow:0 8px 28px rgba(0,0,0,.4);min-width:120px;z-index:20}
.langmenu[hidden]{display:none}
.langmenu button{display:block;width:100%;border:0;background:none;text-align:left;padding:9px 12px;border-radius:10px;font:600 14px Inter,system-ui,sans-serif;color:#111;cursor:pointer}
.langmenu button.on{background:#13233a;color:#fff}

/* ---------- chat comunitario ---------- */
.phead{position:relative}
.phead .hid{display:grid;justify-items:center;align-content:start;gap:6px;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}
.ptools{position:absolute;right:12px;top:14px;display:flex;gap:8px;align-items:center}
.tbtn{position:relative;display:grid;place-items:center;min-width:38px;height:38px;border-radius:999px;border:1px solid #e3e3e3;background:#fff;color:#13233a;font:600 13px Inter,system-ui,sans-serif;cursor:pointer;padding:0}
.tbtn svg{width:20px;height:20px}.tbtn.av{font-size:20px;border:0}.tbtn.pillb{padding:0 14px;background:#13233a;color:#fff;border-color:#13233a}
.pback{position:absolute;left:12px;top:14px}
.bdg2{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:#e5484d;color:#fff;font:700 11px/18px Inter,system-ui,sans-serif;text-align:center;padding:0 4px;font-style:normal}
.bdg2.st{position:static;flex:none}
.bav.em{display:grid;place-items:center;font-size:17px;font-style:normal}.bav.hbig{width:56px;height:56px;font-size:30px}
.avb2{background:none;border:0;padding:0;cursor:pointer;flex:none;align-self:flex-end}
.bcol{display:grid;gap:2px;max-width:80%;min-width:0}.me .bcol{justify-items:end}.them .bcol{justify-items:start}
.bcol .bub{max-width:100%}.bub.tap{cursor:pointer}
.who2{background:none;border:0;padding:0 4px;font:700 12px Inter,system-ui,sans-serif;color:#555;cursor:pointer}.who2.vf{color:#b8860b}
.tm{font-size:11px;color:#999;padding:0 4px}
.delb{background:#fdecec;color:#c22;border:0;border-radius:999px;padding:4px 12px;font:600 12px Inter,system-ui,sans-serif;cursor:pointer}
.crow{display:flex;gap:12px;align-items:center;text-align:left;background:#fff;border:1px solid #eee;border-radius:14px;padding:10px 12px;cursor:pointer;color:#111;font:inherit}
.crow .bav{width:40px;height:40px;font-size:22px}.ctx{display:grid;flex:1;min-width:0}.ctx b{font:700 14px Inter,system-ui,sans-serif}.ctx span{font-size:13px;color:#777;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfoot .inputbar .pill{background:#13233a;color:#fff}
.whowrap .who{max-height:100%;overflow-y:auto}
.fcol{display:grid;gap:10px}.who .soon{font-size:14px;color:#555;text-align:center}
.codein{text-align:center;letter-spacing:.35em;font-size:22px!important}
.linkb{background:none;border:0;color:#666;text-decoration:underline;font:500 13px Inter,system-ui,sans-serif;cursor:pointer}
.prow{display:flex;gap:10px;align-items:center}.prow input{flex:1}
.avgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.avb{font-size:20px;background:#f1f1f1;border:2px solid transparent;border-radius:10px;height:34px;cursor:pointer;padding:0}.avb.on{border-color:#13233a;background:#fff}
.colrow{display:flex;gap:8px;justify-content:center}.colb{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #ccc;cursor:pointer;padding:0}.colb.on{box-shadow:0 0 0 2px #13233a}
.who input[type=text],.who input[type=email]{width:100%;font:500 15px Inter,system-ui,sans-serif;padding:12px 14px;border-radius:12px;border:1px solid #e2e2e2;background:#f1f1f1;color:#111}

.bav.sp{visibility:hidden}img.bav.tiny,.bav.tiny{width:24px;height:24px;font-size:14px}
.tbtn.cfg{display:flex;gap:6px;align-items:center;padding:0 12px 0 6px}
.brow.cont{margin-top:-6px}.brow.me .bcol{margin-right:0}
.brow.vfm .bub{background:#1d6fe8;color:#fff}.brow.vfm.them .bub{border-bottom-left-radius:4px}
.asvf{background:#e8f0fe;color:#1d4fb8;border:0;padding:6px 12px;font:600 12px Inter,system-ui,sans-serif;cursor:pointer;width:100%}
.photobtns{display:flex;gap:12px;align-items:center;justify-content:center}.pill.ghost2{background:#f1f1f1;color:#13233a;border:0;padding:8px 16px;border-radius:999px;font:600 14px Inter,system-ui,sans-serif;cursor:pointer}
.prow .bav.hbig{flex:none;overflow:hidden}

/* perfil público */
.pf{display:grid;justify-items:center;gap:6px;padding:14px 12px 4px;text-align:center}.pf h2{margin:0;font:800 20px Inter,system-ui,sans-serif;color:#111}
.pf .bav.pfav{width:84px;height:84px;font-size:46px}.pfstats{display:flex;gap:22px;margin:4px 0}.pst{display:grid;justify-items:center;background:none;border:0;padding:0;color:#111;font:inherit}.pst b{font:800 17px Inter,system-ui,sans-serif}.pst span{font-size:12px;color:#777}button.pst{cursor:pointer}
.pfbio{margin:0;font-size:14px;color:#333;max-width:30ch;white-space:pre-wrap;overflow-wrap:anywhere}.pfbtns{display:flex;gap:8px;margin-top:4px}
.stories{display:flex;gap:14px;justify-content:center;padding:10px 12px}.story{width:72px;height:72px;border-radius:50%;padding:3px;border:0;background:linear-gradient(135deg,#f9a03f,#e1306c,#833ab4);cursor:pointer}.story img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #fff;display:block}
.wcomp{display:grid;gap:8px;padding:6px 12px}.wcomp textarea,.who textarea{width:100%;box-sizing:border-box;border:1px solid #ddd;border-radius:14px;padding:10px 12px;font:15px Inter,system-ui,sans-serif;resize:none}.wcomp .pill{justify-self:end}
.post{background:#fff;border:1px solid #eee;border-radius:16px;margin:8px 12px;padding:12px;display:grid;gap:8px;color:#111}.ptop{display:flex;justify-content:space-between;align-items:center}.ptop small{color:#888}.ptxt{margin:0;font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}
.cmt{display:flex;gap:6px;align-items:baseline;font-size:14px;background:#f5f5f5;border-radius:12px;padding:6px 10px;overflow-wrap:anywhere}.cmt .who2{flex:none}.cmt .x{margin-left:auto;font-size:18px;line-height:1}
.cmtf{display:flex;gap:8px;align-items:center}.cmtf input{flex:1;min-width:0;border:1px solid #ddd;border-radius:999px;padding:8px 12px;font:14px Inter,system-ui,sans-serif}
.gal{display:flex;gap:10px;justify-content:center}.gslot{position:relative;width:76px;height:76px;border-radius:14px;overflow:hidden;border:0;padding:0;background:#f1f1f1}.gslot img{width:100%;height:100%;object-fit:cover}.gslot.add{font-size:30px;color:#777;cursor:pointer;border:2px dashed #ccc;background:#fafafa}.gx{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;line-height:1}
.who h4,.sub{margin:4px 0 0;font:700 13px Inter,system-ui,sans-serif;color:#555}.zoomimg{width:100%;max-height:60vh;object-fit:contain;border-radius:14px}.fl{display:grid;gap:6px}
.tbtn.myav{border:0;background:none;width:44px;height:44px}.tbtn.myav .bav{width:40px;height:40px;font-size:22px}
.pftop{display:flex;align-items:center;gap:18px;width:100%}.pf{justify-items:start;text-align:left}.pfstats{flex:1;justify-content:space-around;gap:6px}.pfname{font:700 15px Inter,system-ui,sans-serif;color:#111}.pfsex{color:#888}.pfbtns{width:100%}.pfbtns .pill{flex:1}
.irow{display:flex;justify-content:space-between;gap:10px;font-size:14px;border-bottom:1px solid #eee;padding:6px 0;color:#111}.irow span{color:#777}.irow b{font-weight:600;overflow-wrap:anywhere;text-align:right}
.tbtn.bk{display:flex;flex-direction:column;gap:0;height:auto;min-height:38px;padding:4px 10px;border-radius:14px;line-height:1.1}.tbtn.bk .bki svg{width:18px;height:18px;display:block}.tbtn.bk small{font:600 10px Inter,system-ui,sans-serif;color:#555}
.mention{background:none;border:0;padding:0;font:inherit;font-weight:700;color:#1d6fe8;cursor:pointer}.brow.me .mention{color:#cfe1ff}
.atwrap{flex:1;display:flex;align-items:center;gap:4px;border:1px solid #ddd;border-radius:12px;padding:0 10px;background:#fff}.atwrap span{color:#888;font-weight:700}.atwrap input{flex:1;min-width:0;border:0;outline:0;padding:11px 0;font:15px Inter,system-ui,sans-serif;background:none}
.prevb{border:0;padding:0;cursor:pointer;flex:none;overflow:hidden}.prow.c{justify-content:center}.prow.c .bav{width:84px;height:84px;font-size:46px;flex:none;overflow:hidden}
.etabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid #eee;padding-bottom:4px}.etab{flex:none;width:36px;height:34px;border:0;background:none;border-radius:10px;font-size:20px;cursor:pointer}.etab.on{background:#e8eefc}
.egrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;max-height:210px;overflow-y:auto}.eb{border:0;background:none;border-radius:10px;font-size:25px;height:40px;cursor:pointer}.eb.on{background:#e8eefc;outline:2px solid #1d6fe8}
.colb.none{background:#fff;border:2px dashed #bbb}.pf{border-radius:0 0 18px 18px}
.sec .txt.fine{font-size:12px;color:#777;margin:0}
.atwrap input{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;height:auto}
body.chatfull{overflow:hidden}
.panel{transition:height .5s cubic-bezier(.2,.8,.2,1),border-radius .5s,margin .5s}.panel.full{margin-bottom:0;border-radius:28px 28px 0 0}.panel.full .inputbar{padding-bottom:max(15px,env(safe-area-inset-bottom))}
.linkb.out{color:#c0392b}
.panel.kb{position:fixed;left:0;right:0;margin:0;border-radius:0;z-index:60;transition:none}
.panel.kb .inputbar{border-top:0;box-shadow:0 -6px 18px rgba(0,0,0,.08);padding-bottom:10px;background:inherit}
/* modo oscuro del chat */
.panel.dark{background:#000;color:#eee}.panel.dark .msgs{background:#000}
.panel.dark .phead{border-color:#222}.panel.dark .phead b{background:#1c1c1e;color:#fff;box-shadow:none}
.panel.dark .tbtn{background:#1c1c1e;color:#fff;border-color:#333}.panel.dark .tbtn.pillb{background:#fff;color:#000;border-color:#fff}.panel.dark .tbtn.bk small{color:#bbb}
.panel.dark .bub{background:#262626;color:#f2f2f2}.panel.dark .me .bub{background:#1f3a68}.panel.dark .brow.vfm .bub{background:#1d6fe8}
.panel.dark .who2{color:#aaa}.panel.dark .who2.vf{color:#e0b13a}.panel.dark .tm,.panel.dark .only,.panel.dark .ptop small{color:#888}.panel.dark .mention{color:#7db0ff}.panel.dark .brow.me .mention{color:#cfe1ff}
.panel.dark .inputbar{border-color:#222;background:#000}.panel.dark .inputbar input{background:#1c1c1e;border-color:#333;color:#fff}.panel.dark .sendbtn{background:#1d6fe8}
.panel.dark .cfoot .inputbar .pill,.panel.dark .who .pill{background:#fff;color:#000}.panel.dark .pill.ghost2,.panel.dark .who .pill.ghost2{background:#262626;color:#fff}
.panel.dark .asvf{background:#10223f;color:#8fb4ff}.panel.dark .crow,.panel.dark .post{background:#111;border-color:#222;color:#eee}.panel.dark .ctx span{color:#999}
.panel.dark .whowrap{background:rgba(0,0,0,.7)}.panel.dark .who{background:#161616;color:#eee}.panel.dark .who h3{color:#fff}.panel.dark .who .ck,.panel.dark .who .soon,.panel.dark .linkb,.panel.dark .who h4,.panel.dark .sub{color:#aaa}
.panel.dark .who input[type=tel],.panel.dark .who input[type=email],.panel.dark .who input[type=text],.panel.dark .who textarea,.panel.dark .wcomp textarea,.panel.dark .cmtf input{background:#222;border-color:#333;color:#fff}
.panel.dark .who .tg{background:#222;border-color:#444;color:#ccc}.panel.dark .who .tg.on{background:#fff;color:#000;border-color:#fff}
.panel.dark .pf h2,.panel.dark .pst,.panel.dark .pfname{color:#fff}.panel.dark .pfbio,.panel.dark .ptxt{color:#ddd}.panel.dark .cmt{background:#1c1c1e}.panel.dark .story img{border-color:#000}
.panel.dark .atwrap{background:#222;border-color:#333}.panel.dark .atwrap input{color:#fff}.panel.dark .irow{border-color:#222;color:#eee}.panel.dark .gslot{background:#222}.panel.dark .etab.on,.panel.dark .eb.on{background:#1f2f4f}.panel.dark .etabs{border-color:#222}
.panel.dark .avb{background:#222}.panel.dark .colb{border-color:#000}.panel.dark .linkb.out{color:#ff6b61}

/* perfil: el color cubre la cabecera, la foto va arriba y la línea divisora se oculta */
.panel.isprof .phead{height:auto;min-height:60px;padding:11px 0 8px;border-bottom:0;background:var(--pc,transparent)}
.panel.isprof .pback,.panel.isprof .ptools{top:10px}
.panel.isprof .pf{padding:2px 12px 8px;background:var(--pc,transparent);border-radius:0 0 18px 18px}
.panel .pf .bav.pfav{width:56px;height:56px;font-size:30px}
.pfbtns.one{justify-content:center}.pfbtns.one .pill.sm{flex:none;padding:5px 20px;font-size:13px;min-height:0}
.panel.hasp{--pt:#111}.panel.hasp.pdark{--pt:#fff}
.panel.hasp .pf .pst,.panel.hasp .pf .pfname,.panel.hasp .pf .pfbio,.panel.hasp .pf .pfsex,.panel.hasp .pf .pst span,.panel.hasp .phead .bk small{color:var(--pt)}
.pal{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;justify-items:center;max-height:170px;overflow-y:auto;padding:6px 4px;border:1px solid #e3e3e3;border-radius:14px;-webkit-overflow-scrolling:touch}
.panel.dark .pal{border-color:#333}
.who .tg:disabled{opacity:.45}
/* al abrir el chat, la barra de escribir aparece cuando el panel ya terminó de bajar */
.panel .cfoot{transition:opacity .25s .45s}.panel:not(.full) .cfoot{opacity:0}

/* entrada del menú de inicio: primero la isla; luego iconos, letras y logo a la vez; las redes suben desde abajo */
.ib.mid{transform:translateY(-18px)}
body.open .ib.mid{transition:transform .6s cubic-bezier(.2,.9,.3,1) .6s,opacity .5s .6s,scale .3s,background-color .3s,color .3s;transform:none}
body.open .share{transition-delay:.6s}
.lb{transform:translate(-50%,-26px)}
body.menu .lb{transition:opacity .5s .6s,transform .6s .6s cubic-bezier(.2,.9,.3,1)}
.view.menu .mlogo{animation:mrise .65s .6s both cubic-bezier(.2,.9,.3,1)}
.view.menu .circ{animation:msoc .8s .6s both cubic-bezier(.2,.9,.3,1)}
@keyframes msoc{from{opacity:0;transform:translateY(60px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.view.menu .mlogo,.view.menu .circ{animation:none}.ib.mid{transition:none!important}}
.panel.isprof .msgs{padding:0 0 16px}.panel.isprof .msgs>*:not(.pf){margin-left:16px;margin-right:16px}
.panel.isprof .pf{padding:2px 16px 10px}

/* ronda 8: botones blancos con letra negra de día y negros con letra blanca de noche; paleta en 3 filas con desplazamiento horizontal */
.pal{grid-template-columns:none;grid-template-rows:repeat(3,26px);grid-auto-flow:column;grid-auto-columns:34px;max-height:none;overflow-x:auto;overflow-y:hidden;padding:8px 6px;gap:10px 8px}
.panel .tbtn{background:#fff;color:#000}.panel .tbtn.pillb{background:#000;color:#fff;border-color:#000}
.panel .tbtn.bk small{color:#000}.panel .phead b{color:#000}
.panel .pf .pill.ghost2{background:#fff;color:#000;border:1px solid #ddd}
.panel .sendbtn{background:#000;color:#fff}.panel .me .bub{background:#000;color:#fff}
.panel.dark .tbtn{background:#000;color:#fff;border-color:#3a3a3a}.panel.dark .tbtn.pillb{background:#fff;color:#000;border-color:#fff}
.panel.dark .tbtn.bk small,.panel.dark .phead b{color:#fff}.panel.dark .phead b{background:#000;border:1px solid #3a3a3a}
.panel.dark .pf .pill.ghost2{background:#000;color:#fff;border-color:#3a3a3a}
.panel.dark .sendbtn{background:#000;color:#fff;box-shadow:0 0 0 1px #3a3a3a}.panel.dark .me .bub{background:#000;color:#fff;box-shadow:0 0 0 1px #3a3a3a}
.panel.hasp .phead .bk small{color:#000}.panel.dark.hasp .phead .bk small{color:#fff}
.panel .who.tint,.panel.dark .who.tint{color:#111}.panel .who.tint.tdark{color:#fff}
.panel .who.tint h3,.panel .who.tint .sub,.panel .who.tint .ck,.panel .who.tint .linkb,.panel .who.tint h4{color:inherit}

/* ronda 9: selección y botones principales casi negros; "Sin seleccionar" al final con el mismo gris que los demás */
.who .tgs .tg:first-child{flex:1;white-space:normal}.who .tgs .tg:last-child{flex:1.7;white-space:nowrap}
.who .tg:disabled{opacity:1;cursor:default}
.panel:not(.dark) .who .tg.on{background:#111;color:#fff;border-color:#111}
.panel:not(.dark) .who .pill:not(.ghost2),.panel:not(.dark) .cfoot .inputbar .pill{background:#111;color:#fff}
.panel .who.tint:not(.tdark) .tg.on{background:#111;color:#fff}
.panel .who.tint.tdark .tg:not(.on){color:#fff;border-color:rgba(255,255,255,.6)}
.panel .who.tint.tdark .tg.on{background:#000;border-color:#000}
.panel .err:has(button){display:flex;justify-content:space-between;align-items:center;gap:10px}
.who .err:has(button){display:block}

/* ===== comunidad: red social a pantalla completa ===== */
/* botón pequeño como el del idioma, en el lado contrario; flota abajo al hacer scroll y se detiene donde acaba la portada, sin tocar la playlist */
.netw{position:sticky;bottom:calc(14px + env(safe-area-inset-bottom));height:0;z-index:30;margin-top:-5px}
.netbtn{position:absolute;left:0;bottom:0;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.25);color:#fff;border-radius:999px;padding:4px 9px;font:700 11px Inter,system-ui,sans-serif;cursor:pointer;backdrop-filter:blur(4px)}
body.open .netw,body.ontab .netw,body.netopen .netw{display:none}
.net-wrap{position:fixed;inset:0;z-index:70}
.net-dim{position:absolute;inset:0;background:#000;animation:ndim .22s ease-out both}
@keyframes ndim{from{opacity:0}to{opacity:1}}
.panel.net{position:fixed;inset:0;margin:0;border-radius:0;height:100dvh;z-index:1;animation:npan .3s .2s ease-out both}
.panel.net.full{border-radius:0}
@keyframes npan{from{opacity:0}to{opacity:1}}
.panel.net .msgs{padding-bottom:12px}
.panel.net .ntitle{flex:1;text-align:center}
.panel.net .ntitle b{background:none;box-shadow:none;border:0;font-size:16px}
.panel.net .ptools{display:flex;gap:6px;align-items:center}
.panel.net .ptools .tbtn{position:relative}.panel.net .phead{height:64px;padding:0;display:flex;align-items:center;justify-content:center}.panel.net .phead .myav img{width:40px;height:40px}.panel.net .pback{top:10px}.panel.net .ptools{top:10px}.panel.net .phead .ntitle b{background:none;box-shadow:none;border:0;padding:0}
.panel.net .bdg2.dot{position:absolute;top:6px;right:6px;width:9px;height:9px;min-width:0;padding:0;border-radius:50%;background:#ff3040;font-size:0}
.panel.net .pauth{display:flex;align-items:center;gap:8px;border:0;background:none;color:inherit;font:inherit;padding:0 0 6px;cursor:pointer}
.panel.net .paper{margin:24px 16px;padding:28px 20px;border-radius:14px;background:#fff;color:#222;box-shadow:0 2px 14px rgba(0,0,0,.15);text-align:center;transform:rotate(-1deg)}
.panel.dark .paper{background:#1c1c1e;color:#ddd}
.nbar{order:99;flex:none;display:flex;justify-content:space-between;align-items:center;gap:4px;width:calc(100% - 24px);margin:6px 12px max(12px,env(safe-area-inset-bottom));padding:5px;border-radius:999px;background:#111;overflow:hidden;animation:nfly .9s .12s cubic-bezier(.3,.7,.2,1) both}
.nb{width:46px;height:46px;border:0;border-radius:50%;background:none;color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;opacity:.7}
.nb svg{width:23px;height:23px}
.nb[data-t=home]{background:#fff;color:#111;opacity:1;position:relative;z-index:1}.nb.dot::after{content:'';position:absolute;top:8px;right:8px;width:9px;height:9px;border-radius:50%;background:#ff3040}.nb{position:relative}
.nb.on{opacity:1;background:rgba(255,255,255,.2)}
.nb[data-t=home].on{background:#fff}
.nb:not([data-t=home]){animation:nbi .3s .75s both}
@keyframes nbi{from{opacity:0;transform:scale(.6)}}
@keyframes nfly{
 0%{transform:translate(var(--fx,0),var(--fy,-60vh));width:56px}
 55%{transform:none;width:56px}
 100%{transform:none;width:calc(100% - 24px)}}
.panel.net.kb .nbar,.panel.net.indm .nbar{display:none}

.panel.net .nleft{display:flex;align-items:center;gap:8px;position:absolute;left:12px;top:10px;height:44px}
.panel.net .nleft .myav{position:static}
.panel.net .ntl{display:flex;align-items:center;gap:8px;border:0;background:none;color:inherit;font:inherit;padding:0;cursor:pointer}
.panel.net .phead .ntl img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.panel.net .phead .ntl b{font-size:15px}
.panel.net .phead:has(.nleft){justify-content:flex-start}
.panel.net .whowrap{bottom:calc(68px + max(12px,env(safe-area-inset-bottom)));padding:0;align-items:stretch;background:#fbfaf8}
.panel.net .whowrap .who{height:100%;max-height:100%;border-radius:0;box-shadow:none;padding-bottom:28px;align-content:start}
.panel.dark.net .whowrap{background:#000}
.stories{gap:12px;flex-wrap:wrap}
.story{width:72px;height:72px;border-radius:18px;padding:0;border:1.5px solid #fff;background:#eee;overflow:hidden;cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.story img{width:100%;height:100%;object-fit:cover;border:0;border-radius:0;display:block}
.story.add{display:grid;place-items:center;font-size:30px;color:#777;background:#f1f1f1}
.panel.dark .story{border-color:#fff;background:#222}.panel.dark .story.add{color:#aaa}
.panel .phead .ntl b,.panel.dark .phead .ntl b{background:none;box-shadow:none;border:0;padding:0;height:auto;display:block}

.modot{display:inline-block;width:9px;height:9px;margin:0 0 0 6px;border-radius:50%;background:#1d6fe8;border:2px solid #fff;box-sizing:content-box;vertical-align:middle;box-shadow:0 0 0 1px rgba(0,0,0,.12)}

/* Comunidad: blanco y flotando fijo, como al principio, pero pequeño */
.netw{position:fixed;left:16px;bottom:max(18px,env(safe-area-inset-bottom));height:auto;margin:0;z-index:30}
.netbtn{position:static;border:0;background:rgba(255,255,255,.92);color:#111;padding:6px 12px;font:800 12px Inter,system-ui,sans-serif;box-shadow:0 3px 12px rgba(0,0,0,.3);backdrop-filter:none}
/* el icono de inicio de la barra se adapta a los demás: mismo color, sin fondo blanco */
.nb[data-t=home]{background:none;color:#fff;opacity:.7}
.nb[data-t=home].on{opacity:1;background:rgba(255,255,255,.2)}

/* pie del inicio: alineado con los cuadros (Comunidad a la izquierda, idioma a la derecha) */
.netw{left:max(20px,calc((100vw - 450px)/2 + 20px));bottom:max(8px,env(safe-area-inset-bottom))}
.netbtn{padding:5px 11px;font-size:11px;line-height:15px;border-radius:999px}
body.open .netw{display:block}body.ontab .netw,body.netopen .netw{display:none}
.hlink{display:flex;align-items:center;gap:6px;border:0;background:none;color:inherit;font:inherit;font-size:11px;padding:0;cursor:pointer}
.hlink .fl2{font-size:12px;letter-spacing:1px}
.flyhome{transition:none}.flyhome.melt{opacity:0!important;transition:opacity .4s!important}
.rec{font:400 .72em Inter,system-ui,sans-serif;opacity:.8}
@keyframes nexp{0%{width:56px;opacity:0}1%{opacity:1}100%{width:calc(100% - 24px);opacity:1}}
.nbar{animation:nexp .45s .5s cubic-bezier(.3,.7,.2,1) both}
.nb:not([data-t=home]){animation:nbi .3s .85s both}

.panel.net .ntl .caret{width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);margin:-3px 0 0 6px;opacity:.6;display:inline-block}
.crow.cur{background:rgba(29,111,232,.08)}.tick{margin-left:auto;font-style:normal;font-weight:800}

.netw{bottom:max(13px,env(safe-area-inset-bottom))}
/* 1) el botón de inicio baja en blanco; 2) al llegar queda como círculo blanco y se estira a la derecha como la isla dinámica, oscureciéndose */
@keyframes nisl{
 0%,41%{opacity:0;width:56px;background:#fff}
 42%{opacity:1;width:56px;background:#fff;animation-timing-function:ease-out}
 52%{width:56px;background:#fff;animation-timing-function:cubic-bezier(.34,1.35,.5,1)}
 100%{opacity:1;width:calc(100% - 24px);background:#111}}
@keyframes nhc{0%,50%{color:#111}100%{color:#fff}}
.nbar{animation:nisl 1.25s cubic-bezier(.3,.7,.2,1) both}
.nb[data-t=home]{animation:nhc 1.25s both}
.nb:not([data-t=home]){animation:nbi .3s .95s both}
.panel.net,.panel.net.full{transition:none}

/* verificado: solo un aro, pequeño y centrado con las letras */
.modot{width:6px;height:6px;margin:0 0 0 5px;background:transparent;border:1.5px solid currentColor;box-shadow:none;vertical-align:middle;position:relative;top:-.09em}

body.ontab .netw{display:block}body.netopen .netw{display:none}

/* reencuadre de fotos destacadas */
.story img,.gslot img{object-fit:cover}
.gfr{position:absolute;inset:0;padding:0;border:0;background:none;border-radius:inherit;overflow:hidden;cursor:pointer}
.gfr img{width:100%;height:100%;display:block}
.rfr{width:min(260px,70vw);aspect-ratio:1;margin:8px auto;border-radius:18px;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);overflow:hidden;touch-action:none;cursor:grab;background:#eee}
.rfi{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;user-select:none}
.row2{display:flex;gap:8px}.row2 .pill{flex:1}
body.onchat .netw,body.ontab.onchat .netw{display:none}

/* sexo legible en cualquier tinte; foto destacada: descripción y eliminar */
.panel .who .tg.on{background:#111!important;color:#fff!important;border-color:#111!important}
.panel.dark .who .tg.on{background:#fff!important;color:#111!important;border-color:#fff!important}
.pcap{margin:8px 2px 4px;font:500 14px/1.35 Inter,system-ui,sans-serif;text-align:center;word-break:break-word}
.pill.pdel{background:#c0392b!important;color:#fff!important;border-color:#c0392b!important}
.rfr+.only{margin:4px 0}
.gslot .gx{width:24px;height:24px;top:3px;right:3px;font-size:17px;line-height:22px;background:#fff!important;color:#c0392b!important;border:1.5px solid #c0392b;box-shadow:0 1px 4px rgba(0,0,0,.35)}

/* vista previa del encabezado del perfil al elegir color */
.hprev{display:grid;justify-items:center;gap:6px;border-radius:18px;padding:14px 12px;border:1px solid rgba(128,128,128,.3);position:sticky;top:0;z-index:3;text-align:center;background:inherit;color:inherit;transition:background .15s}
.hprev.hl{color:#111;border-color:transparent}.hprev.hd{color:#fff;border-color:transparent}
.hprevav{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:30px;background-size:cover}
.hpstats{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.hps{display:grid;justify-items:center}.hps b{font:800 16px Inter,system-ui,sans-serif}.hps span{font:600 11.5px Inter,system-ui,sans-serif;opacity:.85}
.hpname{font:700 15px Inter,system-ui,sans-serif}.hpbio{margin:0;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}

/* perfil simétrico: foto centrada arriba, cifras debajo en 3 columnas iguales, y todo alineado con los bordes de los botones de la cabecera (13 px) */
.pftop{flex-direction:column;gap:8px}
.pf,.panel.isprof .pf{justify-items:center;text-align:center;padding-left:12px;padding-right:12px}
.panel .pf .bav.pfav{width:72px;height:72px;font-size:38px}
.pfstats{display:grid;grid-template-columns:repeat(3,1fr);width:100%;gap:0;justify-content:stretch}
.pfbtns{justify-content:center}
.stories{display:grid;grid-template-columns:repeat(4,72px);justify-content:space-between;padding:12px 12px 10px}
.wcomp{padding:6px 12px}.wcomp .pill{justify-self:end}
.panel.isprof .msgs>*:not(.pf){margin-left:0;margin-right:0}
.panel.isprof .msgs>.post{margin:8px 12px}
/* redes sociales: YouTube alineado con el borde del botón de inicio y Telegram con el de compartir */
.socials:not(.two):not(.circ):has(a:nth-child(6)){justify-content:space-between;flex-wrap:nowrap}
/* foto de perfil en la isla abierta: borde blanco fino que conecta con el de las tarjetas */
.mlogo{border:1.5px solid #fff;box-sizing:border-box}
.socials:not(.two):not(.circ):has(a:nth-child(6)) a:first-child{margin-left:-1px}.socials:not(.two):not(.circ):has(a:nth-child(6)) a:last-child{margin-right:-1px}

/* fotos de la Comunidad al estilo Instagram: 4:5 vertical, 1.91:1 horizontal */
.post .pmedia{display:block;width:calc(100% + 24px);margin:0 -12px;padding:0;border:0;background:#000;cursor:zoom-in;overflow:hidden}
.post .pmedia img{width:100%;height:100%;object-fit:cover;display:block}

/* botón «Mensaje» junto a Compartir: desaparece al abrir la isla */
.msgpill{position:absolute;right:48px;top:50%;translate:0 -50%;height:40px;padding:0 16px 0 12px;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:#111;display:flex;align-items:center;gap:7px;font:700 13px Inter,system-ui,sans-serif;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.25);transition:opacity .3s .35s}
.msgpill svg{width:20px;height:20px;flex:none}
body.open .msgpill{opacity:0;pointer-events:none;transition:opacity .12s}
/* entrada de la isla (rápida): primero la isla; luego los iconos de uno en uno (izquierda a derecha, Compartir al final); las letras bajan todas juntas al terminar */
body.open .ib.mid{transition:transform .3s cubic-bezier(.2,.9,.3,1) calc(.32s + var(--i) * .05s),opacity .22s calc(.32s + var(--i) * .05s),scale .3s,background-color .3s,color .3s;transform:none}
body.open .share{animation:shareIn .82s both}
@keyframes shareIn{0%{opacity:1;transform:none}12%{opacity:0;transform:scale(.4)}63%{opacity:0;transform:translateY(-18px) scale(.4)}100%{opacity:1;transform:none}}
body.menu .lb{transition:opacity .25s .85s,transform .3s .85s cubic-bezier(.2,.9,.3,1)}
.view.menu .mlogo,.view.menu .circ{animation-delay:.32s;animation-duration:.4s}
@media(prefers-reduced-motion:reduce){body.open .share{animation:none}}

/* mensaje privado dentro de la Comunidad: nombre al centro y avatar completo a la derecha */
.panel.net .phead .dmn{position:absolute;left:64px;right:64px;top:0;height:64px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.panel.net .phead .dmn b{background:none;box-shadow:none;border:0;font-size:16px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel.net .phead .dmav{position:absolute;right:12px;top:10px;width:44px;height:44px;padding:0;border:0;background:none;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.panel.net .phead .dmav .bav{width:44px;height:44px;font-size:24px}

/* pie simétrico: Comunidad | @usuario | idioma, mismo alto y misma línea central */
.netw{display:none!important}
.hfoot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:8px;height:40px;margin:8px 0 2px}
.hfoot .netbtn,.hfoot .lang{box-sizing:border-box;width:98px;height:34px;padding:0;display:flex;align-items:center;justify-content:center;font:800 12px Inter,system-ui,sans-serif;line-height:1;white-space:nowrap}
.hfoot .netbtn{position:relative;justify-self:start;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:#111;box-shadow:0 3px 12px rgba(0,0,0,.3);cursor:pointer}
.hfoot .langbox{position:relative;justify-self:end;top:auto;right:auto;transform:none}
.hfoot .hlink{justify-self:center}
/* a los 4 s de abrir la isla, un brillo recorre el borde de Comunidad como la manecilla de un reloj */
@property --ga{syntax:'<angle>';inherits:false;initial-value:0deg}
.hfoot .netbtn::after{content:'';position:absolute;inset:-4px;border-radius:999px;padding:3px;background:conic-gradient(from var(--ga),transparent 0 62%,#7cc8ff 86%,#fff 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;pointer-events:none;filter:drop-shadow(0 0 5px #7cc8ff)}
body .hfoot .netbtn::after{animation:ngin .5s 4s both,nspin 2.2s linear 4s infinite}
@keyframes ngin{to{opacity:1}}
@keyframes nspin{to{--ga:360deg}}
@media(prefers-reduced-motion:reduce){body .hfoot .netbtn::after{animation:none}}
/* mensaje abierto desde la portada: botón de volver del mismo tamaño que el avatar */
.panel.net .phead .dmback{position:absolute;left:12px;top:10px;width:44px;height:44px;min-height:0;padding:0;border-radius:14px;display:grid;place-items:center}
.panel.net .phead .dmback svg{width:22px;height:22px}

/* ---------- ronda 12: isla del mismo ancho que la barra, borde blanco hacia adentro, portada más compacta ---------- */
.isl{left:0;right:0;top:12px;bottom:12px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 6px 18px rgba(0,0,0,.4);clip-path:inset(0 100% 0 0 round 20px)}
body.open .isl{clip-path:inset(0 0 0 0 round 20px)}
.ib::before{inset:0}
.ib::after{inset:2px}
.ib.mid.on,.ib.home.on{scale:1}
.ib.mid.on::before,.ib.home.on::before{inset:0;box-shadow:0 0 10px rgba(255,255,255,.7)}
.ib.mid.on::after,.ib.home.on::after{inset:3px}
.bar{padding:8px 0}
.isl{top:8px;bottom:8px}
.avatar{margin-bottom:6px}
h1{margin-bottom:2px}
.bio{margin:0 2px 6px}
.socials{margin-bottom:8px}
.chip{margin-bottom:8px}
.block{margin-bottom:8px}
.video{padding:8px}
.thumb{aspect-ratio:16/7.4}
.vt{padding-top:6px}
.btn{min-height:46px}
.hfoot{height:36px;margin:0 0 4px}
.hfoot .netbtn,.hfoot .lang{width:108px;height:36px;font-size:13px}
.mtop{padding:12px 0 8px}
.mlogo{width:min(100%,calc(var(--htop,380px) - 12px - 8px - 40px - 20px))}
.sec,.panel{margin-bottom:8px}

/* ---------- ronda 12: feed más compacto ---------- */
.panel.net .wcomp.feedc{gap:6px;padding:6px 12px 2px}
.panel.net .wcomp.feedc textarea{height:38px;min-height:0;padding:8px 12px;border-radius:19px;line-height:20px;font-size:14px;overflow:hidden}
.wcomp .wact{display:flex;justify-content:flex-end;gap:8px}
.wcomp .wact .pill{height:34px;padding:0 16px;font-size:13px;display:flex;align-items:center;justify-content:center}
.wcomp .wact .pill.ghost2{background:#eee;color:#111}
.panel.dark .wcomp .wact .pill.ghost2{background:#262626;color:#fff}
.prow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.prow small{color:#888;font-size:12px;flex:none}
.prow .pauth{padding:0}
.ptop.alone{justify-content:flex-end;margin-top:-4px}
.cmtf input{box-sizing:border-box;height:36px;padding:0 14px}
.cmtf .sendbtn{width:36px;height:36px}.cmtf .sendbtn svg{width:18px;height:18px}

/* ---------- ronda 13: miniatura completa, letras de la isla pegadas, sin recuadro azul al tocar ---------- */
.thumb{aspect-ratio:16/9}
.lb{top:calc(100% + 3px)}
*{-webkit-tap-highlight-color:transparent}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}

/* ---------- ronda 13: red social flotante, translúcida y desenfocada (como Telegram) ---------- */
.panel.net{--nbg:251,250,248;--isl:rgba(17,17,17,.72)}
.panel.net.dark{--nbg:0,0,0}
/* la lista ocupa toda la pantalla; cabecera y barra flotan encima */
.panel.net .phead{position:absolute;top:0;left:0;right:0;height:64px;z-index:6;border:0;background:none!important;pointer-events:none}
.panel.net .phead>*{pointer-events:auto}
.panel.net .msgs{padding-top:76px;padding-bottom:104px}
.panel.net.indm .msgs,.panel.net.kb .msgs{padding-bottom:12px}
.panel.net:has(.cfoot .inputbar):not(.indm):not(.kb) .msgs{padding-bottom:168px}
.panel.net:not(.indm):not(.kb) .cfoot{position:absolute;left:0;right:0;bottom:84px;z-index:5}
.panel.net:not(.indm):not(.kb) .cfoot .inputbar{border-top:0;background:transparent}
.panel.net.dark .cfoot .inputbar{background:transparent}
.panel.net.isprof .msgs{padding-top:0}
.panel.net.isprof .pf{padding-top:76px}
/* barra inferior: isla un poco traslúcida, flotando */
.panel.net .nbar{position:absolute;left:12px;right:auto;bottom:max(12px,env(safe-area-inset-bottom));margin:0;z-index:7;background:var(--isl);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 6px 20px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.08)}
@keyframes nisl{
 0%,41%{opacity:0;width:56px;background:#fff}
 42%{opacity:1;width:56px;background:#fff;animation-timing-function:ease-out}
 52%{width:56px;background:#fff;animation-timing-function:cubic-bezier(.34,1.35,.5,1)}
 100%{opacity:1;width:calc(100% - 24px);background:rgba(17,17,17,.72)}}
/* cabecera: dos islas, perfil+título a la izquierda y herramientas a la derecha */
.panel.net .nleft,.panel.net .ptools,.panel.net .phead .hid,.panel.net .phead .tbtn.bk,.panel.net .phead .dmback,.panel.net .phead .dmn b{background:var(--isl);color:#fff;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 4px 16px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.08);border:0}
.panel.net .nleft{left:12px;top:10px;height:44px;gap:2px;padding:0 14px 0 2px;border-radius:999px}
.panel.net .nleft:not(:has(.ntl)){padding-right:2px}
.panel.net .ptools{right:12px;top:10px;height:44px;gap:0;padding:0 3px;border-radius:999px;box-sizing:border-box}
.panel.net .ptools .tbtn,.panel.net.dark .ptools .tbtn{background:none;border:0;color:#fff;box-shadow:none}
.panel.net .phead .nleft .tbtn.pillb{background:#fff;color:#111;margin-left:4px}
.panel.net .phead .nleft b,.panel.net.dark .phead .nleft b,.panel.net .phead .hid b,.panel.net.dark .phead .hid b,.panel.net .phead .dmn b,.panel.net.dark .phead .dmn b,.panel.net .phead .bk small,.panel.net.dark .phead .bk small,.panel.net.hasp .phead .bk small,.panel.net.dark.hasp .phead .bk small{color:#fff}
/* título centrado en la misma línea que los botones de los lados */
.panel.net .phead .hid{position:absolute;left:50%;top:10px;transform:translateX(-50%);height:44px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0;padding:0 18px;border-radius:999px;max-width:calc(100% - 190px);white-space:nowrap}
.panel.net .phead .hid b{background:none;box-shadow:none;border:0;padding:0;height:auto;display:block;overflow:hidden;text-overflow:ellipsis}
.panel.net .phead .tbtn.bk{position:absolute;left:12px;top:10px;height:44px;min-height:0;box-sizing:border-box;flex-direction:row;align-items:center;gap:4px;padding:0 14px 0 10px;border-radius:999px}
.panel.net .phead .tbtn.bk small{font:600 13px Inter,system-ui,sans-serif}
.panel.net .phead .dmback{border-radius:50%;left:12px;top:10px}
.panel.net .phead .dmn{left:68px;right:68px;top:10px;height:44px}
.panel.net .phead .dmn b{box-sizing:border-box;height:44px;display:flex;align-items:center;padding:0 18px;border-radius:999px;pointer-events:auto}
/* etiqueta Foro: recuadro pequeño bajo la foto, como Editar perfil */
.panel.net .pf .pforo{pointer-events:none;justify-self:center}
.panel.net .phead .hid.dmn{position:absolute;left:96px;right:96px;top:10px;transform:none;height:44px;padding:0;max-width:none;background:none;box-shadow:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none;justify-content:center}
.panel.net .phead .dmn b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel.net{--isl:rgba(20,20,22,.6)}
@keyframes nisl{
 0%,41%{opacity:0;width:56px;background:#fff}
 42%{opacity:1;width:56px;background:#fff;animation-timing-function:ease-out}
 52%{width:56px;background:#fff;animation-timing-function:cubic-bezier(.34,1.35,.5,1)}
 100%{opacity:1;width:calc(100% - 24px);background:rgba(20,20,22,.6)}}
.panel.net .phead .hid.dmn b{background:var(--isl);box-shadow:0 4px 16px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.08);height:44px;padding:0 18px;display:flex;align-items:center}

/* islas como en Telegram: tinte translúcido y desenfoque fuerte solo dentro de la isla */
.panel.net .nbar,.panel.net .nleft,.panel.net .ptools,.panel.net .phead .hid,.panel.net .phead .tbtn.bk,.panel.net .phead .dmback,.panel.net .phead .dmn b{-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}

/* ---------- ronda 14 ---------- */
.seo-pre{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Foro: el nombre justo bajo la foto, sin recuadro */
.panel.net .pf .pforo{pointer-events:auto;margin:2px 0 0}
/* fotos del perfil: más grandes y más juntas */
.stories{grid-template-columns:repeat(4,1fr);gap:6px;justify-content:stretch;padding:10px 8px}
.story{width:auto;height:auto;aspect-ratio:1;border-radius:14px}
/* fotos de Comunidad: casi de borde a borde, un poco más anchas que la isla de abajo */
.panel.net:not(.isprof) .msgs>.post{margin:8px -8px}
/* chat: la barra de escribir más cerca de la isla */
.panel.net:not(.indm):not(.kb) .cfoot{bottom:70px}
.panel.net:not(.indm):not(.kb) .cfoot .inputbar{padding:6px 12px 4px}
.panel.net:has(.cfoot .inputbar):not(.indm):not(.kb) .msgs{padding-bottom:150px}

/* ---------- ronda 15: lista hasta el borde inferior, perfil más compacto ---------- */
.panel.net .err{position:absolute;left:0;right:0;bottom:84px;z-index:8;pointer-events:none;text-align:center}
.panel.net.isprof .pf{padding-top:68px;padding-bottom:4px;gap:4px}

/* ---------- ronda 16: Editar perfil con la cabecera fija y a todo el ancho como el perfil; bio en una línea ---------- */
.hprev{margin:-16px 0 10px;border:0;border-radius:0 0 18px 18px;padding:20px 12px 10px;gap:4px}
.hprev .hprevav{width:72px;height:72px;font-size:38px}
.hprev .hpbio{max-width:100%}
.pfbio{max-width:100%}
.panel.net .whowrap{z-index:8}
.panel.net .who .hprev{margin:-18px -18px 10px;padding-top:22px}
.panel.net .who{padding-top:0}
.panel.net .who .hprev{margin:0 -18px 10px}

/* ---------- ronda 17: «Menú» visible con la isla cerrada; Editar perfil se desplaza completo; foto del perfil más arriba ---------- */
.lb.lbm{transform:translate(-50%,0)}
body:not(.open) .lb.lbm{opacity:1;transition:opacity .45s 1.2s}
body.open .lb.lbm,body.menu .lb.lbm{opacity:0;transition:opacity .15s}
.hprev,.panel.net .who .hprev{position:static}
.panel.net.isprof .pf{padding-top:20px}

/* ronda 19: sin destello del degradado antes de que cargue la página */
.page:not(.rd){background:#000}