/* Letras incluidas en la plantilla (no dependen de internet) */
@font-face { font-family: "Cinzel"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/cinzel-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/cinzel-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/alegreya-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/alegreya-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/alegreya-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/alegreya-latin-400-italic.woff2") format("woff2"); }

/* ===== CSS del boceto aprobado (extraido de boceto-rediseno-millennial-global) ===== */
      :root{
        --gold:#d8a940;
        --gold-hi:#f6dc8f;
        --gold-lo:#8a6420;
        --gold-deep:#5e430f;
        --stone-hi:#4a5d7a;
        --stone-mid:#2e3d55;
        --stone-lo:#141d2e;
        --parch:#f4e7c6;
        --parch-2:#ecdcae;
        --parch-3:#e2cd93;
        --ink:#33270f;
        --ink-soft:#5a4632;
        --night:#0a0d15;
        --good:#7ac74f;
        --bad:#e2574c;
        --shadow-panel:0 18px 42px rgba(0,0,0,.62), 0 4px 10px rgba(0,0,0,.55);
      }
      html{ scrollbar-color:var(--gold-lo) #101623; }
      body{
        margin:0;
        font-family:"Alegreya", Georgia, "Times New Roman", serif;
        color:var(--ink);
        background:var(--night) url("img/fondo.webp") center top / cover fixed no-repeat;
        min-height:100vh;
      }
      /* ---------- Intro ---------- */
      #intro{
        position:fixed; inset:0; z-index:200;
        display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
        background:
          radial-gradient(ellipse 70% 55% at 50% 42%, rgba(64,50,110,.38), rgba(5,6,12,0) 70%),
          radial-gradient(ellipse 120% 90% at 50% 50%, rgba(5,6,12,.55), rgba(3,4,9,.97) 78%),
          #04050a;
        cursor:pointer;
        transition:opacity 1.1s ease;
      }
      #intro.hide{ opacity:0; pointer-events:none; }
      #intro img{
        width:min(430px, 78vw); height:auto;
        filter:drop-shadow(0 0 34px rgba(150,90,255,.45)) drop-shadow(0 18px 30px rgba(0,0,0,.8));
        animation:introIn 1.5s cubic-bezier(.22,.8,.3,1) both;
      }
      #intro .intro-tag{
        font-family:"Cinzel", serif; letter-spacing:.42em; text-transform:uppercase;
        color:var(--gold-hi); font-size:clamp(11px,2.4vw,14px); text-shadow:0 2px 10px rgba(0,0,0,.9);
        animation:introIn 1.5s .25s cubic-bezier(.22,.8,.3,1) both;
        margin:0; text-indent:.42em; text-align:center;
      }
      #intro .intro-skip{
        position:absolute; bottom:26px; left:0; right:0; text-align:center;
        color:rgba(246,220,143,.55); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
        font-family:"Cinzel", serif; animation:introIn 1.2s .8s both; margin:0;
      }
      @keyframes introIn{
        from{ opacity:0; transform:scale(.86) translateY(16px); }
        to{ opacity:1; transform:scale(1) translateY(0); }
      }
      @media (prefers-reduced-motion: reduce){
        #intro img, #intro .intro-tag, #intro .intro-skip{ animation:none; }
        #intro{ transition:opacity .2s ease; }
      }

      /* ---------- Layout ---------- */
      .veil{
        min-height:100vh;
        background:linear-gradient(180deg, rgba(5,7,13,.42) 0%, rgba(5,7,13,.18) 300px, rgba(5,7,13,.30) 70%, rgba(4,5,10,.78) 100%);
        padding:0 12px 34px;
      }
      .wrap{ max-width:1240px; margin:0 auto; }
      header.site-head{ text-align:center; padding:22px 0 4px; }
      header.site-head img.logo{
        width:min(360px, 72vw); height:auto;
        filter:drop-shadow(0 10px 22px rgba(0,0,0,.75)) drop-shadow(0 0 26px rgba(120,70,220,.35));
      }
      .layout{
        display:grid; grid-template-columns:238px minmax(0,1fr) 262px;
        gap:16px; align-items:start; margin-top:10px;
      }
      @media (max-width:1080px){
        .layout{ grid-template-columns:210px minmax(0,1fr); }
        .col-right{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
        .col-right .panel{ margin-bottom:0; }
      }
      @media (max-width:720px){
        .layout{ grid-template-columns:1fr; }
        .col-right{ display:block; }
        .col-right .panel{ margin-bottom:16px; }
        body{ background-attachment:scroll; }
      }

      /* ---------- Top bar ---------- */
      .topbar{
        display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px;
        background:linear-gradient(180deg, #33465f 0%, #223149 55%, #16213600 130%), linear-gradient(180deg,#263650,#182437);
        border:2px solid var(--gold-lo);
        box-shadow:inset 0 1px 0 rgba(246,220,143,.5), inset 0 -8px 16px rgba(0,0,0,.45), var(--shadow-panel);
        border-radius:6px; padding:9px 16px; margin-top:6px;
        color:#e9dcae; font-family:"Cinzel",serif; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
      }
      .topbar a{ color:#e9dcae; text-decoration:none; display:inline-flex; align-items:center; gap:7px; }
      .topbar a:hover{ color:var(--gold-hi); text-shadow:0 0 10px rgba(246,220,143,.6); }
      .topbar .spacer{ flex:1; }
      .online-dot{ width:9px; height:9px; border-radius:50%; background:var(--good); box-shadow:0 0 9px var(--good); display:inline-block; }
      .topbar .tb-ico{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; flex:none;
        background:linear-gradient(180deg,#5a6f8f,#263650 55%,#162136);
        border:1px solid rgba(216,169,64,.85); border-radius:6px;
        box-shadow:inset 0 1px 0 rgba(246,220,143,.65), inset 0 -4px 6px rgba(0,0,0,.55), 0 2px 5px rgba(0,0,0,.45); }
      /* ---------- Iconos dorados (SVG, un solo set coherente) ---------- */
      .ico{
        display:inline-block; flex:none; vertical-align:middle;
        width:20px; height:20px;
        filter:drop-shadow(0 1px 1px rgba(0,0,0,.55)) drop-shadow(0 0 3px rgba(216,169,64,.35));
      }
      .ico use{ pointer-events:none; }
      .tb-ico .ico{ width:17px; height:17px; }
      .gem .ico{ width:13px; height:13px; filter:drop-shadow(0 0 5px rgba(246,220,143,.85)) drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
      .note-ico{ width:16px; height:16px; vertical-align:-3px; margin-right:2px; }

      /* ---------- Paneles: marco dorado doble + relieve ---------- */
      .panel{
        position:relative;
        background:linear-gradient(180deg, var(--parch) 0%, var(--parch-2) 78%, var(--parch-3) 100%);
        border:2px solid var(--gold-lo);
        border-radius:7px;
        box-shadow:
          inset 0 0 0 2px #fdf6da,
          inset 0 0 0 4px rgba(138,100,32,.55),
          inset 0 14px 26px rgba(255,252,235,.55),
          inset 0 -18px 30px rgba(122,90,32,.20),
          var(--shadow-panel);
        margin-bottom:16px;
      }
      .panel-head{
        display:flex; align-items:center; gap:9px;
        background:
          linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 45%),
          repeating-linear-gradient(93deg, rgba(255,255,255,.025) 0 3px, rgba(0,0,0,.03) 3px 6px),
          linear-gradient(180deg, var(--stone-hi) 0%, var(--stone-mid) 52%, var(--stone-lo) 100%);
        color:var(--gold-hi);
        font-family:"Cinzel",serif; font-weight:700; font-size:14.5px;
        letter-spacing:.14em; text-transform:uppercase;
        padding:10px 14px 9px;
        border-bottom:2px solid var(--gold);
        box-shadow:inset 0 1px 0 rgba(246,220,143,.55), inset 0 -6px 10px rgba(0,0,0,.5), 0 3px 7px rgba(0,0,0,.35);
        border-radius:5px 5px 0 0;
        text-shadow:0 1px 0 #000, 0 0 12px rgba(246,220,143,.25);
      }
      .panel-head .gem{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; flex:none;
        background:radial-gradient(circle at 35% 28%, #5d7292, #22314b 72%);
        border:1px solid rgba(216,169,64,.9); border-radius:50%;
        box-shadow:inset 0 1px 0 rgba(246,220,143,.6), inset 0 -4px 6px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.4); }
      .panel-body{ padding:14px 16px 16px; font-size:16.5px; line-height:1.5; }
      .panel-body p{ margin:0 0 10px; }
      .panel-body p:last-child{ margin-bottom:0; }

      /* ---------- Botones con relieve ---------- */
      .btn{
        display:flex; align-items:center; justify-content:center; gap:8px;
        width:100%; box-sizing:border-box;
        font-family:"Cinzel",serif; font-weight:700; font-size:14px;
        letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
        padding:11px 12px; border-radius:5px; cursor:pointer;
        color:#fff8e2; text-shadow:0 1px 2px rgba(0,0,0,.65);
        border:1px solid rgba(0,0,0,.55);
        transition:transform .08s ease, filter .15s ease, box-shadow .15s ease;
        margin-bottom:9px;
      }
      .btn:last-child{ margin-bottom:0; }
      .btn-gold{
        background:linear-gradient(180deg,#f2cd6d 0%, #d8a940 38%, #a97c22 72%, #8a6420 100%);
        box-shadow:inset 0 1px 0 #fff3c4, inset 0 -3px 6px rgba(70,45,0,.55), inset 0 0 0 1px rgba(94,67,15,.6), 0 5px 12px rgba(0,0,0,.5);
      }
      .btn-blue{
        background:linear-gradient(180deg,#5b84c4 0%, #33619f 42%, #22497c 75%, #1a3a63 100%);
        box-shadow:inset 0 1px 0 #cfe4ff, inset 0 -3px 6px rgba(4,20,44,.6), inset 0 0 0 1px rgba(10,30,60,.65), 0 5px 12px rgba(0,0,0,.5);
      }
      .btn-green{
        background:linear-gradient(180deg,#79c25e 0%, #4c9a37 42%, #35751f 75%, #2a6119 100%);
        box-shadow:inset 0 1px 0 #dcffc9, inset 0 -3px 6px rgba(10,40,0,.55), inset 0 0 0 1px rgba(20,60,10,.6), 0 5px 12px rgba(0,0,0,.5);
      }
      .btn-stone{
        background:linear-gradient(180deg,#5a6c88 0%, #3c4f6b 45%, #28394f 100%);
        box-shadow:inset 0 1px 0 #b9cbe4, inset 0 -3px 6px rgba(0,0,0,.55), inset 0 0 0 1px rgba(8,16,30,.7), 0 5px 12px rgba(0,0,0,.5);
      }
      .btn:hover{ filter:brightness(1.1); box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -3px 6px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.55), 0 0 14px rgba(216,169,64,.35); }
      .btn:active{ transform:translateY(2px); filter:brightness(.96); }
      .btn .b-ico{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; flex:none;
        background:rgba(20,14,2,.28); border:1px solid rgba(255,243,196,.55); border-radius:6px;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 5px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.35); }
      .btn .b-ico .ico{ width:16px; height:16px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.65)) drop-shadow(0 0 4px rgba(255,220,120,.45)); }
      .btn:hover .b-ico{ background:rgba(20,14,2,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 5px rgba(0,0,0,.3), 0 0 8px rgba(246,220,143,.45); }
      .btn.small{ width:auto; display:inline-flex; padding:8px 16px; font-size:12.5px; margin-bottom:0; }

      /* ---------- Menú lateral ---------- */
      .menu-list{ list-style:none; margin:0; padding:4px 0; }
      .menu-list li{ margin:0; }
      .menu-list a{
        display:flex; align-items:center; gap:9px;
        padding:7px 10px; color:var(--ink); text-decoration:none; font-size:16.5px;
        border-radius:4px; border-bottom:1px solid rgba(122,90,32,.18);
      }
      .menu-list li:last-child a{ border-bottom:none; }
      .menu-list a .m-ico{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex:none;
        background:linear-gradient(180deg,#54678a 0%, #2e3f5c 52%, #1b2740 100%);
        border:1px solid var(--gold-lo); border-radius:6px;
        box-shadow:inset 0 1px 0 rgba(246,220,143,.65), inset 0 -5px 7px rgba(0,0,0,.55), inset 0 0 0 1px rgba(246,220,143,.14), 0 2px 5px rgba(0,0,0,.32); }
      .menu-list a .m-ico .ico{ width:18px; height:18px; }
      .menu-list a:hover{ background:linear-gradient(90deg, rgba(216,169,64,.28), rgba(216,169,64,0)); color:#1d1404; }
      .menu-list a:hover .m-ico, .menu-list a.active .m-ico{
        background:linear-gradient(180deg,#f2cd6d 0%, #c49a35 55%, #8a6420 100%);
        border-color:var(--gold-deep);
        box-shadow:inset 0 1px 0 #fff3c4, inset 0 -5px 7px rgba(70,45,0,.5), 0 2px 6px rgba(0,0,0,.35), 0 0 9px rgba(216,169,64,.5); }
      .menu-list a:hover .m-ico .ico, .menu-list a.active .m-ico .ico{ filter:drop-shadow(0 1px 1px rgba(60,38,0,.6)) brightness(1.08); }
      .menu-list a.active{
        background:linear-gradient(90deg, rgba(216,169,64,.45), rgba(216,169,64,.08));
        font-weight:700; box-shadow:inset 3px 0 0 var(--gold-lo);
      }
      .tag-new{
        margin-left:auto; background:linear-gradient(180deg,#79c25e,#35751f); color:#fff;
        font-family:"Cinzel",serif; font-size:9.5px; font-weight:700; letter-spacing:.1em;
        padding:2px 7px; border-radius:8px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 4px rgba(0,0,0,.35);
        text-transform:uppercase;
      }

      /* ---------- Noticias ---------- */
      .news-date{ color:var(--ink-soft); font-style:italic; font-size:14.5px; margin:2px 0 8px; }
      .news-title{ font-family:"Cinzel",serif; font-size:21px; font-weight:700; color:#241a06; margin:0 0 2px; line-height:1.25; }
      .news-sep{
        height:14px; margin:16px -4px 4px;
        background:
          linear-gradient(90deg, transparent, rgba(138,100,32,.75) 18%, rgba(138,100,32,.75) 82%, transparent) center 6px / 100% 2px no-repeat;
        position:relative;
      }
      .news-sep::after{
        content:"◆"; position:absolute; left:50%; top:50%; transform:translate(-50%,-58%);
        color:var(--gold-lo); font-size:11px; background:var(--parch-2); padding:0 8px;
      }
      .news-more{ font-family:"Cinzel",serif; font-size:13px; letter-spacing:.06em; }
      a{ color:#7a5410; }
      a:hover{ color:#a97c22; }

      /* ---------- Tablas ---------- */
      .tbl-wrap{ overflow-x:auto; border-radius:5px; box-shadow:inset 0 0 0 1px rgba(94,67,15,.5), 0 4px 10px rgba(0,0,0,.25); }
      table.tbl{ border-collapse:collapse; width:100%; font-size:15.5px; background:#f8efce; }
      table.tbl th{
        background:linear-gradient(180deg, var(--stone-hi), var(--stone-mid) 60%, var(--stone-lo));
        color:var(--gold-hi); font-family:"Cinzel",serif; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
        padding:9px 10px; text-align:left; text-shadow:0 1px 0 #000; white-space:nowrap;
        border-bottom:2px solid var(--gold);
      }
      table.tbl td{ padding:8px 10px; border-bottom:1px solid rgba(122,90,32,.22); color:var(--ink); vertical-align:middle; }
      table.tbl tbody tr:nth-child(even){ background:rgba(190,155,80,.16); }
      table.tbl tbody tr:hover{ background:rgba(216,169,64,.38); }
      table.tbl .num{ text-align:right; font-variant-numeric:tabular-nums; }
      table.tbl th.num{ text-align:right; }
      .voc{ font-weight:700; color:#5e430f; }
      .pill{
        display:inline-block; font-family:"Cinzel",serif; font-size:11px; font-weight:700; letter-spacing:.07em;
        padding:2px 9px; border-radius:9px; text-transform:uppercase;
      }
      .pill.open{ background:linear-gradient(180deg,#79c25e,#35751f); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
      .pill.closed{ background:linear-gradient(180deg,#9aa3ad,#5f6a75); color:#fff; }
      .pill.gold{ background:linear-gradient(180deg,#f2cd6d,#a97c22); color:#2e2002; box-shadow:inset 0 1px 0 #fff3c4; }

      /* ---------- Formularios ---------- */
      .field{ margin-bottom:13px; }
      .field label{ display:block; font-family:"Cinzel",serif; font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#4c3a12; margin-bottom:5px; }
      .field input, .field select{
        width:100%; box-sizing:border-box; padding:10px 12px; font-family:"Alegreya",serif; font-size:16.5px; color:#f4e7c6;
        background:linear-gradient(180deg,#131a29,#1c2639);
        border:2px solid var(--gold-lo); border-radius:5px;
        box-shadow:inset 0 2px 7px rgba(0,0,0,.75), inset 0 0 0 1px rgba(246,220,143,.14), 0 1px 0 rgba(255,250,225,.5);
        outline:none;
      }
      .field input:focus, .field select:focus{ border-color:var(--gold); box-shadow:inset 0 2px 7px rgba(0,0,0,.75), 0 0 0 3px rgba(216,169,64,.35), 0 0 14px rgba(216,169,64,.35); }
      .field .hint{ font-size:13.5px; color:var(--ink-soft); font-style:italic; margin-top:4px; }
      .form-note{
        background:rgba(216,169,64,.18); border:1px solid rgba(138,100,32,.5); border-radius:5px;
        padding:9px 12px; font-size:14.5px; margin-bottom:14px;
      }
      .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
      @media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }

      /* ---------- Vistas ---------- */
      .view{ display:none; }
      .view.on{ display:block; animation:viewIn .35s ease both; }
      @keyframes viewIn{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
      .crumb{ font-family:"Cinzel",serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#cdb872; text-shadow:0 1px 3px #000; margin:2px 2px 10px; }
      .crumb b{ color:var(--gold-hi); }

      /* ---------- Widgets derecha ---------- */
      .stat-line{ display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-bottom:1px dashed rgba(122,90,32,.35); font-size:16px; }
      .stat-line:last-child{ border-bottom:none; }
      .stat-line b{ color:#241a06; }
      .boost-row{ display:flex; gap:12px; align-items:center; padding:8px 0; border-bottom:1px dashed rgba(122,90,32,.35); }
      .boost-row:last-child{ border-bottom:none; }
      .boost-ico{
        width:52px; height:52px; flex:none; display:flex; align-items:center; justify-content:center;
        font-size:24px; color:var(--gold-hi);
        background:radial-gradient(circle at 35% 30%, #54678a, #22314b 70%);
        border:2px solid var(--gold-lo); border-radius:6px;
        box-shadow:inset 0 1px 0 rgba(246,220,143,.5), inset 0 -6px 10px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.4);
        text-shadow:0 0 10px rgba(246,220,143,.7);
      }
      .boost-ico .ico{ width:32px; height:32px; filter:drop-shadow(0 2px 2px rgba(0,0,0,.65)) drop-shadow(0 0 6px rgba(246,220,143,.45)); }
      .shop-item .boost-ico .ico{ width:27px; height:27px; }
      .boost-row small{ display:block; color:var(--ink-soft); font-style:italic; font-size:13.5px; line-height:1.1; }
      .boost-row strong{ font-size:17.5px; color:#241a06; }
      .shop-item{ display:flex; gap:12px; align-items:center; padding:9px 0; border-bottom:1px dashed rgba(122,90,32,.35); }
      .shop-item:last-of-type{ border-bottom:none; }
      .shop-item .boost-ico{ width:46px; height:46px; font-size:20px; }
      .shop-item strong{ display:block; font-size:16.5px; color:#241a06; line-height:1.2; }
      .shop-item small{ color:var(--ink-soft); font-size:13.5px; }

      /* ---------- Calendario ---------- */
      .cal{ width:100%; border-collapse:separate; border-spacing:3px; }
      .cal th{ font-family:"Cinzel",serif; font-size:11.5px; letter-spacing:.08em; color:#4c3a12; text-transform:uppercase; padding:4px 0; }
      .cal td{
        background:rgba(255,250,230,.55); border:1px solid rgba(138,100,32,.35); border-radius:4px;
        height:64px; vertical-align:top; padding:5px 6px; font-size:14px; width:14.28%;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
      }
      .cal td.empty{ background:transparent; border:none; box-shadow:none; }
      .cal td.today{ border:2px solid var(--gold-lo); background:rgba(216,169,64,.3); }
      .cal .dnum{ font-weight:700; color:#241a06; }
      .cal .ev{ display:block; margin-top:3px; font-size:12px; line-height:1.25; background:linear-gradient(180deg,#5b84c4,#22497c); color:#eef4ff; border-radius:3px; padding:2px 5px; box-shadow:0 2px 4px rgba(0,0,0,.3); }
      .cal .ev.gold{ background:linear-gradient(180deg,#f2cd6d,#a97c22); color:#2e2002; font-weight:700; }
      @media (max-width:560px){ .cal td{ height:52px; font-size:12.5px; } .cal .ev{ font-size:10.5px; } }

      /* ---------- Personaje / varios ---------- */
      .char-head{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
      .char-avatar{
        width:74px; height:74px; flex:none; display:flex; align-items:center; justify-content:center; color:var(--gold-hi);
        background:radial-gradient(circle at 35% 30%, #54678a, #1b2740 72%);
        border:2px solid var(--gold-lo); border-radius:7px;
        box-shadow:inset 0 1px 0 rgba(246,220,143,.5), inset 0 -8px 12px rgba(0,0,0,.55), 0 5px 10px rgba(0,0,0,.45);
      }
      .char-avatar .ico{ width:44px; height:44px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.65)) drop-shadow(0 0 8px rgba(246,220,143,.5)); }
      .char-head h3{ margin:0; font-family:"Cinzel",serif; font-size:23px; color:#241a06; }
      .char-head p{ margin:2px 0 0; color:var(--ink-soft); }
      .rules-list{ margin:0; padding-left:22px; }
      .rules-list li{ margin-bottom:9px; }
      .tabs{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
      .tab{
        font-family:"Cinzel",serif; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
        padding:8px 14px; border-radius:5px 5px 0 0; cursor:pointer; color:#e9dcae;
        background:linear-gradient(180deg,#54678a,#2b3c58); border:1px solid rgba(0,0,0,.5); border-bottom:none;
        box-shadow:inset 0 1px 0 rgba(246,220,143,.4); text-shadow:0 1px 2px rgba(0,0,0,.6);
      }
      .tab.on{ background:linear-gradient(180deg,#f2cd6d,#c49a35); color:#2e2002; text-shadow:0 1px 0 rgba(255,243,196,.7); }
      footer.site-foot{
        text-align:center; color:#cdb872; font-size:14px; padding:20px 10px 6px; text-shadow:0 1px 3px #000;
      }
      footer.site-foot .gold-line{ width:min(520px,80%); height:2px; margin:0 auto 12px; background:linear-gradient(90deg,transparent, var(--gold), transparent); }
      footer.site-foot button{ background:none; border:none; color:var(--gold-hi); font:inherit; cursor:pointer; text-decoration:underline; padding:0; }
      .boceto-note{ font-style:italic; opacity:.85; }

/* =====================================================================
   ADAPTADOR: el boceto usa otras clases; aqui se aplican los mismos
   estilos a las clases reales de la plantilla MyAAC en vivo.
   No se toca ninguna consulta PHP ni ningun dato del servidor.
   ===================================================================== */

/* Titulo de panel en vivo (.panel-titulo) = .panel-head del boceto */
.panel-titulo {
  display: flex; align-items: center; gap: 9px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 45%),
    repeating-linear-gradient(93deg, rgba(255,255,255,.025) 0 3px, rgba(0,0,0,.03) 3px 6px),
    linear-gradient(180deg, var(--stone-hi) 0%, var(--stone-mid) 52%, var(--stone-lo) 100%);
  color: var(--gold-hi);
  font-family: "Cinzel", serif; font-weight: 700; font-size: 14.5px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 10px 14px 9px;
  border-bottom: 2px solid var(--gold);
  box-shadow: inset 0 1px 0 rgba(246,220,143,.55), inset 0 -6px 10px rgba(0,0,0,.5), 0 3px 7px rgba(0,0,0,.35);
  border-radius: 5px 5px 0 0;
  text-shadow: 0 1px 0 #000, 0 0 12px rgba(246,220,143,.25);
}
/* Cuerpo de panel en vivo (.panel-cuerpo) = .panel-body del boceto */
.panel-cuerpo { padding: 14px 16px 16px; font-size: 16.5px; line-height: 1.5; }
.panel-cuerpo p { margin: 0 0 10px; }
.panel-cuerpo p:last-child { margin-bottom: 0; }

/* Barra superior en vivo (.barra) = .topbar del boceto */
.barra {
  background: linear-gradient(180deg, #33465f 0%, #223149 55%, #16213600 130%), linear-gradient(180deg,#263650,#182437);
  border: 2px solid var(--gold-lo);
  box-shadow: inset 0 1px 0 rgba(246,220,143,.5), inset 0 -8px 16px rgba(0,0,0,.45), var(--shadow-panel);
  color: #e9dcae; font-family: "Cinzel", serif; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.barra a { color: #e9dcae; }
.barra a:hover { color: var(--gold-hi); text-shadow: 0 0 10px rgba(246,220,143,.6); }

/* Botones en vivo: .btn-azul/.btn-oro/.btn-verde = .btn-blue/.btn-gold/.btn-green */
.btn-azul {
  background: linear-gradient(180deg,#5b84c4 0%, #33619f 42%, #22497c 75%, #1a3a63 100%);
  box-shadow: inset 0 1px 0 #cfe4ff, inset 0 -3px 6px rgba(4,20,44,.6), inset 0 0 0 1px rgba(10,30,60,.65), 0 5px 12px rgba(0,0,0,.5);
}
.btn-oro {
  background: linear-gradient(180deg,#f2cd6d 0%, #d8a940 38%, #a97c22 72%, #8a6420 100%);
  box-shadow: inset 0 1px 0 #fff3c4, inset 0 -3px 6px rgba(70,45,0,.55), inset 0 0 0 1px rgba(94,67,15,.6), 0 5px 12px rgba(0,0,0,.5);
  color: #2e2002; text-shadow: 0 1px 0 rgba(255,243,196,.7);
}
.btn-verde {
  background: linear-gradient(180deg,#79c25e 0%, #4c9a37 42%, #35751f 75%, #2a6119 100%);
  box-shadow: inset 0 1px 0 #dcffc9, inset 0 -3px 6px rgba(10,40,0,.55), inset 0 0 0 1px rgba(20,60,10,.6), 0 5px 12px rgba(0,0,0,.5);
}
/* Boton de descarga: mantiene el anillo dorado del CSS v2 en vivo */
.btn-descarga {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.3), 0 0 0 1px #0d0b12, 0 0 0 3px rgba(216,169,64,.75), 0 0 18px rgba(65,168,99,.55), 0 4px 8px rgba(0,0,0,.5);
}

/* Menu lateral en vivo (.menu) = .menu-list del boceto */
.menu a .i {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none;
  background: linear-gradient(180deg,#54678a 0%, #2e3f5c 52%, #1b2740 100%);
  border: 1px solid var(--gold-lo); border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(246,220,143,.65), inset 0 -5px 7px rgba(0,0,0,.55), inset 0 0 0 1px rgba(246,220,143,.14), 0 2px 5px rgba(0,0,0,.32);
}
.menu a .i svg, .menu a svg.i { width: 18px; height: 18px; }
.menu a:hover { background: linear-gradient(90deg, rgba(216,169,64,.28), rgba(216,169,64,0)); }
.menu a:hover .i, .menu a[aria-current="page"] .i {
  background: linear-gradient(180deg,#f2cd6d 0%, #c49a35 55%, #8a6420 100%);
  border-color: var(--gold-deep);
  box-shadow: inset 0 1px 0 #fff3c4, inset 0 -5px 7px rgba(70,45,0,.5), 0 2px 6px rgba(0,0,0,.35), 0 0 9px rgba(216,169,64,.5);
}

/* Noticias en vivo (.noticias) */
.noticias a { font-family: "Cinzel", serif; font-size: 21px; font-weight: 700; color: #241a06; line-height: 1.25; }
.noticias time { color: var(--ink-soft); font-style: italic; font-size: 14.5px; margin: 2px 0 8px; }

/* Tablas en vivo (.tabla y .BoxContent) = table.tbl del boceto */
.tabla th, .BoxContent table:not(.tabla) th {
  background: linear-gradient(180deg, var(--stone-hi), var(--stone-mid) 60%, var(--stone-lo));
  color: var(--gold-hi); font-family: "Cinzel", serif; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 10px; text-align: left; text-shadow: 0 1px 0 #000; border-bottom: 2px solid var(--gold);
}
.tabla td, .BoxContent table:not(.tabla) td { padding: 8px 10px; border-bottom: 1px solid rgba(122,90,32,.22); }
.tabla tbody tr:nth-child(even), .BoxContent table:not(.tabla) tbody tr:nth-child(even) { background: rgba(190,155,80,.16); }
.tabla tbody tr:hover, .BoxContent table:not(.tabla) tbody tr:hover { background: rgba(216,169,64,.38); }

/* Formularios de MyAAC (.BoxContent) = .field del boceto */
.BoxContent input:not([type]), .BoxContent input[type="text"], .BoxContent input[type="password"],
.BoxContent input[type="email"], .BoxContent input[type="search"], .BoxContent input[type="number"],
.BoxContent select, .BoxContent textarea {
  background: linear-gradient(180deg,#131a29,#1c2639); color: #f4e7c6;
  border: 2px solid var(--gold-lo); border-radius: 5px;
  box-shadow: inset 0 2px 7px rgba(0,0,0,.75), inset 0 0 0 1px rgba(246,220,143,.14), 0 1px 0 rgba(255,250,225,.5);
}
.BoxContent input:focus, .BoxContent select:focus, .BoxContent textarea:focus {
  border-color: var(--gold); box-shadow: inset 0 2px 7px rgba(0,0,0,.75), 0 0 0 3px rgba(216,169,64,.35), 0 0 14px rgba(216,169,64,.35);
}

/* Cabecera: el logo con alas completas, centrado y con aire */
.hero { text-align: center; padding: 22px 12px 4px; }
.emblema { width: min(460px, 80vw); height: auto;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.75)) drop-shadow(0 0 26px rgba(120,70,220,.35)); }

/* Pie en vivo (.pie) = footer.site-foot del boceto */
.pie { text-align: center; color: #cdb872; text-shadow: 0 1px 3px #000; }
.pie::before { content: ""; display: block; width: min(520px, 80%); height: 2px; margin: 0 auto 12px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); }

/* Iconos nuevos: el sprite externo se usa con <use href="img/icons.svg#i-...">;
   los iconos viejos en linea (#i-estrella, etc.) siguen funcionando. */
svg.ico { width: 20px; height: 20px; }

/* =====================================================================
   POTENCIADOS DE HOY v3.1: ARRIBA Y EN COLUMNA (correccion del desborde)
   El retrato de 112px en fila hacia que "Brachiodemon" se saliera de la
   columna de 262px. Ahora: criatura ARRIBA, nombre ABAJO, centrado, sin
   desborde. El retrato (.retrato img) y su animacion NO se tocan.
   ===================================================================== */
.col-der { display: flex; flex-direction: column; }
.col-der .panel:has(.potenciado) {
  order: -1;
  border-color: var(--gold);
  box-shadow:
    inset 0 0 0 2px #fdf6da,
    inset 0 0 0 4px rgba(138,100,32,.55),
    inset 0 14px 26px rgba(255,252,235,.55),
    inset 0 -18px 30px rgba(122,90,32,.20),
    0 0 0 1px #20140a, 0 0 0 4px var(--gold-lo), 0 0 0 5px #20140a,
    0 0 26px rgba(216,169,64,.45), 0 18px 42px rgba(0,0,0,.62);
  animation: mgBoostGlow 2.6s ease-in-out infinite;
}
@keyframes mgBoostGlow {
  0%, 100% { box-shadow:
    inset 0 0 0 2px #fdf6da, inset 0 0 0 4px rgba(138,100,32,.55),
    inset 0 14px 26px rgba(255,252,235,.55), inset 0 -18px 30px rgba(122,90,32,.20),
    0 0 0 1px #20140a, 0 0 0 4px var(--gold-lo), 0 0 0 5px #20140a,
    0 0 18px rgba(216,169,64,.35), 0 18px 42px rgba(0,0,0,.62); }
  50% { box-shadow:
    inset 0 0 0 2px #fdf6da, inset 0 0 0 4px rgba(138,100,32,.55),
    inset 0 14px 26px rgba(255,252,235,.55), inset 0 -18px 30px rgba(122,90,32,.20),
    0 0 0 1px #20140a, 0 0 0 4px var(--gold-lo), 0 0 0 5px #20140a,
    0 0 34px rgba(216,169,64,.6), 0 18px 42px rgba(0,0,0,.62); }
}
@media (prefers-reduced-motion: reduce) {
  .col-der .panel:has(.potenciado) { animation: none; }
}
/* Columna: retrato arriba, texto abajo, centrado, sin desborde */
.col-der .panel:has(.potenciado) .potenciado {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 10px 0 4px; min-width: 0;
}
.col-der .panel:has(.potenciado) .potenciado > div { min-width: 0; max-width: 100%; }
.col-der .panel:has(.potenciado) .retrato { width: 96px; height: 96px; flex: none; }
.col-der .panel:has(.potenciado) .potenciado span.nombre {
  display: block; font-size: 17px; line-height: 1.2; max-width: 100%;
  overflow-wrap: break-word; word-break: break-word;
}
.col-der .panel:has(.potenciado) .potenciado b { font-size: 14px; }
/* Tambien en cualquier .potenciado fuera de la columna derecha */
.potenciado { min-width: 0; }
.potenciado span.nombre { overflow-wrap: break-word; word-break: break-word; max-width: 100%; }

/* =====================================================================
   v3.1: CABECERA CON EL LOGO NUEVO (planeta, alas completas)
   El logo es un PNG transparente 1200x1200: necesita aire y un fondo
   oscuro detras para que se lea sobre el castillo.
   ===================================================================== */
.hero {
  background: radial-gradient(ellipse at 50% 42%, rgba(8,10,20,.88) 0%, rgba(8,10,20,.55) 55%, rgba(8,10,20,0) 78%);
  padding: 18px 12px 2px;
}
.hero .emblema, .emblema {
  width: min(430px, 82vw); height: auto;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.8)) drop-shadow(0 0 28px rgba(120,70,220,.35));
}

/* =====================================================================
   v3.1: MARCO DE PANEL REFORZADO (que el cambio se VEA)
   Regla al final del archivo para que gane a millennial.css y al v2.
   ===================================================================== */
.panel {
  border: 2px solid var(--gold-lo);
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 2px #fdf6da,
    inset 0 0 0 4px rgba(138,100,32,.55),
    inset 0 14px 26px rgba(255,252,235,.5),
    inset 0 -18px 30px rgba(122,90,32,.18),
    0 0 0 1px #20140a, 0 0 0 4px var(--gold-lo), 0 0 0 5px #20140a,
    0 18px 42px rgba(0,0,0,.62), 0 4px 10px rgba(0,0,0,.55);
}
.panel-titulo {
  border-radius: 6px 6px 0 0;
  box-shadow: inset 0 1px 0 rgba(246,220,143,.6), inset 0 -6px 12px rgba(0,0,0,.55), 0 3px 8px rgba(0,0,0,.4);
}
/* Iconos nuevos: tamano y brillo coherentes en paneles y menus */
svg.i { width: 20px; height: 20px; }
.panel-titulo svg.i { width: 20px; height: 20px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.menu svg.i { width: 20px; height: 20px; }

/* ==========================================================================
   v3.2 MOVIL (2026-11-06) — verificado con render real a 390px y 768px.
   Fallos encontrados en vivo:
   - Highscores ensanchaba el viewport a 635px y login a 431px: las tablas
     del sistema (605px / 426px / 401px) no son .tabla y no tenian contencion.
   - La intro en movil podia verse cortada: sin max-height, con el texto
     absoluto encima y con un PNG de 1,4 MB que tarda en cargar.
   - En movil todo apilaba en orden de PC: Potenciados quedaba despues de
     todas las noticias, con mucho scroll hasta lo importante.
   Solo se tocan clases reales de la plantilla. Escritorio intacto.
   ========================================================================== */

/* --- Tablas del sistema: scroll interno, nunca ensanchan la pagina (todas las pantallas) --- */
html, body { overflow-x: clip; }
main, .panel-cuerpo, .BoxContent { min-width: 0; }
.BoxContent { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.BoxContent table { width: 100%; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

@media (max-width: 760px) {
  /* --- Intro: logo COMPLETO, nunca cortado, texto debajo sin taparlo --- */
  #mg-intro {
    height: 100vh; height: 100dvh;
    width: 100vw; max-width: 100vw; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3vh; padding: 4vh 16px 5vh; box-sizing: border-box;
  }
  #mg-intro img {
    width: min(520px, 82vw); max-width: 340px;
    max-height: 56vh; max-height: 56dvh;
    height: auto; object-fit: contain; flex: none;
  }
  #mg-intro .mg-intro-txt { position: static; flex: none; }

  /* --- Orden movil pensado: cabecera, Potenciados, noticias, cuenta/tienda, resto --- */
  .portal { display: flex; flex-direction: column; }
  .col-izq, .col-der { display: contents; }
  .col-der > section.panel:nth-child(1) { order: 1; }  /* Potenciados de hoy */
  main.col-centro { order: 2; }                          /* Noticias (contenido) */
  nav.barra { order: 3; }                                /* Discord / Descargar / En linea */
  .col-izq > section.panel:nth-child(1) { order: 4; }   /* Acceso (Entrar / Crear cuenta) */
  .col-der > section.panel:nth-child(2) { order: 5; }   /* Tienda */
  .col-izq > section.panel:nth-child(2) { order: 6; }   /* Noticias (menu) */
  .col-izq > section.panel:nth-child(3),
  .col-izq > section.panel:nth-child(4),
  .col-izq > section.panel:nth-child(5) { order: 7; }   /* Informacion, Comunidad, Biblioteca */
  .col-der > section.panel:nth-child(3) { order: 8; }   /* Encuesta */
  .col-der > section.panel:nth-child(4) { order: 9; }   /* Servidor */
  .portal > nav.barra, .portal > main, .portal > section.panel { margin-bottom: 16px; }

  /* --- Menus secundarios compactos: enlaces en 2 columnas, menos scroll --- */
  .col-izq ul.menu { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
  .col-izq ul.menu li a { padding: 7px 8px; font-size: 13.5px; }

  /* --- Formularios (login/registro): campos dentro del ancho, sin ensanchar --- */
  .BoxContent input[type="text"], .BoxContent input[type="password"],
  .BoxContent input[type="email"], .BoxContent input[type="number"],
  .BoxContent select, .BoxContent textarea {
    max-width: 100%; box-sizing: border-box;
  }
  .BoxContent input[type="submit"], .BoxContent input[type="button"],
  .BoxContent button { min-height: 44px; }

  /* --- Cabecera en movil: logo grande pero sin comer toda la pantalla --- */
  .hero { padding: 14px 12px 2px; }
  .emblema { width: min(420px, 78vw); max-height: 40vh; max-height: 40dvh; object-fit: contain; }

  /* --- Barra rapida: que quepa sin apretar --- */
  nav.barra { flex-wrap: wrap; }
  nav.barra a { min-height: 40px; }
}