:root{
  --ink:#25243a;--muted:#6e6a7b;--paper:#fffdfb;--line:rgba(46,43,70,.10);
  --shadow:0 22px 60px rgba(48,42,75,.10);--radius:28px;
  --title:"Shadows Into Light",cursive;--body:"Poppins",sans-serif;--mono:"Space Mono",monospace;
  --blue:#318bff;--cyan:#39cfee;--green:#42d88b;--orange:#ff9a42;--red:#ff5c5c;
  --yellow:#ffd25d;--purple:#8a72f2;--pink:#ff71ae;
  --theme-1:#318bff;--theme-2:#ff5c5c;--theme-3:#42d88b;--theme-4:#ff9a42;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.65;overflow-x:hidden;
  background:
    radial-gradient(circle at 8% 8%,color-mix(in srgb,var(--theme-1) 20%,transparent),transparent 26rem),
    radial-gradient(circle at 92% 12%,color-mix(in srgb,var(--theme-2) 17%,transparent),transparent 26rem),
    radial-gradient(circle at 12% 86%,color-mix(in srgb,var(--theme-3) 16%,transparent),transparent 24rem),
    radial-gradient(circle at 88% 84%,color-mix(in srgb,var(--theme-4) 18%,transparent),transparent 24rem),
    linear-gradient(135deg,#fffaf7 0%,#f7fbff 40%,#f8fff9 72%,#fff9f2 100%);
}
body.theme-home{--theme-1:#318bff;--theme-2:#ff5c5c;--theme-3:#42d88b;--theme-4:#ff9a42}
body.theme-explore{--theme-1:#247dff;--theme-2:#35cfe9;--theme-3:#38d98a;--theme-4:#86e35d}
body.theme-compadre{--theme-1:#ff9a42;--theme-2:#ff5c5c;--theme-3:#ffd25d;--theme-4:#42d88b}
body.theme-radio{--theme-1:#ff5c5c;--theme-2:#ff9a42;--theme-3:#ffd25d;--theme-4:#318bff}
body.theme-events{--theme-1:#8a72f2;--theme-2:#ff5c5c;--theme-3:#ff71ae;--theme-4:#ff9a42}
body.theme-guide{--theme-1:#318bff;--theme-2:#42d88b;--theme-3:#39cfee;--theme-4:#8a72f2}
body.theme-contact{--theme-1:#42d88b;--theme-2:#318bff;--theme-3:#ff9a42;--theme-4:#39cfee}
a{color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}img{max-width:100%;display:block}[hidden]{display:none!important}.hidden{display:none!important}

.bg-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-3}
.ambient{position:fixed;border-radius:999px;filter:blur(60px);opacity:.24;z-index:-2;pointer-events:none;animation:drift 13s ease-in-out infinite alternate}
.ambient.a{width:30rem;height:30rem;left:-10rem;top:12%;background:var(--theme-1)}
.ambient.b{width:27rem;height:27rem;right:-9rem;top:30%;background:var(--theme-2);animation-duration:16s}
.ambient.c{width:26rem;height:26rem;left:30%;bottom:-12rem;background:var(--theme-3);animation-duration:18s}
@keyframes drift{to{transform:translate3d(55px,-25px,0) scale(1.08)}}
@keyframes gradientMove{to{background-position:220% 0}}
@keyframes sheen{0%,76%{transform:translateX(-55%)}100%{transform:translateX(55%)}}

.shell{width:min(1180px,calc(100% - 36px));margin-inline:auto}
.site-nav{
  position:sticky;top:10px;z-index:50;width:min(1220px,calc(100% - 24px));margin:10px auto 0;
  border:1px solid rgba(48,42,75,.08);border-radius:20px;background:rgba(255,255,255,.82);
  backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 14px 40px rgba(48,42,75,.09)
}
.nav-inner{min-height:66px;padding:0 14px;display:flex;align-items:center;gap:18px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:18px}
.brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--theme-1),var(--theme-2),var(--theme-4));box-shadow:0 10px 24px color-mix(in srgb,var(--theme-1) 22%,transparent)}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links a{display:inline-flex;align-items:center;gap:7px;padding:9px 10px;border-radius:11px;text-decoration:none;font-size:12px;font-weight:600;color:#585365;transition:.2s ease}
.nav-links a:hover,.nav-links a.active{transform:translateY(-2px);color:var(--ink);background:color-mix(in srgb,var(--theme-1) 9%,white)}
.nav-action{border:0;border-radius:12px;min-height:42px;padding:0 15px;color:#fff;font-weight:700;font-size:12px;background:linear-gradient(90deg,var(--theme-1),var(--theme-2),var(--theme-4));background-size:220% 100%;box-shadow:0 10px 24px color-mix(in srgb,var(--theme-1) 18%,transparent);animation:gradientMove 8s linear infinite}
.mobile-toggle{display:none;width:42px;padding:0}.mobile-panel{display:none;padding:0 14px 14px}.mobile-panel.open{display:grid;gap:5px}
.mobile-panel a{padding:10px;border-radius:10px;text-decoration:none;background:rgba(48,42,75,.04);font-size:13px}

.ticker{width:min(1160px,calc(100% - 34px));margin:9px auto 0;min-height:38px;padding:8px 12px;display:flex;align-items:center;gap:10px;border:1px solid rgba(48,42,75,.08);border-radius:13px;background:rgba(255,255,255,.72);backdrop-filter:blur(12px);overflow:hidden;color:#4f495b;font-size:11px}
.ticker-label{flex:0 0 auto;font-weight:800;color:var(--theme-2)}.ticker-track{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.page-canvas{width:min(1200px,calc(100% - 24px));margin:16px auto 26px;overflow:hidden;border:1px solid rgba(48,42,75,.075);border-radius:34px;background:radial-gradient(circle at 82% 5%,color-mix(in srgb,var(--theme-1) 11%,transparent),transparent 22rem),radial-gradient(circle at 8% 94%,color-mix(in srgb,var(--theme-3) 9%,transparent),transparent 20rem),rgba(255,255,255,.48);backdrop-filter:blur(10px);box-shadow:var(--shadow)}
.hero{position:relative;padding:72px 0 46px;text-align:center;overflow:hidden}
.hero::after{content:"";position:absolute;left:10%;right:10%;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--theme-1),var(--theme-2),var(--theme-3),transparent);background-size:220% 100%;animation:gradientMove 7s linear infinite}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid color-mix(in srgb,var(--theme-1) 18%,transparent);border-radius:999px;background:color-mix(in srgb,var(--theme-1) 7%,white);font-size:10px;font-weight:800;letter-spacing:.06em;color:#4e4860}
.hero h1{margin:16px auto 14px;max-width:900px;font-family:var(--title);font-size:clamp(66px,7vw,108px);font-weight:400;line-height:.88;letter-spacing:.005em}
.gradient-text{display:block;color:transparent;background:linear-gradient(90deg,var(--theme-1),var(--theme-2),var(--theme-4),var(--theme-3),var(--theme-1));background-size:280% 100%;-webkit-background-clip:text;background-clip:text;animation:gradientMove 8s linear infinite}
.hero p{max-width:720px;margin:0 auto;color:var(--muted);font-size:15px}.hero-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px}
.btn{min-height:44px;padding:0 16px;border-radius:12px;border:1px solid rgba(48,42,75,.10);display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-size:12px;font-weight:700;transition:.2s ease}
.btn:hover{transform:translateY(-2px)}.btn-primary{color:#fff;border:0;background:linear-gradient(90deg,var(--theme-1),var(--theme-2),var(--theme-4));background-size:220% 100%;animation:gradientMove 8s linear infinite;box-shadow:0 12px 28px color-mix(in srgb,var(--theme-1) 18%,transparent)}.btn-soft{background:rgba(255,255,255,.68);color:var(--ink)}

.nick-form{width:min(720px,100%);margin:28px auto 0;padding:16px;border:1px solid rgba(48,42,75,.08);border-radius:20px;background:rgba(255,255,255,.62);backdrop-filter:blur(14px);box-shadow:0 16px 40px rgba(48,42,75,.07)}
.nick-form label{display:block;text-align:left;margin:0 0 8px;font-size:11px;font-weight:700;color:#514b5d}.nick-row{display:grid;grid-template-columns:1fr auto;gap:9px}.input-wrap{position:relative}.input-wrap i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--theme-1)}
.nick-form input{width:100%;min-height:48px;padding:0 14px 0 40px;border:1px solid rgba(48,42,75,.10);border-radius:12px;outline:none;background:rgba(255,255,255,.86);color:var(--ink)}.nick-form input:focus{border-color:color-mix(in srgb,var(--theme-1) 50%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--theme-1) 10%,transparent)}.nick-form small{display:block;margin-top:8px;color:#7c7587;font-size:10px;text-align:center}

.section{padding:48px 0}.section+.section{border-top:1px solid rgba(48,42,75,.055)}.section-head{text-align:center;max-width:760px;margin:0 auto 28px}.section-kicker{font-size:9px;font-weight:800;letter-spacing:.08em;color:var(--theme-1);text-transform:uppercase}.section-head h2{margin:6px 0 9px;font-family:var(--title);font-size:clamp(44px,4.8vw,66px);font-weight:400;line-height:1}.section-head p{margin:0;color:var(--muted);font-size:13px}
.grid{display:grid;gap:14px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{position:relative;overflow:hidden;border:1px solid rgba(48,42,75,.08);border-radius:22px;background:radial-gradient(circle at var(--mx,88%) var(--my,12%),color-mix(in srgb,var(--card-accent,var(--theme-1)) 14%,transparent),transparent 11rem),linear-gradient(145deg,rgba(255,255,255,.80),rgba(255,255,255,.40));backdrop-filter:blur(13px) saturate(1.15);box-shadow:0 16px 38px rgba(48,42,75,.07);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card::before{content:"";position:absolute;inset:-30% -70%;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.48) 50%,transparent 62%);transform:translateX(-55%);animation:sheen 9s ease-in-out infinite;pointer-events:none}.card:hover{transform:translateY(-7px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));border-color:color-mix(in srgb,var(--card-accent,var(--theme-1)) 35%,transparent);box-shadow:0 24px 54px rgba(48,42,75,.12)}.card>*{position:relative;z-index:1}

.room-card{padding:20px 20px 64px;min-height:235px;--card-accent:var(--blue)}.room-card:nth-child(2){--card-accent:var(--green)}.room-card:nth-child(3){--card-accent:var(--orange)}.room-card:nth-child(4){--card-accent:var(--pink)}
.room-icon{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:20px;color:#fff;background:linear-gradient(135deg,var(--card-accent),color-mix(in srgb,var(--card-accent) 50%,var(--purple)));box-shadow:0 10px 22px color-mix(in srgb,var(--card-accent) 18%,transparent)}
.room-card h3{font-size:20px;margin:14px 0 7px}.room-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.62}.room-count{position:absolute;left:18px;bottom:16px;display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border:1px solid rgba(48,42,75,.08);border-radius:999px;background:rgba(255,255,255,.72);font-size:10px}.room-count strong{font-size:12px}

.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.stat{padding:14px 16px;border:1px solid rgba(48,42,75,.07);border-radius:16px;background:rgba(255,255,255,.56);text-align:left}.stat small{display:block;color:#7b7487;font-size:9px;text-transform:uppercase;letter-spacing:.05em}.stat strong{display:block;margin-top:2px;font-size:18px}
.activity-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}.panel{padding:22px}.panel h3{margin:0 0 14px;font-size:18px}.user-list,.activity-list,.history-list,.ranking-list{display:grid;gap:9px}.user-chip,.activity-row,.history-row,.ranking-row{display:flex;align-items:center;gap:10px;padding:10px 11px;border:1px solid rgba(48,42,75,.07);border-radius:13px;background:rgba(255,255,255,.54)}
.user-avatar{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--theme-1),var(--theme-2))}.user-chip b,.activity-row b{font-size:12px}.user-chip small,.activity-row small{display:block;color:#7b7487;font-size:9px}.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 13%,transparent)}
.notice{padding:14px;border-radius:14px;background:color-mix(in srgb,var(--theme-1) 7%,white);color:#5f596a;font-size:11px}

.feature-card{padding:22px;min-height:200px}.feature-card .emoji{font-size:30px}.feature-card h3{margin:8px 0 6px;font-size:19px}.feature-card p{margin:0;color:var(--muted);font-size:12px}.feature-link{display:inline-flex;margin-top:14px;font-weight:700;font-size:11px;text-decoration:none;color:var(--theme-1)}
.staff-card{padding:20px}.staff-avatar{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:23px;background:linear-gradient(135deg,color-mix(in srgb,var(--theme-1) 20%,white),color-mix(in srgb,var(--theme-2) 16%,white))}.staff-card h3{margin:10px 0 3px;font-size:18px}.staff-role{font-size:10px;color:var(--theme-1);font-weight:800}.staff-card p{font-size:11px;color:var(--muted);margin:8px 0 0}

.footer{width:min(1220px,calc(100% - 24px));margin:0 auto;border:1px solid rgba(48,42,75,.08);border-radius:30px 30px 0 0;background:radial-gradient(circle at 10% 0%,color-mix(in srgb,var(--theme-1) 10%,transparent),transparent 19rem),radial-gradient(circle at 90% 100%,color-mix(in srgb,var(--theme-4) 10%,transparent),transparent 20rem),rgba(255,255,255,.66);backdrop-filter:blur(14px)}
.footer-grid{display:grid;grid-template-columns:1.5fr .8fr .8fr 1.1fr;gap:24px;padding:34px 0 24px}.footer h4{margin:0 0 8px;font-size:12px}.footer p,.footer a,.footer button,.footer small{color:#746e80;font-size:10px}.footer a{text-decoration:none}.footer-links{display:grid;gap:6px}.footer-links button{border:0;background:none;padding:0;text-align:left;cursor:pointer}.footer-cta{padding:15px;border:1px solid rgba(48,42,75,.07);border-radius:16px;background:rgba(255,255,255,.52)}.footer-cta h4{font-size:18px;margin:3px 0 10px}.footer-bottom{min-height:44px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(48,42,75,.07);color:#8b8494;font-size:9px}

.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(29,27,43,.42);backdrop-filter:blur(8px)}.modal.open{display:flex}.modal-card{width:min(1100px,100%);height:min(760px,90vh);overflow:hidden;border-radius:24px;background:#fff;box-shadow:0 30px 80px rgba(33,28,52,.24);border:1px solid rgba(255,255,255,.6)}.modal-head{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid rgba(48,42,75,.08)}.modal-head b{font-size:13px}.icon-btn{width:36px;height:36px;border:0;border-radius:11px;background:rgba(48,42,75,.06);color:var(--ink)}.chat-frame{width:100%;height:calc(100% - 54px);border:0}

.radio-player{padding:24px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:center;background:radial-gradient(circle at 12% 10%,rgba(49,139,255,.15),transparent 15rem),linear-gradient(115deg,#ff8585 0%,#ffac68 45%,#ffe079 72%,#8ce6b5 100%)}
.cover{aspect-ratio:1;border-radius:22px;overflow:hidden;background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.60);box-shadow:0 18px 38px rgba(120,74,44,.16)}.cover img{width:100%;height:100%;object-fit:cover}.radio-copy h2{font-family:var(--title);font-size:clamp(38px,4vw,58px);font-weight:400;line-height:1;margin:5px 0}.radio-copy p{margin:0;color:#5f5665;font-size:11px}.radio-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}.radio-meta div{padding:10px;border:1px solid rgba(48,42,75,.08);border-radius:13px;background:rgba(255,255,255,.54)}.radio-meta small{display:block;font-size:8px;color:#756d7b}.radio-meta strong{font-size:13px}.radio-actions{display:flex;gap:8px;flex-wrap:wrap}

.rank-card{padding:20px}.rank-card h3{margin:0 0 12px;font-size:17px}.rank-row{display:grid;grid-template-columns:30px 1fr auto;gap:9px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(48,42,75,.06)}.rank-row:last-child{border:0}.rank-row b{font-size:11px}.rank-row small{font-size:9px;color:#7a7384}
.player-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.player-card{padding:17px}.player-card summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px}.player-card summary::-webkit-details-marker{display:none}.player-card .body{padding-top:12px;margin-top:12px;border-top:1px solid rgba(48,42,75,.07);font-size:10px;color:#6d6678}

.command-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.command-card{padding:18px}.command-card code{display:inline-block;margin-top:9px;padding:7px 9px;border-radius:9px;background:#2d2940;color:#fff;font-family:var(--mono);font-size:10px}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:14px}.contact-info{padding:24px}.contact-info h2{font-family:var(--title);font-size:48px;font-weight:400;margin:0 0 10px}.contact-info p{color:var(--muted);font-size:12px}.contact-points{display:grid;gap:10px;margin-top:18px}.contact-point{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:14px;background:rgba(255,255,255,.52);border:1px solid rgba(48,42,75,.07)}.contact-point i{color:var(--theme-1);margin-top:3px}.contact-point small{display:block;color:#746e80;font-size:10px}
.contact-form{padding:24px}.field{display:grid;gap:6px;margin-bottom:12px}.field label{font-size:10px;font-weight:700;color:#5e5868}.field input,.field select,.field textarea{width:100%;border:1px solid rgba(48,42,75,.10);border-radius:12px;background:rgba(255,255,255,.82);color:var(--ink);padding:10px 12px;outline:none}.field textarea{resize:vertical;min-height:130px}.field input:focus,.field select:focus,.field textarea:focus{border-color:color-mix(in srgb,var(--theme-1) 45%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--theme-1) 9%,transparent)}.form-error{padding:10px 12px;border-radius:10px;background:#fff0f0;color:#b34848;font-size:10px;margin-bottom:10px}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}.reveal.visible{opacity:1;transform:none}

@media(max-width:980px){
  .nav-links{display:none}.mobile-toggle{display:inline-grid;place-items:center}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.activity-layout,.contact-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.radio-player{grid-template-columns:180px 1fr}
}
@media(max-width:680px){
  body{font-size:14px}.shell{width:calc(100% - 22px)}.site-nav{width:calc(100% - 12px);top:6px;margin-top:6px}.nav-inner{min-height:58px;padding:0 9px;gap:8px}.brand{font-size:16px}.brand-mark{width:34px;height:34px}.nav-action{min-height:38px;padding:0 12px}.nav-action span{display:none}.ticker{width:calc(100% - 18px);font-size:10px}.page-canvas{width:calc(100% - 10px);border-radius:24px;margin-top:10px}.hero{padding:52px 0 34px}.hero h1{font-size:56px}.hero p{font-size:13px}.nick-row{grid-template-columns:1fr}.nick-form{padding:13px}.section{padding:38px 0}.section-head h2{font-size:40px}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.stat-strip{grid-template-columns:repeat(2,1fr)}.room-card{min-height:215px}.footer{width:calc(100% - 8px);border-radius:24px 24px 0 0}.footer-grid{grid-template-columns:1fr;padding:28px 0 20px}.footer-bottom{align-items:flex-start;flex-direction:column;justify-content:center;padding:10px 0}.radio-player{grid-template-columns:1fr;padding:17px}.cover{width:min(250px,100%);margin-inline:auto}.radio-copy{text-align:center}.radio-actions{justify-content:center}.radio-meta{grid-template-columns:1fr}.player-grid,.command-grid{grid-template-columns:1fr}.contact-info h2{font-size:42px}.ambient{opacity:.16}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}


/* =========================================================
   V1.1 — CONTENT RICH
   Nuevas secciones y componentes para enriquecer cada página.
   ========================================================= */

.mini-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mini-card{
  padding:15px;border:1px solid rgba(48,42,75,.07);border-radius:16px;
  background:rgba(255,255,255,.52);min-height:112px
}
.mini-card .emoji{font-size:22px}
.mini-card h4{margin:7px 0 4px;font-size:13px}
.mini-card p{margin:0;font-size:10px;color:#746e80;line-height:1.55}

.split-feature{
  display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:stretch
}
.story-card{padding:26px}
.story-card h3{
  margin:6px 0 10px;font-family:var(--title);font-size:42px;font-weight:400;line-height:1
}
.story-card p{margin:0;color:var(--muted);font-size:12px}
.story-list{display:grid;gap:10px;margin-top:18px}
.story-item{
  display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:start;
  padding:11px;border:1px solid rgba(48,42,75,.07);border-radius:14px;background:rgba(255,255,255,.50)
}
.story-item .icon{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--theme-1) 12%,white)
}
.story-item b{display:block;font-size:11px}
.story-item small{display:block;margin-top:2px;color:#7a7384;font-size:9px;line-height:1.45}

.quick-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.step-card{padding:20px;counter-increment:step;min-height:176px}
.step-card::after{
  content:counter(step);position:absolute;right:16px;top:10px;
  font-family:var(--title);font-size:54px;color:color-mix(in srgb,var(--theme-1) 16%,transparent)
}
.quick-steps{counter-reset:step}
.step-card h3{margin:8px 0 6px;font-size:17px}
.step-card p{margin:0;color:var(--muted);font-size:11px}

.quote-card{
  padding:22px;text-align:center;
  background:linear-gradient(135deg,color-mix(in srgb,var(--theme-1) 8%,white),color-mix(in srgb,var(--theme-2) 7%,white))!important
}
.quote-card blockquote{
  margin:0;font-family:var(--title);font-size:34px;line-height:1.15;color:var(--ink)
}
.quote-card cite{display:block;margin-top:9px;font-style:normal;font-size:10px;color:#746e80}

.room-guide{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px
}
.room-guide article{padding:20px}
.room-guide h3{margin:7px 0 5px;font-size:17px}
.room-guide p{margin:0;color:var(--muted);font-size:11px}
.room-guide .emoji{font-size:26px}

.badge-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.soft-badge{
  display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;
  background:rgba(255,255,255,.60);border:1px solid rgba(48,42,75,.07);
  font-size:9px;font-weight:700;color:#5e586a
}

.timeline-rich{display:grid;gap:10px}
.timeline-rich .timeline-entry{
  display:grid;grid-template-columns:100px 1fr;gap:14px;align-items:start;
  padding:15px;border:1px solid rgba(48,42,75,.07);border-radius:15px;background:rgba(255,255,255,.52)
}
.timeline-rich time{font-size:10px;font-weight:800;color:var(--theme-1)}
.timeline-rich h4{margin:0 0 3px;font-size:13px}
.timeline-rich p{margin:0;color:#746e80;font-size:10px}

.djs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dj-card{padding:18px}
.dj-avatar{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:22px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--theme-1) 20%,white),color-mix(in srgb,var(--theme-2) 16%,white))
}
.dj-card h3{margin:9px 0 2px;font-size:16px}.dj-card small{color:var(--theme-1);font-size:9px;font-weight:800}.dj-card p{font-size:10px;color:#746e80}

.achievement-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.achievement{
  padding:16px;text-align:center;border:1px solid rgba(48,42,75,.07);
  border-radius:16px;background:rgba(255,255,255,.54)
}
.achievement .emoji{font-size:25px}.achievement b{display:block;margin-top:6px;font-size:11px}.achievement small{display:block;color:#7a7384;font-size:8px;margin-top:2px}

.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.faq-item{padding:17px}
.faq-item h3{margin:0 0 5px;font-size:14px}.faq-item p{margin:0;color:#746e80;font-size:10px}

.cta-band{
  padding:24px;border-radius:22px;border:1px solid rgba(48,42,75,.08);
  background:
    radial-gradient(circle at 10% 50%,color-mix(in srgb,var(--theme-1) 13%,transparent),transparent 15rem),
    radial-gradient(circle at 90% 50%,color-mix(in srgb,var(--theme-2) 12%,transparent),transparent 15rem),
    rgba(255,255,255,.60);
  display:flex;align-items:center;justify-content:space-between;gap:18px
}
.cta-band h3{margin:0;font-family:var(--title);font-size:34px;font-weight:400}
.cta-band p{margin:3px 0 0;font-size:10px;color:#746e80}
.cta-band .actions{display:flex;gap:8px;flex-wrap:wrap}

@media(max-width:980px){
  .mini-grid,.achievement-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split-feature{grid-template-columns:1fr}
  .room-guide,.djs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .mini-grid,.achievement-grid,.room-guide,.djs-grid,.faq-grid,.quick-steps{grid-template-columns:1fr}
  .timeline-rich .timeline-entry{grid-template-columns:1fr}
  .cta-band{align-items:flex-start;flex-direction:column}
  .story-card h3{font-size:36px}
  .quote-card blockquote{font-size:28px}
}

/* V1.2 — richer ambient backgrounds + real avatar art */
body{
  background:
    radial-gradient(circle at 7% 8%,color-mix(in srgb,var(--theme-1) 24%,transparent),transparent 25rem),
    radial-gradient(circle at 92% 12%,color-mix(in srgb,var(--theme-2) 21%,transparent),transparent 26rem),
    radial-gradient(circle at 12% 88%,color-mix(in srgb,var(--theme-3) 20%,transparent),transparent 25rem),
    radial-gradient(circle at 88% 86%,color-mix(in srgb,var(--theme-4) 22%,transparent),transparent 25rem),
    linear-gradient(125deg,#fff8f3 0%,#f4fbff 30%,#f8f4ff 56%,#f3fff8 78%,#fff8ed 100%);
  background-size:130% 130%;
  animation:pageAurora 22s ease-in-out infinite alternate
}
body::before,body::after{
  content:"";position:fixed;pointer-events:none;z-index:-4;border-radius:50%;
  width:44vw;height:44vw;min-width:420px;min-height:420px;filter:blur(2px);opacity:.24
}
body::before{
  left:-20vw;top:38vh;
  background:conic-gradient(from 45deg,var(--theme-1),transparent 24%,var(--theme-3),transparent 57%,var(--theme-2),transparent 82%,var(--theme-1));
  animation:orbitalWash 24s linear infinite
}
body::after{
  right:-22vw;top:5vh;
  background:conic-gradient(from 190deg,var(--theme-4),transparent 26%,var(--theme-2),transparent 55%,var(--theme-1),transparent 82%,var(--theme-4));
  animation:orbitalWash 31s linear infinite reverse
}
@keyframes pageAurora{0%{background-position:0% 0%}100%{background-position:100% 75%}}
@keyframes orbitalWash{to{transform:rotate(360deg) translate3d(22px,14px,0)}}
.page-canvas{
  background:
    linear-gradient(120deg,color-mix(in srgb,var(--theme-1) 5%,transparent),transparent 28%),
    linear-gradient(300deg,color-mix(in srgb,var(--theme-2) 5%,transparent),transparent 30%),
    rgba(255,255,255,.48)
}
.section{position:relative}
.section:nth-of-type(3n+1)::before{
  content:"";position:absolute;inset:7% 4%;z-index:-1;pointer-events:none;border-radius:40px;
  background:linear-gradient(110deg,color-mix(in srgb,var(--theme-1) 5%,transparent),color-mix(in srgb,var(--theme-3) 4%,transparent));
  filter:blur(4px)
}
.staff-card,.dj-card{display:flex;flex-direction:column;align-items:flex-start}
.staff-avatar,.dj-avatar{
  position:relative;overflow:hidden;padding:0;border:3px solid rgba(255,255,255,.82);
  box-shadow:0 13px 30px color-mix(in srgb,var(--theme-1) 18%,transparent)
}
.staff-avatar{width:68px;height:68px;border-radius:20px}
.dj-avatar{width:70px;height:70px}
.staff-avatar img,.dj-avatar img{width:100%;height:100%;object-fit:cover}
.staff-card .staff-role,.dj-card small{letter-spacing:.055em}
.staff-card p,.dj-card p{line-height:1.65}
.staff-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}
.staff-tags span{font-size:8px;font-weight:700;padding:5px 7px;border-radius:999px;background:rgba(255,255,255,.62);border:1px solid rgba(48,42,75,.07)}
@media(max-width:680px){
 body::before,body::after{min-width:300px;min-height:300px;opacity:.17}
 .staff-avatar,.dj-avatar{width:64px;height:64px}
}


/* =========================================================
   V1.4 — NORMAL LINKS + MOBILE HEADER FIX
   ========================================================= */

/* mobile menu panel should feel like part of the navbar */
.mobile-panel{
  border-top:1px solid rgba(48,42,75,.06);
}

.mobile-panel a{
  display:flex;
  align-items:center;
  gap:10px;
  color:#4f495b;
  font-weight:600;
}

.mobile-panel a i{
  width:18px;
  text-align:center;
  color:var(--theme-1);
}

.mobile-panel a:hover,
.mobile-panel a.active{
  background:color-mix(in srgb,var(--theme-1) 8%,white);
  color:var(--ink);
}

@media(max-width:980px){
  .site-nav{
    overflow:hidden;
  }

  .nav-inner{
    width:100%;
  }

  .nav-links{
    display:none!important;
  }

  .nav-action:not(.mobile-toggle){
    margin-left:auto;
  }

  .mobile-toggle{
    display:grid!important;
    flex:0 0 42px;
  }

  .mobile-panel.open{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    padding:10px 12px 13px;
    background:rgba(255,255,255,.76);
    backdrop-filter:blur(14px);
  }

  .mobile-panel a{
    min-height:42px;
    padding:9px 11px;
    border:1px solid rgba(48,42,75,.06);
    background:rgba(255,255,255,.54);
  }
}

@media(max-width:680px){
  .site-nav{
    width:calc(100% - 10px);
    top:5px;
    border-radius:17px;
  }

  .nav-inner{
    min-height:58px;
    padding:0 8px;
    gap:7px;
  }

  .brand{
    min-width:0;
    gap:8px;
  }

  .brand span:last-child{
    font-size:15px;
    white-space:nowrap;
  }

  .brand-mark{
    flex:0 0 34px;
  }

  .nav-action:not(.mobile-toggle){
    width:38px;
    min-width:38px;
    padding:0;
    font-size:0;
  }

  .nav-action:not(.mobile-toggle) i{
    font-size:13px;
  }

  .mobile-toggle{
    width:38px;
    min-width:38px;
    flex-basis:38px;
    min-height:38px;
  }

  .mobile-panel.open{
    grid-template-columns:1fr;
    padding:8px 9px 10px;
  }

  .mobile-panel a{
    min-height:40px;
    font-size:12px;
    border-radius:10px;
  }

  .ticker{
    margin-top:7px;
    min-height:35px;
  }
}

@media(max-width:390px){
  .brand span:last-child{
    font-size:14px;
  }

  .brand-mark{
    width:32px;
    height:32px;
    flex-basis:32px;
  }

  .nav-action:not(.mobile-toggle),
  .mobile-toggle{
    width:36px;
    min-width:36px;
    flex-basis:36px;
    min-height:36px;
  }
}


/* =========================================================
   V1.5 — FULLSCREEN WEBCHAT MODAL
   ========================================================= */
.modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:stretch;
  justify-content:stretch;
  padding:0!important;
  background:rgba(25,24,38,.38);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.modal.open{display:flex}

.modal-card{
  width:100vw!important;
  max-width:none!important;
  height:100vh!important;
  height:100dvh!important;
  max-height:none!important;
  margin:0!important;
  border-radius:0!important;
  border:0!important;
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:none!important;
}

.modal-head{
  flex:0 0 58px;
  min-height:58px;
  height:58px!important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px!important;
  border-bottom:1px solid rgba(48,42,75,.08);
  background:linear-gradient(
    90deg,
    color-mix(in srgb,var(--theme-1) 7%,white),
    color-mix(in srgb,var(--theme-2) 5%,white),
    color-mix(in srgb,var(--theme-3) 6%,white)
  );
  backdrop-filter:blur(12px);
  z-index:2;
}

.modal-head b{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px!important;
  color:var(--ink);
}

.modal-head b::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 14%,transparent);
}

.modal .icon-btn{
  width:40px!important;
  height:40px!important;
  min-width:40px;
  border-radius:12px!important;
  background:rgba(255,255,255,.78)!important;
  border:1px solid rgba(48,42,75,.08)!important;
  color:var(--ink)!important;
  transition:transform .2s ease,background .2s ease;
}

.modal .icon-btn:hover{
  transform:rotate(4deg) scale(1.04);
  background:#fff!important;
}

.chat-frame{
  flex:1 1 auto;
  width:100%!important;
  height:auto!important;
  min-height:0;
  border:0!important;
  display:block;
  background:#fff;
}

@media(max-width:680px){
  .modal-card{
    height:100svh!important;
    height:100dvh!important;
  }

  .modal-head{
    flex-basis:52px;
    min-height:52px;
    height:52px!important;
    padding:0 10px!important;
  }

  .modal-head b{font-size:12px!important}

  .modal .icon-btn{
    width:36px!important;
    height:36px!important;
    min-width:36px;
  }
}


/* =========================================================
   V1.6 — LIVE PORTAL
   Más contenido útil + módulos dinámicos.
   ========================================================= */

.live-dashboard{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.live-card{
  position:relative;
  min-height:150px;
  padding:18px;
  overflow:hidden;
  border:1px solid rgba(48,42,75,.08);
  border-radius:19px;
  background:
    radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--live-accent,var(--theme-1)) 16%,transparent),transparent 10rem),
    rgba(255,255,255,.62);
  box-shadow:0 14px 34px rgba(48,42,75,.06);
}
.live-card .live-icon{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--live-accent,var(--theme-1)) 12%,white);
  color:var(--live-accent,var(--theme-1));
  margin-bottom:12px;
}
.live-card small{
  display:block;
  color:#7c7587;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.live-card strong{
  display:block;
  margin-top:3px;
  font-size:20px;
  line-height:1.15;
}
.live-card p{
  margin:7px 0 0;
  color:#746e80;
  font-size:10px;
  line-height:1.5;
}
.live-card.blue{--live-accent:var(--blue)}
.live-card.red{--live-accent:var(--red)}
.live-card.green{--live-accent:var(--green)}
.live-card.orange{--live-accent:var(--orange)}

.recommend-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.recommend-card{
  padding:20px;
  min-height:190px;
}
.recommend-card .recommend-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.recommend-card .emoji{font-size:28px}
.recommend-card .score{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 8px;border-radius:999px;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(48,42,75,.07);
  font-size:9px;font-weight:700;color:#5e586a;
}
.recommend-card h3{margin:10px 0 5px;font-size:18px}
.recommend-card p{margin:0;color:#746e80;font-size:10px;line-height:1.55}
.recommend-card .btn{margin-top:14px}

.country-live-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.country-live{
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px;
}
.country-live .flag{font-size:28px}
.country-live b{display:block;font-size:12px}
.country-live small{display:block;color:#7a7384;font-size:9px}
.country-live .country-count{
  margin-left:auto;
  min-width:34px;
  text-align:center;
  font-size:11px;
  font-weight:800;
  color:var(--theme-1);
}

.news-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:14px;
}
.news-feature{padding:24px;min-height:250px}
.news-feature .emoji{font-size:34px}
.news-feature h3{
  margin:8px 0 6px;
  font-family:var(--title);
  font-size:38px;
  line-height:1;
  font-weight:400;
}
.news-feature p{margin:0;color:#746e80;font-size:11px;line-height:1.6}
.news-stack{display:grid;gap:10px}
.news-item{padding:15px}
.news-item small{
  display:block;
  color:var(--theme-1);
  font-size:8px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.news-item h4{margin:4px 0 3px;font-size:13px}
.news-item p{margin:0;color:#746e80;font-size:9px;line-height:1.5}

.today-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.today-card{
  padding:17px;
  min-height:145px;
  text-align:left;
}
.today-card .emoji{font-size:25px}
.today-card h4{margin:7px 0 4px;font-size:13px}
.today-card p{margin:0;color:#746e80;font-size:9px;line-height:1.5}
.today-card .btn{margin-top:11px;min-height:38px;font-size:10px}

.featured-users{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.featured-user{
  padding:16px;
  text-align:center;
}
.featured-user .avatar{
  width:52px;height:52px;margin:0 auto 9px;border-radius:15px;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:18px;
  background:linear-gradient(135deg,var(--theme-1),var(--theme-2));
}
.featured-user b{display:block;font-size:11px}
.featured-user small{display:block;color:#7a7384;font-size:8px;margin-top:2px}
.featured-user .soft-badge{margin-top:8px}

.status-list{display:grid;gap:9px}
.status-row{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;border:1px solid rgba(48,42,75,.07);border-radius:13px;
  background:rgba(255,255,255,.54);
}
.status-led{
  width:9px;height:9px;border-radius:50%;background:#b5b0be;
  box-shadow:0 0 0 5px rgba(100,95,115,.08)
}
.status-led.ok{background:var(--green);box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 13%,transparent)}
.status-led.warn{background:var(--orange);box-shadow:0 0 0 5px color-mix(in srgb,var(--orange) 13%,transparent)}
.status-row b{font-size:11px}
.status-row small{display:block;color:#7a7384;font-size:8px}

.portal-marquee{
  overflow:hidden;
  padding:10px 0;
  border-top:1px solid rgba(48,42,75,.05);
  border-bottom:1px solid rgba(48,42,75,.05);
}
.portal-marquee-track{
  display:flex;
  gap:24px;
  min-width:max-content;
  animation:portalMarquee 28s linear infinite;
}
.portal-marquee span{
  display:inline-flex;align-items:center;gap:7px;
  color:#625c70;
  font-size:10px;
  font-weight:600;
}
@keyframes portalMarquee{to{transform:translateX(-50%)}}

@media(max-width:980px){
  .live-dashboard,.featured-users,.today-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .recommend-grid,.country-live-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .news-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .live-dashboard,.featured-users,.today-grid,.recommend-grid,.country-live-grid{grid-template-columns:1fr}
  .portal-marquee-track{animation-duration:22s}
}
@media(prefers-reduced-motion:reduce){
  .portal-marquee-track{animation:none}
}


/* =========================================================
   V1.7 — COMMUNITY LAYER
   Staff, profiles, badges, news, featured room.
   ========================================================= */

/* Fullscreen chat without header */
.modal-card{
  position:relative;
}
.modal-head{
  display:none!important;
}
.chat-frame{
  height:100%!important;
  min-height:100%!important;
}
.chat-close-floating{
  position:absolute;
  top:max(12px,env(safe-area-inset-top));
  right:max(12px,env(safe-area-inset-right));
  z-index:5;
  width:42px;
  height:42px;
  border:1px solid rgba(48,42,75,.10);
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.88);
  color:var(--ink);
  box-shadow:0 10px 30px rgba(35,31,54,.14);
  backdrop-filter:blur(14px);
}
.chat-close-floating:hover{
  transform:scale(1.04);
  background:#fff;
}

/* Featured room */
.featured-room{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
  align-items:center;
  padding:28px;
  min-height:260px;
  background:
    radial-gradient(circle at 85% 15%,color-mix(in srgb,var(--theme-1) 18%,transparent),transparent 18rem),
    radial-gradient(circle at 12% 90%,color-mix(in srgb,var(--theme-2) 12%,transparent),transparent 16rem),
    linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,255,255,.46))!important;
}
.featured-room::after{
  content:"";
  position:absolute;
  inset:auto -8% -55% auto;
  width:260px;height:260px;border-radius:50%;
  background:conic-gradient(var(--theme-1),var(--theme-2),var(--theme-3),var(--theme-1));
  opacity:.10;filter:blur(8px);
  animation:featuredSpin 18s linear infinite;
}
@keyframes featuredSpin{to{transform:rotate(360deg)}}
.featured-room-copy{position:relative;z-index:1}
.featured-room-copy .eyebrow{margin-bottom:8px}
.featured-room-copy h3{
  margin:4px 0 8px;
  font-family:var(--title);
  font-size:clamp(42px,5vw,66px);
  line-height:.95;
  font-weight:400;
}
.featured-room-copy p{max-width:650px;margin:0;color:#6d6678;font-size:12px}
.featured-room-meta{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  position:relative;
  z-index:1;
}
.featured-room-stat{
  padding:16px;
  border-radius:16px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(48,42,75,.08);
}
.featured-room-stat small{display:block;color:#7b7487;font-size:8px;text-transform:uppercase;letter-spacing:.06em}
.featured-room-stat strong{display:block;margin-top:3px;font-size:18px}

/* Badges */
.role-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.role-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 7px;border-radius:999px;
  font-size:8px;font-weight:800;
  border:1px solid rgba(48,42,75,.07);
  background:rgba(255,255,255,.68);
}
.role-badge.founder{color:#8b5e00;background:#fff4c7}
.role-badge.operator{color:#25618d;background:#e8f6ff}
.role-badge.security{color:#356a52;background:#e8fff3}
.role-badge.dj{color:#ad4e69;background:#fff0f5}
.role-badge.leader{color:#9a5a00;background:#fff3d8}
.role-badge.user{color:#625c70;background:#f4f2f7}

/* Public profile modal */
.profile-modal{
  position:fixed;inset:0;z-index:1200;display:none;place-items:center;padding:18px;
  background:rgba(30,27,44,.34);backdrop-filter:blur(9px)
}
.profile-modal.open{display:grid}
.profile-card{
  width:min(520px,100%);
  border:1px solid rgba(48,42,75,.08);
  border-radius:26px;
  background:
    radial-gradient(circle at 88% 8%,color-mix(in srgb,var(--theme-1) 14%,transparent),transparent 15rem),
    rgba(255,255,255,.93);
  box-shadow:0 30px 90px rgba(31,27,48,.20);
  overflow:hidden;
}
.profile-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid rgba(48,42,75,.06)
}
.profile-top b{font-size:12px}
.profile-body{padding:24px}
.profile-identity{display:flex;align-items:center;gap:14px}
.profile-avatar{
  width:72px;height:72px;border-radius:22px;display:grid;place-items:center;
  color:#fff;font-size:24px;font-weight:800;
  background:linear-gradient(135deg,var(--theme-1),var(--theme-2))
}
.profile-name h3{margin:0;font-size:22px}
.profile-name p{margin:2px 0 0;color:#746e80;font-size:10px}
.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}
.profile-stat{padding:12px;border-radius:14px;background:rgba(255,255,255,.64);border:1px solid rgba(48,42,75,.07)}
.profile-stat small{display:block;color:#7a7384;font-size:8px}.profile-stat strong{font-size:12px}
.profile-note{margin-top:14px;padding:12px;border-radius:14px;background:color-mix(in srgb,var(--theme-1) 6%,white);font-size:10px;color:#696272}

/* Staff page */
.staff-hero-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px
}
.staff-profile{
  padding:22px;
}
.staff-profile .staff-avatar{
  width:86px;height:86px;border-radius:24px
}
.staff-profile h3{margin:12px 0 2px;font-size:22px}
.staff-profile .staff-role{display:block}
.staff-profile p{margin-top:10px;font-size:11px;color:#6f687d}
.staff-details{display:grid;gap:8px;margin-top:14px}
.staff-detail{
  padding:10px 11px;border:1px solid rgba(48,42,75,.07);border-radius:12px;background:rgba(255,255,255,.56)
}
.staff-detail b{display:block;font-size:10px}.staff-detail small{display:block;font-size:8px;color:#7a7384}

/* News page */
.news-list{display:grid;gap:12px}
.news-post{padding:22px}
.news-post-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.news-post-head small{color:var(--theme-1);font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.news-post h3{margin:0 0 6px;font-size:20px}
.news-post p{margin:0;color:#6f687d;font-size:11px;line-height:1.65}
.news-post .badge-row{margin-top:12px}

@media(max-width:980px){
  .featured-room{grid-template-columns:1fr}
  .staff-hero-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .featured-room{padding:20px}
  .featured-room-meta{grid-template-columns:1fr}
  .profile-stats{grid-template-columns:1fr}
  .chat-close-floating{width:38px;height:38px;border-radius:12px}
}
@media(prefers-reduced-motion:reduce){
  .featured-room::after{animation:none}
}


/* =========================================================
   V1.8 — READABLE TYPOGRAPHY
   Ajuste general de tamaños PC + móvil.
   ========================================================= */

body{
  font-size:16px!important;
  line-height:1.68!important;
}

/* Navigation */
.brand{
  font-size:19px!important;
}
.nav-links a{
  font-size:13px!important;
}
.nav-action{
  font-size:12px!important;
}
.mobile-panel a{
  font-size:13px!important;
}

/* Ticker */
.ticker{
  font-size:12px!important;
}
.ticker-label{
  font-size:10px!important;
}

/* Hero */
.eyebrow{
  font-size:10.5px!important;
}
.hero p{
  font-size:15px!important;
  line-height:1.72!important;
}
.nick-form label{
  font-size:12px!important;
}
.nick-form input{
  font-size:14px!important;
}
.nick-form small{
  font-size:11px!important;
}

/* Section headings */
.section-kicker{
  font-size:10px!important;
}
.section-head p{
  font-size:14px!important;
  line-height:1.7!important;
}

/* Rooms */
.room-card h3{
  font-size:21px!important;
}
.room-card p{
  font-size:13px!important;
  line-height:1.65!important;
}
.room-count{
  font-size:11px!important;
}
.room-count strong{
  font-size:13px!important;
}

/* Stats */
.stat small{
  font-size:10px!important;
}
.stat strong{
  font-size:20px!important;
}

/* Activity */
.panel h3{
  font-size:19px!important;
}
.user-chip b,
.activity-row b{
  font-size:13px!important;
}
.user-chip small,
.activity-row small{
  font-size:10px!important;
  line-height:1.45!important;
}
.notice{
  font-size:12px!important;
  line-height:1.55!important;
}

/* Feature cards */
.feature-card h3{
  font-size:20px!important;
}
.feature-card p{
  font-size:12.5px!important;
  line-height:1.65!important;
}
.feature-link{
  font-size:12px!important;
}

/* Staff */
.staff-card h3{
  font-size:19px!important;
}
.staff-role{
  font-size:10px!important;
}
.staff-card p{
  font-size:12px!important;
  line-height:1.65!important;
}
.staff-tags span,
.role-badge{
  font-size:9px!important;
}

/* Footer */
.footer h4{
  font-size:13px!important;
}
.footer p,
.footer a,
.footer button,
.footer small{
  font-size:11px!important;
  line-height:1.55!important;
}
.footer-bottom{
  font-size:10px!important;
}

/* Content-rich components */
.mini-card h4{
  font-size:14px!important;
}
.mini-card p{
  font-size:11px!important;
}
.story-card p{
  font-size:13px!important;
}
.story-item b{
  font-size:12px!important;
}
.story-item small{
  font-size:10px!important;
}
.step-card h3{
  font-size:18px!important;
}
.step-card p{
  font-size:12px!important;
}
.room-guide h3{
  font-size:18px!important;
}
.room-guide p{
  font-size:12px!important;
}
.soft-badge{
  font-size:10px!important;
}
.timeline-rich time{
  font-size:11px!important;
}
.timeline-rich h4{
  font-size:14px!important;
}
.timeline-rich p{
  font-size:11px!important;
}
.dj-card h3{
  font-size:17px!important;
}
.dj-card small{
  font-size:10px!important;
}
.dj-card p{
  font-size:11px!important;
}
.achievement b{
  font-size:12px!important;
}
.achievement small{
  font-size:9px!important;
}
.faq-item h3{
  font-size:15px!important;
}
.faq-item p{
  font-size:11px!important;
}
.cta-band p{
  font-size:11px!important;
}

/* Live portal */
.live-card small{
  font-size:10px!important;
}
.live-card strong{
  font-size:21px!important;
}
.live-card p{
  font-size:11px!important;
}
.recommend-card .score{
  font-size:10px!important;
}
.recommend-card h3{
  font-size:19px!important;
}
.recommend-card p{
  font-size:11px!important;
}
.country-live b{
  font-size:13px!important;
}
.country-live small{
  font-size:10px!important;
}
.country-live .country-count{
  font-size:12px!important;
}
.news-feature p{
  font-size:12px!important;
}
.news-item small{
  font-size:9px!important;
}
.news-item h4{
  font-size:14px!important;
}
.news-item p{
  font-size:10.5px!important;
}
.today-card h4{
  font-size:14px!important;
}
.today-card p{
  font-size:10.5px!important;
}
.today-card .btn{
  font-size:11px!important;
}
.featured-user b{
  font-size:12px!important;
}
.featured-user small{
  font-size:9px!important;
}
.status-row b{
  font-size:12px!important;
}
.status-row small{
  font-size:9px!important;
}
.portal-marquee span{
  font-size:11px!important;
}

/* Profile modal */
.profile-top b{
  font-size:13px!important;
}
.profile-name p{
  font-size:11px!important;
}
.profile-stat small{
  font-size:9px!important;
}
.profile-stat strong{
  font-size:13px!important;
}
.profile-note{
  font-size:11px!important;
}

/* Staff page */
.staff-profile h3{
  font-size:23px!important;
}
.staff-profile p{
  font-size:12px!important;
}
.staff-detail b{
  font-size:11px!important;
}
.staff-detail small{
  font-size:9px!important;
}

/* News page */
.news-post-head small{
  font-size:9px!important;
}
.news-post h3{
  font-size:21px!important;
}
.news-post p{
  font-size:12px!important;
}

/* Radio inside Chateando */
.radio-copy p{
  font-size:12px!important;
}
.radio-meta small{
  font-size:9px!important;
}
.radio-meta strong{
  font-size:14px!important;
}

/* Forms */
.field label{
  font-size:11px!important;
}
.field input,
.field select,
.field textarea{
  font-size:14px!important;
}

/* Buttons */
.btn{
  font-size:12px!important;
}

/* Tablet */
@media(max-width:980px){
  body{
    font-size:15.5px!important;
  }
}

/* Mobile */
@media(max-width:680px){
  body{
    font-size:15px!important;
  }

  .brand{
    font-size:16px!important;
  }

  .mobile-panel a{
    font-size:13px!important;
  }

  .ticker{
    font-size:11px!important;
  }

  .eyebrow{
    font-size:10px!important;
  }

  .hero p{
    font-size:13.5px!important;
  }

  .nick-form label{
    font-size:11.5px!important;
  }

  .nick-form input{
    font-size:14px!important;
  }

  .nick-form small{
    font-size:10.5px!important;
  }

  .section-head p{
    font-size:13px!important;
  }

  .room-card p{
    font-size:12.5px!important;
  }

  .user-chip b,
  .activity-row b{
    font-size:12px!important;
  }

  .user-chip small,
  .activity-row small{
    font-size:9.5px!important;
  }

  .feature-card p,
  .staff-card p,
  .story-card p,
  .step-card p,
  .room-guide p,
  .news-post p{
    font-size:11.5px!important;
  }

  .mini-card p,
  .faq-item p,
  .today-card p,
  .recommend-card p,
  .live-card p{
    font-size:10.5px!important;
  }

  .footer p,
  .footer a,
  .footer button,
  .footer small{
    font-size:10.5px!important;
  }
}

@media(max-width:390px){
  .hero p{
    font-size:13px!important;
  }

  .section-head p{
    font-size:12.5px!important;
  }
}


/* =========================================================
   V2.0 — COMPADRE SPACING FIX
   Separa nick, rango, puntos y tacos para evitar texto pegado.
   ========================================================= */

/* Rankings */
.rank-row{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  padding:12px 2px!important;
}

.rank-position{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:10px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(48,42,75,.07);
  font-size:11px;
  font-weight:800;
}

.rank-user{
  min-width:0;
  display:flex!important;
  flex-direction:column!important;
  gap:3px!important;
}

.rank-nick{
  display:block!important;
  font-size:13px!important;
  line-height:1.3!important;
  color:var(--ink)!important;
}

.rank-title{
  display:block!important;
  margin-top:0!important;
  font-size:10px!important;
  line-height:1.4!important;
  color:#7a7384!important;
}

.rank-points{
  display:block!important;
  white-space:nowrap;
  margin-left:10px;
  padding:6px 9px;
  border-radius:999px;
  background:color-mix(in srgb,var(--theme-1) 8%,white);
  border:1px solid rgba(48,42,75,.07);
  font-size:11px!important;
  line-height:1!important;
}

/* Player cards */
.player-card summary{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr)!important;
  align-items:center!important;
  gap:11px!important;
}

.player-summary-text{
  min-width:0;
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
}

.player-nick{
  display:block!important;
  font-size:13px!important;
  line-height:1.3!important;
}

.player-score{
  display:block!important;
  font-size:10.5px!important;
  line-height:1.4!important;
  color:#746d7e!important;
}

.player-card .body{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px 12px!important;
  line-height:1.55!important;
}

.player-card .body span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:5px 7px;
  border-radius:9px;
  background:rgba(255,255,255,.52);
  border:1px solid rgba(48,42,75,.06);
}

/* If older generated markup is still cached, enforce spacing generically */
.rank-row > div > b,
.rank-row > div > small,
.player-card summary > div > b,
.player-card summary > div > small{
  display:block!important;
}

.rank-row > div > b + small,
.player-card summary > div > b + small{
  margin-top:3px!important;
}

@media(max-width:680px){
  .rank-row{
    grid-template-columns:30px minmax(0,1fr)!important;
    gap:9px!important;
  }

  .rank-points{
    grid-column:2;
    justify-self:start;
    margin-left:0;
    margin-top:3px;
  }

  .player-card .body{
    flex-direction:column!important;
  }
}