/* Academia Roblox — estética + buenas prácticas */
:root{
  --primary:#3B82F6; --secondary:#8B5CF6; --accent:#22C55E;
  --border:#e5e7eb; --bg:#ffffff; --text:#0f172a; --muted:#475569;
  --radius:18px; --shadow-sm:0 6px 16px rgba(2,6,23,.06); --shadow-lg:0 14px 36px rgba(2,6,23,.12);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b1220; --text:#e6e8ef; --muted:#9aa3b2; --border:#1f2937; }
  body{ background:var(--bg); color:var(--text); }
}
a{ text-underline-offset:2px; }
:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; border-radius:12px; }
.ars-faint{ opacity:.85 }
.ars-skip a{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.ars-skip a:focus{ position:static; width:auto; height:auto; padding:8px 12px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-sm); }
.ars-hero{ border-radius:24px; padding:clamp(28px, 4vw, 64px) 28px; background:linear-gradient(180deg,#f5f8ff,#eef4ff); border:1px solid var(--border); box-shadow:var(--shadow-sm); }
.ars-hero-title{ font-size:clamp(28px, 3.4vw + 1rem, 46px); line-height:1.15; margin:0 0 10px; }
.ars-card{ border:1px solid var(--border); border-radius:var(--radius); padding:18px; background:var(--bg); box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease; }
.ars-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.ars-post-card{ border:1px solid var(--border); border-radius:16px; padding:12px; background:var(--bg); box-shadow:var(--shadow-sm); }
.ars-row{ display:grid; grid-template-columns: 140px 1fr; gap:12px; align-items:center; }
@media (max-width:980px){ .ars-row{ grid-template-columns:1fr; } }
.wp-block-button__link{ padding:12px 20px; border-radius:14px; }
.ars-cta{ margin-top:28px; border:1px solid var(--border); border-radius:18px; background:#F7FBFF; padding:22px; box-shadow:var(--shadow-sm); }
.entry-content > .alignwide{ max-width:min(1200px, calc(100% - 3rem)); margin-left:auto; margin-right:auto; }
@media (max-width:640px){ .entry-content > .alignwide{ max-width:calc(100% - 1.5rem); } }