/* Identidade compartilhada: branco, azul e vermelho.
   A composição da página inicial permanece limitada a .metal-home. */
.metal-site {
  --bg-0:#f3f5f7; --bg-1:#fff;
  --surface-0:#fff; --surface-1:#edf2f8; --surface-2:#e6edf5;
  --text:#142536; --text-2:#45586b; --muted:#526274;
  --line:#dbe2eb; --line-strong:#b8c8d9;
  --accent:#075db8; --accent-2:#087df9; --accent-hi:#064c98;
  --accent-dim:#e7f1ff; --danger:#c9152c; --ok:#16764a; --gold:#89621a;
  --metal-blue:#087df9; --metal-red:#ed1b35;
  --glow:0 5px 14px #087df91a; --radius:3px;
  --w-cartao-topo:#fff; --w-cartao-base:#f3f6fa; --w-poco:#e6edf5;
  --w-elevado:#e7f1ff; --w-linha:#dbe2eb; --w-linha-forte:#b8c8d9;
  --w-linha-viva:#087df9; --w-ciano:#075db8; --w-ciano-claro:#064c98;
  --w-ciano-fraco:#e7f1ff; --w-texto:#142536; --w-texto-2:#45586b;
  --w-fraco:#526274; --w-ouro:#89621a; --w-verde:#16764a; --w-vermelho:#c9152c;
  --w-sombra:0 6px 20px #1425360a;
  background:var(--bg-0); color:var(--text);
}
.metal-site [hidden] { display:none !important; }
.metal-site :is(a,button,input,select,textarea):focus-visible { outline:3px solid var(--metal-blue); outline-offset:4px; }
.metal-home .wrap { width:min(1440px,92%); }
.metal-home .main--home { width:100%; padding:0 0 48px; }
.metal-home .main--home > .seccao > .wrap { width:min(1440px,92%); }
/* Demais seções da home herdam a base clara. Os poços de arte mantêm contraste. */
.metal-home .atalhos { background:#e9eff6; border-color:var(--line); }
.metal-home .atalho { border-color:var(--line-strong); }
.metal-home .atalho b { color:var(--text); }
.metal-home .atalho span { color:var(--muted); }
.metal-home .atalho--fundador { background:none; }
.metal-home .atalho--fundador b { color:var(--accent); }
.metal-home .classe { background:#fff; border-radius:3px; }
.metal-home .classe__poco { background:radial-gradient(ellipse at 50% 90%,#bfd6ef,transparent 55%),linear-gradient(#edf3fa,#e0e9f3); }
.metal-home .hp-nivel { background:#fff; border-color:var(--line-strong); border-radius:3px; }
.metal-home .hp-nivel__n { color:var(--text); }
.metal-home .hp-nivel__tipo { color:var(--muted); }
.metal-home .hp-nivel--premium .hp-nivel__tipo { color:#89621a; }
.metal-home .hp-nivel--final { background:#fdf6e8; }
.metal-home .hp-passe-pe p { color:var(--text-2); }
.metal-home .hp-passe-pe p b { color:#89621a; }
.metal-home .ga-classe { background:#fff; border-color:var(--line-strong); border-radius:3px; }
.metal-home .ga-classe__nome { color:var(--text); }
.metal-home .ga-classe__qtd { color:var(--muted); }
.metal-home .ga-classe__ir { color:var(--accent); }
.metal-home .mapa { background:#fff; border-radius:3px; }
.metal-home .arsenal__tira { background:#fff; border-radius:3px; }
.metal-home .arsenal__tira img { background:#e9eff6; }
.metal-home .fecho { background:#e9eff6; padding-bottom:40px; }
.metal-home .main--home > .fecho > .wrap { width:100%; }
.metal-home .pe { background:#fff; border-color:var(--line); }
.metal-home .seccao { padding-top:48px; }


/* Composição fiel à referência: marca sobre aço, placas claras e cortes diagonais. */
.metal-home .main--home { width:100%; max-width:none; margin:0; padding:0 0 48px; }
.metal-site { --metal-display:Impact,Haettenschweiler,'Arial Narrow Bold','Arial Narrow',sans-serif; background:#edf2f6 url('metal-texture.svg'); }
.metal-icon { display:inline-block; width:26px; height:26px; flex:none; vertical-align:middle; }
.metal-site header.topo { position:relative; z-index:40; height:clamp(90px,7.1vw,136px); background:url('metal-texture.svg'),linear-gradient(#fff,#f2f6fa); border-bottom:2px solid #d5e0eb; }
.metal-logo-panel { position:absolute; z-index:2; inset:0 auto auto 0; width:34%; height:calc(100% + 46px); padding:12px 6vw 24px 5vw; display:flex; align-items:center; background:linear-gradient(115deg,#152330c9,#304556d9),url('metal-texture.svg'); clip-path:polygon(0 0,100% 0,81% 100%,0 100%); }
.metal-logo-panel::before { content:""; position:absolute; left:0; top:-20px; height:130%; width:50px; transform:skewX(-34deg); background:linear-gradient(90deg,#087df9 0 26%,#0072e8 26% 62%,#ed1b35 62% 100%); box-shadow:12px 0 0 #e4eaf0,22px 0 0 #1c2e40,30px 0 0 #dce6ee; }
.metal-logo-panel::after { content:""; position:absolute; right:10%; top:0; height:110%; width:7px; background:#eef4f8; transform:skewX(-32deg); box-shadow:12px 0 0 #90a5b7,20px 0 0 #f7fafc; }
.metal-logo-panel img { display:block; width:100%; height:auto; max-width:440px; filter:drop-shadow(0 6px 3px #0008); }
.metal-navigation { height:100%; margin-left:34%; padding-right:2.5vw; }
.metal-navigation__toggle { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.metal-navigation__menu { display:none; }
.metal-navigation nav { height:100%; display:flex; align-items:center; gap:18px; padding-top:8px; }
.metal-navigation__links { display:flex; align-items:center; gap:clamp(6px,1vw,22px); }
.metal-navigation__links > a { position:relative; display:flex; gap:9px; align-items:center; padding:12px 0; font:clamp(13px,.95vw,19px)/1.1 var(--metal-display); text-transform:uppercase; color:#142536; white-space:nowrap; }
.metal-navigation__links > a:hover,.metal-navigation__links > a.is-current { color:#087df9; }
.metal-navigation__links > a.is-current::after { content:""; position:absolute; bottom:1px; left:0; right:0; height:3px; background:#087df9; }
.metal-navigation__links .metal-icon { width:clamp(19px,1.6vw,30px); height:clamp(19px,1.6vw,30px); }
.metal-navigation__account { margin-left:auto; display:flex; align-items:center; gap:10px; }
.metal-navigation__account form { margin:0; }
.metal-header-button { display:flex; align-items:center; justify-content:center; gap:12px; min-height:54px; padding:12px clamp(12px,1.3vw,25px); font:clamp(13px,.95vw,19px)/1.1 var(--metal-display); text-transform:uppercase; white-space:nowrap; color:#142536; border:0; background:linear-gradient(135deg,#b4c6d7,#fff 15% 85%,#9ab1c6); clip-path:polygon(8% 0,100% 0,100% 70%,92% 100%,0 100%,0 30%); box-shadow:inset 0 0 0 1px #a9bdcf; cursor:pointer; }
.metal-header-button--blue { color:#fff; background:linear-gradient(135deg,#2695ff,#0077fc); }
.metal-header-button:hover { color:#075db8; background:#e4effb; }
.metal-header-button--blue:hover { color:#fff; background:#075db8; }
.metal-languages { position:absolute; right:2.5vw; top:3px; display:flex; gap:8px; color:#526274; font:600 10px/1.1 var(--font-body); }
.metal-languages a { color:#526274; }
.metal-languages b { color:#075db8; }
.metal-navigation__player { position:absolute; right:2.5vw; bottom:-34px; display:flex; gap:14px; background:#fff; padding:6px 14px; box-shadow:0 2px 4px #14253615; font-size:.75rem; }

.metal-hero { position:relative; isolation:isolate; display:block; overflow:hidden; background:#142536; border-bottom:5px solid #fff; }
.metal-hero.heroi--fundador { min-height:0; }
.metal-hero__copy { position:relative; z-index:2; width:52%; min-width:0; padding:clamp(64px,3.2vw,76px) 4.8vw 30px 4.2vw; }
.metal-hero__copy::before { content:""; position:absolute; z-index:-1; inset:0; background:url('metal-texture.svg'),linear-gradient(120deg,#fff,#edf2f7); background-blend-mode:multiply; clip-path:polygon(0 0,83% 0,91% 32%,95% 32%,97% 59%,93% 64%,100% 100%,0 100%); }
.metal-hero__copy::after { content:""; position:absolute; right:4%; bottom:0; width:12px; height:30%; transform:skewX(30deg); background:#ed1b35; box-shadow:8px 0 0 #fff,17px 0 0 #879cae; }
.metal-hero::before { content:""; position:absolute; z-index:4; top:26px; left:0; width:16px; height:160px; background:linear-gradient(#087df9 0 30%,#ed1b35 30%); transform:skewX(-32deg); }
.metal-home .sobrancelha { color:#34475b; font-size:clamp(11px,.9vw,17px); font-style:italic; font-weight:600; letter-spacing:.22em; }
.metal-hero__copy > .sobrancelha { margin:0 0 14px; display:block; white-space:nowrap; }
.metal-hero__copy > .sobrancelha::before { display:none; }
.metal-home .metal-hero h1 { margin:0; color:#111f2a; background:none; filter:none; font:400 italic clamp(59px,6.2vw,120px)/.96 var(--metal-display); text-transform:uppercase; letter-spacing:-.01em; text-shadow:1px 0 currentColor; }
.metal-hero h1 > span,.metal-hero h1 > em { display:block; width:64.5%; white-space:nowrap; transform:scaleX(1.55); transform-origin:left center; }
.metal-hero h1 > em { font-style:inherit; font-size:1.22em; color:#ed1734; line-height:1; letter-spacing:-.035em; }
.metal-hero__lead { max-width:34ch; margin:17px 0 0; font-size:clamp(13px,.98vw,19px); font-style:italic; letter-spacing:.18em; line-height:1.45; text-transform:uppercase; color:#34475b; }
.metal-home .cta { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:58px; padding:14px 25px; font:italic 700 20px/1.1 var(--metal-display); text-transform:uppercase; border:0; border-radius:0; color:#fff; background:#087df9; clip-path:polygon(7% 0,100% 0,100% 70%,93% 100%,0 100%,0 30%); box-shadow:inset 0 0 0 2px #fff8; }
.metal-home .cta:hover { color:#fff; filter:brightness(.93); }
.metal-hero .cta-row { display:flex; flex-wrap:nowrap; gap:12px; margin-top:26px; padding:0 10px 5px 0; filter:drop-shadow(0 5px 4px #14253622); }
.metal-hero .cta { flex:1; min-width:0; min-height:clamp(58px,4.3vw,82px); padding:16px 18px; font-size:clamp(17px,1.5vw,29px); white-space:nowrap; }
.metal-home .metal-play { background:linear-gradient(#ff1635,#df0924); }
.metal-home .cta.ghost { color:#075db8; background:linear-gradient(135deg,#087df9 0 2%,#fff 3% 96%,#087df9 98%); box-shadow:inset 0 0 0 2px #087df9; backdrop-filter:none; }
.metal-home .cta.ghost:hover { color:#075db8; background:#e9f3ff; }
.metal-hero .cta .metal-icon:first-child { width:clamp(23px,2vw,38px); height:clamp(23px,2vw,38px); }
.metal-hero .cta .metal-icon:last-child { margin-left:auto; width:18px; height:22px; }
.metal-hero__meta { margin:10px 0 0; color:#526274; font-size:10px; }
.metal-hero__meta span { padding-inline:5px; color:#087df9; }
.metal-gallery { position:absolute; inset:0 0 0 38%; width:62%; min-width:0; max-width:100%; background:#142536; scroll-margin-top:110px; }
.metal-gallery__slides,.metal-slide { position:absolute; inset:0; margin:0; overflow:hidden; background:#142536; }
.metal-slide > img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 43%; }
.metal-slide:not([hidden]) > img { animation:metal-reveal .45s ease-out; }
@keyframes metal-reveal { from { opacity:.35; } to { opacity:1; } }
.metal-slide::after { content:""; position:absolute; inset:60% 0 0; background:linear-gradient(transparent,#081a2ddd); pointer-events:none; }
.metal-slide figcaption { position:absolute; z-index:1; left:22%; right:28px; bottom:72px; display:flex; gap:14px; align-items:center; color:#fff; }
.metal-slide figcaption > span { font:700 .8rem var(--font-display); color:#d0e3fa; border-right:1px solid #ffffff50; padding-right:14px; }
.metal-slide figcaption > div { display:grid; gap:2px; }
.metal-slide figcaption small { color:#dce9f9; font-size:.6rem; text-transform:uppercase; letter-spacing:.16em; }
.metal-slide figcaption b { font:italic 1.3rem/1.1 var(--metal-display); text-transform:uppercase; }
.metal-gallery__controls { position:absolute; z-index:3; left:22%; right:26px; bottom:16px; display:flex; align-items:center; gap:8px; }
.metal-gallery__controls button { color:#fff; background:#10263dcc; border:1px solid #8ba2bc; border-radius:1px; min-height:36px; min-width:36px; cursor:pointer; font:600 .7rem var(--font-body); }
.metal-gallery__controls button:hover { background:#075db8; }
.metal-gallery__dots { display:flex; }
.metal-gallery__dots button { border:0; background:transparent; padding:9px; min-width:27px; }
.metal-gallery__dots button span { display:block; width:7px; height:7px; background:#bbcee3; transform:skewX(-20deg); }
.metal-gallery__dots button[aria-pressed=true] span { width:22px; background:#48a7ff; }
.metal-gallery__controls .metal-gallery__pause { margin-left:auto; padding:7px 11px; }
.metal-gallery__controls button:disabled { color:#d6e4f4; cursor:default; background:#10263d; }
.metal-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

.metal-home .metal-modes { padding:16px 0 28px; border-bottom:1px solid #d4dee9; background:#eef3f7 url('metal-texture.svg'); scroll-margin-top:20px; }
.metal-home .main--home > .metal-modes > .wrap { width:min(1760px,92%); }
.metal-home .metal-modes .seccao__cabeca { display:flex; justify-content:space-between; align-items:center; gap:15px; margin:0 0 14px; }
.metal-home .metal-modes h2 { display:flex; align-items:center; gap:17px; margin:0; font:italic clamp(23px,1.7vw,33px)/1.1 var(--metal-display); color:#111f2a; text-transform:uppercase; letter-spacing:-.015em; }
.metal-home .metal-modes h2::before { content:""; width:35px; height:31px; background:linear-gradient(90deg,#ed1b35 0 44%,transparent 44% 55%,#087df9 55%); transform:skewX(-30deg); }
.metal-link { font:clamp(13px,.9vw,17px)/1 var(--metal-display); text-transform:uppercase; white-space:nowrap; color:#087df9; }
.metal-link span { margin-left:10px; }
.metal-modes__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.metal-mode { --mode-color:#00a0ff; min-width:0; overflow:hidden; background:#122330; clip-path:polygon(3% 0,100% 0,100% 88%,94% 100%,0 100%,0 7%); }
.metal-mode--pvp { --mode-color:#ff183b; }
.metal-mode--infected { --mode-color:#efb400; }
.metal-mode__image { position:relative; display:block; overflow:hidden; background:#142536; }
.metal-mode__image img { display:block; width:100%; height:auto; aspect-ratio:2.85; object-fit:cover; object-position:50% 42%; transition:transform .25s; }
.metal-mode__image:hover img { transform:scale(1.04); }
.metal-mode__image > span { position:absolute; right:10px; bottom:8px; color:#fff; background:#142536b0; padding:0 5px; }
.metal-mode__body { position:relative; display:flex; align-items:center; gap:17px; padding:14px 18px; border-left:10px solid var(--mode-color); min-height:80px; background:linear-gradient(120deg,#162938,#0b1822); }
.metal-mode__body::after { content:""; position:absolute; right:0; bottom:0; width:26px; height:38px; transform:skewX(-35deg); background:var(--mode-color); }
.metal-mode__body > .metal-icon { color:var(--mode-color); width:43px; height:43px; }
.metal-mode h3 { margin:0 0 4px; font:italic clamp(19px,1.4vw,27px)/1 var(--metal-display); color:#fff; text-transform:uppercase; }
.metal-mode p { margin:0; font-size:clamp(10px,.76vw,14px); line-height:1.2; color:#c3d0dc; text-transform:uppercase; }
.metal-campaign { background:#e5ecf4; border-bottom:1px solid #ccd8e5; padding:14px 0; }
.metal-home .metal-founder { width:min(1440px,92%); display:flex; align-items:center; gap:16px; margin:auto; padding:0; }
.metal-founder > img { width:80px; height:58px; object-fit:cover; object-position:75% 50%; }
.metal-founder > div { display:grid; gap:2px; }
.metal-founder small { color:#526274; font-size:.7rem; }
.metal-founder a { color:#075db8; font-size:.95rem; font-weight:700; }
.metal-founder__prices { display:flex; gap:4px 12px; flex-wrap:wrap; color:#45586b; font-size:.68rem; }

@media (min-width:1700px) {
  .metal-hero__copy { padding-top:58px; padding-bottom:36px; }
}
@media (max-width:1250px) {
  .metal-navigation { padding-right:20px; }
  .metal-navigation nav { gap:10px; }
  .metal-navigation__links { gap:13px; }
  .metal-navigation__links > a { gap:5px; font-size:13px; }
  .metal-navigation__links .metal-icon { width:19px; height:19px; }
  .metal-header-button { padding:12px 14px; gap:8px; min-height:46px; font-size:13px; }
  .metal-header-button .metal-icon { width:20px; height:20px; }
  .metal-hero .cta { gap:9px; padding:12px; }
}
@media (max-width:1100px) {
  .metal-site header.topo { height:88px; }
  .metal-logo-panel { width:40%; padding:10px 8vw 16px 5vw; height:calc(100% + 24px); }
  .metal-navigation { margin-left:40%; padding:0; }
  .metal-navigation__menu { position:absolute; top:24px; right:5%; display:grid; place-items:center; width:42px; height:38px; border:1px solid #c0d0df; color:#142536; cursor:pointer; }
  .metal-navigation__menu span,.metal-navigation__menu span::before,.metal-navigation__menu span::after { display:block; width:20px; height:2px; background:currentColor; }
  .metal-navigation__menu span { position:relative; }
  .metal-navigation__menu span::before,.metal-navigation__menu span::after { content:""; position:absolute; left:0; }
  .metal-navigation__menu span::before { top:-6px; }
  .metal-navigation__menu span::after { top:6px; }
  .metal-navigation__toggle:focus-visible + label { outline:3px solid #087df9; outline-offset:3px; }
  .metal-navigation nav { display:none; position:absolute; z-index:5; top:100%; right:0; left:0; height:auto; padding:24px 5%; background:#fff; box-shadow:0 14px 24px #14253622; }
  .metal-navigation__toggle:checked ~ nav { display:flex; flex-direction:column; align-items:stretch; gap:20px; }
  .metal-navigation__links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .metal-navigation__links > a { font-size:16px; }
  .metal-navigation__account { margin:0; }
  .metal-languages { position:static; font-size:12px; }
  .metal-navigation__player { position:static; flex-wrap:wrap; padding:0; box-shadow:none; }
  .metal-home .faixa-idioma .wrap { padding-top:30px; }
  .metal-home .metal-hero h1 { font-size:5.8vw; }
  .metal-hero__copy { padding-top:42px; }
  .metal-hero__copy > .sobrancelha { font-size:9px; letter-spacing:.1em; }
  .metal-hero__lead { font-size:12px; letter-spacing:.13em; }
  .metal-hero .cta { font-size:16px; }
  .metal-mode__body { padding:12px 10px; gap:10px; border-left-width:6px; }
  .metal-mode__body > .metal-icon { width:30px; height:30px; }
  .metal-mode h3 { font-size:20px; }
  .metal-mode p { font-size:10px; }
  .metal-modes__grid { gap:12px; }
}
@media (max-width:800px) {
  .metal-site header.topo { height:78px; }
  .metal-logo-panel { width:61%; padding:10px 12vw 16px 7vw; }
  .metal-navigation { margin-left:61%; }
  .metal-navigation__menu { top:20px; }
  .metal-hero__copy { width:100%; padding:50px 6% 30px; }
  .metal-hero__copy::before { clip-path:polygon(0 0,100% 0,100% 83%,96% 100%,0 100%); }
  .metal-hero__copy::after { right:5%; height:65px; width:8px; }
  .metal-hero::before { display:none; }
  .metal-home .metal-hero h1 { font-size:clamp(48px,10.8vw,82px); }
  .metal-hero h1 > span,.metal-hero h1 > em { width:77%; transform:scaleX(1.3); }
  .metal-hero__copy > .sobrancelha { font-size:10px; letter-spacing:.13em; }
  .metal-hero__lead { max-width:34ch; font-size:13px; }
  .metal-hero .cta-row { max-width:540px; margin-top:23px; }
  .metal-hero .cta { font-size:clamp(16px,3vw,21px); min-height:58px; }
  .metal-hero__meta { font-size:9px; }
  .metal-gallery { position:relative; inset:auto; width:100%; min-height:290px; aspect-ratio:4/3; }
  .metal-slide figcaption { left:6%; bottom:75px; }
  .metal-gallery__controls { left:6%; right:6%; }
  .metal-modes__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .metal-home .metal-modes { padding-top:23px; }
  .metal-home .metal-modes h2 { font-size:23px; gap:12px; }
  .metal-home .metal-modes h2::before { width:25px; height:24px; }
  .metal-link { font-size:12px; }
  .metal-mode__image img { aspect-ratio:2.2; }
  .metal-mode__body { gap:12px; min-height:74px; }
  .metal-home .classes { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:420px) {
  .metal-navigation__links { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metal-hero .cta { gap:8px; padding:12px 9px; font-size:16px; }
  .metal-hero .cta .metal-icon:first-child { width:22px; height:22px; }
  .metal-hero .cta .metal-icon:last-child { display:none; }
  .metal-gallery__controls { gap:3px; }
  .metal-gallery__controls .metal-gallery__pause { font-size:.63rem; padding:6px; }
  .metal-gallery__dots button { min-width:24px; padding:7px; }
  .metal-modes__grid { grid-template-columns:1fr; }
  .metal-mode__image img { aspect-ratio:2.85; }
  .metal-mode__body { padding:14px 18px; }
  .metal-mode__body > .metal-icon { width:40px; height:40px; }
  .metal-mode h3 { font-size:25px; }
  .metal-mode p { font-size:12px; }
  .metal-home .classes { gap:10px; }
  .metal-home .classe figcaption { padding:12px; }
  .metal-home .classe figcaption b { font-size:.88rem; }
  .metal-home .requisitos,.metal-home .passos { grid-template-columns:1fr; }
}
@media (max-width:360px) {
  .metal-hero .cta-row { flex-direction:column; }
  .metal-hero .cta { flex:auto; font-size:18px; }
}
@media (prefers-reduced-motion:reduce) {
  .metal-home *, .metal-home *::before, .metal-home *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* Faixas de conteúdo e transições da identidade azul/vermelha. */
.metal-home .metal-section { position:relative; margin:0; padding:64px 0 48px; background:url('metal-texture.svg'),linear-gradient(125deg,#f6f9fd,#e6eff8); }
.metal-section::before { content:""; position:absolute; top:0; left:0; width:100%; height:22px; background:var(--section-edge,#087df9); clip-path:polygon(0 0,100% 0,100% 18%,73% 18%,72% 62%,18% 62%,17% 100%,0 100%); }
.metal-section::after { content:""; position:absolute; right:4%; top:30px; width:135px; height:7px; transform:skewX(-32deg); background:linear-gradient(90deg,transparent 0 10%,var(--section-edge,#087df9) 10% 16%,transparent 16% 25%,var(--section-edge,#087df9) 25% 100%); opacity:.7; }
.metal-section > .wrap { position:relative; z-index:1; }
.metal-home .metal-section .seccao__cabeca h2 { font:italic 32px/1.1 var(--metal-display); letter-spacing:.01em; text-transform:uppercase; }
.metal-home .metal-section--characters { --section-edge:#087df9; }
.metal-home .metal-section--pass { --section-edge:#ed1b35; background:url('metal-texture.svg'),linear-gradient(120deg,#091d37,#103b68 70%,#075db8); color:#fff; }
.metal-home .metal-section--gacha { --section-edge:#fff; background:url('metal-texture.svg'),linear-gradient(115deg,#8d1028,#bd1735 65%,#e02d48); color:#fff; }
.metal-home .metal-section--maps { --section-edge:#fff; background:url('metal-texture.svg'),linear-gradient(120deg,#07376e,#075db8 65%,#087df9); color:#fff; }
.metal-home :is(.metal-section--pass,.metal-section--gacha,.metal-section--maps) .seccao__cabeca :is(h2,p) { color:#fff; }
.metal-home :is(.metal-section--pass,.metal-section--gacha,.metal-section--maps) .sobrancelha::before { background:#fff; }
.metal-home .metal-section--arsenal { --section-edge:#ed1b35; }
.metal-home .metal-section--steps { --section-edge:#fff; background:url('metal-texture.svg'),linear-gradient(115deg,#8d1028,#b51935); color:#fff; }
.metal-home .metal-section--steps :is(.seccao__cabeca h2,.seccao__cabeca p,.passos h3,.passos p,.passos__n) { color:#fff; }
.metal-home .metal-section--steps .passos li { border-color:#ffffff55; background:#ffffff09; }
.metal-home .metal-section--steps .passos a { color:#fff; text-decoration:underline; }
.metal-home .metal-section--requirements { --section-edge:#087df9; }
.metal-home .fecho { margin-top:0; padding:64px 20px 40px; background:url('metal-texture.svg'),linear-gradient(115deg,#0b2b4d,#075db8); border-top:5px solid #ed1734; color:#fff; }
.metal-home .fecho h2 { color:#fff; }
.metal-home .fecho p { color:#d5e4f8; }
.metal-home .fecho .cta:not(.ghost) { background:#ed1734; }

/* A arte original é pequena: um palco contido evita ampliá-la em excesso. */
.metal-home .classe__poco { height:310px; aspect-ratio:auto; overflow:hidden; display:grid; place-items:end center; background:radial-gradient(ellipse at 50% 90%,#bad2ec,transparent 58%),linear-gradient(#eff5fc,#dce8f5); }
.metal-home .classe__tela { width:220px; max-width:100%; height:300px; }
.metal-home .classe figcaption .classe__visual { font-size:.68rem; }

/* Prévia da recompensa da temporada ao lado da trilha. */
.hp-passe-vitrine { display:grid; grid-template-columns:280px minmax(0,1fr); gap:28px; align-items:start; }
.hp-passe-vitrine--no-skin { grid-template-columns:1fr; }
.hp-passe-vitrine__rewards { min-width:0; }
.hp-skin { position:relative; padding:18px 16px 14px; text-align:center; border:1px solid #78a6d780; background:linear-gradient(150deg,#173c65,#091d36); box-shadow:0 12px 25px #03112530; }
.hp-skin::before { content:""; position:absolute; inset:0 auto auto 0; width:70px; height:5px; background:#ff2447; }
.hp-skin__heading { display:grid; gap:5px; }
.hp-skin__heading > span { font-size:.65rem; text-transform:uppercase; letter-spacing:.15em; color:#bfd7f3; }
.hp-skin__heading b { font:italic 24px/1.1 var(--metal-display); color:#fff; }
.hp-skin__stage { height:280px; position:relative; display:grid; place-items:center; background:radial-gradient(ellipse at 50% 85%,#2872b260,transparent 70%); }
.hp-skin__stage canvas { display:block; width:220px; max-width:100%; height:280px; opacity:0; }
.hp-skin--ready canvas { opacity:1; }
.hp-skin__fallback { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.hp-skin--ready .hp-skin__fallback { display:none; }
.hp-skin__characters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
.hp-skin__characters button { padding:7px 2px; min-height:36px; color:#d5e6f9; background:#0b213c; border:1px solid #42648b; font:600 11px var(--font-body); cursor:pointer; }
.hp-skin__characters button[aria-pressed=true] { color:#fff; background:#087df9; border-color:#52a6ff; }
.hp-skin__level { display:block; margin-top:12px; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:#fff; }
.hp-skin__image { display:block; max-width:100%; max-height:280px; margin:20px auto; object-fit:contain; }
.hp-skin__image--icon { width:64px; height:64px; }
.metal-home .hp-passe-vitrine .hp-trilha { grid-template-columns:repeat(5,minmax(0,1fr)); }
.metal-home .metal-section--pass .hp-nivel { background:#f8fbff; color:#142536; }
.metal-home .metal-section--pass .hp-nivel__n { color:#142536; }
.metal-home .metal-section--pass .hp-nivel__tipo { color:#526274; }
.metal-home .metal-section--pass .hp-nivel--premium .hp-nivel__tipo { color:#89621a; }
.metal-home .metal-section--pass .hp-nivel--final { border-color:#ffd166; background:#fff5dc; }
.metal-home .metal-section--pass .hp-passe-pe p { color:#e0ebfa; }
.metal-home .metal-section--pass .hp-passe-pe p b { color:#ffd166; }
.metal-home .metal-section--pass .hp-passe-pe .cta { background:#ed1734; }

/* Mapas em destaque, com navegação manual e gesto de arrastar no celular. */
.metal-map-carousel { min-width:0; }
.metal-map-controls { display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.metal-map-controls > span { margin-right:auto; font:600 13px var(--font-body); color:#d3e5fa; font-variant-numeric:tabular-nums; }
.metal-map-controls button { min-width:44px; min-height:40px; border:1px solid #a6c9ef; color:#fff; background:#0a2d53; font-size:21px; cursor:pointer; }
.metal-map-controls button:hover { background:#ed1734; }
.metal-map-controls button:disabled { opacity:.35; cursor:default; background:#0a2d53; }
.metal-home .metal-map-track { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 40px)/3); grid-template-columns:none; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:#99c7ff #07376e; padding:0 0 15px; }
.metal-map-track .mapa { min-width:0; margin:0; scroll-snap-align:start; background:#fff; color:#142536; border:0; border-bottom:5px solid #ed1734; border-radius:0; }
.metal-map-track .mapa img { width:100%; height:230px; aspect-ratio:auto; object-fit:contain; padding:20px; background:radial-gradient(ellipse at center,#244964,#0b1e30); image-rendering:pixelated; }
.metal-map-track .mapa figcaption { padding:18px 20px 20px; border:0; }
.metal-map-category { display:block; color:#075db8; font-weight:700; font-size:10px; letter-spacing:.16em; margin-bottom:8px; }
.metal-map-track .mapa figcaption b { font:italic 27px/1.1 var(--metal-display); color:#142536; }
.metal-map-track .mapa figcaption span { color:#526274; font-size:12px; line-height:1.5; margin-top:8px; }
.metal-map-wiki { display:inline-block; color:#fff; margin-top:14px; text-transform:uppercase; font-size:12px; font-weight:700; letter-spacing:.04em; }
.metal-map-wiki:hover { color:#d3e5fa; }

@media (max-width:1000px) {
  .hp-passe-vitrine { grid-template-columns:240px minmax(0,1fr); gap:20px; }
  .metal-home .hp-passe-vitrine .hp-trilha { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .metal-home .metal-map-track { grid-auto-columns:calc((100% - 20px)/2); }
}
@media (max-width:700px) {
  .metal-home .metal-section { padding:58px 0 38px; }
  .metal-home .metal-section .seccao__cabeca h2 { font-size:29px; }
  .hp-passe-vitrine { grid-template-columns:1fr; gap:22px; }
  .hp-skin { width:min(320px,100%); justify-self:center; box-sizing:border-box; }
  .metal-home .hp-passe-vitrine .hp-trilha { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .metal-home .metal-map-track { grid-auto-columns:100%; }
  .metal-map-track .mapa img { height:220px; }
}
@media (max-width:420px) {
  .metal-home .classe__poco { height:250px; }
  .metal-home .classe__tela { width:165px; height:225px; }
  .metal-home .hp-passe-vitrine .hp-trilha { grid-template-columns:repeat(3,minmax(0,1fr)); }
}