/* ☁️ El búnker de Ⱥrmin — estilos (claro + oscuro) */
:root{
  --sky-1:#d9eeff; --sky-2:#eaf4ff; --cream:#fffaf3;
  --celeste:#8ccaf7; --celeste-deep:#4f9fdc; --lav:#c9b8f5; --lav-soft:#ece5ff;
  --pink:#ffc9dc; --pink-soft:#ffe8f0; --mint:#c8f0e4;
  --ink:#3d4a6b; --ink-soft:#6f7b99; --ink-faint:#9aa5c0;
  --card:rgba(255,255,255,.78); --card-border:rgba(255,255,255,.9);
  --shadow:0 10px 30px -12px rgba(79,110,170,.28), 0 2px 6px rgba(120,140,200,.08);
  --shadow-hover:0 22px 44px -16px rgba(79,110,170,.38), 0 4px 10px rgba(120,140,200,.10);
  --radius:26px;
  --c-x:#5b6b8f; --c-instagram:#e58fb6; --c-youtube:#f28c9b;
}
*{box-sizing:border-box}
/* el degradado va en <html> para que el cielo (.sky, z-index:-1) quede por encima del fondo */
html{scroll-behavior:smooth; background:var(--cream) linear-gradient(180deg,#cfe8ff 0%,#e6f1ff 28%,#f3ecff 60%,#fff4f4 85%,var(--cream) 100%) fixed}
body{
  margin:0; min-height:100vh; color:var(--ink);
  font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit}
::selection{background:var(--pink)}

/* ---------- cielo ---------- */
.sky{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.glow{position:absolute; border-radius:50%; filter:blur(70px); opacity:.65}
.glow-1{width:46vw; height:46vw; left:-12vw; top:-10vw; background:#bfe2ff}
.glow-2{width:40vw; height:40vw; right:-10vw; top:18vh; background:#e3d6ff}
.glow-3{width:50vw; height:40vw; left:20vw; bottom:-18vw; background:#ffdbe8}
.cloud{position:absolute; color:#fff; opacity:.85; filter:drop-shadow(0 10px 18px rgba(130,170,230,.18))}
.cloud-1{width:260px; top:8vh; left:-300px; animation:drift 95s linear infinite}
.cloud-2{width:170px; top:38vh; left:-200px; opacity:.6; animation:drift 130s linear infinite; animation-delay:-60s}
.cloud-3{width:320px; top:68vh; left:-340px; opacity:.55; animation:drift 160s linear infinite; animation-delay:-30s}
.cloud-4{width:120px; top:22vh; left:-140px; opacity:.7; animation:drift 110s linear infinite; animation-delay:-85s}
@keyframes drift{to{transform:translateX(calc(100vw + 420px))}}
.sparkles{position:absolute; inset:0;
  background-image:
    radial-gradient(2px 2px at 12% 18%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 12%,#fff 50%,transparent 51%),
    radial-gradient(2px 2px at 64% 42%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 30% 60%,#fff 50%,transparent 51%),
    radial-gradient(2px 2px at 88% 70%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 46% 86%,#fff 50%,transparent 51%);
  animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.4}to{opacity:1}}

/* ---------- encabezado ---------- */
.hero{text-align:center; padding:64px 20px 26px; max-width:760px; margin:0 auto}
.avatar{position:relative; display:block; width:116px; height:116px; margin:0 auto 18px; border-radius:50%; padding:4px;
  background:linear-gradient(140deg,#9fd3ff,#c9b8f5 55%,#ffc4da);
  box-shadow:0 0 0 6px rgba(255,255,255,.7), 0 18px 40px -14px rgba(90,120,200,.55);
  animation:float 6s ease-in-out infinite; transition:box-shadow .3s}
.avatar img{display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; background:#fff; border:3px solid #fff}
.avatar:hover{box-shadow:0 0 0 6px rgba(255,255,255,.9), 0 22px 46px -12px rgba(90,120,200,.65)}
.avatar span{position:absolute; right:-4px; top:2px; font-size:20px; color:#fff; transform:rotate(12deg); text-shadow:0 2px 6px rgba(120,150,220,.6)}
.avatar span::before{content:"✦"; position:absolute; left:-104px; top:70px; font-size:13px; color:#fff}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.eyebrow{margin:0; font-family:"Caveat",cursive; font-size:24px; color:var(--ink-soft); letter-spacing:.5px}
/* Merriweather: tiene la Ⱥ (U+023A); Fraunces no */
.title{margin:2px 0 8px; font-family:"Merriweather","Noto Serif",Georgia,serif; font-weight:700; font-style:italic;
  font-size:clamp(36px,6.4vw,64px); line-height:1.12; letter-spacing:-.5px; padding:0 .08em;
  background:linear-gradient(100deg,#4f9fdc 0%,#8c7ce6 50%,#e58fb6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.handle{display:inline-block; font-weight:800; font-size:17px; text-decoration:none; color:var(--celeste-deep);
  padding:4px 14px; border-radius:999px; background:rgba(255,255,255,.6); border:1px solid #fff; transition:.2s}
.handle:hover{background:#fff; transform:translateY(-1px)}
.tagline{margin:14px auto 0; max-width:460px; color:var(--ink-soft); font-size:17px}

.socials{display:flex; justify-content:center; gap:12px; margin-top:22px; flex-wrap:wrap}
.social{display:inline-flex; align-items:center; gap:8px; padding:10px 16px 10px 12px; border-radius:999px;
  text-decoration:none; font-weight:700; font-size:14.5px; color:var(--ink);
  background:rgba(255,255,255,.72); border:1px solid #fff; box-shadow:var(--shadow);
  transition:transform .2s, box-shadow .2s, background .2s; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.social .ico{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:#fff}
.social .ico svg{width:15px; height:15px}
.social[data-net="x"] .ico{background:linear-gradient(135deg,#8a97b8,#56647f)}
.social[data-net="instagram"] .ico{background:linear-gradient(135deg,#ffc58f,#f78fb3 50%,#b89af5)}
.social[data-net="youtube"] .ico{background:linear-gradient(135deg,#ffaab5,#f2788a)}
.social[data-net="tiktok"] .ico{background:linear-gradient(135deg,#7fd6d8,#e98aae)}
a.social:hover{transform:translateY(-3px); box-shadow:var(--shadow-hover); background:#fff}
.social.soon{opacity:.62; cursor:default; box-shadow:none}
.social.soon .ico{filter:grayscale(.35)}
.soon-tag{font-family:"Caveat",cursive; font-size:17px; font-weight:700; color:var(--c-youtube); margin-left:2px}

/* ---------- filtros ---------- */
main{max-width:1240px; margin:0 auto; padding:0 20px 40px}
.toolbar{position:sticky; top:12px; z-index:5; display:flex; flex-direction:column; align-items:center; gap:10px; margin:18px 0 8px}
.chips{display:flex; gap:6px; padding:6px; border-radius:999px; background:rgba(255,255,255,.66);
  border:1px solid #fff; box-shadow:var(--shadow); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  overflow-x:auto; max-width:100%; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{appearance:none; border:0; cursor:pointer; font:inherit; font-weight:700; font-size:14.5px; color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:999px; background:transparent;
  white-space:nowrap; transition:background .2s, color .2s, transform .15s}
.chip svg{width:14px; height:14px}
.chip:hover{color:var(--ink); background:rgba(255,255,255,.7)}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{color:#fff; background:linear-gradient(120deg,#7dbef2,#a79af0); box-shadow:0 6px 16px -6px rgba(110,130,230,.6)}
.chip[data-filter="instagram"][aria-pressed="true"]{background:linear-gradient(120deg,#ffb3a0,#f28fbc 55%,#b39cf3)}
.chip[data-filter="youtube"][aria-pressed="true"]{background:linear-gradient(120deg,#ffb0bb,#f2808f)}
.chip[data-filter="tiktok"][aria-pressed="true"]{background:linear-gradient(120deg,#7fd6d8,#e98aae)}
.chip[data-filter="x"][aria-pressed="true"]{background:linear-gradient(120deg,#93a2c4,#5f6d8c)}
.chip .n{font-size:12px; font-weight:800; min-width:20px; padding:1px 6px; border-radius:999px; background:rgba(120,140,190,.14)}
.chip[aria-pressed="true"] .n{background:rgba(255,255,255,.3)}
.active-tag{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-soft)}
.active-tag button{border:0; cursor:pointer; font:inherit; font-weight:700; color:#8c6fe0; background:var(--lav-soft); padding:5px 12px; border-radius:999px}
/* fila de etiquetas */
.tag-row{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:900px; margin:4px auto 6px; padding:4px 6px}
.tag-row[hidden]{display:none}
.tag-pill{appearance:none; cursor:pointer; font:inherit; font-weight:700; font-size:13.5px; color:#7a68d6; white-space:nowrap;
  display:inline-flex; align-items:center; gap:4px; padding:5px 8px 5px 12px; border-radius:999px;
  background:rgba(255,255,255,.62); border:1px solid #fff; box-shadow:0 4px 12px -8px rgba(110,120,200,.45);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .2s, color .2s, transform .15s, box-shadow .2s}
.tag-pill .h{opacity:.55; margin-right:-2px}
.tag-pill .n{font-size:11.5px; font-weight:800; min-width:20px; padding:1px 6px; border-radius:999px; background:var(--lav-soft); color:#8c7be0; text-align:center}
.tag-pill .x{font-size:11px; margin-left:2px; opacity:.85}
.tag-pill:hover{background:#fff; transform:translateY(-1px)}
.tag-pill:active{transform:scale(.97)}
.tag-pill:focus-visible{outline:3px solid var(--lav); outline-offset:2px}
.tag-pill[aria-pressed="true"]{color:#fff; border-color:transparent; background:linear-gradient(120deg,#a79af0,#e58fb6); box-shadow:0 6px 16px -6px rgba(170,120,220,.65)}
.tag-pill[aria-pressed="true"] .h{opacity:.8}
.tag-pill[aria-pressed="true"] .n{background:rgba(255,255,255,.3); color:#fff}
@media (max-width:640px){
  .tag-row{flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; margin:2px -12px 4px; padding:4px 12px 8px;
    -webkit-mask:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent); mask:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
  .tag-row::-webkit-scrollbar{display:none}
  .tag-pill{font-size:13px; flex:none}
}
.count{text-align:center; margin:6px 0 22px; font-family:"Caveat",cursive; font-size:22px; color:var(--ink-faint)}

/* ---------- muro (masonry) ---------- */
.wall{--gap:22px; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr));
  grid-auto-rows:4px; column-gap:var(--gap); row-gap:0; align-items:start}
.wall>.card{align-self:start}
.wall>.card[hidden]{display:none}

.card{position:relative; background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:14px 14px 12px; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:transform .25s ease, box-shadow .25s ease; animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-hover)}
@keyframes rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
.card-top{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:2px 4px 10px}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; letter-spacing:.3px;
  padding:4px 10px 4px 6px; border-radius:999px; color:#fff}
.badge svg{width:12px; height:12px}
.badge .dot{width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.25); display:grid; place-items:center}
.badge.x{background:linear-gradient(120deg,#93a2c4,#5f6d8c)}
.badge.instagram{background:linear-gradient(120deg,#ffb3a0,#f28fbc 55%,#b39cf3)}
.badge.youtube{background:linear-gradient(120deg,#ffb0bb,#f2808f)}
.date{font-size:12.5px; color:var(--ink-faint); font-weight:600}

.embed{position:relative; border-radius:18px; overflow:hidden; min-height:220px; background:linear-gradient(160deg,#f3f8ff,#f6f1ff)}
.embed.ready{min-height:0; background:transparent}
.embed .twitter-tweet, .embed .twitter-tweet-rendered{margin:0 auto!important}
.embed iframe{display:block; max-width:100%!important}
.embed .instagram-media{margin:0!important; min-width:0!important; width:100%!important; max-width:100%!important; border-radius:16px!important; box-shadow:none!important; border:1px solid #eef!important}
.tw-holder.pending{position:absolute; left:0; right:0; top:0; visibility:hidden; pointer-events:none}
.yt{position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:#e9eefb}
.yt.short{aspect-ratio:9/16; max-height:640px; margin:0 auto}
.yt iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* placeholder mientras carga */
.loading{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--ink-faint); font-weight:700; font-size:14px}
.loading .puff{width:64px; color:#fff; filter:drop-shadow(0 6px 10px rgba(130,160,230,.3)); animation:float 2.4s ease-in-out infinite}
.embed::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); background-size:220% 100%;
  animation:shimmer 1.8s linear infinite}
.embed.ready::after,.embed.failed::after{display:none}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}

/* respaldo si el embed no carga */
.fallback{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; padding:34px 20px; min-height:220px; text-decoration:none}
.fallback .big{width:54px; height:54px; border-radius:18px; display:grid; place-items:center; color:#fff}
.fallback .big svg{width:24px; height:24px}
.fallback strong{font-family:"Fraunces",serif; font-style:italic; font-size:19px; font-weight:600}
.fallback small{color:var(--ink-soft); max-width:240px; word-break:break-word}

.note{margin:12px 6px 2px; font-family:"Caveat",cursive; font-size:23px; line-height:1.2; color:#6a5bc8}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin:10px 4px 0}
.tag{border:0; cursor:pointer; font:inherit; font-size:12.5px; font-weight:700; color:#7a68d6; background:var(--lav-soft); padding:3px 10px; border-radius:999px; transition:.2s}
.tag:hover{background:#ddd2ff}
.card-foot{display:flex; justify-content:flex-end; margin-top:10px}
.open{display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-weight:800; font-size:13.5px; color:var(--celeste-deep);
  padding:7px 14px; border-radius:999px; background:linear-gradient(120deg,#eaf5ff,#f1ecff); transition:.2s}
.open svg{width:14px; height:14px; transition:transform .2s}
.open:hover{background:linear-gradient(120deg,#d7ecff,#e6ddff)}
.open:hover svg{transform:translate(2px,-2px)}

/* ---------- estado vacío ---------- */
.empty{text-align:center; max-width:520px; margin:30px auto 20px; padding:46px 28px 40px; border-radius:36px;
  background:rgba(255,255,255,.62); border:1px solid #fff; box-shadow:var(--shadow); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.empty-art{position:relative; height:120px; margin-bottom:10px}
.e-cloud{position:absolute; color:#fff; filter:drop-shadow(0 10px 16px rgba(120,160,230,.3))}
.e-cloud-a{width:150px; left:calc(50% - 98px); top:16px; animation:float 5s ease-in-out infinite}
.e-cloud-b{width:96px; left:calc(50% + 4px); top:54px; color:#f4efff; animation:float 6.5s ease-in-out infinite reverse}
.e-star{position:absolute; color:#b9a8f5; animation:twinkle 2.6s ease-in-out infinite alternate}
.e-star.s1{left:22%; top:10px; font-size:18px}
.e-star.s2{right:24%; top:0; font-size:22px; color:#f3a6c4; animation-delay:-1s}
.e-star.s3{right:30%; top:92px; font-size:13px; color:#8cc6f2; animation-delay:-2s}
.empty h2{margin:6px 0 10px; font-family:"Fraunces",Georgia,serif; font-style:italic; font-weight:600; font-size:28px; color:var(--ink)}
.empty p{margin:0 auto; max-width:380px; color:var(--ink-soft)}

/* ---------- pie ---------- */
.footer{text-align:center; padding:30px 20px 46px; color:var(--ink-soft); font-size:14.5px}
.footer p{margin:4px 0}
.footer a{font-weight:800; color:var(--celeste-deep); text-decoration:none}
.footer .legal{font-size:12.5px; color:var(--ink-faint); max-width:520px; margin:8px auto 0}
.to-top{position:fixed; right:18px; bottom:18px; width:46px; height:46px; border-radius:50%; border:1px solid #fff; cursor:pointer;
  font-size:20px; font-weight:800; color:#fff; background:linear-gradient(135deg,#8ccaf7,#b6a3f3); box-shadow:var(--shadow-hover); transition:transform .2s}
.to-top:hover{transform:translateY(-3px)}

/* ---------- móvil ---------- */
@media (max-width:640px){
  .hero{padding:44px 18px 14px}
  .avatar{width:96px; height:96px}
  .avatar span::before{left:-86px; top:58px}
  .tagline{font-size:16px}
  .social{padding:8px 13px 8px 9px; font-size:13.5px}
  .social .ico{width:26px; height:26px}
  main{padding:0 12px 30px}
  .toolbar{top:8px}
  .chip{padding:8px 11px; font-size:13.5px; gap:5px}
  .chips{gap:2px}
  .card{padding:12px 12px 10px; border-radius:22px}
  .wall{--gap:16px}
  .empty{padding:36px 20px 32px; border-radius:28px}
  .empty h2{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
}
@media (max-width:420px){ .chip .n{display:none} .chip{padding:8px 12px} }

/* ---------- botón de tema ---------- */
.theme-toggle{position:absolute; top:16px; right:16px; z-index:20; width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:#f2a43a; background:rgba(255,255,255,.72); border:1px solid #fff; box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:transform .25s, background .3s, color .3s, box-shadow .3s}
.theme-toggle:hover{transform:translateY(-2px) rotate(-12deg); box-shadow:var(--shadow-hover)}
.theme-toggle:focus-visible{outline:3px solid var(--celeste); outline-offset:3px}
.theme-toggle svg{grid-area:1/1; width:22px; height:22px; transition:transform .45s cubic-bezier(.3,1.4,.5,1), opacity .3s}
.theme-toggle .moon-ico{opacity:0; transform:rotate(-70deg) scale(.4)}
[data-theme="dark"] .theme-toggle .sun{opacity:0; transform:rotate(90deg) scale(.4)}
[data-theme="dark"] .theme-toggle .moon-ico{opacity:1; transform:none}
@media (max-width:640px){ .theme-toggle{top:12px; right:12px; width:42px; height:42px} }

/* capas que solo se ven de noche */
.stars,.moon,.shooting{display:none}

/* ---------- 🌙 modo oscuro: cielo de medianoche ---------- */
[data-theme="dark"]{
  color-scheme:dark;
  --cream:#0d1233;
  --celeste:#7cc4ff; --celeste-deep:#9fd4ff; --lav:#a99af0; --lav-soft:rgba(169,154,240,.16);
  --pink:#f3a6c8; --pink-soft:rgba(243,166,200,.14);
  --ink:#e4eaff; --ink-soft:#a9b4dc; --ink-faint:#7c88b4;
  --card:rgba(24,31,72,.62); --card-border:rgba(160,180,255,.14);
  --shadow:0 12px 34px -14px rgba(0,0,10,.75), 0 0 0 1px rgba(140,160,255,.05);
  --shadow-hover:0 24px 50px -16px rgba(0,0,12,.85), 0 0 34px -8px rgba(124,170,255,.28);
}
html[data-theme="dark"]{background:#1a1236 linear-gradient(180deg,#0a0f2c 0%,#111a46 30%,#1b1a52 62%,#26194a 86%,#1a1236 100%) fixed}
[data-theme="dark"] ::selection{background:#5b4aa8; color:#fff}
[data-theme="dark"] .glow{opacity:.5; filter:blur(90px)}
[data-theme="dark"] .glow-1{background:#1f4aa0}
[data-theme="dark"] .glow-2{background:#4b3398}
[data-theme="dark"] .glow-3{background:#7a2f6e; opacity:.35}
[data-theme="dark"] .cloud,[data-theme="dark"] .sparkles{display:none}
[data-theme="dark"] .stars,[data-theme="dark"] .moon,[data-theme="dark"] .shooting{display:block}
.stars{position:absolute; inset:-10px; background-repeat:repeat; animation:twinkle 4.5s ease-in-out infinite alternate}
.stars-1{background-size:340px 300px; background-image:
  radial-gradient(1.4px 1.4px at 20px 30px,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 120px 80px,#dfe8ff 50%,transparent 51%),
  radial-gradient(1.6px 1.6px at 260px 40px,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 300px 190px,#cfdcff 50%,transparent 51%),
  radial-gradient(1.2px 1.2px at 70px 220px,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 190px 260px,#e8e0ff 50%,transparent 51%),
  radial-gradient(1.3px 1.3px at 160px 150px,#fff 50%,transparent 51%)}
.stars-2{background-size:520px 460px; animation-duration:7s; animation-delay:-3s; background-image:
  radial-gradient(2px 2px at 60px 90px,#fff 45%,rgba(180,200,255,.25) 60%,transparent 70%),
  radial-gradient(2.4px 2.4px at 400px 60px,#ffe9f4 45%,rgba(255,180,220,.25) 60%,transparent 70%),
  radial-gradient(1.8px 1.8px at 300px 330px,#fff 45%,rgba(180,200,255,.25) 60%,transparent 70%),
  radial-gradient(2.2px 2.2px at 470px 400px,#e3f1ff 45%,rgba(160,200,255,.25) 60%,transparent 70%),
  radial-gradient(1.6px 1.6px at 150px 380px,#fff 45%,transparent 70%)}
.moon{position:absolute; width:92px; height:92px; top:84px; right:9vw; border-radius:50%;
  background:radial-gradient(circle at 36% 36%,#fffaf0 0%,#f3eedc 45%,#d9d4f0 100%);
  box-shadow:0 0 40px 8px rgba(220,225,255,.28), 0 0 120px 30px rgba(140,160,255,.16);
  -webkit-mask:radial-gradient(circle at 70% 34%,transparent 40%,#000 41%); mask:radial-gradient(circle at 70% 34%,transparent 40%,#000 41%);
  opacity:.9; animation:float 9s ease-in-out infinite}
.shooting{position:absolute; top:14vh; left:-200px; width:160px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9)); transform:rotate(18deg);
  animation:shoot 14s ease-in 3s infinite; opacity:0}
@keyframes shoot{0%{opacity:0; transform:translate(0,0) rotate(18deg)}2%{opacity:1}9%{opacity:0; transform:translate(70vw,23vw) rotate(18deg)}100%{opacity:0; transform:translate(70vw,23vw) rotate(18deg)}}

[data-theme="dark"] .avatar{background:linear-gradient(140deg,#5fb2ff,#9b86f0 55%,#f08fc0);
  box-shadow:0 0 0 6px rgba(150,170,255,.14), 0 0 46px -4px rgba(120,150,255,.55)}
[data-theme="dark"] .avatar img{border-color:#121a45}
[data-theme="dark"] .avatar span{color:#fff6c9; text-shadow:0 0 10px rgba(255,240,170,.8)}
[data-theme="dark"] .avatar span::before{color:#cfe0ff}
[data-theme="dark"] .title{background-image:linear-gradient(100deg,#8fd0ff 0%,#b8a6ff 50%,#ffb1d3 100%);
  filter:drop-shadow(0 0 18px rgba(150,160,255,.35))}
[data-theme="dark"] .handle{background:rgba(124,170,255,.12); border-color:rgba(160,190,255,.25)}
[data-theme="dark"] .handle:hover{background:rgba(124,170,255,.22)}
[data-theme="dark"] .social,[data-theme="dark"] .chips,[data-theme="dark"] .theme-toggle,[data-theme="dark"] .empty{
  background:rgba(22,29,70,.66); border-color:rgba(160,180,255,.16)}
[data-theme="dark"] a.social:hover{background:rgba(36,46,104,.85)}
[data-theme="dark"] .theme-toggle{color:#ffe7a3; box-shadow:var(--shadow), 0 0 22px -6px rgba(255,231,163,.45)}
[data-theme="dark"] .chip:hover{background:rgba(124,150,255,.14)}
[data-theme="dark"] .chip .n{background:rgba(160,180,255,.16)}
[data-theme="dark"] .chip[aria-pressed="true"]{background:linear-gradient(120deg,#3f86d9,#7a63d8); box-shadow:0 6px 20px -6px rgba(110,130,255,.7)}
[data-theme="dark"] .chip[data-filter="x"][aria-pressed="true"],[data-theme="dark"] .badge.x{background:linear-gradient(120deg,#56689a,#2f3c66)}
[data-theme="dark"] .chip[data-filter="instagram"][aria-pressed="true"],[data-theme="dark"] .badge.instagram{background:linear-gradient(120deg,#d9806e,#c9568f 55%,#7d5fd0)}
[data-theme="dark"] .chip[data-filter="tiktok"][aria-pressed="true"]{background:linear-gradient(120deg,#2f9ea3,#c9568f)}
[data-theme="dark"] .chip[data-filter="youtube"][aria-pressed="true"],[data-theme="dark"] .badge.youtube{background:linear-gradient(120deg,#d97a88,#b84a5e)}
[data-theme="dark"] .card:hover{border-color:rgba(160,190,255,.28)}
[data-theme="dark"] .embed{background:linear-gradient(160deg,#1a2356,#241d55)}
[data-theme="dark"] .embed.ready{background:transparent}
[data-theme="dark"] .embed::after{background-image:linear-gradient(100deg,transparent 30%,rgba(160,180,255,.12) 50%,transparent 70%)}
[data-theme="dark"] .loading .puff{color:#3a4688; filter:drop-shadow(0 0 10px rgba(124,150,255,.4))}
/* Instagram no tiene modo oscuro: lo enmarcamos como una "foto" con borde suave que brilla */
[data-theme="dark"] .card[data-net="instagram"] .embed.ready{padding:6px; border-radius:20px;
  background:linear-gradient(140deg,rgba(124,180,255,.22),rgba(169,140,240,.18) 55%,rgba(240,143,192,.2))}
[data-theme="dark"] .embed .instagram-media{border:0!important; box-shadow:0 8px 24px -10px rgba(0,0,0,.6)!important}
[data-theme="dark"] .yt{background:#141a40}
[data-theme="dark"] .fallback small{color:var(--ink-soft)}
[data-theme="dark"] .note{color:#c7b8ff}
[data-theme="dark"] .tag{color:#cfc3ff}
[data-theme="dark"] .tag:hover{background:rgba(169,154,240,.3)}
[data-theme="dark"] .tag-pill{color:#cfc3ff; background:rgba(22,29,70,.66); border-color:rgba(160,180,255,.16); box-shadow:0 4px 14px -8px rgba(0,0,10,.7)}
[data-theme="dark"] .tag-pill:hover{background:rgba(36,46,104,.85)}
[data-theme="dark"] .tag-pill .n{background:rgba(169,154,240,.18); color:#d6cbff}
[data-theme="dark"] .tag-pill[aria-pressed="true"]{color:#fff; border-color:transparent; background:linear-gradient(120deg,#7a63d8,#c9568f); box-shadow:0 6px 20px -6px rgba(170,110,255,.6)}
[data-theme="dark"] .tag-pill[aria-pressed="true"] .n{background:rgba(255,255,255,.22); color:#fff}
[data-theme="dark"] .active-tag button{color:#d6cbff}
[data-theme="dark"] .open{background:linear-gradient(120deg,rgba(124,170,255,.16),rgba(169,140,240,.16))}
[data-theme="dark"] .open:hover{background:linear-gradient(120deg,rgba(124,170,255,.3),rgba(169,140,240,.3))}
[data-theme="dark"] .e-cloud{color:#2b3575; filter:drop-shadow(0 0 16px rgba(124,150,255,.35))}
[data-theme="dark"] .e-cloud-b{color:#3a3480}
[data-theme="dark"] .to-top{border-color:rgba(160,180,255,.3); background:linear-gradient(135deg,#3f86d9,#7a63d8)}
@media (max-width:640px){ .moon{width:54px; height:54px; top:72px; right:5vw; opacity:.75} }
@media (max-width:420px){ .chip{padding:8px 9px; gap:4px; font-size:13px} .chips{gap:0} }
@media (max-width:370px){ .chip{padding:8px 6px; font-size:12.5px} }

/* 📌 posts fijados */
.card .pin{font-size:12px; font-weight:700; color:#4f86b8; background:rgba(142,197,232,.28); padding:3px 9px; border-radius:999px; white-space:nowrap}
[data-theme="dark"] .card .pin{color:#bcd9f5; background:rgba(142,197,232,.18)}
.card.pinned{box-shadow:0 0 0 2px rgba(142,197,232,.55), var(--shadow, 0 8px 24px rgba(120,160,210,.18))}

/* ---- TikTok ---- */
.tt{position:relative; width:100%; max-width:340px; aspect-ratio:325/578; margin:0 auto; border-radius:16px; overflow:hidden; background:#0e1030}
.tt iframe{position:absolute; inset:0; width:100%; height:100%; border:0}


/* ---- etiquetas: "ver todas" ---- */
.tag-more{appearance:none; cursor:pointer; font:inherit; font-weight:800; font-size:13px; color:#5a86c4; background:transparent; border:1.5px dashed rgba(90,134,196,.5); border-radius:999px; padding:6px 14px; white-space:nowrap}
.tag-more:hover{background:rgba(142,197,232,.2)}
.tag-more:focus-visible{outline:3px solid var(--lav); outline-offset:2px}
[data-theme="dark"] .tag-more{color:#bcd9f5; border-color:rgba(188,217,245,.4)}
[data-theme="dark"] .tag-more:hover{background:rgba(142,197,232,.14)}
@media (max-width:640px){ .tag-more{flex:none} .tag-row.open{flex-wrap:wrap; justify-content:center; overflow:visible; -webkit-mask:none; mask:none; margin:4px auto 6px} }

/* ---- radio lofi ---- */
.radio{position:fixed; left:18px; bottom:18px; z-index:30; display:flex; flex-direction:column; align-items:flex-start; gap:10px}
.radio-fab{position:relative; width:46px; height:46px; border-radius:50%; border:1px solid #fff; cursor:pointer; color:#fff; font-size:21px; display:grid; place-items:center;
  background:linear-gradient(135deg,#7fc0f2,#b4a2f5); box-shadow:var(--shadow); transition:transform .2s}
.radio-fab:hover{transform:translateY(-3px)}
.radio-fab:focus-visible{outline:3px solid var(--celeste); outline-offset:3px}
.radio-fab .eq{position:absolute; inset:0; display:none; align-items:flex-end; justify-content:center; gap:3px; padding-bottom:9px}
.radio-fab .eq i{width:3px; height:6px; border-radius:2px; background:#fff; animation:eq 1s ease-in-out infinite}
.radio-fab .eq i:nth-child(2){animation-delay:.25s} .radio-fab .eq i:nth-child(3){animation-delay:.5s}
.radio.on .radio-fab .note{display:none} .radio.on .radio-fab .eq{display:flex}
@keyframes eq{0%,100%{height:5px} 50%{height:18px}}
.radio-panel{width:264px; padding:12px 12px 10px; border-radius:20px; background:rgba(255,255,255,.88); border:1px solid #fff; box-shadow:var(--shadow-hover); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:#2b3354}
.radio-panel[hidden]{display:none}
.radio-head{display:flex; align-items:center; justify-content:space-between; margin:0 2px 8px; font-size:15px}
.radio-x{appearance:none; border:0; background:rgba(142,197,232,.28); color:inherit; width:26px; height:26px; border-radius:50%; cursor:pointer; font-size:16px; line-height:1}
.radio-screen{width:240px; height:135px; border-radius:12px; overflow:hidden; background:#10133a; margin:0 auto 10px}
.radio-screen iframe{width:240px; height:135px; display:block; border:0; pointer-events:none}
.radio-play{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:9px 12px; border:0; border-radius:999px; cursor:pointer; font:inherit; font-weight:800; font-size:14px; color:#fff; background:linear-gradient(120deg,#6fb3ee,#a79af0)}
.radio-play:hover{filter:brightness(1.05)}
.radio-vol{display:flex; align-items:center; gap:8px; margin:10px 2px 0}
.radio-vol input{flex:1; accent-color:#7aa7f0}
.radio-status{margin:8px 2px 0; font-size:13px; color:#5d6788; text-align:center}
.radio-credit{margin:4px 2px 0; font-size:11.5px; color:#8791b3; text-align:center}
.radio-credit a{color:inherit}
[data-theme="dark"] .radio-panel{background:rgba(18,24,62,.9); border-color:rgba(160,180,255,.2); color:#eef0ff}
[data-theme="dark"] .radio-status{color:#b9c0e6}
[data-theme="dark"] .radio-credit{color:#8f98c6}
[data-theme="dark"] .radio-fab{border-color:rgba(160,180,255,.3); background:linear-gradient(135deg,#3f86d9,#7a63d8)}
@media (max-width:640px){ .radio{left:12px; bottom:12px} .radio-panel{width:min(264px, calc(100vw - 24px))} }
@media (prefers-reduced-motion:reduce){ .radio-fab .eq i{animation:none; height:12px} }

/* ---- tarjeta propia para tuits que X no deja incrustar ---- */
.x-card{display:flex; flex-direction:column; gap:10px; padding:14px 16px; border-radius:16px; background:#fff; border:1px solid #e8eefb; color:#2b3354; text-decoration:none; transition:transform .2s, box-shadow .2s}
.x-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover)}
.xc-head{display:flex; gap:6px; align-items:baseline; flex-wrap:wrap}
.xc-head span{font-size:13px; color:#6b7799}
.xc-text{margin:0; font-size:15px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere}
.xc-media{position:relative; display:grid; gap:3px; border-radius:12px; overflow:hidden}
.xc-media.n2{grid-template-columns:1fr 1fr}
.xc-media img{width:100%; height:100%; object-fit:cover; display:block; max-height:340px}
.xc-play{position:absolute; inset:0; margin:auto; width:52px; height:52px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; display:grid; place-items:center; font-size:20px}
.xc-quote{display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid #dbe5f7; border-radius:14px}
[data-theme="dark"] .x-card{background:rgba(22,29,70,.66); border-color:rgba(160,180,255,.16); color:#eef0ff}
[data-theme="dark"] .xc-head span{color:#aab3dc}
[data-theme="dark"] .xc-quote{border-color:rgba(160,180,255,.22)}
.xc-media video{width:100%; max-height:420px; display:block; background:#000; border-radius:12px}

.title.tagline-title{font-size:clamp(24px,4.6vw,40px); line-height:1.25; margin:6px auto 22px; max-width:640px; padding:0 .1em .12em}
.tagline-title .tg-text{background:inherit; -webkit-background-clip:text; background-clip:text; color:transparent}
.tagline-title .tg-emoji{-webkit-text-fill-color:initial; color:initial; font-style:normal}
.title.tagline-title{background:none; -webkit-background-clip:border-box; background-clip:border-box; color:inherit; filter:none}
.tagline-title .tg-text{background-image:linear-gradient(100deg,#4f9fdc 0%,#8c7ce6 50%,#e58fb6 100%)}
[data-theme="dark"] .tagline-title .tg-text{background-image:linear-gradient(100deg,#8fd0ff 0%,#b8a6ff 50%,#ffb1d3 100%)}
[data-theme="dark"] .title.tagline-title{filter:none; background-image:none}

/* ---- barra de noticias ---- */
.ticker{display:flex; align-items:stretch; max-width:1100px; margin:6px auto 18px; border-radius:14px; overflow:hidden; border:1px solid #fff; box-shadow:var(--shadow); background:rgba(255,255,255,.78)}
.ticker[hidden]{display:none}
.tk-label{flex:none; display:flex; align-items:center; gap:8px; padding:0 16px; font-weight:800; font-size:13px; letter-spacing:.12em; color:#fff; background:linear-gradient(135deg,#7fc0f2,#b4a2f5); z-index:1}
.tk-dot{width:8px; height:8px; border-radius:50%; background:#fff; animation:tkpulse 1.6s ease-in-out infinite}
@keyframes tkpulse{0%,100%{opacity:1} 50%{opacity:.3}}
.tk-viewport{flex:1; min-width:0; overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent); mask:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.tk-track{display:flex; width:max-content; animation:tkscroll 120s linear infinite}
.ticker:hover .tk-track, .ticker:focus-within .tk-track{animation-play-state:paused}
.tk-set{display:flex; align-items:center; flex:none}
@keyframes tkscroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.tk-item{display:inline-flex; align-items:center; gap:8px; padding:12px 6px; white-space:nowrap; text-decoration:none; color:#2b3354; font-weight:700; font-size:14.5px}
.tk-item:hover .tk-t, .tk-item:hover{text-decoration:underline}
.tk-tag{font-size:11px; letter-spacing:.06em; padding:3px 7px; border-radius:6px; color:#fff; background:#6fa6dd}
.tk-src{font-weight:600; font-size:12.5px; color:#7c88ad}
.tk-sep{color:#b4a2f5; font-size:9px; margin:0 14px}
[data-theme="dark"] .ticker{background:rgba(22,29,70,.7); border-color:rgba(160,180,255,.22)}
[data-theme="dark"] .tk-label{background:linear-gradient(135deg,#3f86d9,#7a63d8)}
[data-theme="dark"] .tk-item{color:#eef0ff}
[data-theme="dark"] .tk-src{color:#9aa6d6}
[data-theme="dark"] .tk-tag{background:#4b72b8}
@media (max-width:640px){ .ticker{margin:4px 12px 14px} .tk-label{padding:0 11px; font-size:11px} .tk-item{font-size:13.5px; padding:10px 4px} }
@media (prefers-reduced-motion:reduce){ .tk-track{animation:none} .tk-viewport{overflow-x:auto} .tk-set[aria-hidden]{display:none} }