@font-face{
  font-family:'ARounded';
  src:url('/images/arlrdbd-webfont.woff2') format('woff2'),
      url('/images/arlrdbd-webfont.woff') format('woff'),
      url('/images/arlrdbd-webfont.ttf') format('truetype');
  font-weight:normal;font-style:normal;font-display:swap;
}
:root{
  --blue:#203D51; --blue-d:#001A26; --red:#b72a22; --gold:#fbbf76;
  --link:#7db4db; --text:#e8edf2;
}
*{box-sizing:border-box}
body{margin:0;background:#000;color:var(--text);font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.55}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,.topbar nav a,.mbtn,.foot,.btn,.logoword{font-family:'ARounded',Arial,sans-serif}
code{background:#021019;padding:.1em .4em;border-radius:4px;color:var(--gold)}

.wrap{max-width:1024px;margin:0 auto;background:var(--blue);min-height:100vh}

/* Barra superior */
.topbar{display:flex;align-items:center;gap:14px;background:var(--blue);padding:0 12px;height:42px;border-bottom:1px solid #0c2535}
.topbar .logo img{display:block;height:30px}
.topbar nav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
.topbar nav a{color:#fff;font-size:14px}
.topbar nav a:hover{color:var(--gold);text-decoration:none}

/* Layout dos columnas */
.layout{display:flex;align-items:stretch}
.left{width:240px;flex:0 0 240px;background:var(--blue-d);padding:8px}
.left .banner{display:block;width:100%;margin-bottom:6px;border:0;border-radius:4px}
.menu{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.mbtn{background:var(--red);color:#fff;border-radius:14px;padding:10px 14px;font-size:15px;text-align:left;transition:.15s}
.mbtn:hover{background:#e2473d;color:#fff;text-decoration:none}

.main{flex:1 1 auto;min-width:0;background:#0a1f2b}
.topbanners{display:flex}
.topbanners img{display:block;width:25%;height:auto}
.content{padding:18px 22px 26px}

/* Contenido */
.content h1{color:var(--gold);font-size:1.7rem;margin:.2rem 0 1rem}
.content h2{color:var(--gold);font-size:1.2rem;margin-top:0}
.hero{text-align:center;padding:1rem 0 1.4rem}
.hero p.sub{color:#bcd0de;font-size:1.05rem}
.hero .meta{color:#8fa9b8;font-size:.9rem;margin-top:.8rem}
.panel{background:rgba(0,0,0,.28);border:1px solid #0c2f42;border-radius:10px;padding:16px 18px;margin-bottom:16px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.cols{grid-template-columns:1fr}}

.btn{display:inline-block;background:var(--red);color:#fff;border:0;border-radius:14px;padding:10px 18px;font-size:15px;cursor:pointer}
.btn:hover{background:#e2473d;color:#fff;text-decoration:none}
.btn.gold{background:var(--gold);color:#3a2407}
.btn.gold:hover{background:#ffd98e}
.cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:1rem}

/* Formularios */
form label{display:block;margin:.7rem 0;font-weight:bold}
form input{width:100%;margin-top:.3rem;padding:.55rem .7rem;border-radius:8px;border:1px solid #0c2f42;background:#021019;color:#fff;font-size:1rem}
form input:focus{outline:none;border-color:var(--gold)}
form .btn{width:100%;margin-top:1rem}
.note{color:#9fb6c4;font-size:.85rem;margin-top:.7rem}

/* Tablas (ranking) */
table.rank{width:100%;border-collapse:collapse}
table.rank th,table.rank td{padding:.45rem .5rem;border-bottom:1px solid #0c2f42;text-align:left}
table.rank th{color:var(--gold)}
table.rank td:first-child{color:var(--gold);font-family:'ARounded';width:2.2rem}

/* Alertas */
.alert{padding:.8rem 1rem;border-radius:8px;margin:.8rem 0}
.alert.ok{background:rgba(46,204,113,.15);border:1px solid #2ecc71}
.alert.err{background:rgba(231,76,60,.15);border:1px solid #e74c3c}

/* Footer */
.foot{background:var(--blue);border-top:1px solid #0c2535;color:#cfe0ec;font-size:12px;padding:12px 14px;text-align:center}
.foot a{color:var(--link)}
.foot .legal{color:#90acc1;display:block;margin-top:5px}

/* Responsive */
@media(max-width:760px){
  .layout{flex-direction:column}
  .left{width:100%;flex:none}
  .menu{flex-direction:row;flex-wrap:wrap}
  .mbtn{flex:1 1 auto;text-align:center}
  .topbar nav{gap:12px}
}