/* ============================================================
   TIBIA 2 — tema moderno (reskin do tibiacom / backend MyAAC)
   Shell novo + restyle escuro do conteudo gerado pelo MyAAC.
   ============================================================ */

/* Fallbacks com metricas CASADAS (size-adjust + ascent/descent-override): forcam a
   fonte de sistema a ocupar o MESMO espaco que a web font. Quando Cinzel/Inter/
   Source Serif chegam (Google Fonts, async), a troca NAO desloca o layout — o CLS
   da home (0.15, so por causa da troca de fonte) vai pra perto de zero. Valores
   calculados do a-z avg width + ascent/descent das proprias fontes (fontTools). O
   src lista fontes de varias plataformas (Georgia/Times no desktop, Noto Serif no
   Android) para o override valer em todas: o ascent/descent-override fixa a ALTURA
   da linha (o deslocamento dominante) qualquer que seja a fonte local usada. */
@font-face{font-family:"Cinzel-fb";src:local("Georgia"),local("Times New Roman"),local("Noto Serif");size-adjust:128.5%;ascent-override:75.9%;descent-override:28.9%;line-gap-override:0%}
@font-face{font-family:"Inter-fb";src:local("Arial"),local("Helvetica"),local("Roboto");size-adjust:121.4%;ascent-override:79.8%;descent-override:19.9%;line-gap-override:0%}
@font-face{font-family:"SrcSerif-fb";src:local("Georgia"),local("Times New Roman"),local("Noto Serif");size-adjust:109.4%;ascent-override:94.7%;descent-override:30.6%;line-gap-override:0%}

:root{
  /* PALETA — dark fantasy + gold + arcane blue.
     Proporcao alvo: ~65% escuro, ~20% dourado/marfim, ~15% azul. O dourado nao
     e metade da marca: se tudo brilha, nada e lendario. Ele fica reservado para
     RECOMPENSA (titulos, frisos, CTA, conquista) e o azul para INTERACAO
     (links, hover, selecao, glow, indicadores). */
  --ground:#080D12; --ground-2:#050a0e;
  --surface-a:#101923; --surface-b:#0b1219; --surface-3:#16212e;
  --line:rgba(120,155,190,.14); --line-strong:rgba(130,175,215,.28);

  /* Dourado = valor, conquista, progressao. */
  --gold:#E8B83E; --gold-light:#FFD96A; --gold-deep:#a9822a;

  /* Azul = mundo, sistema, interacao. Nasce do proprio T2 do logo (#016092). */
  --blue:#1677C8; --blue-bright:#27A7FF; --brand-logo:#016092;
  /* --brand* sao os nomes que o resto da folha ja usa; apontam para o azul. */
  --brand:#27A7FF; --brand-bright:#5CC0FF; --brand-deep:#1677C8;

  --text:#F3EEDC; --muted:#AFA996; --muted-2:#7c7768;
  --discord:#5865f2;
  --maxw:1320px; --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
/* O header e sticky com 64px: sem scroll-padding, toda ancora para com o alvo
   escondido atras dele. O .t2-feat-card ja tinha um scroll-margin proprio; aqui
   a regra vale para qualquer alvo, inclusive os que ainda nao existem. */
html{scroll-behavior:smooth; scroll-padding-top:82px}
body{
  margin:0; padding:0; background-color:var(--ground); color:var(--text);
  font-family:"Source Serif 4","SrcSerif-fb",Georgia,serif; font-size:17px; line-height:1.62; min-height:100vh;
}
/* fundo fixo via pseudo-elemento (iOS Safari buga com background-attachment:fixed) */
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background-image:linear-gradient(rgba(8,13,18,.80),rgba(5,10,14,.94)), url(images/hero-bg.webp);
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
img{border:none; max-width:100%}
a{color:inherit; text-decoration:none}
.t2-eyebrow{font-family:"Cinzel","Cinzel-fb",serif; text-transform:uppercase; letter-spacing:.18em; font-size:11px; color:var(--gold); font-weight:700}

/* ---------- Top bar / nav ---------- */
.t2-top{position:sticky; top:0; z-index:200; backdrop-filter:blur(9px);
  /* Preto azulado OPACO, nao o marrom translucido que sobrou da paleta antiga.
     Opaco de proposito: com a barra semitransparente a arte do hero vazava por
     baixo e o preto do painel da marca virava um retangulo destacado no meio de
     um fundo mais claro. */
  background:linear-gradient(180deg,#080D12,#060a0e); border-bottom:1px solid var(--line)}
/* Barra de ponta a ponta, sem o max-width centrado: no lockup do mockup a marca
   encosta na BORDA da tela e o grupo da direita na outra ponta. Com a barra
   centrada num container, os dois ficavam ilhados no meio. */
.t2-bar{max-width:none; margin:0; padding:0; height:64px; display:flex; align-items:center; gap:11px}
/* O painel da marca. Ele e MAIS ALTO que a barra: desce 22px abaixo dela e cai
   por cima do hero, com a ponta direita cortada na diagonal.

   O margin-bottom negativo e o que faz a sobra descer - a barra continua com
   64px, entao nada mais no header se mexe. z-index acima da regua da barra e da
   borda do header, que senao a atravessariam.

   Sem margin-right:auto: com a barra de ponta a ponta, quem empurra o grupo da
   direita e o margin-left:auto do seletor de idioma. Deixar os dois faria o
   menu flutuar no meio do vazio. */
.t2-brand{display:inline-flex; align-items:center; gap:11px; flex:0 0 auto;
  align-self:stretch; position:relative; z-index:3;
  padding:0 40px 0 18px; margin:0 4px -22px 0;
  /* --sobra e o quanto o painel desce abaixo da barra; --corte, o quanto a
     diagonal anda para a esquerda nessa descida. Os dois em um lugar so porque
     a forma e o fio dourado precisam usar EXATAMENTE os mesmos numeros. */
  --sobra:22px; --corte:26px;
  /* Borda direita RETA ate a linha da barra e diagonal so na sobra. Antes a
     diagonal subia do pe do painel ate o topo do header, e essa linha atravessando
     a barra inteira era a "divisao em cima". */
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--sobra)),
    calc(100% - var(--corte)) 100%, 0 100%);
  background:linear-gradient(180deg,#080D12 0,#060a0e 64px)}

/* O fio dourado, desenhado como TRACO: contorna a base, sobe a diagonal e para
   na altura da barra - onde a regua da barra continua, sem emenda.

   E um clip-path em forma de contorno (vai pela borda de fora e volta por
   dentro) em vez do truque de fundo dourado com interior recuado. Aquele
   pintava TODA a borda, inclusive a lateral direita subindo ate o topo, que e
   justamente o que tinha de sumir. */
.t2-brand::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg,rgba(232,184,62,.45),rgba(232,184,62,.9));
  clip-path:polygon(
    0 100%,
    calc(100% - var(--corte)) 100%,
    100% calc(100% - var(--sobra)),
    calc(100% - 2px) calc(100% - var(--sobra)),
    calc(100% - var(--corte) - 1.5px) calc(100% - 1.6px),
    0 calc(100% - 1.6px))}

/* O conteudo acima do traco dourado. */
.t2-brand > *{position:relative; z-index:3}
/* image-rendering pixelated: a arte e pixel art, e o filtro suave do navegador
   borraria justamente as bordas duras que definem o estilo dela. */
/* O escudo nao e quadrado (229x276), entao a ALTURA manda e a largura
   acompanha - fixar as duas o achataria. Sem image-rendering:pixelated: e
   ilustracao pintada, e nearest-neighbor serrilha a borda dourada. */
.t2-brand img{height:56px; width:auto; flex:0 0 auto}

/* Marca em duas linhas, como no lockup do hero: nome grande e a assinatura
   embaixo. line-height 1 nos dois porque a caixa da fonte sozinha ja abre um
   respiro que separaria demais as duas linhas. */
/* white-space:nowrap no nome: o   do HTML segura a quebra, mas nao
   impede o flex de espremer a caixa ate cortar o "2". */
.t2-brand-txt{display:flex; flex-direction:column; line-height:1; flex:0 0 auto}
.t2-brand-txt b{white-space:nowrap}
.t2-brand-txt i{font-style:normal; font-family:"Cinzel","Cinzel-fb",serif; font-weight:600;
  font-size:9.5px; letter-spacing:.245em; text-indent:.245em; color:var(--muted);
  margin-top:6px; white-space:nowrap}
.t2-brand b{font-family:"Cinzel","Cinzel-fb",serif; font-weight:800; font-size:33px; letter-spacing:.12em;
  background:linear-gradient(#fdf7d2,#f2dc93 52%,#dba838); -webkit-background-clip:text; background-clip:text; color:transparent}
.t2-nav{display:flex; align-items:center; gap:2px}
.t2-navitem{position:relative}
.t2-navtop{display:inline-flex; align-items:center; gap:6px; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:600; letter-spacing:.045em; text-transform:uppercase; font-size:12.5px; color:#ece6d3; padding:9px 13px; border-radius:9px; cursor:pointer}
.t2-navitem:hover .t2-navtop,.t2-navsolo:hover,.t2-navtop:hover{color:var(--brand-bright); background:rgba(70,160,215,.10)}
.t2-caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.6}
.t2-drop{position:absolute; top:100%; left:0; min-width:210px; padding:7px; margin-top:6px;
  background:linear-gradient(var(--surface-a),var(--surface-b)); border:1px solid var(--line-strong); border-radius:12px;
  box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(6px); transition:.15s; z-index:210}
.t2-navitem:hover .t2-drop{opacity:1; visibility:visible; transform:translateY(0)}
.t2-drop a{display:block; padding:8px 11px; border-radius:8px; font-size:13.5px; color:#e6dfca}
.t2-drop a:hover{background:rgba(70,160,215,.12); color:var(--brand-bright)}
.t2-auth{display:flex; align-items:center; gap:9px}
.t2-burger{display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:38px; padding:0 10px; background:rgba(70,160,215,.07); border:1px solid var(--line-strong); border-radius:9px; cursor:pointer}
.t2-burger span{display:block; height:2px; width:100%; background:var(--brand-bright); border-radius:2px; transition:.2s}
body.t2-nav-open .t2-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.t2-nav-open .t2-burger span:nth-child(2){opacity:0}
body.t2-nav-open .t2-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.t2-lang{display:flex; gap:2px; border:1px solid var(--line-strong); border-radius:8px; padding:2px; background:rgba(70,160,215,.05); margin-left:auto}
.t2-lang a{font-size:12px; font-weight:700; color:var(--muted); padding:4px 8px; border-radius:6px; cursor:pointer; letter-spacing:.04em; line-height:1}
.t2-lang a.on{color:#06121a; background:linear-gradient(#71c6f4,#198ecc)}
.t2-lang a:hover:not(.on){color:var(--brand-bright)}

/* ---------- Buttons ---------- */
.t2-btn{display:inline-flex; align-items:center; gap:8px; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:700; font-size:13.5px;
  padding:9px 16px; border-radius:10px; border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:.15s}
/* CTA: azul preenchido com FRISO dourado, nao dourado macico. O friso custa
   pouco do orcamento de 20% e ainda marca o botao como caminho principal. */
.t2-btn-green{color:#F3EEDC; background:linear-gradient(180deg,#1f8ad9,#125f9f);
  border:1px solid var(--gold-deep); box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.t2-btn-green:hover{background:linear-gradient(180deg,#2b9be9,#1670b5); border-color:var(--gold)}
.t2-btn-ghost{color:#dfe6cd; border-color:var(--line-strong); background:rgba(70,160,215,.06)}
.t2-btn-ghost:hover{background:rgba(70,160,215,.14); color:var(--brand-bright)}
.t2-btn-lg{padding:13px 24px; font-size:15px; border-radius:12px}
.t2-btn-discord{color:#fff; background:linear-gradient(#5865f2,#4752c4); box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.t2-btn-discord:hover{filter:brightness(1.08); color:#fff}

/* ---------- Hero ---------- */
.t2-hero{position:relative; min-height:100vh; overflow:hidden}
.t2-hero::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 20% 30%,rgba(120,200,245,.08),transparent 30%),
             radial-gradient(circle at 80% 35%,rgba(214,199,125,.08),transparent 30%)}
.t2-container{width:min(1200px,92%); margin:0 auto; position:relative; z-index:2}
/* 26px e nao 52: o hero precisa caber numa tela de 1080p, e este era o maior
   vazio que sobrava depois de tirar os cards do fluxo. */
.t2-hero-content{padding:26px 0 34px; display:flex; flex-direction:column; align-items:center; text-align:center}
.t2-hero-left{min-width:0; max-width:1100px}
.t2-hero-right{display:none}
/* O wordmark. Playfair Display 900 e nao Cinzel: a folha de assets desenhou o
   TIBIA 2 num serif de alto contraste (hastes grossas, filetes finos), e a
   Cinzel e uma capital romana de contraste baixo - a diferenca de "interessante"
   estava ai, nao no tamanho. A Cinzel continua no resto do site.

   O dourado sai de amostragem da propria folha, nao de estimativa: media das
   letras por linha, do topo (#f2e494) a base (#f0c44d). O gradiente e recortado
   no texto, entao o color abaixo e o fallback - navegador sem
   background-clip:text mostra dourado chapado, nao texto invisivel. */
.t2-hero-title{font-family:"Cinzel","Cinzel-fb",serif; font-weight:800;
  font-size:var(--titulo-fs,clamp(3rem,7vw,6rem)); line-height:.95; margin:0 0 14px;
  letter-spacing:.015em; white-space:nowrap;
  color:#f4e08c;
  background:linear-gradient(180deg,#fdf7d2 0%,#f4e494 30%,#f3d97e 56%,#eec24a 84%,#dba838 100%);
  -webkit-background-clip:text; background-clip:text;
  text-shadow:0 3px 0 rgba(60,38,6,.28);
  filter:drop-shadow(0 0 30px rgba(255,190,80,.22)) drop-shadow(0 10px 26px rgba(0,0,0,.55))}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .t2-hero-title{color:transparent}
}
.t2-headline{font-family:"Cinzel","Cinzel-fb",serif; font-size:clamp(1.5rem,2.35vw,3rem); line-height:1.05; margin-bottom:14px; color:var(--text)}

/* Onde os cards ficam nas laterais (fora do fluxo), o titulo tem de caber no
   CANAL entre eles. Medido a 1425px: canal de 652px e o titulo com 48px pedia
   ~750px, entao ele passava POR BAIXO dos dois cards.
   
   Duas travas, porque uma so nao basta: o corpo menor resolve o caso comum, e o
   max-width garante que texto mais longo quebre linha em vez de invadir - ele
   nao depende de eu ter acertado o coeficiente. */
@media (min-width: 1241px){
  /* 700 e nao 760: os cards somam 688px e o limite anterior era mais
     apertado que o canal real, forcando quebra sem necessidade. */
  .t2-hero .t2-headline{max-width:calc(100% - 700px); margin-left:auto; margin-right:auto}
}

/* Hero CTA buttons */
.t2-cta-row{display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-bottom:22px}
.t2-btn-primary,.t2-btn-secondary{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:16px; font-weight:700; transition:.2s; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; cursor:pointer}
/* O CTA grande usa a MESMA peca do botao do header (ver a secao do botao de
   conta): tres camadas, chanfro nas quinas, dourado por fora e preto por dentro.
   Aqui so muda o tamanho.

   Antes esta regra terminava com um segundo 'border:none' que anulava a borda
   dourada declarada nela mesma tres propriedades antes - a borda nunca apareceu,
   e o botao ficava um retangulo azul chapado no meio dos outros. */
.t2-btn-primary{min-width:260px; padding:0 34px; height:64px}
.t2-btn-primary > b{font-size:1.02rem}
.t2-btn-secondary{border:1px solid rgba(214,199,125,.35); color:var(--text); min-width:260px; padding:18px 28px;
  font-size:1.08rem; background:rgba(255,255,255,.02)}
.t2-btn-secondary:hover{border-color:rgba(120,200,245,.55); color:var(--brand-bright)}

/* Hero sub-actions (discord + status) */
.t2-sub-actions{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:18px; margin-bottom:24px}
.t2-btn-discord-hero{display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border:none;
  border-radius:14px; color:#fff; font-weight:700; font-size:14px; background:var(--discord); transition:.2s; cursor:pointer}
.t2-btn-discord-hero:hover{background:#4752c4; color:#fff; transform:translateY(-1px)}
.t2-discord-ico{width:20px; height:20px; flex:none}
.t2-status-hero{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:1rem}
.t2-dot{display:inline-block; width:10px; height:10px; border-radius:50%; background:#7eff7a; box-shadow:0 0 14px rgba(126,255,122,.8); margin-right:4px; vertical-align:middle}
.t2-dot-off{background:#c9553f; box-shadow:0 0 10px #c9553f}

/* Hero pillars grid */

/* Next section (Features header inside hero) */
.t2-next-section{padding:50px 0 36px; text-align:center}
.t2-next-title{font-family:"Cinzel","Cinzel-fb",serif; font-weight:800; font-size:clamp(2.9rem,5.2vw,5.2rem); line-height:1.06; margin:14px 0 0; letter-spacing:.03em; color:#eef0cf}

/* chips (reused in features) */
.t2-hf{display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border:1px solid var(--line-strong); border-radius:999px;
  background:rgba(13,21,30,.55); backdrop-filter:blur(3px); font-family:"Source Serif 4","SrcSerif-fb",Georgia,serif; font-weight:600; font-size:13px; color:#e6dfca; letter-spacing:.01em; transition:.15s}
.t2-hf:hover{border-color:rgba(70,160,215,.5); color:var(--brand-bright); transform:translateY(-1px)}
.t2-hf::before{content:""; width:6px; height:6px; border-radius:2px; transform:rotate(45deg); background:linear-gradient(var(--gold),#d09b28); flex:none; box-shadow:0 0 7px rgba(230,185,63,.4)}

/* ---------- Home: seção de features (hero + features) ---------- */
.t2-homewidgets{padding:24px 0 4px}
.t2-homewidgets-inner{max-width:var(--maxw); margin:0 auto; padding:0 22px; display:flex; gap:14px; flex-wrap:wrap}
.t2-homewidgets-inner .t2-widget{flex:1 1 210px; margin:0}
.t2-homefeats{padding:0 0 46px; border-bottom:1px solid var(--line)}
.t2-homefeats-inner{max-width:min(1200px,92%); margin:0 auto; padding:0 22px}

/* ---------- Main layout ---------- */
.t2-main{max-width:var(--maxw); margin:0 auto; padding:30px 22px 10px}
.t2-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; align-items:start}
.t2-content{min-width:0}

/* ---------- Content card ---------- */
.t2-card{background:linear-gradient(var(--surface-a),var(--surface-b)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
/* h1 (era div): o margin:0 mantem o cabecalho colado nas bordas do card */
.t2-card-head{margin:0; font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:19px; letter-spacing:.03em; color:#efe8cf;
  padding:15px 20px; border-bottom:1px solid var(--line-strong); background:linear-gradient(rgba(70,160,215,.10),rgba(70,160,215,0))}
.t2-card-head::before{content:""; display:inline-block; width:4px; height:16px; background:linear-gradient(var(--gold-light),var(--gold-deep)); border-radius:3px; margin-right:11px; vertical-align:-2px}
.t2-card-body{padding:20px}

/* ---------- Sidebar ---------- */
.t2-side{display:flex; flex-direction:column; gap:14px}
.t2-widget{display:block; background:linear-gradient(var(--surface-a),var(--surface-b)); border:1px solid var(--line); border-radius:var(--radius); padding:17px 18px; box-shadow:var(--shadow); transition:.16s}
.t2-widget:hover{border-color:var(--line-strong); transform:translateY(-2px)}
/* Documentos legais (pages/legal.php + pages/legal/*.php). */
.t2-legal-intro{color:var(--muted); font-size:15px; line-height:1.7; margin:0 0 24px; max-width:78ch}
.t2-legal-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px}
.t2-legal-card{position:relative; display:block; padding:18px 42px 18px 18px; border:1px solid var(--line);
  border-radius:12px; background:linear-gradient(var(--surface-a),var(--surface-b)); transition:.16s}
.t2-legal-card:hover{border-color:var(--line-strong); transform:translateY(-2px)}
.t2-legal-card h4{margin:0 0 6px; font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:16px; color:var(--gold)}
.t2-legal-card p{margin:0; font-size:13px; line-height:1.6; color:var(--muted)}
.t2-legal-go{position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:22px; color:var(--brand-deep)}
.t2-legal-note{margin:22px 0 0; font-size:13.5px; line-height:1.7; color:var(--muted)}
.t2-legal-note a,.t2-legal-doc a{color:var(--brand-bright); text-decoration:underline}
.t2-legal-updated{font-size:12px; color:var(--muted-2)}
.t2-legal-intro + .t2-legal-cards + .t2-legal-note + .t2-legal-updated{display:block; margin-top:14px}
.t2-legal-top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding-bottom:14px; margin-bottom:20px; border-bottom:1px solid var(--line)}
.t2-legal-back{font-size:13px; color:var(--gold)}
.t2-legal-back:hover{text-decoration:underline}
.t2-legal-doc section{margin:0 0 24px}
.t2-legal-doc section:last-child{margin-bottom:0}
.t2-legal-doc h3{margin:0 0 8px; font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:16.5px; color:var(--text)}
.t2-legal-doc p{margin:0 0 10px; font-size:13.5px; line-height:1.8; color:#cfc9b6; max-width:82ch}
.t2-legal-doc p:last-child{margin-bottom:0}
.t2-legal-doc b{color:var(--text)}

/* Regras (pages/rules.php). Acordeao nativo com <details>. */
.t2-rules-intro{color:var(--muted); font-size:15px; line-height:1.7; margin:0 0 26px; max-width:78ch}
.t2-rules-cat{display:flex; align-items:center; gap:12px; margin:30px 0 12px}
.t2-rules-cat:first-of-type{margin-top:6px}
.t2-rules-num{flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  border-radius:8px; border:1px solid var(--line-strong); background:rgba(70,160,215,.10);
  font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:13px; color:var(--brand-bright)}
.t2-rules-cat h3{margin:0; font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:19px; color:var(--text); letter-spacing:.01em}
.t2-rules-list{display:flex; flex-direction:column; gap:8px}
.t2-rule{background:linear-gradient(var(--surface-a),var(--surface-b)); border:1px solid var(--line);
  border-radius:11px; overflow:hidden; transition:.16s}
.t2-rule:hover{border-color:var(--line-strong)}
.t2-rule[open]{border-color:var(--line-strong)}
.t2-rule summary{display:flex; align-items:flex-start; gap:11px; padding:13px 16px; cursor:pointer; list-style:none}
.t2-rule summary::-webkit-details-marker{display:none}
.t2-rule summary:focus-visible{outline:2px solid var(--brand-deep); outline-offset:-2px}
.t2-rule-caret{flex:none; width:9px; height:9px; margin-top:6px; border-right:2px solid var(--brand-deep);
  border-bottom:2px solid var(--brand-deep); transform:rotate(-45deg); transition:transform .16s}
.t2-rule[open] .t2-rule-caret{transform:rotate(45deg)}
.t2-rule-head{display:flex; flex-direction:column; gap:3px; min-width:0}
.t2-rule-head b{font-size:14.5px; font-weight:600; color:var(--text)}
.t2-rule-head span{font-size:13px; line-height:1.5; color:var(--muted)}
.t2-rule-body{padding:0 16px 15px 36px; font-size:13.5px; line-height:1.75; color:#cfc9b6}
.t2-rule-body a{color:var(--brand-bright); text-decoration:underline}
.t2-rules-outro{margin-top:32px; padding-top:20px; border-top:1px solid var(--line)}
.t2-rules-outro p{margin:0 0 12px; font-size:13.5px; line-height:1.7; color:var(--muted); max-width:78ch}
.t2-rules-outro p:last-child{margin-bottom:0}
.t2-rules-outro a{color:var(--brand-bright); text-decoration:underline}
@media (max-width:640px){
  .t2-rules-cat h3{font-size:17px}
  .t2-rule-body{padding-left:16px}
}
.t2-creator-banner{display:block; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); line-height:0; transition:.16s}
.t2-creator-banner:hover{border-color:var(--line-strong); transform:translateY(-2px)}
.t2-creator-banner img{display:block; width:100%; height:auto; aspect-ratio:2.5 / 1}
.t2-online{text-align:center; cursor:pointer}
.t2-w-label{font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--muted)}
.t2-w-big{font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:500; font-size:40px; line-height:1.1; color:var(--gold); text-shadow:0 0 26px rgba(232,184,62,.22)}
.t2-w-sub{font-size:11px; color:var(--muted-2)}
.t2-w-off{font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:20px; color:#d98a72; padding:6px 0}
.t2-cta{cursor:pointer}
.t2-w-title{font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:16px; color:var(--gold); display:flex; align-items:center; gap:8px}
.t2-w-desc{font-size:13px; color:#c2baa4; margin-top:4px}
.t2-w-go{display:inline-block; margin-top:9px; font-size:12.5px; font-weight:700; color:var(--gold)}
.t2-coins .t2-w-title{color:#f2cf72}
.t2-coins{background:linear-gradient(160deg,rgba(230,185,63,.12),var(--surface-b))}
.t2-discord .t2-w-title{color:#aab4ff}
.t2-discord{background:linear-gradient(160deg,rgba(88,101,242,.16),var(--surface-b))}
.t2-discord .t2-w-go{color:#aab4ff}

/* ---------- Footer ---------- */
.t2-foot{border-top:1px solid var(--line); margin-top:36px; padding:24px 22px; color:var(--muted); font-size:12.5px}
.t2-foot-inner{max-width:var(--maxw); margin:0 auto; text-align:center}
.t2-foot-links a{color:var(--muted)}
.t2-foot-links a:hover{color:var(--brand-bright)}
.t2-foot-seo{margin-top:7px; font-size:12px; opacity:.72}
.t2-foot-copy{margin-top:8px; color:#948d7a} /* nao usar --muted-2 (#7c7768): 4.3:1 no fundo escuro reprova no contraste AA; este tom da ~5.8:1 e segue discreto */

/* ============================================================
   CONTEUDO GERADO PELO MyAAC (restyle escuro), escopo no card
   ============================================================ */
.t2-card-body{font-family:"Source Serif 4","SrcSerif-fb",Georgia,serif; color:var(--text); font-size:16px}
.t2-card-body h1,.t2-card-body h2,.t2-card-body h3,.t2-card-body h4{font-family:"Cinzel","Cinzel-fb",serif; color:#efe8cf; letter-spacing:.02em}
.t2-card-body a{color:var(--brand); font-weight:600}
.t2-card-body a:hover{color:var(--brand-bright); text-decoration:underline}
.t2-card-body p{margin:0 0 10px}
.t2-card-body hr{border:none; border-top:1px solid var(--line); margin:14px 0}
.t2-card-body img{vertical-align:middle}

/* tabelas do MyAAC (highscores, characters, account, guilds...) */
.t2-card-body table{border-collapse:collapse; width:100%; max-width:100%}
.t2-card-body .TableContainer{border:1px solid var(--line-strong); border-radius:12px; overflow:hidden; width:100%; margin:0 0 16px; background:rgba(0,0,0,.18)}
.t2-card-body .TableContainer .Text,
.t2-card-body .CaptionContainer,
.t2-card-body .CaptionContainer .CaptionInnerContainer{background:transparent !important}
/* COR E FUNDO DO th ANDAM JUNTOS, OS DOIS COM !important.
   Antes so a cor tinha: toda tabela que trazia fundo proprio no cabecalho (as
   paginas custom wheel-achievement e mount-drops usam um gradiente verde claro)
   ganhava a disputa do fundo e perdia a do texto - sobrava dourado em cima de
   verde claro, ilegivel. Forcar o par garante o contraste em qualquer pagina. */
.t2-card-body th{font-family:"Cinzel","Cinzel-fb",serif !important; font-weight:700; text-align:left; color:var(--gold) !important;
  background:var(--surface-3) !important; padding:8px 12px !important; font-size:13px}
/* titulos de secao (General Information, Characters, etc.) - texto verde claro no escuro */
.t2-card-body .CaptionContainer .Text{font-family:"Cinzel","Cinzel-fb",serif !important; font-weight:700; color:var(--brand-bright) !important;
  background:transparent !important; font-size:15px; letter-spacing:.02em; padding:6px 2px 9px !important;
  border-bottom:1px solid var(--line-strong); margin-bottom:10px; display:block}
.t2-card-body td{padding:7px 12px; color:#d9d2bd; border-top:1px solid rgba(70,160,215,.10)}
.t2-card-body .Odd,.t2-card-body tr.Odd td{background:rgba(255,255,255,.015)}
.t2-card-body .Even,.t2-card-body tr.Even td{background:rgba(70,160,215,.05)}
.t2-card-body .Table1,.t2-card-body .Table2,.t2-card-body .Table3,.t2-card-body .Table4,.t2-card-body .Table5,
.t2-card-body .InnerTableContainer,.t2-card-body .TableContentContainer{background:transparent !important; border:none !important}
/* mata as texturas/molduras/sombras gif do tibiacom no conteudo (botoes gif ficam intactos) */
.t2-card-body [class*="Shadow"],.t2-card-body [class*="Frame"],.t2-card-body [class*="Edge"],
.t2-card-body [class*="Border"],.t2-card-body [class*="Corner"],.t2-card-body [class*="Caption"]{
  background-image:none !important; background-color:transparent !important}
/* mata os fundos de pergaminho inline (#D4C0A1/#F1E0C6/#FFF2db) espalhados nas paginas */
.t2-card-body [bgcolor="#D4C0A1"],.t2-card-body [bgcolor="#F1E0C6"],
.t2-card-body [style*="D4C0A1"],.t2-card-body [style*="F1E0C6"],.t2-card-body [style*="FFF2"]{background-color:transparent !important}
.t2-card-body .Odd:hover td,.t2-card-body .Even:hover td{background:rgba(70,160,215,.13)}
/* .myaac-table (skin nova do MyAAC, injetada no <head> com cor de pergaminho) */
.t2-card-body .myaac-table{border-spacing:0; border-collapse:collapse; width:100%; border:1px solid var(--line-strong); border-radius:12px; overflow:hidden}
.t2-card-body .myaac-table > tbody > tr:nth-child(even){background:rgba(70,160,215,.05)}
.t2-card-body .myaac-table > tbody > tr:nth-child(odd){background:rgba(255,255,255,.015)}
.t2-card-body .myaac-table > tbody > tr > td{padding:7px 12px; color:#d9d2bd; border-top:1px solid rgba(70,160,215,.10)}
.t2-card-body .myaac-table > thead > tr > td,
.t2-card-body .myaac-table > thead > tr > th,
.t2-card-body .myaac-table > tfoot > tr > td{padding:8px 12px !important; background:var(--surface-3) !important; color:var(--gold) !important; font-family:"Cinzel","Cinzel-fb",serif; font-weight:700}
.t2-card-body .myaac-table > tbody > tr:hover > td{background:rgba(70,160,215,.10)}
/* esconde a tralha de gif das bordas/sombras classicas das tabelas */
.t2-card-body .CaptionEdgeLeftTop,.t2-card-body .CaptionEdgeRightTop,.t2-card-body .CaptionEdgeLeftBottom,
.t2-card-body .CaptionEdgeRightBottom,.t2-card-body .CaptionBorderTop,.t2-card-body .CaptionBorderBottom,
.t2-card-body .CaptionVerticalLeft,.t2-card-body .CaptionVerticalRight,
.t2-card-body .TableShadowContainer,.t2-card-body .TableShadowContainerRightTop,.t2-card-body .TableShadowRightTop,
.t2-card-body .TableBottomShadow,.t2-card-body .TableBottomLeftShadow,.t2-card-body .TableBottomRightShadow{display:none !important}

/* labels de formularios */
.t2-card-body .LabelV,.t2-card-body .LabelV120,.t2-card-body .LabelV150,.t2-card-body .LabelV200,.t2-card-body .LabelH{font-weight:700; color:var(--brand-bright); background:transparent}
.t2-card-body .LabelH td{background:transparent}

/* inputs */
.t2-card-body input[type=text],.t2-card-body input[type=password],.t2-card-body input[type=email],
.t2-card-body input[type=number],.t2-card-body input[type=search],.t2-card-body select,.t2-card-body textarea{
  background:var(--surface-3); color:var(--text); border:1px solid var(--line-strong); border-radius:8px; padding:8px 10px; font-family:inherit; font-size:14px}
.t2-card-body input:focus,.t2-card-body select:focus,.t2-card-body textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(70,160,215,.18)}

/* email ja confirmado pelo provedor (Discord/Google) no /account/create.
 *
 * Antes o hook pintava o campo de bege por style inline. Num tema de fundo
 * escuro com texto marfim isso dava marfim sobre bege - quase ilegivel, e o
 * cinza-claro le como "campo desativado/quebrado" em vez de "conferido".
 *
 * Aqui o fundo escuro do input FICA (o campo continua sendo um campo) e o que
 * muda e a moldura: borda e check dourados. Dourado porque na paleta ele e a
 * cor do que ja esta resolvido; azul e reservado para o que ainda pede acao, e
 * este campo justamente nao pede nenhuma. Verde sairia do branding.
 */
.t2-card-body input[type=text].t2-verificado{
  border-color:var(--gold); background:var(--surface-3); color:var(--text);
  padding-right:32px; cursor:default}
/* readOnly, nao disabled: campo disabled nao viaja no POST e o core le
   $_POST['email'] no submit - travar assim apagaria o email do cadastro. */
.t2-card-body input[type=text].t2-verificado:focus{
  border-color:var(--gold-light); box-shadow:0 0 0 3px rgba(232,184,62,.18)}
.t2-verif-wrap{position:relative; display:inline-block}
.t2-verif-wrap::after{content:"✓"; position:absolute; right:10px; top:50%;
  transform:translateY(-50%); color:var(--gold); font-weight:700; font-size:15px;
  pointer-events:none; line-height:1}
.t2-verif-nota{display:block; margin-top:4px; font-size:12px; color:var(--gold);
  letter-spacing:.01em}

/* aviso de cadastro OAuth em andamento */
.oauth-pending{max-width:560px; margin:0 auto 14px; padding:12px 16px;
  border:1px solid var(--line-strong); border-left:3px solid var(--blue-bright);
  background:var(--surface-b); color:var(--text); border-radius:6px;
  text-align:center; font-size:14px}
.oauth-pending strong{color:var(--gold)}
.oauth-pending span{display:block; margin-top:4px; color:var(--muted); font-size:13px}

/* botoes nativos do tibiacom (gif) - portados IGUAL ao original pra nao bugar */
.t2-card-body .InnerTableButtonRow{width:100%; padding:0 0 4px 1px; border:0}
.t2-card-body .InnerTableButtonRow td{padding-right:4px}
.t2-card-body .BigButton{position:relative; width:135px; height:25px; z-index:10}
.t2-card-body .BigButtonOver{position:absolute; top:0; left:0; width:137px; height:25px; visibility:hidden; z-index:15}
.t2-card-body .ButtonText{position:absolute; top:0; left:0; height:25px; width:135px; z-index:20}
.t2-card-body .BigButtonText{position:absolute; top:0; left:0; width:135px; height:25px; margin:0; padding:0; cursor:pointer;
  background:0 0; border:none; text-align:center; color:#ffd18c; font-family:Verdana,Arial,sans-serif; font-size:12px; font-weight:400; z-index:20;
  text-shadow:-1px -1px 0 #000,0 -1px 0 #000,1px -1px 0 #000,1px 0 0 #000,1px 1px 0 #000,0 1px 0 #000,-1px 1px 0 #000,-1px 0 0 #000}
.t2-card-body .TopButtonContainer{position:relative; right:4px; top:4px; z-index:60}
.t2-card-body .TopButtonContainer .TopButton{position:absolute; right:0; z-index:55}
.t2-card-body .MediumButtonText{position:absolute; top:0; left:0; height:37px; width:150px; z-index:20}
.t2-card-body .MediumButtonBackground{position:relative; width:150px; height:37px; z-index:10}
.t2-card-body .MediumButtonOver{position:relative; width:150px; height:37px; visibility:hidden; z-index:15}
.t2-card-body .MediumButtonForm{margin:0; padding:0}
/* botoes de texto sem gif (skins mais novas do MyAAC) */
.t2-card-body .NewButton,.t2-card-body .RealButton{display:inline-block; color:#06121a; background:linear-gradient(#71c6f4,#198ecc);
  border:none; border-radius:9px; padding:9px 16px; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:600; font-size:13.5px; cursor:pointer}

/* mensagens (sucesso / erro) */
.t2-card-body .SmallBox .Message,.t2-card-body .SmallBox .ErrorMessage{background:var(--surface-3); border:1px solid var(--line-strong); border-radius:10px; padding:12px 14px; color:var(--text)}
.t2-card-body .SmallBox .ErrorMessage{border-color:rgba(200,90,70,.45); color:#f0b8a6}

/* noticias */
.t2-card-body .NewsHeadlineBackground{background:linear-gradient(rgba(70,160,215,.18),rgba(70,160,215,.04)) !important; border:1px solid var(--line-strong); border-radius:9px; height:auto !important; padding:7px 12px; margin-bottom:8px}
.t2-card-body .NewsHeadlineText,.t2-card-body .NewsHeadlineDate,.t2-card-body .NewsHeadlineAuthor{position:static; color:#efe8cf; left:auto; top:auto}
.t2-card-body .NewsHeadlineText{font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:15px}
.t2-card-body .NewsHeadlineDate,.t2-card-body .NewsHeadlineAuthor{color:var(--muted); font-size:12px}

/* cores semanticas do Tibia (mantem o significado, ajusta pro escuro) */
.t2-card-body .white{color:#ece7d6 !important}
.t2-card-body .green{color:#8fe36a !important}
/* "color: green/red" inline (ex.: status Online/Offline) fica legivel no escuro */
.t2-card-body [style*="color: green"],.t2-card-body [style*="color:green"]{color:#8fe36a !important}
.t2-card-body [style*="color: red"],.t2-card-body [style*="color:red"]{color:#ef6a6a !important}
.t2-card-body .yellow{color:#f2cf72 !important}
.t2-card-body .red{color:#ef6a6a !important}
.t2-card-body .grey{color:#9c9379 !important}
.t2-card-body .orange{color:#f0a24a !important}

/* ============================================================
   PAGINA DE FEATURES (getLink('features'))
   ============================================================ */
.t2-feat-sub{color:#cbc3ac; font-size:15.5px; line-height:1.7; margin:2px auto 26px; max-width:860px; text-align:center}
.t2-feat-lead{font-family:"Cinzel","Cinzel-fb",serif; text-align:center; font-weight:700; font-size:clamp(19px,2.8vw,25px); color:var(--gold); margin:4px 0 18px; letter-spacing:.03em}
.t2-feat-chips{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; max-width:1000px; margin:0 auto 28px}
.t2-feat-cat{display:flex; align-items:center; gap:12px; margin:26px 0 6px}
.t2-feat-cat:first-child{margin-top:4px}
.t2-feat-badge{font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:500; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  border:1px solid rgba(230,185,63,.34); border-radius:9px; padding:6px 12px; background:rgba(230,185,63,.08)}
.t2-feat-cat h3{margin:0; font-size:23px; color:#efe8cf}
.t2-feat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:13px; margin-bottom:8px}
.t2-feat-card{background:rgba(13,21,30,.74); border:1px solid var(--line); border-radius:12px; padding:14px 15px; transition:.16s; scroll-margin-top:88px}
.t2-feat-card:target{border-color:var(--gold) !important; box-shadow:0 0 0 2px rgba(230,185,63,.35); background:rgba(230,185,63,.07)}
.t2-feat-card:hover{border-color:var(--line-strong); transform:translateY(-2px)}
.t2-feat-card h4{font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:15.5px; margin:0 0 6px; color:var(--gold); display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.t2-feat-card p{margin:0; font-size:13.5px; color:#c2baa4; line-height:1.55}
/* Cards com midia viram <details>: clicar no card expande e mostra as fotos */
.t2-feat-card.has-media{cursor:pointer}
.t2-feat-card.has-media > summary{list-style:none; display:block; position:relative; padding-right:20px; outline:none}
.t2-feat-card.has-media > summary::-webkit-details-marker{display:none}
.t2-feat-card.has-media > summary::after{content:"\25BE"; position:absolute; top:3px; right:0; font-size:13px; color:var(--brand-bright); transition:transform .2s}
.t2-feat-card.has-media[open] > summary::after{transform:rotate(180deg)}
.t2-feat-card.has-media[open]{border-color:var(--line-strong); background:rgba(13,21,30,.9)}
.t2-feat-verall{display:flex; justify-content:center; margin-top:22px}
.t2-feat-verall .t2-btn-secondary{min-width:auto; padding:13px 26px; font-size:14px}
.t2-feat-media-wrap{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.t2-feat-media{display:block; width:100%; max-width:340px; margin:0 auto; border:1px solid var(--line-strong); border-radius:8px}
.t2-feat-card.tier{border-color:rgba(200,90,70,.30)}
.t2-feat-card.tier h4{color:#f0a58c}
.t2-soon{font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-size:10px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:#241802; background:linear-gradient(#f4d267,#d09b28); padding:2px 7px; border-radius:5px}

/* ---------- Featured cards (top 6) ---------- */
.t2-feat-featured{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:13px; margin-bottom:22px}
.t2-feat-featured .t2-feat-card{border-color:rgba(70,160,215,.28); background:rgba(70,160,215,.06)}
.t2-feat-featured .t2-feat-card:hover{border-color:rgba(70,160,215,.45)}

/* ---------- Todas as features (direto na pagina) ---------- */
.t2-feat-full{margin-top:0}

/* ---------- Chip group labels ---------- */
.t2-chip-group-label{font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:500; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); padding:6px 0 0 4px; flex-basis:100%}
.t2-chip-group-label:first-child{padding-top:0}

/* ---------- Como começar / Get started ---------- */
.t2-start{padding:48px 0; border-top:1px solid var(--line); text-align:center}
.t2-start-inner{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.t2-start h2{font-family:"Cinzel","Cinzel-fb",serif; font-weight:800; font-size:clamp(22px,3.6vw,34px); margin:0 0 28px; letter-spacing:.03em;
  background:linear-gradient(#f9f0cf,#f2dc93 52%,#d9a53f); -webkit-background-clip:text; background-clip:text; color:transparent}
.t2-start-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:800px; margin:0 auto 32px}
.t2-start-step{background:rgba(13,21,30,.62); border:1px solid var(--line); border-radius:12px; padding:20px 16px; text-align:center}
.t2-start-num{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%;
  background:linear-gradient(#71c6f4,#198ecc); color:#06121a; font-family:"Cinzel","Cinzel-fb",serif; font-weight:800; font-size:15px; margin-bottom:10px}
.t2-start-step h3{font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:15px; color:var(--gold); margin:0 0 6px}
.t2-start-step p{margin:0; font-size:13px; color:#b8b19e; line-height:1.5}
.t2-start-cta{margin-top:0}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .t2-hero-content{grid-template-columns:1fr}
}
@media(max-width:920px){
  .t2-start-steps{grid-template-columns:1fr}
  .t2-grid{grid-template-columns:1fr}
}

/* O menu vira hamburguer em 1560px e nao em 920px. Medido a 1600: marca 268 +
   menu 697 + idioma 108 + status 332 + conta 252, mais os vaos, dao 1737 - e a
   barra transbordava 159px com o painel de conta saindo da tela. A faixa de 921
   a ~1500px nunca coube; so nao aparecia porque ninguem tinha medido nela.

   Este bloco leva SO as regras do menu. As de conteudo (grade de passos, cards)
   continuam nos 920px, que e onde elas fazem sentido. */
@media(max-width:1560px){
  .t2-burger{display:flex}
  .t2-nav{display:none; position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:stretch; gap:2px;
    background:linear-gradient(#14100a,#0d0904); border-bottom:1px solid var(--line-strong); box-shadow:0 18px 42px rgba(0,0,0,.55);
    padding:10px; max-height:calc(100vh - 64px); overflow-y:auto}
  body.t2-nav-open .t2-nav{display:flex}
  .t2-navitem{width:100%}
  .t2-navtop{width:100%; justify-content:space-between; font-size:15px; padding:12px 14px}
  .t2-navitem .t2-caret{transition:transform .15s}
  .t2-navitem.t2-open .t2-caret{transform:rotate(180deg)}
  .t2-drop{position:static; opacity:1; visibility:visible; transform:none; display:none; box-shadow:none; border:none; background:rgba(0,0,0,.22); margin:0 0 4px; padding:4px; min-width:0}
  .t2-navitem.t2-open .t2-drop{display:block}
  .t2-navsolo{padding:12px 14px; font-size:15px}
}
@media(max-width:700px){
  .t2-cta-row{flex-direction:column}
  .t2-btn-primary,.t2-btn-secondary{width:100%; min-width:0}
  .t2-headline{font-size:2rem}
}
@media(max-width:560px){
  .t2-bar{gap:12px; padding:0 14px}
  .t2-main{padding:18px 14px}
  .t2-auth .t2-btn-ghost{display:none}
}

/* Ponte da home e da /features para o catalogo de sistemas. */
.t2-feat-sistemas { text-align: center; margin: -6px 0 18px; font-size: 13px; color: #9a9a9a; }
.t2-feat-sistemas a { color: #ffcc66; text-decoration: none; font-weight: 600; }
.t2-feat-sistemas a:hover { text-decoration: underline; }

/* Botao 'Ler a pagina' dentro do card de feature. So aparece nos cards que
   tem pagina propria em /sistemas (ver _sistemas_mapa.php). */
.t2-feat-ler { display: inline-block; margin-top: 9px; padding: 5px 12px; font-size: 12px;
  font-weight: 600; color: #ffcc66; text-decoration: none;
  border: 1px solid #6a5a2a; border-radius: 4px; background: #00000055; }
.t2-feat-ler:hover { background: #ffcc66; color: #1a1a1a; border-color: #ffcc66; }
/* Dentro de <summary> o cursor padrao e o de abrir/fechar; no link tem de ser
   de link, senao parece que o clique so expande o card. */
.t2-feat-card summary .t2-feat-ler { cursor: pointer; }

/* ===== Bloco de diferenciais na home ==================================== */
/* A home argumenta (por que o servidor e diferente); a /features cataloga.  */
.t2-dif { max-width: 900px; margin: 0 auto; text-align: left; }
.t2-dif h3 { color: #ffcc66; font-size: 19px; margin: 0 0 10px; }
.t2-dif h4 { color: #eaf6cf; font-size: 15px; margin: 0 0 6px; }
.t2-dif p { margin: 0 0 11px; color: #cfcfcf; font-size: 14px; line-height: 1.7; }
.t2-dif b, .t2-dif strong { color: #ffe08a; }

.t2-dif-curta { background: #00000055; border: 1px solid #4a4a4a; border-radius: 6px;
  padding: 20px 22px; margin-bottom: 26px; }
.t2-dif-curta p:last-child { margin-bottom: 0; }

.t2-dif-h { text-align: center; margin: 0 0 16px; }
.t2-dif-eixos { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px; margin-bottom: 26px; }
.t2-dif-eixo { background: #00000066; border: 1px solid #444; border-left: 3px solid #26688f;
  border-radius: 4px; padding: 16px 18px; }
.t2-dif-eixo > .t2-dif-eixo-t { color: #ffcc66; font-size: 15.5px; }
.t2-dif-d { color: #b9b9b9; font-size: 13px; }

.t2-dif-f { border-top: 1px solid #333; padding-top: 10px; margin-top: 10px; }
.t2-dif-f strong { display: block; color: #ffe08a; font-size: 13px; margin-bottom: 3px; }
.t2-dif-f p { color: #b3b3b3; font-size: 12.5px; line-height: 1.6; margin: 0; }
.t2-dif-ler { display: inline-block; margin-top: 7px; font-size: 11.5px; font-weight: 600;
  color: #ffcc66; text-decoration: none; border-bottom: 1px solid #6a5a2a; }
.t2-dif-ler:hover { border-bottom-color: #ffcc66; }

.t2-dif-igual { background: #00000055; border: 1px solid #4a4a4a; border-radius: 6px;
  padding: 18px 20px; }
.t2-dif-igual-t { color: #ffcc66; font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.t2-dif-igual table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.t2-dif-igual td { padding: 8px 10px; border-bottom: 1px solid #2e2e2e; vertical-align: top;
  color: #b3b3b3; }
.t2-dif-igual td:first-child { color: #eaf6cf; font-weight: 700; width: 32%; }
.t2-dif-igual tr:last-child td { border-bottom: 0; }

@media (max-width: 640px) {
  .t2-dif-eixos { grid-template-columns: 1fr; }
  .t2-dif h3 { font-size: 17px; }
}

/* Icone do hero, acima do TIBIA 2 grande. */
/* Icone a esquerda do TIBIA 2, na mesma linha.
   O tamanho acompanha o titulo pelo mesmo clamp, em escala menor - assim a
   proporcao entre os dois nao muda conforme a largura da tela. */
/* Contrapeso: um vazio da largura do icone do outro lado do titulo.

   Sem ele, o icone empurrava o TIBIA 2 uns 50px para a direita - a LINHA ficava
   centrada, mas o titulo nao, e ele desalinhava do eyebrow acima (medido: centro
   do container 953, centro do titulo 1005).

   Contrapeso em vez de posicionamento absoluto porque o icone continua no fluxo:
   nada some nem sobrepoe quando a tela encolhe. O gap do flex ja se aplica dos
   dois lados, entao o vazio so precisa repetir a LARGURA do icone. */
.t2-hero-brand::after{content:""; flex:0 0 auto; width:calc(var(--icone-h) * .830)}
.t2-hero-brand{display:flex; align-items:center; justify-content:center;
  gap:clamp(7px,1vw,14px); margin:0 0 14px}
.t2-hero-brand .t2-hero-title{margin:0}
/* O icone e o escudo claro, que nao e quadrado (229x276). A ALTURA
   manda e a largura acompanha; 92px de altura sao 1,38x a altura das maiusculas
   do wordmark, a proporcao medida na folha de assets.

   O contrapeso do ::after existe para o lockup ficar centrado na pagina mesmo
   com o icone so de um lado, entao ele tem de valer a largura RENDERIZADA -
   dai o 229/276 = .830 do escudo. Errar isso descentraliza o TIBIA 2. */
.t2-hero-brand{--icone-h:clamp(52px,6.1vw,92px);
  --titulo-fs:clamp(3rem,7vw,6rem);
  --h1-caixa:calc(var(--titulo-fs) * .95)}
/* O icone alinha pelo TITULO, nao pela coluna. Com align-items:center do pai
   ele centralizava contra titulo+assinatura e caia 14px abaixo do centro das
   letras.

   Encostado no topo da coluna, o topo do icone coincide com o topo da caixa do
   h1, e a margem abaixo centraliza os dois na TINTA das letras.

   O .434 e onde a tinta das maiusculas cai dentro da caixa do h1, e e PROPRIO DA
   FONTE - nao e meio. Medido com actualBoundingBox num canvas, com a fonte
   computada da pagina: Cinzel da 0,4343 (as maiusculas assentam alto na caixa) e
   a Playfair, que esteve aqui antes, dava 0,504. Trocar a fonte do wordmark sem
   remedir desalinha o icone: a troca de Playfair para Cinzel derrubou 6px, que
   e exatamente (0,5 - 0,4343) x 91,2.

   O white-space:nowrap no titulo nao e enfeite - se o TIBIA 2 quebrasse em duas
   linhas a caixa dobraria e a conta erraria. */
.t2-hero-icon{flex:0 0 auto; height:var(--icone-h); width:auto;
  align-self:flex-start; margin-top:calc(var(--h1-caixa) * .434 - var(--icone-h) / 2)}
/* SEM image-rendering:pixelated aqui. O escudo claro e ilustracao pintada, e
   nearest-neighbor nela deixa a borda dourada serrilhada. O icone da BARRA
   continua pixelado - aquele e pixel art de verdade. */
@media (max-width: 640px){
  .t2-brand img{height:28px; width:auto}
}

/* Status do servidor + Discord na barra do topo. */
.t2-headmeta{display:flex; align-items:center; gap:12px; margin-left:14px}
.t2-status-head{display:inline-flex; align-items:center; gap:7px; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-size:12px; color:var(--muted); white-space:nowrap}
.t2-btn-discord-head{display:inline-flex; align-items:center; gap:7px; background:#5865F2;
  border:1px solid #4752c4; color:#fff; font-weight:700; font-size:12.5px; text-decoration:none;
  padding:7px 12px; border-radius:7px; white-space:nowrap}
.t2-btn-discord-head:hover{background:#4752c4}
.t2-btn-discord-head .t2-discord-ico{width:16px; height:16px; flex:0 0 auto}

/* Abaixo de 1240px a barra fica apertada: some o texto e ficam o ponto e o
   icone, que continuam dizendo o essencial (esta online, tem Discord). */
/* O texto do status e o pedaco mais largo da barra (~180px) e o mais
   dispensavel: o ponto verde e o icone continuam dizendo o essencial, e o texto
   completo fica no title. Sem ele, a barra com menu aberto cabe a partir de
   ~1490px; some antes disso para nao raspar no limite. */
@media (max-width: 1700px){
  .t2-headmeta-txt{display:none}
  .t2-btn-discord-head{padding:7px 9px}
  .t2-headmeta{gap:9px; margin-left:10px}
}

@media (max-width: 640px){
}

/* O rotulo da secao dentro do hero: menor que o TIBIA 2 e sem o respiro de
   quem era cabecalho de secao solta, senao os dois titulos competem. */
.t2-next-hero{padding-top:0; margin:2px 0 10px}
.t2-next-hero .t2-next-title{font-size:clamp(1.6rem,2.6vw,2.6rem); margin:4px 0 0}
.t2-next-hero .t2-eyebrow{margin-bottom:0}

/* 'OT SERVER GLOBAL' sob o TIBIA 2: mesma familia do titulo, bem menor e com
   muito espacamento entre letras - le como assinatura, nao como outra manchete. */
@media (max-width: 640px){
}

/* Coluna com TIBIA 2 + assinatura, ao lado do icone. */
.t2-hero-titulos{display:flex; flex-direction:column; align-items:center}
/* A assinatura fica na Cinzel de proposito: os filetes da Playfair somem em
   corpo pequeno com entreletra larga. Contraste alto no nome, baixo na
   assinatura - e o que a propria folha faz. */
.t2-hero-subtitulo{display:flex; align-items:center; justify-content:center;
  gap:clamp(7px,.85vw,13px); margin:2px 0 0; white-space:nowrap}
/* A assinatura NAO pode passar da largura do wordmark. A coluna e dimensionada
   pelo filho mais largo, e o h1 centraliza dentro dela: com a assinatura em
   449px contra 349px do TIBIA 2, sobravam 50px de cada lado do nome e o icone
   ao lado parecia descolado. O vao do flex era 14px o tempo todo - o espaco
   vinha da coluna, nao do gap. Na folha a assinatura tambem e menor que o nome. */
.t2-hero-subtitulo span{font-family:"Cinzel","Cinzel-fb",serif; font-weight:700;
  font-size:clamp(.72rem,1.06vw,1.02rem); letter-spacing:.24em; text-transform:uppercase;
  text-indent:.24em; color:#eccf72;
  background:linear-gradient(180deg,#fbf1c2,#e5b74f);
  -webkit-background-clip:text; background-clip:text}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .t2-hero-subtitulo span{color:transparent}
}

/* Ornamento: filete que se dissolve para fora e termina num losango junto do
   texto. Feito em CSS e nao recortado da folha porque ele acompanha o corpo do
   texto pelo clamp - recorte em PNG borraria nos tamanhos intermediarios. */
.t2-orn{position:relative; flex:0 0 auto; display:block; height:1px;
  width:clamp(16px,2.2vw,38px);
  background:linear-gradient(90deg,rgba(226,178,72,0),#e8bd58)}
.t2-orn::after{content:""; position:absolute; right:-3px; top:50%;
  width:7px; height:7px; margin-top:-3.5px; transform:rotate(45deg);
  background:linear-gradient(135deg,#fdf0bd,#dfa73a);
  box-shadow:0 0 9px rgba(255,196,80,.5)}
.t2-hero-subtitulo .t2-orn:last-child{transform:scaleX(-1)}

/* O divisor sob a assinatura fecha o lockup. Estreito e sem a margem dos
   divisores de secao: aqui ele e parte da marca, nao separador de blocos. */
.t2-divisor.t2-divisor-hero{max-width:min(430px,48%); margin:14px auto 2px}

@media (max-width: 640px){
  .t2-hero-subtitulo span{letter-spacing:.14em; text-indent:.14em}
  .t2-orn{width:20px}
}


/* A resposta curta agora vive na secao de baixo. */
.t2-hero-curta{max-width:760px; margin:0 auto 26px; text-align:left}
.t2-hero-curta p{margin:0 0 12px; color:var(--muted); font-size:1.02rem; line-height:1.72}
.t2-hero-curta p:last-child{margin-bottom:0}
.t2-hero-curta b{color:#eef3d1}

/* ===== Os quatro eixos em resumo, no hero =============================== */
/* DUAS colunas, nao quatro: com quatro, cada card ficava com ~215px e o texto
   era obrigado a ser pequeno para caber. Em 2x2 sobra largura para o tipo
   crescer de verdade - que era o problema. */
.t2-hero-pilares{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;
  max-width:1040px; margin:26px auto 0; text-align:left}

.t2-pilar{position:relative; overflow:hidden; padding:22px 24px 22px 27px;
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(150deg, rgba(20,31,43,.92), rgba(13,21,30,.86));
  box-shadow:0 6px 22px rgba(0,0,0,.35);
  transition:border-color .18s, transform .18s, box-shadow .18s}

/* Faixa dourada na lateral: da um ponto de cor e marca onde cada card comeca,
   que e o que faltava para eles se destacarem do fundo do hero. */
.t2-pilar::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--gold), var(--brand-deep)); opacity:.85}
.t2-pilar:hover{border-color:var(--line-strong); transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(0,0,0,.5)}

.t2-pilar h3{font-family:"Cinzel","Cinzel-fb",serif; font-weight:700;
  font-size:clamp(1.18rem,1.5vw,1.42rem); color:#f2e9c8; margin:0 0 9px; line-height:1.25}
.t2-pilar p{margin:0; color:#bdb59c; font-size:clamp(1rem,1.1vw,1.08rem); line-height:1.68}

@media (max-width: 820px){
  .t2-hero-pilares{grid-template-columns:1fr; gap:14px; margin-top:20px}
  .t2-pilar{padding:18px 20px 18px 23px}
}

/* ===== Eixos no hero, com capa que revela ao clicar ===================== */
/* Os eixos ocupam duas colunas no hero, como os cards anteriores. */
/* O hero alarga SO na home para os quatro eixos caberem lado a lado.
   O .t2-container padrao tem 1200px - dividido por quatro sobrariam ~290px por
   card, estreito demais para o texto que eles carregam. O seletor e escopado no
   .t2-hero, entao o resto do site mantem a largura de leitura. */
.t2-hero .t2-container{width:min(1760px,94%)}
.t2-hero .t2-hero-left{max-width:100%}
/* O .t2-dif tem max-width de leitura (900px) - certo para a secao de baixo,
   errado aqui: era ele, e nao o container, que segurava o grid em ~890px. */
.t2-dif-hero{max-width:none}

/* Altura maxima com a capa fechada.

   Sem isto o card cresce com TODO o conteudo atras (o eixo do PvP tem quatro
   features), a capa cresce junto, e a palavra - centralizada nela - ia parar
   fora da tela. Fechados os quatro ficam do mesmo tamanho; ao abrir, o limite
   sai e o conteudo aparece inteiro. */
/* A altura do card acompanha a TELA, nao um numero fixo. Com 430px cravados a
   dobra fechava em 1080p mas estourava 141px num notebook de 800px de altura -
   e o card e a peca mais alta do hero, entao e nele que a folga tem de sair.

   O 516 e a soma medida de tudo que NAO e o card na primeira tela: header 65,
   faixa do beta 42, respiro 26, eyebrow 38, lockup 130, divisor e titulo da
   secao, e a faixa de numeros no pe.

   O piso de 260px existe porque abaixo disso o cadeado e a chamada comecam a
   encostar no titulo; dai em diante a pagina rola, que e melhor que sobrepor. */
.t2-dif-eixo{max-height:430px; transition:max-height .3s ease}

/* O teto por ALTURA DE TELA vale so onde os quatro cards dividem a dobra com o
   resto do hero. No celular eles estao empilhados e a pagina rola de qualquer
   jeito: la a formula nao tem premissa, e o unico efeito seria cortar o corpo
   borrado por um numero que nao quer dizer nada naquele contexto.

   O 516 e a soma medida de tudo que NAO e o card na primeira tela do desktop. */
@media (min-width: 1241px){
  .t2-dif-eixo{max-height:clamp(260px, calc(100vh - 516px), 430px)}
}
.t2-dif-eixo.t2-eixo-aberto{max-height:none}
.t2-dif-hero .t2-dif-eixos{grid-template-columns:repeat(4,1fr); max-width:none; margin:0 auto}

/* Abaixo de 1400px quatro colunas voltam a apertar: caem para duas, e depois
   para uma. O texto nao encolhe em nenhum dos passos. */
@media (max-width: 1400px){
  .t2-dif-hero .t2-dif-eixos{grid-template-columns:repeat(2,1fr); max-width:1060px}
}
.t2-dif-hero .t2-dif-h{margin-top:0}
.t2-dif-eixo{position:relative; overflow:hidden}

/* ===== Os quatro pilares - dark fantasy + gold + arcane blue =============
   Fechado: pedra escura, fio dourado DISCRETO, medalhao e titulo dourados,
   corpo borrado com cadeado. O dourado marca a RECOMPENSA; o azul so entra na
   INTERACAO - glow no hover, halo ao abrir. Card parado nao tem azul nenhum.

   O titulo saiu de dentro da capa: no modelo anterior o card fechado escondia
   tudo atras de uma palavra de efeito, e quem chegava na pagina nao sabia o que
   ia abrir. Agora le o titulo e ve o corpo borrado - a curiosidade vem do
   conteudo, nao do misterio. O corpo continua no DOM, entao o buscador le tudo.
   Sistema inteiro documentado em docs/branding-tibia2.md. */
.t2-dif-eixo{text-align:center; padding:24px 18px 20px;
  background:linear-gradient(180deg,#0d151e,#080d12 72%);
  border:1px solid rgba(232,184,62,.26); border-left:1px solid rgba(232,184,62,.26);
  border-radius:0;
  --chanfro:14px;
  clip-path:polygon(var(--chanfro) 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro),
    100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%,
    var(--chanfro) 100%, 0 calc(100% - var(--chanfro)), 0 var(--chanfro));
  transition:border-color .25s ease, box-shadow .25s ease}

.t2-dif-eixo:hover{border-color:rgba(232,184,62,.45);
  box-shadow:0 0 30px rgba(22,119,200,.30), inset 0 0 26px rgba(22,119,200,.10)}

.t2-dif-eixo.t2-eixo-aberto{border-color:var(--gold);
  box-shadow:0 0 38px rgba(22,119,200,.26), inset 0 0 0 1px rgba(39,167,255,.16)}

/* O desbloqueio sai AZUL e termina DOURADO: o sistema reconhece a descoberta, e
   o que fica no fim e a recompensa. */
.t2-dif-eixo.t2-eixo-aberto::after{content:""; position:absolute; inset:0; z-index:4;
  pointer-events:none; animation:t2Desbloqueio .95s ease-out 1}
@keyframes t2Desbloqueio{
  0%  {box-shadow:inset 0 0 0 2px rgba(39,167,255,.85), inset 0 0 44px rgba(39,167,255,.40)}
  50% {box-shadow:inset 0 0 0 2px rgba(150,175,180,.55), inset 0 0 34px rgba(232,184,62,.32)}
  100%{box-shadow:inset 0 0 0 2px rgba(232,184,62,0), inset 0 0 0 rgba(232,184,62,0)}
}

/* O titulo da capa. Ele comeca pela palavra do pilar, entao a primeira coisa
   que se le de relance ja identifica o card. */
.t2-dif-hero .t2-dif-eixo-t{font-family:"Cinzel","Cinzel-fb",serif; font-weight:700;
  font-size:clamp(1.02rem,1.28vw,1.36rem); line-height:1.28; letter-spacing:.04em;
  text-transform:uppercase; color:var(--gold); margin:11px 0 0; text-wrap:balance}

/* O corpo e o que fica escondido - BORRADO, nao removido. */
.t2-eixo-corpo{transition:filter .5s ease, opacity .5s ease}
.t2-dif-eixo:not(.t2-eixo-aberto) .t2-eixo-corpo{filter:blur(5px); opacity:.45;
  user-select:none; pointer-events:none}

/* A capa cobre o card inteiro para o clique pegar em qualquer ponto, mas so
   escurece EMBAIXO: o titulo em cima continua nitido. */
.t2-eixo-capa{position:absolute; inset:0; z-index:2; width:100%; border:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:9px;
  font:inherit; text-align:center; padding:0 16px 18px;
  /* Em PIXELS a partir da base, nao em porcentagem. Com 34%/62% o escurecimento
     acompanhava a altura do card: num card de 430px comecava em 146px e ficava
     abaixo do titulo, mas num de 264px comecava em 90px e caia em cima da
     terceira linha - era isso que apagava o "PERMANENTE" do card de PvP.
     Ancorado na base, ele fica sempre nos ultimos 130px. */
  background:linear-gradient(to top, rgba(8,13,18,.94) 0, rgba(8,13,18,.62) 62px, rgba(8,13,18,0) 130px);
  transition:opacity .32s ease, visibility .32s}
.t2-eixo-capa:focus-visible{outline:2px solid var(--blue-bright); outline-offset:-4px}

.t2-eixo-cadeado{color:var(--gold); filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
  transition:color .2s ease, transform .2s ease}
.t2-dif-eixo:hover .t2-eixo-cadeado{color:var(--blue-bright); transform:translateY(-2px)}

/* Inter: rotulo de UI. Ver docs/branding-tibia2.md. */
.t2-eixo-cta{font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:500; font-size:.8rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted); transition:color .2s ease}
.t2-dif-eixo:hover .t2-eixo-cta{color:var(--blue-bright)}

/* A regua sob o titulo: filete que se dissolve nas pontas, com um losango em
   cada. Mesma peca da assinatura do hero. */
.t2-eixo-regua{display:block; width:min(70%,190px); height:1px; margin:11px auto 13px;
  background:linear-gradient(90deg,rgba(232,184,62,0),#E8B83E 22%,#FFD96A 50%,#E8B83E 78%,rgba(232,184,62,0));
  position:relative}
.t2-eixo-regua::before,.t2-eixo-regua::after{content:""; position:absolute; top:50%;
  width:6px; height:6px; margin-top:-3px; transform:rotate(45deg);
  background:linear-gradient(135deg,#FFD96A,#a9822a)}
.t2-eixo-regua::before{left:-3px}
.t2-eixo-regua::after{right:-3px}

/* Aberto: a capa some de cena E deixa de receber clique. A visibility evita que
   ela continue capturando o cursor com opacidade zero. */
.t2-eixo-aberto .t2-eixo-capa{opacity:0; visibility:hidden; pointer-events:none}

/* O selo de desbloqueado so existe depois do clique. */
.t2-eixo-revelado{display:none}
.t2-eixo-aberto .t2-eixo-revelado{display:block; margin-top:16px;
  font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:500; font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gold)}

@media (max-width: 820px){
  .t2-dif-hero .t2-dif-eixos{grid-template-columns:1fr}
}

/* Quem prefere menos animacao nao ganha transicao nenhuma. */
@media (prefers-reduced-motion: reduce){
  .t2-eixo-capa,.t2-eixo-corpo,.t2-eixo-cadeado,.t2-dif-eixo{transition:none}
  .t2-dif-eixo.t2-eixo-aberto::after{animation:none}
  .t2-dif-eixo:hover .t2-eixo-cadeado{transform:none}
}

/* O eyebrow do hero acompanha a LARGURA do bloco da marca (icone + TIBIA 2).
   Medido: o texto tinha 390px a 11px de fonte, contra 437px do bloco - as duas
   linhas terminavam em pontos diferentes. O letter-spacing passa a em para
   crescer junto com a fonte; em px fixo ele desalinharia de novo. */
.t2-hero .t2-eyebrow{font-size:clamp(.95rem,1.25vw,1.25rem); letter-spacing:.18em; margin-bottom:6px}

/* Caixa alta por CSS, nao no texto.

   O _lang.php guarda 'Os Quatro Pilares do Tibia 2' com a capitalizacao certa -
   e o que o leitor de tela pronuncia e o que vai para qualquer outro uso da
   chave. Escrever em maiusculas no dado perderia essa informacao para sempre.
   O letter-spacing compensa o aperto que a caixa alta causa. */
.t2-headline{text-transform:uppercase; letter-spacing:.03em}

/* ===== Divisor ornamental ============================================== */
/* Linha em degrade com um losango no centro, e um brilho que percorre.
   Tudo em CSS: nenhuma imagem para baixar, e escala em qualquer largura. */
.t2-divisor{display:flex; align-items:center; justify-content:center;
  width:min(760px,86%); margin:52px auto; height:18px}

/* Cada metade tem DUAS camadas de fundo: a linha (degrade que morre
   transparente na ponta, para nascer do fundo em vez de bater numa borda dura)
   e, por cima, uma faixa clara e estreita que atravessa - e o brilho. */
.t2-divisor::before,.t2-divisor::after{content:""; height:1px; flex:1;
  background-image:linear-gradient(90deg, transparent, rgba(255,240,190,.95), transparent),
    linear-gradient(90deg, transparent, rgba(230,185,63,.5) 45%, rgba(230,185,63,.85));
  background-size:110px 100%, 100% 100%;
  background-repeat:no-repeat;
  background-position:-110px 0, 0 0;
  animation:t2DivBrilho 5s ease-in-out infinite}

/* A metade da direita e a mesma coisa espelhada - inclusive a animacao, entao
   os dois brilhos partem do centro para as pontas ao mesmo tempo. */
.t2-divisor::after{transform:scaleX(-1)}

/* Losango: um quadrado girado, no centro da linha. */
.t2-divisor i{width:9px; height:9px; margin:0 13px; flex:0 0 auto;
  transform:rotate(45deg); background:var(--gold);
  box-shadow:0 0 10px rgba(230,185,63,.6);
  animation:t2DivPulso 3.2s ease-in-out infinite}

@keyframes t2DivBrilho{
  0%      { background-position:-110px 0, 0 0 }
  60%,100%{ background-position:calc(100% + 110px) 0, 0 0 }
}
@keyframes t2DivPulso{
  0%,100%{ transform:rotate(45deg) scale(1);    box-shadow:0 0 10px rgba(230,185,63,.55) }
  50%    { transform:rotate(45deg) scale(1.22); box-shadow:0 0 18px rgba(230,185,63,.95) }
}

/* Decoracao nao se move para quem pediu menos animacao. */
@media (prefers-reduced-motion: reduce){
  .t2-divisor i,.t2-divisor::before,.t2-divisor::after{animation:none}
}

/* Medalhao no topo da capa de cada eixo. */
/* O medalhao encolhe junto com a TELA, nao so com a largura: em 780px de
   altura o card cai para 264px, e com 82px de medalhao o titulo de tres
   linhas do PvP era cortado no pe do card. */
.t2-eixo-medalha{width:clamp(48px,min(4.6vw,7.4vh),82px); height:auto; margin-bottom:2px;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.6));
  transition:transform .2s ease}
.t2-dif-eixo:hover .t2-eixo-medalha{transform:translateY(-3px) scale(1.04)}
@media (prefers-reduced-motion: reduce){
  .t2-eixo-medalha{transition:none}
  .t2-dif-eixo:hover .t2-eixo-medalha{transform:none}
}

/* O "2" do wordmark em azul: o T2 do logo ja e dourado com azul, entao o nome
   repete a divisao em vez de virar um bloco dourado unico. Precisa do proprio
   background-clip - cada elemento recorta o SEU gradiente, herdar nao vale. */
.t2-hero-dois{background:linear-gradient(180deg,#7fd0ff 0%,#27A7FF 45%,#1677C8 100%);
  -webkit-background-clip:text; background-clip:text; color:#27A7FF}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .t2-hero-dois{color:transparent}
}

/* ---- Dentro do card do pilar --------------------------------------------
   O card e centralizado (medalhao, titulo, regua, cadeado), mas o CORPO e
   texto de leitura: centralizado, cada linha comeca num ponto diferente e o
   olho se perde na volta. Alinha a esquerda. */
.t2-eixo-corpo{text-align:left}
.t2-eixo-corpo > .t2-dif-d{text-align:center}

/* Nome da feature = subtitulo, entao DOURADO. O link e INTERACAO, entao AZUL -
   e a regra que separa recompensa de acao, aplicada dentro do card. */
.t2-eixo-corpo .t2-dif-f strong{color:var(--gold); font-size:13.5px}
.t2-eixo-corpo .t2-dif-f{border-top:1px solid rgba(232,184,62,.16)}
.t2-eixo-corpo .t2-dif-f p{color:var(--muted); font-size:13.5px}
.t2-eixo-corpo .t2-dif-ler{color:var(--blue-bright); border-bottom-color:rgba(39,167,255,.4)}
.t2-eixo-corpo .t2-dif-ler:hover{border-bottom-color:var(--blue-bright)}
/* No CARD, a capa (inset:0) cobre estes links; quem interage e a capa, que abre o
   modal. display:none tira-os POR COMPLETO da arvore de alvos de toque -
   pointer-events:none sozinho NAO bastou: o Lighthouse mobile continuava contando
   o <a href> por baixo da capa e marcava sobreposicao (capa x dif-ler). O clone no
   modal (.t2-modal-corpo, fora de .t2-dif-eixo) NAO casa este seletor, entao segue
   visivel e clicavel. O deep-link continua crawlavel por /features e pelo sitemap. */
.t2-dif-eixo .t2-eixo-corpo .t2-dif-ler{display:none}

/* ---- UI que ficou na fonte de leitura -----------------------------------
   Item de menu suspenso e seletor de idioma nao tem classe propria, entao
   herdavam a Source Serif 4 do body enquanto o menu ao lado deles ja estava
   na Inter - mesma barra, duas fontes. Sao controle, nao texto. */
.t2-drop a,.t2-lang a,.t2-foot-links a,.t2-legal-back,.t2-dif-ler,
.t2-btn-discord-head,.t2-btn-discord-hero,.t2-eixo-revelado,.t2-soon{
  font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif}
.t2-drop a{letter-spacing:.01em}

/* ===== A regua dourada da barra ==========================================
   Um filete atravessa a base do header e o item da pagina ATUAL o corta: um
   losango sobre a linha e um trecho aceso sob o rotulo. E a mesma peca dos
   divisores da pagina, aqui dizendo onde voce esta.

   Vai no ::after da barra e nao em border-bottom porque precisa se dissolver
   nas pontas - borda solida de ponta a ponta pesa demais numa barra escura. */
.t2-bar{position:relative}
.t2-bar::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  pointer-events:none;
  /* Solida de ponta a ponta: agora ela recebe o fio da diagonal nos DOIS lados,
     e degrade que morre nas bordas cortaria a linha exatamente nas emendas. */
  background:linear-gradient(90deg,
    rgba(232,184,62,.55), rgba(232,184,62,.5) 50%, rgba(232,184,62,.55))}

/* O item atual. O losango fica ACIMA do rotulo (como o brilho do mockup) e o
   trecho aceso embaixo, sobre a regua. */
.t2-navtop.t2-nav-atual{color:var(--gold)}
.t2-navtop.t2-nav-atual::before{content:""; position:absolute; top:2px; left:50%;
  width:7px; height:7px; margin-left:-3.5px; transform:rotate(45deg);
  background:linear-gradient(135deg,#FFD96A,#E8B83E);
  box-shadow:0 0 10px rgba(255,217,106,.75)}
.t2-navtop.t2-nav-atual::after{content:""; position:absolute; left:8px; right:8px; bottom:-1px;
  height:2px;
  background:linear-gradient(90deg,rgba(255,217,106,0),#FFD96A 50%,rgba(255,217,106,0));
  box-shadow:0 0 12px rgba(255,217,106,.55)}

/* position:relative para os dois pseudo-elementos acima; o item ja e
   inline-flex, entao so falta o contexto de posicionamento. */
.t2-navtop{position:relative}

/* Losango na regua, logo depois da diagonal do painel da marca - e onde as duas
   linhas se encontram no mockup.

   DENTRO de um min-width e nao solto: o position:relative daqui vinha depois do
   media query do menu mobile no arquivo e, com a mesma especificidade, vencia o
   position:absolute dele. O menu aberto virava uma tira estreita no meio da
   tela, com os itens cortados. Como o ornamento so existe onde ha regua na
   barra, prende-lo ao mesmo ponto de corte do hamburguer resolve os dois. */
@media (min-width: 1561px){
  .t2-nav{position:relative}
  .t2-nav::before{content:""; position:absolute; left:-16px; bottom:-19px;
    width:7px; height:7px; transform:rotate(45deg);
    background:linear-gradient(135deg,#FFD96A,#E8B83E);
    box-shadow:0 0 9px rgba(255,217,106,.6)}
}

/* ===== Painel da conta: o espelho do painel da marca ======================
   Mesma altura, mesma pintura, mesmo fio dourado - so que a diagonal fica na
   ESQUERDA, para o corte apontar de volta para o centro da barra.

   As variaveis --sobra e --corte sao as mesmas do painel da marca de proposito:
   se um lado descesse 22px e o outro 18px, a regua da barra encontraria os dois
   fios em alturas diferentes e nenhuma emenda fecharia. */
.t2-auth{align-self:stretch; position:relative; z-index:3;
  display:flex; align-items:center; gap:9px;
  --sobra:22px; --corte:26px;
  padding:7px 16px 9px 30px; margin:0 0 calc(var(--sobra) * -1) 4px;
  clip-path:polygon(0 0, 100% 0, 100% 100%, var(--corte) 100%,
    0 calc(100% - var(--sobra)));
  background:linear-gradient(180deg,#080D12 0,#060a0e 64px)}

/* O respiro vertical e pequeno de proposito: o botao ESTICA e ocupa a altura
   inteira do painel (86px), inclusive a sobra que desce abaixo da barra. Sai o
   padding-bottom de --sobra que antes o prendia aos 64px da barra. */

/* Traco dourado: base + diagonal da esquerda, parando na altura da regua. */
.t2-auth::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg,rgba(232,184,62,.9),rgba(232,184,62,.45));
  clip-path:polygon(
    100% 100%,
    var(--corte) 100%,
    0 calc(100% - var(--sobra)),
    2px calc(100% - var(--sobra)),
    calc(var(--corte) + 1.5px) calc(100% - 1.6px),
    100% calc(100% - 1.6px))}
.t2-auth > *{position:relative; z-index:3}

/* Losango na emenda da direita, espelhando o da esquerda.

   Vai no VIZINHO e nao no proprio painel: o clip-path recorta os pseudo-elementos
   do elemento tambem, entao um ::before do .t2-auth posicionado fora da forma
   simplesmente nao aparece. Mesmo tropeco do losango dos quatro pilares.

   O align-self:stretch faz o bloco do status ocupar os 64px da barra, e so
   assim o bottom:-3.5px cai exatamente na linha da regua - com ele centrado, a
   base dependeria da altura do conteudo. */
.t2-headmeta{align-self:stretch; position:relative}
.t2-headmeta::after{content:""; position:absolute; right:-24px; bottom:-3.5px;
  width:7px; height:7px; transform:rotate(45deg);
  background:linear-gradient(135deg,#FFD96A,#E8B83E);
  box-shadow:0 0 9px rgba(255,217,106,.6)}

/* ===== O botao de conta ==================================================
   Cantos chanfrados para DENTRO, aresta dourada e o azul no miolo. Sem
   ornamento nos cantos: o chanfro ja marca as quinas.

   Sao TRES camadas concentricas em vez de border + box-shadow, e a ORDEM
   importa - o dourado fica na aresta de FORA e o preto POR DENTRO dele:

     .t2-btn-cta   dourado  a aresta externa, 2px
     ::before      preto    recuado 2px, separando o ouro do azul
     ::after       azul     recuado 4px

   Preto por fora envolvia a peca inteira e virava uma moldura escura grossa;
   por dentro ele so separa as duas cores, que e o que da o metal embutido.

   Por que nao border e box-shadow: clip-path recorta os dois. A borda some nos
   chanfros e a sombra externa desaparece inteira. Camadas com o MESMO clip-path
   acompanham o chanfro, e a profundidade vem de filter:drop-shadow, que segue a
   forma recortada em vez de ser cortada por ela. */
.t2-btn-cta,.t2-btn-primary{
  --chanfro:9px;
  position:relative; z-index:0;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; align-self:stretch; min-height:56px; padding:0 30px; cursor:pointer;
  white-space:nowrap; text-decoration:none; border:0; border-radius:0;
  background:linear-gradient(180deg,#FFD96A 0%,#E8B83E 42%,#a9822a 100%);
  clip-path:polygon(var(--chanfro) 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro),
    100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%,
    var(--chanfro) 100%, 0 calc(100% - var(--chanfro)), 0 var(--chanfro));
  filter:drop-shadow(0 3px 9px rgba(0,0,0,.65));
  transition:filter .16s ease}

/* O preto, POR DENTRO do dourado. */
.t2-btn-cta::before,.t2-btn-primary::before{content:""; position:absolute; inset:2px; z-index:0; clip-path:inherit;
  background:#010407}

/* O miolo azul, recuado do preto - e a indentacao que se ve nas quatro quinas. */
.t2-btn-cta::after,.t2-btn-primary::after{content:""; position:absolute; inset:4px; z-index:1; clip-path:inherit;
  background:linear-gradient(180deg,#2b6fae 0%,#164c82 44%,#0b2b4d 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.30), inset 0 -10px 20px rgba(0,0,0,.42)}

.t2-btn-cta:hover,.t2-btn-primary:hover{filter:drop-shadow(0 3px 13px rgba(0,0,0,.7)) brightness(1.14)}
.t2-btn-cta:focus-visible,.t2-btn-primary:focus-visible{outline:2px solid var(--gold-light); outline-offset:3px}

/* O texto acima das duas camadas. */
.t2-btn-cta > *,.t2-btn-primary > *{position:relative; z-index:2}
/* O rotulo precisa ser ELEMENTO: no de texto solto fica ABAIXO das camadas
   posicionadas e some. Dai o <b> no HTML do Jogar Gratis. */
.t2-btn-cta b,.t2-btn-primary b{font-family:"Cinzel","Cinzel-fb",serif; font-weight:800; font-size:15px;
  letter-spacing:.09em; text-transform:uppercase; color:#FFF6DC; line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.6)}
.t2-btn-cta i{font-style:normal; font-family:"Inter","Inter-fb",system-ui,sans-serif; font-weight:500;
  font-size:10px; letter-spacing:.055em; text-transform:uppercase; line-height:1;
  color:rgba(243,238,220,.85); text-shadow:0 1px 2px rgba(0,0,0,.5)}

/* O Sair usa a MESMA construcao do botao principal - tres camadas, chanfro,
   chanfro - mudando so o miolo: ardosia no lugar do azul.

   A cor e o que separa os dois papeis. Mesma forma diz "sao da mesma familia";
   miolo apagado diz "este nao e o caminho principal". Se o Sair fosse azul
   tambem, sair da conta competiria com entrar nela.

   Ele divide a largura do painel com o botao principal: 1 para 2, entao a acao
   que se quer que aconteca fica com o dobro do espaco. */
/* As proporcoes vivem PRESAS ao painel do header: elas existem para dividir a
   largura dele. Soltas, pegavam qualquer botao da mesma classe - e num container
   de coluna o flex-basis:0 vence o height, entao o botao do contador colapsava
   para 0px de altura. */
.t2-auth .t2-btn-sair{flex:1 1 0; min-width:82px; padding:0 16px}
.t2-auth .t2-btn-cta:not(.t2-btn-sair){flex:2 1 0}
/* O vermelho do Tibia. A matiz vem de #F55E5E, que e o vermelho canonico dos
   estilos do otclient - nao e escolha de gosto, e o valor que o jogo ja usa.

   As luminosidades sao as MESMAS do botao azul (L43 / L30 / L17), so trocando a
   matiz: assim os dois botoes tem o mesmo peso visual e um nao parece mais
   claro que o outro por acidente. */
.t2-btn-sair::after{background:linear-gradient(180deg,#af2c2c 0%,#831616 44%,#4c0b0b 100%)}
.t2-btn-sair b{font-size:13px; color:#E4DECB}
.t2-btn-sair{background:linear-gradient(180deg,#E8B83E 0%,#a9822a 45%,#6d5218 100%)}

/* ===== Modal dos pilares =================================================
   Clicar num pilar abre o conteudo centralizado em vez de expandir o card. O
   card que expandia empurrava os tres vizinhos e a grade inteira pulava.

   Moldura na mesma linguagem do botao de conta: chanfro nas quatro quinas e
   camadas concentricas (escuro -> dourado -> miolo), porque clip-path recorta
   border e box-shadow. */
.t2-modal{
  --chanfro:16px;
  border:0; padding:0; background:#010407; color:var(--text);
  width:min(760px,92vw); max-height:88vh; overflow:visible;
  clip-path:polygon(var(--chanfro) 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro),
    100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%,
    var(--chanfro) 100%, 0 calc(100% - var(--chanfro)), 0 var(--chanfro));
  filter:drop-shadow(0 18px 50px rgba(0,0,0,.75))}
.t2-modal::backdrop{background:rgba(3,7,12,.78); backdrop-filter:blur(4px)}

/* O fio dourado, entre o contorno escuro e o miolo. */
.t2-modal-inner{position:relative; margin:5px; padding:3px;
  background:linear-gradient(180deg,#FFD96A 0%,#E8B83E 38%,#a9822a 100%);
  clip-path:inherit}
.t2-modal-corpo{
  background:linear-gradient(180deg,#101c28 0%,#0a121b 60%,#070d14 100%);
  clip-path:inherit;
  padding:34px 40px 38px; text-align:center;
  /* overflow-x explicito: com so overflow-y:auto o outro eixo vira auto
     sozinho, e o navegador reserva a calha da barra horizontal a toa. */
  max-height:calc(88vh - 16px); overflow-y:auto; overflow-x:hidden}

.t2-modal-corpo .t2-eixo-medalha{width:clamp(72px,9vw,104px); margin-bottom:6px}
.t2-modal-corpo .t2-dif-eixo-t{font-family:"Cinzel","Cinzel-fb",serif; font-weight:700;
  font-size:clamp(1.15rem,2.1vw,1.62rem); line-height:1.25; letter-spacing:.045em;
  text-transform:uppercase; color:var(--gold); margin:8px 0 0; text-wrap:balance}
/* Nem blur nem limite de altura aqui: e o conteudo inteiro, e e para isso que o
   modal existe. */
.t2-modal-corpo .t2-eixo-corpo{text-align:left; max-width:60ch; margin:0 auto}
.t2-modal-corpo .t2-dif-d{text-align:center; font-size:1.05rem}

.t2-modal-x{position:absolute; top:8px; right:10px; z-index:5;
  width:34px; height:34px; line-height:1; font-size:22px;
  background:rgba(3,8,14,.7); color:var(--gold); cursor:pointer;
  border:1px solid rgba(232,184,62,.45); border-radius:50%;
  transition:color .15s, border-color .15s, background .15s}
.t2-modal-x:hover{color:var(--gold-light); border-color:var(--gold);
  background:rgba(22,76,130,.6)}

/* A entrada repete o desbloqueio azul->dourado que o card fazia ao abrir. */
.t2-modal[open]{animation:t2ModalEntra .22s ease-out}
@keyframes t2ModalEntra{
  from{opacity:0; transform:translateY(10px) scale(.98)}
  to{opacity:1; transform:none}
}
@media (prefers-reduced-motion: reduce){
  .t2-modal[open]{animation:none}
}

/* ===== A faixa que fecha o hero ==========================================
   Tres numeros e o unico CTA da dobra, nos 162px que sobravam no pe do hero. */
.t2-faixa{display:flex; align-items:center; justify-content:center;
  gap:clamp(20px,3.5vw,64px); flex-wrap:wrap;
  margin:26px auto 0; padding:16px clamp(18px,3vw,40px);
  width:min(1180px,94%);
  background:linear-gradient(180deg,rgba(16,25,35,.72),rgba(8,13,18,.72));
  border-top:1px solid rgba(232,184,62,.20);
  border-bottom:1px solid rgba(232,184,62,.20);
  backdrop-filter:blur(3px)}

.t2-faixa-nums{display:flex; align-items:center; gap:clamp(20px,3.4vw,58px); flex-wrap:wrap;
  justify-content:center}
.t2-faixa-item{display:flex; flex-direction:column; align-items:center; gap:3px; line-height:1}
/* O numero e dourado porque e conquista acumulada - a mesma regra que pinta
   titulo e progressao. O rotulo e cinza quente e some no fundo, que e o papel
   dele: quem le a faixa le os NUMEROS. */
.t2-faixa-item b{font-family:"Cinzel","Cinzel-fb",serif; font-weight:800;
  font-size:clamp(1.6rem,2.4vw,2.3rem); color:var(--gold);
  text-shadow:0 0 22px rgba(232,184,62,.22)}
.t2-faixa-item i{font-style:normal; font-family:"Inter","Inter-fb",system-ui,sans-serif;
  font-weight:500; font-size:.74rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); text-indent:.13em}

/* Na faixa o botao nao estica com o painel do header, entao precisa de altura
   propria. */
.t2-faixa .t2-btn-cta{align-self:auto; height:62px; min-height:0}

@media (max-width: 820px){
  .t2-faixa{gap:18px; padding:14px 16px}
  .t2-faixa-item b{font-size:1.5rem}
}

/* ===== O trio da direita: idioma, status e Discord =======================
   Eles vinham com alturas diferentes (19, 26 e 36px) e cada um com um respiro
   proprio, entao pareciam tres pecas soltas em vez de um grupo. Passam a ser
   TRES PASTILHAS DA MESMA ALTURA, com a mesma moldura e o mesmo raio: o olho le
   uma faixa so.

   A altura vem de uma variavel unica - com 36px escrito em tres regras, a
   proxima mudanca desalinharia duas delas. Ela fica na BARRA e nao no bloco de
   status: o seletor de idioma e IRMAO desse bloco, nao filho, entao declarada
   la dentro a variavel nao chegava nele e o chip ficava com a altura antiga. */
.t2-bar{--pastilha:36px}
.t2-headmeta{gap:9px}
.t2-lang,.t2-status-head,.t2-btn-discord-head{
  height:var(--pastilha); box-sizing:border-box; border-radius:9px;
  display:inline-flex; align-items:center}
/* Respiros apertados de proposito: as pastilhas de 36px comeram a folga da
   barra e a 1561px ela voltou a transbordar 26px. Aqui o corte custa alguns
   pixels de ar; a alternativa era o menu virar hamburguer ja em 1600, que e
   largura de notebook comum. */
.t2-lang,.t2-status-head{
  padding:0 3px; background:rgba(13,21,30,.55);
  border:1px solid var(--line)}
.t2-status-head{padding:0 9px}
.t2-lang a{padding:6px 7px}
.t2-lang{gap:2px; margin-left:auto}
.t2-btn-discord-head{padding:0 12px; border-radius:9px}

/* O status empilhado: estado em cima, contagem embaixo. line-height apertado
   porque duas linhas tem de caber nos 36px da pastilha. */
.t2-status-txt{display:flex; flex-direction:column; justify-content:center;
  line-height:1.16; white-space:nowrap}
.t2-status-txt b{font-family:"Inter","Inter-fb",system-ui,sans-serif; font-weight:600;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text)}
.t2-status-txt i{font-style:normal; font-family:"Inter","Inter-fb",system-ui,sans-serif;
  font-weight:500; font-size:10px; letter-spacing:.04em; color:var(--muted)}

/* O ponto acompanha a altura das duas linhas, alinhado ao topo e nao ao meio -
   ele marca o ESTADO, que e a primeira linha. */
.t2-status-head .t2-dot{margin-right:0; align-self:center}

/* ===== Header no celular =================================================
   Medido a 375px: a pagina transbordava 517px. O menu ja virava hamburguer,
   mas todo o RESTO da barra continuava - marca 245 + idioma 104 + status 148 +
   Discord + painel de conta 242, numa tela de 375.

   Aqui a barra fica com o essencial: marca compacta, hamburguer e o botao de
   entrar. Idioma e Discord nao somem - eles reaparecem dentro do menu. */
.t2-nav-extra{display:none}

@media (max-width: 640px){
  /* Sem sobra nem diagonal: o painel da marca vira um bloco simples. O recorte
     so faz sentido quando ha barra larga o bastante para ele apontar para
     algum lugar. */
  .t2-brand{--sobra:0px; --corte:0px; padding:0 12px 0 12px; margin:0}
  .t2-brand img{height:34px}
  .t2-brand-txt b{font-size:19px; letter-spacing:.09em}
  .t2-brand-txt i{display:none}

  .t2-lang:not(.t2-lang-menu),
  .t2-status-head,
  .t2-btn-discord-head{display:none}

  /* O botao de entrar perde a segunda linha e encolhe - a acao continua clara
     com uma palavra so.

     O margin-left:auto vem para ca: quem empurrava o grupo da direita era o
     seletor de idioma, que aqui esta escondido. Sem isso o botao ficava solto no
     meio da barra, com 36px de vazio sobrando na direita. */
  .t2-auth{--sobra:0px; --corte:0px; padding:0 10px; margin:0 0 0 auto}
  .t2-btn-cta{min-height:0; height:40px; padding:0 14px; --chanfro:6px}
  .t2-btn-cta i{display:none}
  .t2-btn-cta b{font-size:12.5px; letter-spacing:.06em}

  /* Alvo de toque decente: 22px era metade do minimo recomendado. */
  .t2-burger{width:42px; height:38px}

  .t2-bar{gap:8px; padding:0 8px 0 0}

  /* Idioma e Discord aparecem no fim do menu aberto. */
  .t2-nav-extra{display:flex; align-items:center; justify-content:space-between;
    gap:10px; margin-top:8px; padding-top:10px; border-top:1px solid var(--line)}
  /* Dentro do menu o chip nao herda a --pastilha da barra: aqui ele precisa de
     alvo de toque, nao de altura de barra. */
  .t2-lang-menu{margin-left:0; height:auto; padding:2px}
  .t2-lang-menu a{padding:10px 14px; font-size:13px}
  .t2-nav-extra > .t2-navtop{width:auto; flex:0 0 auto}
}

/* No celular o alvo de toque manda: 33px de fechar e menos que os 44px minimos
   recomendados, e errar o X num modal que cobre a tela inteira e frustrante.
   O corpo tambem cede respiro lateral - numa tela de 375px, 40px de cada lado
   sao 21% da largura so em margem. */
@media (max-width: 640px){
  .t2-modal-x{width:44px; height:44px; font-size:26px; top:6px; right:6px}
  .t2-modal-corpo{padding:26px 20px 30px}
  .t2-modal{--chanfro:12px}
}

/* ===== Contador de lancamento ============================================
   Fica a DIREITA do lockup - o ponto de maior valor do hero, porque o olho ja
   esta ali por causa do logo. */
/* Os cards saem do FLUXO e a linha volta a ter a altura do lockup.

   Medido: com eles na grade a linha ia a 237px para um lockup de 120px, e
   sobravam 59px de vao ACIMA e ABAIXO do TIBIA 2. Era isso que afastava o
   eyebrow do nome e o nome do titulo dos pilares - o meio parecia solto porque
   estava centralizado num espaco que os cards das laterais inflavam.

   top:0 nos dois: alinhados pelo topo, cada um com a altura do proprio
   conteudo, e nenhum deles empurrando o meio. */
.t2-hero-topo{position:relative; display:flex; align-items:center;
  justify-content:center; margin-bottom:10px}
.t2-hero-topo .t2-hero-brand{margin-bottom:0}
.t2-hero-topo > .t2-cd{position:absolute; top:0; margin:0; width:344px}
.t2-hero-topo > .t2-beta{left:0}
.t2-hero-topo > .t2-cd:not(.t2-beta){right:0}

/* Abaixo de 1240px os cards nao cabem ao lado: voltam ao fluxo, empilhados. */
@media (max-width: 1240px){
  .t2-hero-topo{flex-wrap:wrap; gap:16px}
  .t2-hero-topo > .t2-cd{position:static; width:min(344px,100%)}
}

/* A moldura que brilha gira um gradiente conico. Precisa de @property porque
   angulo em custom property so anima se for declarado com tipo - sem isso o
   navegador trata como texto e o valor pula de 0 a 360 sem passar pelo meio. */
@property --t2-cd-ang{syntax:"<angle>"; inherits:false; initial-value:0deg}

.t2-cd{position:relative; --chanfro:12px;
  padding:3px; border-radius:0;
  clip-path:polygon(var(--chanfro) 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro),
    100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%,
    var(--chanfro) 100%, 0 calc(100% - var(--chanfro)), 0 var(--chanfro));
  background:#010407;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.6))}

/* O brilho e um elemento SEM conteudo por cima de tudo: girando no fundo do
   card ele ficaria atras do miolo opaco, e como filho normal capturaria o
   clique do botao. */
.t2-cd-brilho{position:absolute; inset:0; z-index:0; pointer-events:none;
  clip-path:inherit;
  background:conic-gradient(from var(--t2-cd-ang),
    rgba(232,184,62,.15) 0deg, #FFD96A 40deg, #E8B83E 70deg,
    rgba(232,184,62,.12) 150deg, rgba(39,167,255,.55) 210deg,
    rgba(232,184,62,.12) 270deg, #E8B83E 330deg, rgba(232,184,62,.15) 360deg);
  animation:t2CdGira 5s linear infinite}
@keyframes t2CdGira{to{--t2-cd-ang:360deg}}

/* Respiro apertado de proposito: e o contador que define a altura da linha do
   hero, e cada pixel aqui empurra o resto da pagina para baixo. */
.t2-cd-inner{position:relative; z-index:1;
  clip-path:inherit;
  background:linear-gradient(180deg,#101c28 0%,#0a121b 62%,#070d14 100%);
  padding:12px 20px 13px; display:flex; flex-direction:column; align-items:center; gap:8px}

.t2-cd-esq{display:flex; flex-direction:column; align-items:center; gap:9px}
.t2-cd-rotulo{font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:.86rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold); text-indent:.16em}

.t2-cd-nums{display:flex; align-items:flex-start; gap:clamp(8px,1vw,16px)}
.t2-cd-un{display:flex; flex-direction:column; align-items:center; gap:2px; min-width:50px}
/* tabular-nums e o que impede o bloco de tremer: sem ele cada digito tem
   largura propria e a linha se mexe a cada segundo. */
.t2-cd-un b{font-family:"Cinzel","Cinzel-fb",serif; font-weight:800;
  font-size:clamp(1.5rem,2.1vw,2rem); line-height:1; color:var(--gold);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  text-shadow:0 0 20px rgba(232,184,62,.28)}
.t2-cd-un i{font-style:normal; font-family:"Inter","Inter-fb",system-ui,sans-serif;
  font-weight:500; font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); text-indent:.13em}

.t2-cd .t2-btn-cta{align-self:stretch; min-height:0; height:52px}

/* Lancado: some o contador e sobra a chamada com o botao. */
.t2-cd-no-ar .t2-cd-nums{display:none}

@media (prefers-reduced-motion: reduce){
  .t2-cd-brilho{animation:none; background:linear-gradient(135deg,#E8B83E,#a9822a)}
}
@media (max-width: 640px){
  .t2-cd-un{min-width:44px}
  .t2-cd-inner{padding:14px 14px 16px}
}

/* No celular o 'Ler a pagina' tinha 20px de altura - metade do alvo de toque
   minimo, e sao os unicos links dentro do card. O texto nao cresce; o que cresce
   e a AREA clicavel, por padding. */
@media (max-width: 640px){
  /* Alvo de toque >= 48px: block ocupa a largura do card e o padding leva a
     altura a ~48px, com folga entre um link e outro (o Lighthouse cobra tamanho
     E espacamento). O texto continua do mesmo tamanho. */
  .t2-dif-ler{display:block; padding:14px 8px; margin-top:8px}
}

/* ---- Card do beta -------------------------------------------------------
   Mesma peca do contador, com o brilho puxado para o AZUL. Pela regra da marca
   o dourado e recompensa e o azul e interacao - e este card e um convite para
   agir agora, nao um premio. */
.t2-beta .t2-cd-brilho{
  background:conic-gradient(from var(--t2-cd-ang),
    rgba(39,167,255,.18) 0deg, #7fd0ff 40deg, #27A7FF 70deg,
    rgba(39,167,255,.12) 150deg, rgba(232,184,62,.5) 210deg,
    rgba(39,167,255,.12) 270deg, #27A7FF 330deg, rgba(39,167,255,.18) 360deg)}
.t2-beta .t2-cd-inner{max-width:340px}
.t2-beta-txt{margin:0; font-size:.92rem; line-height:1.5; color:var(--muted);
  text-align:center; text-wrap:balance}

/* O interior estica para preencher a altura que a grade deu ao card, e
   centraliza o conteudo dentro dela. */
.t2-hero-topo > .t2-cd .t2-cd-inner{flex:1 1 auto; justify-content:center}
.t2-beta .t2-cd-inner{max-width:none}

/* ===== Faixa de aviso do beta ============================================
   No topo de toda pagina, logo ABAIXO do header - acima ela empurraria a barra
   fixa e quebraria o offset do sticky, o scroll-padding das ancoras e a sobra do
   painel da marca, todos medidos a partir dos 64px dela. */
.t2-betafaixa{position:relative; overflow:hidden;
  background:linear-gradient(180deg,#0c1620,#080d12)}
/* O brilho vira uma LINHA na base em vez de moldura: numa faixa larga, contorno
   giratorio inteiro vira ruido atras do texto. */
.t2-betafaixa-brilho{position:absolute; left:0; right:0; bottom:0; top:auto;
  height:2px; clip-path:none; z-index:0}
.t2-betafaixa-inner{position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:10px 14px; padding:9px 18px; text-align:center}

.t2-betafaixa-selo{font-family:"Inter","Inter-fb",system-ui,sans-serif; font-weight:700;
  font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:#06121a; background:linear-gradient(180deg,#FFD96A,#E8B83E);
  padding:3px 9px; border-radius:4px; white-space:nowrap}
.t2-betafaixa-txt{font-family:"Inter","Inter-fb",system-ui,sans-serif; font-size:.86rem;
  color:var(--text)}
/* text-decoration e nao border-bottom: o sublinhado precisa acompanhar o TEXTO.
   Com border, o padding que aumenta a area de toque empurraria a linha para o
   pe da area clicavel, a 11px do texto. */
.t2-betafaixa-cta{font-family:"Inter","Inter-fb",system-ui,sans-serif; font-weight:600;
  font-size:.84rem; color:var(--blue-bright); white-space:nowrap;
  text-decoration:underline; text-decoration-color:rgba(39,167,255,.35);
  text-underline-offset:3px}
.t2-betafaixa-cta:hover{text-decoration-color:var(--blue-bright)}

@media (max-width: 640px){
  /* Media: 96px, 12% da tela do celular, em tres linhas - caro demais para um
     aviso, logo abaixo de um header que ja tem 65px. Texto menor e respiro
     apertado tiram cerca de um terco sem esconder nada. */
  .t2-betafaixa-txt{font-size:.74rem; line-height:1.35}
  .t2-betafaixa-selo{font-size:.6rem; padding:2px 7px}
  .t2-betafaixa-cta{font-size:.76rem}
  .t2-betafaixa-inner{padding:6px 10px; gap:3px 8px}
}

/* A data por extenso, abaixo dos numeros. Menor e em cinza quente: ela confirma
   o contador, nao compete com ele. */
.t2-cd-data{font-family:"Inter","Inter-fb",system-ui,sans-serif; font-size:.74rem;
  color:var(--muted); text-align:center; line-height:1.35; margin-top:2px}
.t2-cd-data i{font-style:normal; display:block; font-size:.66rem; opacity:.8}

/* Acao secundaria: some no fundo ate o cursor chegar. Azul e nao dourado - pela
   regra da marca, dourado e recompensa e isto e interacao. */
.t2-cd-cal{display:inline-flex; align-items:center; justify-content:center; gap:6px;
  margin-top:2px; padding:6px 10px; background:0 0; border:0; cursor:pointer;
  font-family:"Inter","Inter-fb",system-ui,sans-serif; font-weight:500; font-size:.76rem;
  color:var(--muted); transition:color .15s ease}
.t2-cd-cal:hover{color:var(--blue-bright)}
.t2-cd-cal:focus-visible{outline:2px solid var(--blue-bright); outline-offset:2px; border-radius:4px}
.t2-cd-cal svg{flex:0 0 auto; opacity:.85}

/* ===== Cards do hero em tela baixa =======================================
   Os cards ficam fora do fluxo, entao a sobra deles desce por cima do que vem
   depois. Medido a 1440x780: o contador terminava em 421px e a grade dos
   pilares comeca em 369px - os ultimos 52px, incluindo o "Marcar no
   calendario", ficavam ATRAS do quarto pilar. Nao era corte de overflow, era
   sobreposicao.

   Aqui o card aperta ate a sobra caber. So o que da para encolher sem perder
   informacao: corpo dos numeros, respiros e a altura do botao. Nada e removido -
   quem tem tela baixa continua vendo a data, o fuso e o link do calendario. */
/* Vale em QUALQUER altura de tela, nao so nas baixas. Com o card cheio (254px)
   a sobra tambem passava atras dos pilares em 1920x950 - por 40px. Um card
   compacto so, com um offset so, resolve os dois casos e tira um breakpoint do
   caminho: menos lugar para o alinhamento se perder na proxima mudanca.

   Os 212px resultantes continuam legiveis - e a altura que ja estava no ar em
   1440 e que motivou este ajuste. */
@media (min-width: 1241px){
  /* Os dois sobem 14px juntos, alinhados como estavam. Subir custa nada: acima
     deles so ha o eyebrow, que e texto centrado e nao cruza as laterais. */
  .t2-hero-topo > .t2-cd{top:-14px}
  .t2-cd-inner{padding:9px 16px 10px; gap:5px}
  .t2-cd-rotulo{font-size:.76rem; letter-spacing:.13em}
  .t2-cd-un b{font-size:clamp(1.2rem,1.7vw,1.6rem)}
  .t2-cd-un{min-width:44px}
  .t2-cd-un i{font-size:.56rem}
  .t2-cd-data{font-size:.68rem; margin-top:0}
  .t2-cd-data i{font-size:.6rem}
  .t2-cd .t2-btn-cta{min-height:0; height:44px}
  .t2-cd-cal{margin-top:0; padding:4px 8px; font-size:.72rem}
  .t2-beta-txt{font-size:.84rem; line-height:1.42}
}

/* ===== Alvo de toque dos links secundarios ================================
   Medido no celular: "Testar agora" da faixa com 22px e "Marcar no calendario"
   com 32px, contra os 44px minimos. Sao links pequenos ao lado de botoes
   grandes, entao errar o toque e facil.

   O padding cresce a AREA e a margem negativa devolve o espaco ao layout: a
   faixa continua com os mesmos 75px e o card nao empurra os pilares. O texto
   nao muda de tamanho - o que cresce e so onde o dedo pode cair. */
@media (max-width: 640px){
  .t2-betafaixa-cta{display:inline-block; padding:12px 8px; margin:-12px -8px}
  .t2-cd-cal{padding:12px 14px; margin-top:-6px; margin-bottom:-6px}
}

/* ===== Busca de paginas (command palette) — so nas internas =====
   Alternativa ao menu: digitar para achar pagina. Botao-lupa no cabecalho abre
   um <dialog>; azul = interacao, dourado reservado pra recompensa (nao usado aqui). */
.t2-search-btn{display:inline-flex; align-items:center; gap:7px; background:var(--surface-3); border:1px solid var(--line-strong); color:var(--muted); border-radius:9px; padding:8px 12px; cursor:pointer; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-size:12px; font-weight:600; letter-spacing:.03em; line-height:1}
.t2-search-btn:hover{border-color:var(--brand); color:var(--text)}
.t2-search-btn svg{width:15px; height:15px; flex:none}
.t2-search-btn-txt{white-space:nowrap}
@media (max-width:1080px){ .t2-search-btn-txt{display:none} .t2-search-btn{padding:8px} }

.t2-search-dlg{border:none; padding:0; background:transparent; width:min(560px, calc(100% - 28px)); margin-top:12vh; color:var(--text)}
.t2-search-dlg::backdrop{background:rgba(4,8,12,.62)}
.t2-search-inner{background:var(--surface-a); border:1px solid var(--line-strong); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.t2-search-top{display:flex; align-items:center; gap:10px; padding:13px 15px; border-bottom:1px solid var(--line)}
.t2-search-ico{width:18px; height:18px; color:var(--muted); flex:none}
.t2-search-input{flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--text); font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-size:15px; line-height:1.3}
.t2-search-input::placeholder{color:var(--muted-2)}
.t2-search-esc{font-size:10px; color:var(--muted-2); border:1px solid var(--line-strong); border-radius:5px; padding:3px 6px; text-transform:uppercase; letter-spacing:.08em; flex:none}
.t2-search-list{list-style:none; margin:0; padding:6px; max-height:52vh; overflow-y:auto}
.t2-search-item{display:flex; align-items:baseline; gap:12px; padding:9px 12px; border-radius:9px; cursor:pointer}
.t2-search-item.on{background:var(--surface-3)}
.t2-search-item .t2-search-t{color:var(--text); font-size:13.5px; font-weight:600}
.t2-search-item .t2-search-u{color:var(--muted-2); font-size:11.5px; margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:46%}
.t2-search-item.on .t2-search-u{color:var(--muted)}
.t2-search-empty{padding:18px 14px; text-align:center; color:var(--muted); font-size:13px}
@media (max-width:640px){ .t2-search-dlg{margin-top:6vh} .t2-search-esc{display:none} }