/* Template jOTa — portado de home-mockup-jota.html (fonte de design aprovada). */
:root{
  --maxw:1280px;--gap:14px;--r:3px;
  --navy:#0b1322;--navy-2:#0e1a30;--navy-3:#16294a;--navy-line:#23304a;
  --ink:#2c2014;--ink-soft:#7a6240;--parch:#ece0c2;--parch-2:#e3d3ad;--parch-edge:#d8c49a;
  --stone:#352a1d;--stone-2:#241b12;--gold:#c79a3c;--gold-lite:#e6c66e;--gold-deep:#8a6620;
  --azure:#2f86c4;--azure-deep:#1b5e92;--teal:#46c8d2;--ember:#d9772b;--wax:#8c2420;--green:#3f6e34;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"EB Garamond",Georgia,serif;color:var(--ink);background:var(--navy);font-size:15.5px;-webkit-font-smoothing:antialiased}
a{color:var(--azure-deep)}
.ic{width:15px;height:15px;display:inline-block;vertical-align:middle;flex:none;color:var(--gold)}

/* ===== atmosfera navy + magia ===== */
.scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(140% 80% at 50% -10%,#1a2c4e 0%,#0e1a30 42%,var(--navy) 100%)}
.scene .auroras{position:absolute;inset:0;background:
    radial-gradient(60% 50% at 18% 30%,rgba(70,200,210,.10),transparent 60%),
    radial-gradient(60% 50% at 84% 26%,rgba(217,119,43,.10),transparent 60%)}
.scene .dragon{position:absolute;right:9vw;top:11vh;width:230px;opacity:.10;animation:soar 16s ease-in-out infinite}
.scene .dragon svg{width:100%;fill:#9fd6e0}
@keyframes soar{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-22px) rotate(1deg)}}
.motes span{position:absolute;width:3px;height:3px;border-radius:50%;background:#bfe9ff;opacity:0;box-shadow:0 0 7px #8fd6ff;animation:drift linear infinite}
@keyframes drift{0%{opacity:0;transform:translateY(0)}14%{opacity:.65}100%{opacity:0;transform:translateY(-80vh) translateX(26px)}}

.wrap{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:22px 16px 50px}

/* ===== HERO com vinheta (arte trocavel images/hero.jpg, esmaece no navy) ===== */
.hero{position:relative;aspect-ratio:2172 / 589;min-height:120px;margin-bottom:var(--gap);border-radius:6px;overflow:hidden;
  background:#0c2436;box-shadow:0 0 0 1px var(--gold-deep),0 12px 30px rgba(0,0,0,.5);transform:translateZ(0)}
/* arte (PNG hero.jpg) com leve transparencia + Ken Burns (zoom/pan lento) */
.hero .hero-img{position:absolute;inset:0;z-index:0;
  background:url("images/hero.jpg") center center / cover no-repeat;
  opacity:.9;transform-origin:50% 48%;
  animation:heroBreath 16s ease-in-out infinite alternate;will-change:transform}
/* respiracao de zoom: parte de scale(1) (arte 100% visivel, sem barras) e sobe de leve */
@keyframes heroBreath{
  0%{transform:scale(1)}
  100%{transform:scale(1.045)}}
/* aura magica pulsante por tras da arte */
.hero .hero-glow{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(38% 60% at 30% 52%,rgba(217,140,60,.30),transparent 62%),
    radial-gradient(40% 62% at 72% 48%,rgba(70,200,210,.28),transparent 62%);
  animation:heroGlow 9s ease-in-out infinite alternate}
@keyframes heroGlow{0%{opacity:.5;transform:translateX(-2%) scale(1)}100%{opacity:1;transform:translateX(2%) scale(1.06)}}
/* relance de luz (dourado/teal) atravessando o hero */
.hero .hero-sheen{position:absolute;inset:-40% -15%;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 40%,rgba(70,200,210,.10) 46%,rgba(255,242,205,.24) 50%,rgba(230,198,110,.12) 54%,transparent 60%);
  background-size:230% 100%;background-repeat:no-repeat;
  animation:heroSheen 8s ease-in-out infinite}
@keyframes heroSheen{0%,8%{background-position:135% 0;opacity:0}16%{opacity:1}44%{opacity:1}58%,100%{background-position:-35% 0;opacity:0}}
/* vinheta: funde a arte no navy (bordas + base) — reforca a transparencia */
.hero .hero-vignette{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(135% 115% at 50% 45%,transparent 64%,rgba(11,19,34,.28) 100%),
    linear-gradient(180deg,rgba(11,19,34,.16) 0%,transparent 24%,transparent 80%,rgba(11,19,34,.40) 100%)}
/* faiscas/embers subindo */
.hero .hero-embers{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.hero .hero-embers i{position:absolute;bottom:-14px;width:3px;height:3px;border-radius:50%;
  background:#ffd98a;box-shadow:0 0 8px 1px rgba(255,200,110,.85);opacity:0;
  animation:heroEmber 8s linear infinite}
@keyframes heroEmber{0%{transform:translate3d(0,0,0) scale(1);opacity:0}8%{opacity:.95}82%{opacity:.6}100%{transform:translate3d(20px,-300px,0) scale(.35);opacity:0}}
.hero .hero-embers i:nth-child(1){left:6%;animation-duration:8.5s;animation-delay:.2s}
.hero .hero-embers i:nth-child(2){left:15%;animation-duration:7s;animation-delay:1.6s}
.hero .hero-embers i:nth-child(3){left:24%;animation-duration:9.5s;animation-delay:.8s;width:2px;height:2px}
.hero .hero-embers i:nth-child(4){left:33%;animation-duration:8s;animation-delay:3s}
.hero .hero-embers i:nth-child(5){left:42%;animation-duration:10s;animation-delay:2.2s;width:4px;height:4px}
.hero .hero-embers i:nth-child(6){left:51%;animation-duration:7.5s;animation-delay:4s}
.hero .hero-embers i:nth-child(7){left:60%;animation-duration:9s;animation-delay:1s;width:2px;height:2px}
.hero .hero-embers i:nth-child(8){left:69%;animation-duration:8.5s;animation-delay:5s}
.hero .hero-embers i:nth-child(9){left:78%;animation-duration:7s;animation-delay:2.6s}
.hero .hero-embers i:nth-child(10){left:86%;animation-duration:10s;animation-delay:.5s;width:4px;height:4px}
.hero .hero-embers i:nth-child(11){left:93%;animation-duration:8s;animation-delay:3.6s;width:2px;height:2px}
.hero .hero-embers i:nth-child(12){left:48%;animation-duration:11s;animation-delay:6s}
/* acessibilidade: reduz movimento */
@media (prefers-reduced-motion: reduce){
  .hero .hero-img{animation:none;transform:none}
  .hero .hero-glow,.hero .hero-sheen,.hero .hero-embers i{animation:none}
  .hero .hero-sheen{opacity:0}}
.hero .layer{position:absolute;inset:0;opacity:.5}
.hero .swirl{background:
    radial-gradient(40% 60% at 30% 55%,rgba(217,140,60,.4),transparent 60%),
    radial-gradient(40% 60% at 72% 50%,rgba(70,200,210,.4),transparent 60%)}
.hero .silh{position:absolute;bottom:0;opacity:.5;background:#0a1420}
.hero .silh.drg{right:8%;top:14%;width:280px;height:170px;opacity:.42;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 110'><path d='M8 46 Q42 12 64 40 Q74 22 88 42 L108 33 Q132 20 156 38 Q178 14 212 34 Q182 44 164 54 Q176 66 158 76 Q166 88 148 84 L130 64 Q108 74 90 60 Q74 76 58 62 Q42 74 30 58 Q16 62 8 46 Z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 110'><path d='M8 46 Q42 12 64 40 Q74 22 88 42 L108 33 Q132 20 156 38 Q178 14 212 34 Q182 44 164 54 Q176 66 158 76 Q166 88 148 84 L130 64 Q108 74 90 60 Q74 76 58 62 Q42 74 30 58 Q16 62 8 46 Z'/></svg>") center/contain no-repeat;background:#0a1828}
.hero .silh.f1{left:14%;width:70px;height:150px;clip-path:polygon(35% 0,65% 0,72% 30%,85% 100%,58% 100%,50% 60%,42% 100%,15% 100%,28% 30%)}
.hero .silh.f2{left:24%;width:60px;height:120px;opacity:.4;clip-path:polygon(38% 0,62% 0,70% 32%,80% 100%,55% 100%,50% 64%,45% 100%,20% 100%,30% 32%)}
/* vinheta: esmaece a arte no fundo navy */
.hero::after{display:none}
.hero .art-note{position:absolute;left:14px;bottom:11px;z-index:3;font-family:"Cinzel",serif;font-size:8px;letter-spacing:.2em;color:#cdbfa0;text-transform:uppercase;opacity:.5;border:1px dashed rgba(199,154,60,.5);padding:3px 8px;border-radius:3px}

/* brasao + wordmark jOTa */
.brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);z-index:3;text-align:center}
.brand .medal{width:74px;height:74px;margin:0 auto 4px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
.logo{font-family:"Cinzel Decorative",serif;font-weight:900;font-size:74px;line-height:.9;letter-spacing:.01em;
  -webkit-text-stroke:2px #3a2408;text-shadow:0 3px 10px rgba(0,0,0,.6),0 0 26px rgba(255,210,120,.35)}
.logo span{background:linear-gradient(180deg,#fdeeb6,#e9c163 46%,#a9781f);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo .ot{background:linear-gradient(180deg,#fff6da,#ffe08a 46%,#d29a2c);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 10px rgba(70,200,210,.55))}
.brand .sub{font-family:"Cinzel",serif;font-weight:600;font-size:11px;letter-spacing:.5em;color:#bfe0ea;margin-top:8px;text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.7)}

/* ===== decreto ===== */
.decree{position:relative;display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;margin-bottom:var(--gap);
  padding:10px 38px;background:linear-gradient(180deg,var(--parch),var(--parch-2));border:1px solid var(--stone);border-radius:var(--r);
  box-shadow:0 0 0 2px var(--gold-deep),0 6px 18px rgba(0,0,0,.5);font-family:"Cinzel",serif;font-size:11.5px;letter-spacing:.04em}
.decree::before,.decree::after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:24px;height:28px;background:var(--navy-3)}
.decree::before{left:-8px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,35% 50%)}
.decree::after{right:-8px;clip-path:polygon(0 0,100% 0,65% 50%,100% 100%,0 100%)}
.decree b{color:var(--azure-deep)}.decree .on{color:var(--green);font-weight:700}
.decree .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#4ea64a;box-shadow:0 0 7px #5fc25a;margin-right:6px}
.decree a{text-decoration:none;display:inline-flex;align-items:center;gap:6px}.decree a .ic{color:var(--azure-deep);width:13px;height:13px}
.decree a:hover{color:var(--azure)}
.flags{display:inline-flex;gap:6px}.flags i{width:20px;height:13px;border-radius:2px;border:1px solid rgba(0,0,0,.35);display:inline-block}
.flag-br{background:#0a8a3f;position:relative}.flag-br::after{content:"";position:absolute;inset:3px;background:#f5d50a;clip-path:polygon(50% 10%,90% 50%,50% 90%,10% 50%)}
.flag-us{background:repeating-linear-gradient(180deg,#b22 0 2px,#fff 2px 4px)}

/* ===== paineis (pergaminho + pedra, pop sobre navy) ===== */
.panel{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 12%),
    repeating-linear-gradient(92deg,transparent 0 7px,rgba(120,90,40,.025) 7px 8px),var(--parch);
  border:1px solid var(--stone);border-radius:var(--r);margin-bottom:var(--gap);
  box-shadow:0 0 0 3px var(--gold-deep),0 0 0 4px var(--stone),0 8px 24px rgba(0,0,0,.55)}
.panel>.corner{position:absolute;width:12px;height:12px;border-radius:50%;z-index:4;
  background:radial-gradient(circle at 35% 30%,var(--gold-lite),var(--gold) 55%,var(--gold-deep));box-shadow:0 0 0 1px var(--stone-2),0 1px 2px rgba(0,0,0,.5)}
.panel>.corner.tl{left:-6px;top:30px}.panel>.corner.tr{right:-6px;top:30px}.panel>.corner.bl{left:-6px;bottom:-6px}.panel>.corner.br{right:-6px;bottom:-6px}
/* cabecalho navy + ouro + base recortada */
.ph{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;font-family:"Cinzel",serif;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#f1e3bd;text-align:center;
  padding:11px 22px 13px;background:linear-gradient(180deg,#223a64,#16294a 45%,#0f1d36);text-shadow:0 1px 2px rgba(0,0,0,.7);border-top:2px solid var(--gold)}
.ph .ic{color:var(--gold-lite);width:15px;height:15px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.ph::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:9px;background:#0c1830;
  clip-path:polygon(0 0,100% 0,96% 100%,92% 0,88% 0,84% 100%,80% 0,76% 0,72% 100%,68% 0,64% 0,60% 100%,56% 0,52% 0,48% 100%,44% 0,40% 0,36% 100%,32% 0,28% 0,24% 100%,20% 0,16% 0,12% 100%,8% 0,4% 0,0 100%)}
.ph.gold{background:linear-gradient(180deg,var(--gold-lite),var(--gold) 45%,var(--gold-deep));color:#2a1c08;text-shadow:0 1px 0 rgba(255,255,255,.25);border-top:2px solid #fff0c0}
.ph.gold .ic{color:#3a2808}.ph.gold::after{background:var(--gold-deep)}
.pb{padding:13px 14px}

/* nav */
.nav .pb{padding:6px 12px}
.nav ul{list-style:none}
.nav li{list-style:none;border-bottom:1px solid var(--parch-edge)}.nav li:last-child{border-bottom:0}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 4px;text-decoration:none;color:var(--ink);font-size:14.5px;transition:.14s}
.nav a:hover{color:var(--azure-deep);padding-left:10px}
.nav .ic{width:16px;height:16px;color:var(--gold)}.nav a:hover .ic{color:var(--azure-deep)}
.nav .badge{margin-left:auto;font-family:"Cinzel",serif;font-size:8px;font-weight:700;letter-spacing:.05em;padding:2px 6px;border-radius:2px;text-transform:uppercase}
.badge-new{background:var(--green);color:#eafbe4}.badge-hot{background:var(--ember);color:#2a1606}
.nav.custom a{font-weight:600}.nav.custom .ic{color:var(--gold-deep)}

.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;text-align:center;font-family:"Cinzel",serif;font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:11px;border-radius:3px;text-decoration:none;transition:.16s;border:1px solid var(--stone);box-shadow:0 0 0 1px var(--gold-deep),0 2px 5px rgba(0,0,0,.4);margin-bottom:9px}
.btn:hover{transform:translateY(-1px);filter:brightness(1.09)}.btn .ic{width:15px;height:15px}
.btn-gold{background:linear-gradient(180deg,var(--gold-lite),var(--gold) 55%,var(--gold-deep));color:#2a1c08;font-weight:700}.btn-gold .ic{color:#3a2808}
.btn-azure{background:linear-gradient(180deg,#3a93cf,#1b5e92 55%,#123f64);color:#eaf4fb;border-color:#1b3a52}.btn-azure .ic{color:#bfe0f4}

.search{display:flex;gap:9px}
.search input{flex:1;background:#f7efd9;border:1px solid var(--stone);border-radius:3px;padding:10px 13px;color:var(--ink);font-family:"EB Garamond",serif;font-size:14.5px;box-shadow:inset 0 1px 3px rgba(80,50,10,.2)}
.search input:focus{outline:none;border-color:var(--azure)}
.search .btn{width:auto;padding:10px 20px;margin:0}

/* conteudo / news (o $content do MyAAC herda .pb) */
.content-box .pb{font-size:16px;line-height:1.6}
.content-box .pb a{color:var(--azure-deep)}
.content-box .pb h1,.content-box .pb h2,.content-box .pb h3{font-family:"Cinzel",serif;color:var(--azure-deep);margin:6px 0 10px}
.content-box .pb table{width:100%;border-collapse:collapse}
.content-box .pb img{max-width:100%;height:auto}
.news{padding:16px}
.news .meta{display:flex;align-items:center;gap:10px;font-family:"Cinzel",serif;font-size:11px;letter-spacing:.04em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:8px}
.news .meta .ic{color:var(--gold-deep)}
.news h2{font-family:"Cinzel",serif;font-weight:700;font-size:19px;color:var(--azure-deep);margin-bottom:10px}
.news .body{font-size:16px;line-height:1.62}
.news .sep{height:1px;background:var(--parch-edge);margin:16px 0}
.news .comment{font-family:"Cinzel",serif;font-size:11px;letter-spacing:.04em;color:var(--azure-deep);text-decoration:none}
.footer-mini{font-family:"Cinzel",serif;font-size:10.5px;letter-spacing:.04em;color:var(--ink-soft);text-align:center;padding:10px;line-height:1.8}

.webshop .pb{text-align:center;position:relative}
.webshop .promo{height:78px;border-radius:3px;margin-bottom:11px;border:1px solid var(--stone);background:radial-gradient(120% 90% at 50% 120%,rgba(255,220,150,.4),transparent 60%),linear-gradient(180deg,#caa14e,#9c6f2c);position:relative}
.webshop .promo .lbl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Cinzel",serif;font-size:8px;letter-spacing:.16em;color:#3a2a12;opacity:.55;text-transform:uppercase}
.webshop .tagline{font-family:"Cinzel",serif;font-size:11px;letter-spacing:.05em;color:var(--wax);margin-bottom:11px;text-transform:uppercase}
.seal{position:absolute;right:5px;top:-6px;width:38px;height:38px;border-radius:50%;z-index:5;background:radial-gradient(circle at 38% 32%,#c0413a,var(--wax) 55%,#5e1714);box-shadow:0 2px 6px rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;transform:rotate(-12deg)}
.seal svg{width:20px;height:20px;fill:#e9c267;opacity:.85}

.motw .pb{text-align:center}
.motw .frame{height:96px;border-radius:3px;border:1px solid var(--stone);margin-bottom:9px;display:flex;align-items:center;justify-content:center;background:radial-gradient(100% 90% at 50% 30%,rgba(70,200,210,.25),transparent),linear-gradient(180deg,#1c3450,#0e2036);position:relative;overflow:hidden}
.motw .frame img{max-height:80px;image-rendering:pixelated}
.motw .frame i{width:46px;height:46px;background:#9fd6e0;opacity:.5;clip-path:polygon(50% 0,72% 18%,90% 12%,84% 34%,100% 50%,84% 66%,90% 88%,72% 82%,50% 100%,28% 82%,10% 88%,16% 66%,0 50%,16% 34%,10% 12%,28% 18%)}
.motw .nm{font-family:"Cinzel",serif;font-size:13px;color:var(--azure-deep);letter-spacing:.04em}

.online .pb{padding:8px 12px}
.online .count{font-family:"Cinzel",serif;font-size:11px;letter-spacing:.05em;color:var(--ink-soft);text-transform:uppercase;text-align:center;padding:4px 0 8px}
.online .count b{color:var(--green);font-size:15px}
.online ul{list-style:none}
.online li{display:flex;align-items:center;gap:9px;padding:7px 2px;border-bottom:1px solid var(--parch-edge)}.online li:last-child{border-bottom:0}
.online .av{width:34px;height:34px;flex:none;border-radius:3px;border:1px solid var(--stone-2);background:#1c3450;display:flex;align-items:center;justify-content:center;overflow:hidden}
.online .av img{width:34px;height:34px;object-fit:contain;image-rendering:pixelated}
.online .nm{font-size:14.5px;color:var(--ink);text-decoration:none;font-weight:500}.online .nm:hover{color:var(--azure-deep)}
.online .lv{margin-left:auto;font-family:"Cinzel",serif;font-size:11px;color:var(--ink-soft)}
.online .empty{text-align:center;color:var(--ink-soft);font-size:13px;padding:8px}

.cc{text-align:center}
.cc .orb{width:56px;height:56px;border-radius:50%;margin:2px auto 10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#5865F2,#3c45c4);box-shadow:0 0 20px rgba(88,101,242,.5),0 0 0 2px var(--gold-deep)}
.cc .orb svg{width:28px;height:28px;fill:#fff}
.cc p{font-size:13.5px;color:var(--ink-soft);margin-bottom:10px}

.grid{display:grid;grid-template-columns:212px 1fr 248px;gap:var(--gap);align-items:start}
.panel,.hero,.decree{animation:rise .5s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:980px){.grid{grid-template-columns:1fr}.scene .dragon{display:none}.logo{font-size:52px}.hero{height:auto}}

/* ===== botoes extra + formularios MyAAC dentro do conteudo ===== */
.btn-danger{background:linear-gradient(180deg,#c0413a,#8c2420 55%,#5e1714);color:#f6e3d0;border-color:#5e1714}.btn-danger .ic{color:#f3c9b0}
.btn-inline{width:auto;display:inline-flex;margin:0;padding:10px 18px}

.content-box input[type=text],.content-box input[type=password],.content-box input[type=email],.content-box input[type=number],.content-box select,.content-box textarea{
  background:#f7efd9;border:1px solid var(--stone);border-radius:3px;padding:8px 11px;color:var(--ink);font-family:"EB Garamond",serif;font-size:14.5px;box-shadow:inset 0 1px 3px rgba(80,50,10,.2);max-width:100%}
.content-box input:focus,.content-box select:focus,.content-box textarea:focus{outline:none;border-color:var(--azure)}
.content-box table{width:100%;border-collapse:collapse}
.content-box td,.content-box th{padding:5px 7px;vertical-align:top}
.content-box a{color:var(--azure-deep)}
.jota-form{margin:0 0 18px}
.jform-title,.jform-newcard h2{font-family:"Cinzel",serif;color:var(--azure-deep);font-size:16px;letter-spacing:.04em;margin:0 0 12px;text-transform:uppercase}
.jrow{display:block;margin-bottom:11px;max-width:520px}
.jrow>span{display:block;font-family:"Cinzel",serif;font-size:11px;letter-spacing:.05em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:4px}
.jrow input{width:100%}
.jred,.content-box .red{color:var(--wax) !important;font-weight:600}
.jcheck{display:flex;align-items:center;gap:7px;font-size:13.5px;margin-bottom:13px;color:var(--ink-soft)}
.jbtns{display:flex;gap:9px;flex-wrap:wrap}
.jform-newcard{border-top:1px solid var(--parch-edge);padding-top:15px;margin-top:6px}
.jform-newcard ul{margin:8px 0 13px 18px;color:var(--ink-soft);line-height:1.7}

/* neutraliza o framing/imagens CipSoft em paginas ainda em Twig do tibiacom */
.content-box [class^="Caption"],.content-box [class^="TableShadow"],.content-box [class^="TableBottom"],
.content-box .TableContentAndRightShadow,.content-box .InnerTableContainer,.content-box .BigButton,
.content-box .BigButtonOver,.content-box .MediumButtonBackground,.content-box .MediumButtonOver{background:none !important;box-shadow:none !important;border:0 !important}
.content-box .Text{font-family:"Cinzel",serif;color:var(--azure-deep);font-weight:700;font-size:14px;letter-spacing:.06em;padding:4px 0 10px;text-transform:uppercase;display:block}
.content-box .TableContent{border:0 !important;background:none !important}
.content-box .LabelV{font-family:"Cinzel",serif;font-size:11px;color:var(--ink-soft);text-transform:uppercase;white-space:nowrap;padding-right:12px}

/* ===== passada geral: neutraliza framing CipSoft + forms/tabelas em TODAS as paginas ===== */
.content-box .BoxFrameHorizontal,.content-box .BoxFrameVerticalLeft,.content-box .BoxFrameVerticalRight,
.content-box [class^="BoxFrameEdge"],.content-box [class^="Corner-"],.content-box .CornerWrapper-b,
.content-box .TopButtonContainer,.content-box .TopButton,.content-box .TableShadowContainer,.content-box .TableShadowContainerRightTop{display:none !important}
.content-box .SmallBox,.content-box .MessageContainer,.content-box .Message,.content-box .TableContainer,
.content-box .Border_1,.content-box .Border_2,.content-box .Border_3,.content-box .BoxContent,
.content-box [class^="Table"],.content-box [class^="Caption"]{background:none !important;border:0 !important;box-shadow:none !important}
.content-box img[src*="headline-bracer"],.content-box img[src*="back-to-top"],.content-box img[src*="box-frame"],
.content-box img[src*="/buttons/"],.content-box img[src*="mediumbutton"],.content-box img[src*="table-headline"],.content-box img[src*="/general/"]{display:none !important}
/* titulos de secao (tables.headline / h1-h3) */
.content-box .Text,.content-box h1,.content-box h2,.content-box h3{font-family:"Cinzel",serif;color:var(--azure-deep);font-weight:700;letter-spacing:.05em;display:block;margin:2px 0 9px}
/* cabecalho de tabela (vdarkborder navy) -> texto claro estilo .ph */
.content-box [bgcolor="#16294a"],.content-box [bgcolor="#16294a"] b,.content-box [bgcolor="#16294a"] a,.content-box .white{color:#f1e3bd !important}
.content-box [bgcolor="#16294a"]{font-family:"Cinzel",serif;letter-spacing:.05em}
/* botoes genericos (submit/button) que nao sao .btn -> dourado */
.content-box button:not(.btn),.content-box input[type=submit]:not(.btn),.content-box input[type=button]:not(.btn){
  font-family:"Cinzel",serif;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  background:linear-gradient(180deg,var(--gold-lite),var(--gold) 55%,var(--gold-deep));color:#2a1c08;
  border:1px solid var(--stone);border-radius:3px;box-shadow:0 0 0 1px var(--gold-deep),0 2px 5px rgba(0,0,0,.4);padding:9px 18px;cursor:pointer}
.content-box button:not(.btn):hover,.content-box input[type=submit]:not(.btn):hover,.content-box input[type=button]:not(.btn):hover{filter:brightness(1.09)}
/* radio/checkbox no tema */
.content-box input[type=radio],.content-box input[type=checkbox]{accent-color:var(--azure-deep);width:15px;height:15px;vertical-align:middle}
.content-box hr{border:0;border-top:1px solid var(--parch-edge);margin:12px 0}
.content-box a{color:var(--azure-deep)}.content-box a:hover{color:var(--azure)}

/* ===== paginas custom dark-theme (market/cosmetics/points/doacoes) ===== */
/* elas usam texto claro (#d8d2c2); damos um fundo escuro proprio dentro do painel
   pergaminho do jota para o texto/tabelas ficarem legiveis. */
.content-box .pb:has(.mk),.content-box .pb:has(.cz),.content-box .pb:has(.pz),.content-box .pb:has(.dz),.content-box .pb:has(.bz){
  background:#0e0b09;border-radius:0 0 3px 3px}
/* tabelas das paginas custom como BLOCO tematico (estilo jota: moldura ouro + header navy) */
.content-box .mk-table,.content-box .cz-table,.content-box .dz-table,.content-box .bz-table{
  width:100%;border-collapse:separate;border-spacing:0;border-radius:8px;overflow:hidden;
  background:#17120e;border:1px solid #3a3024;box-shadow:0 0 0 2px var(--gold-deep),0 8px 20px rgba(0,0,0,.5);margin:6px 0 16px}
.content-box .mk-table th,.content-box .cz-table th,.content-box .dz-table th,.content-box .bz-table th{
  background:linear-gradient(180deg,#223a64,#16294a 55%,#0f1d36) !important;color:#f1e3bd !important;
  font-family:"Cinzel",serif;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  text-align:left;padding:11px 12px;border:0;border-top:2px solid var(--gold)}
.content-box .mk-table td,.content-box .cz-table td,.content-box .dz-table td,.content-box .bz-table td{
  color:#ddd5c2;padding:10px 12px;border:0;border-bottom:1px solid #241d16;font-size:13px}
.content-box .mk-table tr:nth-child(even) td,.content-box .cz-table tr:nth-child(even) td,.content-box .dz-table tr:nth-child(even) td,.content-box .bz-table tr:nth-child(even) td{background:#1d1712}
.content-box .mk-table tr:hover td,.content-box .cz-table tr:hover td,.content-box .dz-table tr:hover td,.content-box .bz-table tr:hover td{background:#272016}
.content-box .mk-table tr:last-child td,.content-box .cz-table tr:last-child td,.content-box .dz-table tr:last-child td,.content-box .bz-table tr:last-child td{border-bottom:0}
/* links das paginas custom: dourado (sobrepoe o azure generico do .content-box) */
.content-box .mk a,.content-box .cz a,.content-box .pz a,.content-box .dz a,.content-box .bz a{color:#e8c66a}
.content-box .mk a:hover,.content-box .cz a:hover,.content-box .pz a:hover,.content-box .dz a:hover,.content-box .bz a:hover{color:#ffd86b}

/* ===== Account Management — cartoes coesos (substitui o framing CipSoft solto) ===== */
/* faixa de boas-vindas + logout no topo */
.content-box .acct-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:0 0 18px;padding:13px 16px;border-radius:4px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),transparent),var(--parch-2);
  border:1px solid var(--parch-edge);box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 2px 6px rgba(0,0,0,.12)}
.content-box .acct-top .msg{font-family:"Cinzel",serif;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:.02em;display:flex;align-items:center;gap:9px}
.content-box .acct-top .msg .ic{color:var(--gold-deep);width:17px;height:17px}
.content-box .acct-top form{margin:0}

/* cartao de secao: moldura ouro + cabecalho navy (assina o tema jota) */
.content-box .jcard{margin:0 0 18px;border:1px solid var(--parch-edge);border-radius:4px;overflow:hidden;
  background:#fbf6e6;box-shadow:0 0 0 2px var(--gold-deep),0 6px 16px rgba(0,0,0,.22)}
.content-box .jcard:last-child{margin-bottom:0}
.content-box .jcard-h{display:flex;align-items:center;gap:9px;padding:10px 16px;
  font-family:"Cinzel",serif;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#f1e3bd;
  background:linear-gradient(180deg,#223a64,#16294a 50%,#0f1d36);border-top:2px solid var(--gold)}
.content-box .jcard-h .ic{color:var(--gold-lite);width:15px;height:15px;flex:none}
.content-box .jcard-h .tag{margin-left:auto;font-family:"EB Garamond",serif;font-size:12px;font-weight:400;letter-spacing:0;text-transform:none}
/* faixa de botoes no rodape do cartao */
.content-box .jcard-f{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--parch-edge);background:rgba(120,90,40,.05)}
.content-box .jcard-f form{margin:0}
.content-box .jcard-f .spacer{flex:1 1 auto}

/* hint/aviso dentro de um cartao */
.content-box .jcard-note{padding:13px 16px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.content-box .jcard-note b{color:var(--azure-deep)}

/* tabela chave/valor + listagens dentro do cartao */
.content-box table.jdata{width:100%;border-collapse:collapse;margin:0}
.content-box table.jdata td,.content-box table.jdata th{padding:9px 16px;border-bottom:1px solid var(--parch-edge);vertical-align:middle;text-align:left}
.content-box table.jdata tr:last-child td{border-bottom:0}
.content-box table.jdata .k{font-family:"Cinzel",serif;font-size:11px;letter-spacing:.04em;color:var(--ink-soft);text-transform:uppercase;white-space:nowrap;width:1%}
.content-box table.jdata thead th{background:#ece0c2;font-family:"Cinzel",serif;font-size:10.5px;letter-spacing:.06em;color:var(--ink-soft);text-transform:uppercase}
.content-box table.jdata tbody tr:nth-child(even) td{background:rgba(120,90,40,.045)}
.content-box table.jdata tbody tr:hover td{background:rgba(47,134,196,.07)}
.content-box table.jdata .num{color:var(--ink-soft);width:1%;white-space:nowrap}
.content-box table.jdata .center{text-align:center}
/* inputs/selects/areas dentro de uma jdata recebem largura confortavel */
.content-box table.jdata input[type=text],.content-box table.jdata input[type=password],
.content-box table.jdata input[type=email],.content-box table.jdata select{min-width:300px;max-width:100%}
.content-box table.jdata textarea{width:100%;min-height:160px;resize:vertical}
.content-box table.jdata .opts{display:flex;flex-direction:column;gap:7px}
.content-box table.jdata .opts label{display:inline-flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--ink);line-height:1.4;cursor:pointer}
.content-box table.jdata .hint{display:block;margin-top:5px;font-size:11.5px;color:var(--ink-soft)}

/* texto introdutorio das paginas de formulario */
.content-box .jlead{margin:0 0 16px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.content-box .jlead a{color:var(--azure-deep)}
.content-box .jlead .red{color:var(--wax) !important;font-weight:600}

/* cartao de erros (tema wax/vermelho) — substitui o ErrorMessage CipSoft */
.content-box .jerrors{margin:0 0 18px;border:1px solid var(--wax);border-radius:4px;overflow:hidden;
  background:#fbeae6;box-shadow:0 0 0 2px #8c2420,0 6px 16px rgba(0,0,0,.2)}
.content-box .jerrors-h{display:flex;align-items:center;gap:9px;padding:10px 16px;
  font-family:"Cinzel",serif;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fbeae6;
  background:linear-gradient(180deg,#c0413a,#8c2420 55%,#5e1714);border-top:2px solid #e8a07a}
.content-box .jerrors-h .ic{color:#f3c9b0;width:15px;height:15px}
.content-box .jerrors ul{margin:0;padding:11px 18px 12px 36px;color:#5e1714;line-height:1.6}
.content-box .jerrors li{margin:3px 0}
.content-box .jerrors a{color:#8c2420;font-weight:600}

/* ============================================================
   Paginas core (Comunidade/Biblioteca): tabelas de dados -> visual jOTa.
   A pagina ja esta dentro do painel dourado .content-box; aqui damos aos
   cabecalhos o estilo navy+Cinzel e enquadramos as tabelas de dados como
   cartoes, SEM reescrever cada twig. Cobre highscores/online/team/bans/
   lastkills/commands/faq/spells/monsters/characters/exp-table/exp-stages/
   guilds/polls e qualquer pagina core ainda em Twig tibiacom.
   ============================================================ */
/* cabecalhos: <th> + celula/linha navy (vdarkborder #16294a) -> navy gradiente Cinzel */
.content-box .pb th,
.content-box .pb td.white,
.content-box .pb td[bgcolor="#16294a"],
.content-box .pb tr[bgcolor="#16294a"] > td,
.content-box .pb tr[style*="16294a"] > td{
  background:linear-gradient(180deg,#223a64,#16294a 55%,#0f1d36) !important;
  color:#f1e3bd !important;border-color:#0f1d36 !important;
  font-family:"Cinzel",serif !important;font-weight:700 !important;
  font-size:11px !important;letter-spacing:.05em;text-transform:uppercase;
  padding:10px 13px !important;text-align:left;vertical-align:middle}
.content-box .pb th a,.content-box .pb td.white a,
.content-box .pb tr[bgcolor="#16294a"] a,.content-box .pb td[bgcolor="#16294a"] a{color:#e9c66a !important}
.content-box .pb th img,.content-box .pb td.white img{vertical-align:middle}
/* topo ouro so na 1a celula-cabecalho */
.content-box .pb table > thead > tr:first-child > th,
.content-box .pb table > tbody > tr:first-child > td.white,
.content-box .pb table > tbody > tr:first-child[bgcolor="#16294a"] > td,
.content-box .pb table > tr:first-child[bgcolor="#16294a"] > td,
.content-box .pb table > tbody > tr:first-child > td[bgcolor="#16294a"]{border-top:2px solid var(--gold) !important}

/* enquadra como cartao as tabelas cujo cabecalho e a 1a linha/thead direta */
.content-box .pb table:has(> tbody > tr:first-child > td.white),
.content-box .pb table:has(> tr:first-child > td.white),
.content-box .pb table:has(> tbody > tr:first-child[bgcolor="#16294a"]),
.content-box .pb table:has(> tr:first-child[bgcolor="#16294a"]),
.content-box .pb table:has(> tbody > tr:first-child > td[bgcolor="#16294a"]),
.content-box .pb table:has(> tr:first-child > td[bgcolor="#16294a"]),
.content-box .pb table:has(> thead > tr > th){
  border:1px solid var(--gold-deep);border-radius:6px;overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.18);margin:0 0 16px}
/* respiro nas celulas de dados das tabelas enquadradas */
.content-box .pb table:has(> tbody > tr:first-child > td.white) > tbody > tr > td:not(.white),
.content-box .pb table:has(> tr:first-child > td.white) > tbody > tr > td:not(.white),
.content-box .pb table:has(> thead > tr > th) > tbody > tr > td{padding:8px 13px}
/* pixels de skull/outfit/loot etc nao devem virar maiusculo/Cinzel */
.content-box .pb th small,.content-box .pb td.white small{font-family:"EB Garamond",serif;font-weight:400;text-transform:none;letter-spacing:0}

/* ===== Botoes <a> dentro de .content-box: a regra generica ".content-box a" sobrescrevia
   a cor do texto (botao azul ficava ilegivel). Restaura as cores legiveis dos botoes. ===== */
.content-box a.btn-azure,.content-box a.btn-azure:hover{color:#fff}
.content-box a.btn-azure .ic{color:#dcefff}
.content-box a.btn-gold,.content-box a.btn-gold:hover{color:#2a1c08}
.content-box a.btn-danger,.content-box a.btn-danger:hover{color:#f6e3d0}