MediaWiki:Common.css: mudanças entre as edições

De Grimopedia
Ir para navegação Ir para pesquisar
Sem resumo de edição
Sem resumo de edição
 
(33 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
/* ===== CTAs com <gallery> — bulletproof para várias versões do MW ===== */
/* ===== CTAs com <gallery> — bulletproof para várias versões do MW ===== */
/* Fonte dos títulos (Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');


/* CONTAINER GERAL – mantém a página centralizada e com largura máxima */
/* ============================================================
.broaurora-root {
  PALETA AURORA (global)
   max-width: 1200px;     /* largura “oficial” da página */
  ============================================================ */
   margin: 0 auto;         /* centraliza */
:root{
   padding: 0 16px;       /* respiro lateral em telas menores */
   --aur-ink: #0f2b3a;
   box-sizing: border-box; /* padding não estoura a largura */
  --aur-blue: #1f6aa5;
   --aur-green: #24a137;
   --aur-yellow: #FFC72E;
 
   --aur-border: rgba(15,43,58,.10);
  --aur-border-strong: rgba(15,43,58,.16);
  --aur-line: rgba(15,43,58,.10);
  --aur-soft: rgba(15,43,58,.04);
  --aur-shadow: 0 10px 28px rgba(15,43,58,.10);
}
}


/* =================== CTAs (gallery) =================== */
/* ============================================================
/* 1) Layout: 3 CTAs lado a lado em telas grandes */
  CONTAINER GERAL
.mw-parser-output .bro-cta-gallery {
  ============================================================ */
   display: flex !important;
.broaurora-root{
   justify-content: center;
  max-width:1360px;
   align-items: stretch;
  margin:0 auto;
   gap: 24px;
  padding:0 16px;
   flex-wrap: nowrap;                     /* mantém em uma única linha */
  box-sizing:border-box;
   margin: 14px auto 0 !important;
}
   padding: 0 !important;
 
   border: 0 !important;
/* ============================================================
   background: transparent !important;
  CTAs (gallery)
  ============================================================ */
.mw-parser-output .bro-cta-gallery{
   display:flex !important;
   justify-content:center;
   align-items:stretch;
   gap:18px;
   flex-wrap:nowrap;
   margin:0 auto 0 !important;
   padding:0 !important;
   border:0 !important;
   background:transparent !important;
}
}


/* 2) Neutralizar estilos do gallery e transformar cada item em "card" flex */
.mw-parser-output .bro-cta-gallery .gallerybox,
.mw-parser-output .bro-cta-gallery .gallerybox,
.mw-parser-output .bro-cta-gallery li.gallerybox {
.mw-parser-output .bro-cta-gallery li.gallerybox{
   float: none !important;
   float:none !important;
   margin: 0 !important;
   margin:0 !important;
   padding: 0 !important;
   padding:0 !important;
   border: 0 !important;
   border:0 !important;
   background: transparent !important;
   background:transparent !important;
   box-shadow: none !important;
   box-shadow:none !important;
   display: block !important;
   display:block !important;
   vertical-align: middle !important;
   vertical-align:middle !important;
  flex:0 1 300px;
  max-width:340px;
  box-sizing:border-box;
}


  flex: 0 1 320px;        /* tamanho “desejado” de cada CTA */
  max-width: 360px;
  box-sizing: border-box;
}
.mw-parser-output .bro-cta-gallery .thumb,
.mw-parser-output .bro-cta-gallery .thumb,
.mw-parser-output .bro-cta-gallery .thumbinner {
.mw-parser-output .bro-cta-gallery .thumbinner{
   margin: 0 !important;
   margin:0 !important;
   padding: 0 !important;
   padding:0 !important;
   border: 0 !important;
   border:0 !important;
   background: transparent !important;
   background:transparent !important;
   box-shadow: none !important;
   box-shadow:none !important;
}
}


/* 3) Esconder legendas/magnify do gallery */
.mw-parser-output .bro-cta-gallery .gallerytext,
.mw-parser-output .bro-cta-gallery .gallerytext,
.mw-parser-output .bro-cta-gallery .gallerycaption,
.mw-parser-output .bro-cta-gallery .gallerycaption,
.mw-parser-output .bro-cta-gallery .magnify {
.mw-parser-output .bro-cta-gallery .magnify{
   display: none !important;
   display:none !important;
}
}


/* 4) Imagens: ocupam 100% da largura do “card” flex */
.mw-parser-output .bro-cta-gallery img{
.mw-parser-output .bro-cta-gallery img {
   display:block;
   display: block;
   width:100%;
   width: 100%;     /* agora segue a largura do flex */
   height:auto;
   height: auto;
   transition:transform .22s ease;
   transition: transform .22s ease;
   transform-origin:center center;
   transform-origin: center center;
}
}
.mw-parser-output .bro-cta-gallery .gallerybox:hover img {
 
   transform: scale(1.06);
.mw-parser-output .bro-cta-gallery .gallerybox:hover img{
   transform:scale(1.04);
}
}


/* 5) Responsivo CTAs:
  - Até 900px de largura: deixa quebrar pra baixo bonitinho.
*/
@media (max-width: 900px){
@media (max-width: 900px){
   .mw-parser-output .bro-cta-gallery{
   .mw-parser-output .bro-cta-gallery{
     flex-wrap: wrap;                 /* agora pode quebrar */
     flex-wrap:wrap;
    gap:14px;
   }
   }
   .mw-parser-output .bro-cta-gallery .gallerybox{
 
     flex: 1 1 100%;
  .mw-parser-output .bro-cta-gallery .gallerybox,
     max-width: 320px;
   .mw-parser-output .bro-cta-gallery li.gallerybox{
     flex:1 1 100%;
     max-width:300px;
   }
   }
}
}


/* ===================================================================== */
/* ============================================================
/* ==================  CARDS / BLOCOS  =============================== */
  BANNER INFORMAÇÕES
/* ===================================================================== */
  ============================================================ */
 
.mw-parser-output .bro-info-banner{
/* Container genérico de cards com classe (se você usar .bro-cards) */
   text-align:center;
.mw-parser-output .bro-cards{
   margin:8px 0 4px;
   display:flex;
   padding:0 !important;
   gap:20px;
   border:0 !important;
   flex-wrap:nowrap;                     /* não quebra linha */
   background:transparent !important;
   align-items:stretch;
   box-shadow:none !important;
   overflow-x:auto;                     /* se não couber, scroll horizontal */
   -webkit-overflow-scrolling:touch;
}
}


/* Card genérico com classe */
.mw-parser-output .bro-info-banner > *{
.mw-parser-output .bro-card{
   margin:0 auto !important;
   flex:0 0 260px;                       /* largura “travada” */
   padding:0 !important;
   min-width:260px;
   border:0 !important;
   border:1px solid rgba(36,161,55,.30);
   background:transparent !important;
  border-radius:14px;
   box-shadow:none !important;
  padding:18px;
   background:#fff;
   box-sizing:border-box;
}
}


/* Auto-detecção do SEU markup atual (inline style) — GUIAS PRINCIPAIS / DIVERSOS */
.mw-parser-output .bro-info-banner .thumb,
.mw-parser-output div[style*="display:flex"][style*="flex-wrap:wrap"][style*="gap:20px"]{
.mw-parser-output .bro-info-banner .thumbinner,
   display:flex;
.mw-parser-output .bro-info-banner .image,
   gap:20px;
.mw-parser-output .bro-info-banner .floatnone,
   flex-wrap:nowrap;                     /* força tudo na mesma linha */
.mw-parser-output .bro-info-banner .center,
   align-items:stretch;
.mw-parser-output .bro-info-banner .center > *,
   overflow-x:auto;                     /* aparece scroll se faltar espaço */
.mw-parser-output .bro-info-banner a,
   -webkit-overflow-scrolling:touch;
.mw-parser-output .bro-info-banner span{
  margin:0 auto !important;
   padding:0 !important;
   border:0 !important;
   background:transparent !important;
   box-shadow:none !important;
   width:auto !important;
   max-width:none !important;
}
}


.mw-parser-output
.mw-parser-output .bro-info-banner .magnify,
div[style*="display:flex"][style*="flex-wrap:wrap"][style*="gap:20px"]
.mw-parser-output .bro-info-banner .gallerytext,
> div[style*="border-radius:14px"][style*="padding:18px"]{
.mw-parser-output .bro-info-banner .gallerycaption{
   flex:0 0 260px;                      /* 4 cards lado a lado */
   display:none !important;
  min-width:260px;
  box-sizing:border-box;
}
}


/* ===================================================================== */
.mw-parser-output .bro-info-banner img{
/* ==================  PÍLULAS / LINKS BONITINHOS  =================== */
   display:block;
/* ===================================================================== */
   margin:0 auto;
 
   width:760px;
/* Pílulas dentro de .bro-card (se usar essa classe no futuro) */
   max-width:100%;
.bro-card .broaurora-link{
   height:auto;
   display:flex; align-items:center; gap:10px;
   background:transparent !important;
   padding:12px 14px;
   border:0 !important;
   border:1px solid rgba(36,161,55,.30) !important; /* verde */
   box-shadow:none !important;
   border-radius:12px;
   transition:transform .22s ease;
   background:#fff;
   transform-origin:center center;
   color:#0f2b3a !important;
   text-decoration:none !important;
   box-shadow:0 1px 0 rgba(15,43,58,.03);
   transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
   line-height:1.25;
}
}
.bro-card .broaurora-link:hover{
  transform:scale(1.015);
  border-color:rgba(36,161,55,.50) !important;      /* verde hover */
  background:#f5fbff;
  color:#1f6aa5 !important;
  box-shadow:0 6px 18px rgba(41,109,162,.14);
}
.bro-card .broaurora-link .bro-ico{
  width:22px; height:22px; object-fit:contain;
  background:#f6fbff; border-radius:6px; padding:2px;
  box-shadow:inset 0 0 0 1px rgba(31,106,165,.12);
}
.bro-card ul{list-style:none; margin:0; padding:0;}
.bro-card li{margin:10px 0;}


/* Pílulas em QUALQUER lugar da página */
.mw-parser-output .bro-info-banner:hover img{
.mw-parser-output .broaurora-link{
   transform:scale(1.04);
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border:1px solid rgba(36,161,55,.30) !important; /* verde */
  border-radius:12px;
  background:#fff;
  color:#0f2b3a !important;
  text-decoration:none !important;
  box-shadow:0 1px 0 rgba(15,43,58,.03);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
  line-height:1.25;
}
.mw-parser-output .broaurora-link:hover{
   transform:scale(1.015);
  border-color:rgba(36,161,55,.50) !important;      /* verde hover */
  background:#f5fbff;
  color:#1f6aa5 !important;
  box-shadow:0 6px 18px rgba(41,109,162,.14);
}
 
/* listas “limpas” */
.mw-parser-output ul.bro-list{ list-style:none; margin:0; padding:0; }
.mw-parser-output ul.bro-list > li{ margin:10px 0; }
 
/* Cores dos textos nas pílulas */
.mw-parser-output .broaurora-link,
.mw-parser-output .broaurora-link a{
  color:#1a2a3a !important;            /* cor normal */
  text-decoration:none !important;
}
.mw-parser-output .broaurora-link:hover,
.mw-parser-output .broaurora-link:hover a{
  color:#1f6aa5 !important;            /* cor no hover */
}
 
/* ===== Navi (/navi clicável) ===== */
.mw-parser-output .navi-copy {
  cursor: pointer;
  display: inline;
  white-space: nowrap;
  padding: 0 2px;
 
  color: #008000;          /* verdinho */
  font-weight: normal;      /* tira o "negrito" */
  text-decoration: none;
}
 
.mw-parser-output .navi-copy:hover {
  color: #00a000;          /* um verde um pouco mais claro no hover */
  text-decoration: underline;
}
}


/* ============================================================
/* ============================================================
   ItemDB (VISUAL CLEAN): ícone + texto (sem caixinha)
   HOME / BLOCOS
  (ícone vem do Common.js como um <span> dentro do link)
   ============================================================ */
   ============================================================ */
 
.mw-parser-output .bro-home-section{
/* some com o número [1] do link externo */
  background:#fff;
.mw-parser-output a.external::after,
  border-radius:18px;
.mw-parser-output a.external.text::after{
  margin:10px 0 20px;
   display: none !important;
  border:1px solid #e9ecef;
   content: "" !important;
   box-shadow:0 8px 22px rgba(15,43,58,.10);
   overflow:hidden;
}
}


/* link clean */
.mw-parser-output .bro-home-head{
.mw-parser-output a[href*="/information/itemdb/"]{
   background:linear-gradient(90deg,#2F53C8,#4972E9,#2F53C8);
   display: inline-flex !important;
   padding:12px 20px;
  align-items: center !important;
   text-align:center;
  gap: 8px !important;
 
   padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
 
   text-decoration: none !important;
  line-height: 24px !important;
  vertical-align: middle !important;
 
  color: #0f2b3a !important;
  font-weight: 600;
  transform: none !important;
  transition: color .12s ease;
}
}


/* hover clean: só muda cor */
.mw-parser-output .bro-home-title{
.mw-parser-output a[href*="/information/itemdb/"]:hover{
  font-family:'Luckiest Guy', Impact, 'Arial Black', system-ui, sans-serif;
   background: transparent !important;
   color:#FFD23C;
   border: 0 !important;
   margin:0;
   transform: none !important;
   font-size:clamp(1.15rem,1.8vw,1.55rem);
   color: #1f6aa5 !important;
  font-weight:900;
  letter-spacing:.4px;
  -webkit-text-stroke:0.6px rgba(0,0,0,.9);
   text-shadow:
    .5px 0 0 rgba(0,0,0,.7), -.5px 0 0 rgba(0,0,0,.7),
    0 .5px 0 rgba(0,0,0,.7),  0 -.5px 0 rgba(0,0,0,.7);
}
}


/* ícone do JS: sem fundo */
.mw-parser-output .bro-home-cards{
.mw-parser-output a[href*="/information/itemdb/"] > span:first-child{
   display:flex;
   width: 24px !important;
   flex-wrap:wrap;
  height: 24px !important;
   gap:14px;
   flex: 0 0 24px !important;
   padding:16px;
 
   align-items:stretch;
  border-radius: 6px !important;
   box-sizing:border-box;
   background-color: transparent !important;
}
.mw-parser-output .aur-item{
   display:inline-flex;
   align-items:center;
  gap:8px;
   line-height:24px;
  vertical-align:middle;
}
}


.mw-parser-output .aur-item-icon{
.mw-parser-output .bro-home-card{
   width:24px;
   flex:1 1 280px;
   height:24px;
  min-width:260px;
   border-radius:6px;
   border:1px solid rgba(36,161,55,.28);
   background:transparent;
   border-radius:14px;
  padding:14px;
   background:#fff;
  box-sizing:border-box;
}
}


.mw-parser-output .aur-item-link{
.mw-parser-output .bro-home-card.bro-home-card-wide{
   text-decoration:none !important;
   flex:1.18 1 330px;
  color:#0f2b3a !important;
   min-width:300px;
   font-weight:600;
}
}


.mw-parser-output .aur-item-link:hover{
.mw-parser-output .bro-home-card.plain{
   color:#1f6aa5 !important;
  border:none;
   text-decoration:underline !important;
   padding:0;
   background:transparent;
}
}


/* garante que não aparece ícone de link externo */
.mw-parser-output .bro-home-card-title{
.mw-parser-output a.external::after,
  color:#1a2a3a;
.mw-parser-output a.external.text::after{
  font-size:1.05em;
   display:none !important;
  margin:0 0 8px;
   content:"" !important;
  border-bottom:1px solid rgba(36,161,55,.40);
   padding-bottom:6px;
   text-align:center;
}
}


/* =========================
/* ===== grids internos ===== */
  ItemDB link (clean)
.mw-parser-output .bro-home-grid-2{
  ========================= */
   display:grid;
.mw-parser-output .aur-item{
   grid-template-columns:1.22fr 1fr;
   display:inline-flex;
   align-items:center;
   gap:8px;
   gap:8px;
  line-height:24px;
  vertical-align:middle;
}
}


/* Ícone injetado pelo JS (primeiro span) */
.mw-parser-output .bro-home-grid-3{
.mw-parser-output .aur-item > a > span:first-child,
   display:grid;
.mw-parser-output a[href*="/information/itemdb/"] > span:first-child{
   grid-template-columns:1fr 1.28fr .88fr;
   width:24px !important;
   gap:8px;
  height:24px !important;
   flex:0 0 24px !important;
  display:inline-block !important;
 
  border-radius:6px !important;
   background-color:transparent !important;
}
}


/* Link do item */
.mw-parser-output .bro-home-subcard{
.mw-parser-output .aur-item a,
  border:1px solid rgba(36,161,55,.28);
.mw-parser-output a[href*="/information/itemdb/"]{
  border-radius:12px;
   text-decoration:none !important;
   padding:10px;
   color:#0f2b3a !important;
   background:#fff;
   font-weight:600;
  box-sizing:border-box;
   min-width:0;
}
}


.mw-parser-output .aur-item a:hover,
@media (max-width: 1100px){
.mw-parser-output a[href*="/information/itemdb/"]:hover{
  .mw-parser-output .bro-home-grid-3{
  color:#1f6aa5 !important;
    grid-template-columns:1fr;
   text-decoration:underline !important;
   }
}
}


/* some com qualquer marcador de "link externo" */
/* ajuste fino para grids internos */
.mw-parser-output a.external::after,
.mw-parser-output .bro-home-card .bro-home-grid-2 .broaurora-link,
.mw-parser-output a.external.text::after{
.mw-parser-output .bro-home-card .bro-home-grid-3 .broaurora-link{
   display:none !important;
  padding:8px 9px;
   content:"" !important;
   gap:8px;
   line-height:1.12;
}
}


/* ===== Journey Card (Caixa de Jornada / Recompensas) ===== */
/* títulos internos opcionais */
.mw-parser-output .journey-card{
.mw-parser-output .bro-home-subtitle{
   max-width: 360px;
   margin:0 0 10px;
   border-radius: 18px;
  padding-bottom:6px;
   padding: 16px 16px 14px;
   border-bottom:1px solid rgba(36,161,55,.25);
   background: #fff;
   text-align:center;
   border: 1px solid rgba(15,43,58,.10);
   color:#1a2a3a;
   box-shadow: 0 10px 30px rgba(15,43,58,.10);
   font-size:1em;
   font-weight:700;
}
}


.mw-parser-output .journey-head{
@media (max-width: 900px){
  display:flex;
  .mw-parser-output .bro-home-cards{
  align-items:center;
    padding:14px;
  gap: 12px;
    gap:12px;
   margin-bottom: 8px;
   }
}


.mw-parser-output .journey-badge{
  .mw-parser-output .bro-home-grid-2{
  width: 44px;
    grid-template-columns:1fr;
  height: 44px;
   }
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
   background: rgba(0,0,0,.05);
  font-size: 20px;
}


.mw-parser-output .journey-title{ line-height: 1.1; }
  .mw-parser-output .bro-home-grid-3{
.mw-parser-output .journey-name{ font-weight: 800; font-size: 18px; }
    grid-template-columns:1fr;
.mw-parser-output .journey-price{ font-weight: 800; opacity:.85; }
   }
 
.mw-parser-output .journey-sub{
   margin: 6px 0 12px;
  font-weight: 600;
  opacity: .75;
}
}


.mw-parser-output .journey-list{
@media (max-width: 640px){
  list-style: none;
  .mw-parser-output .bro-home-cards{
  margin: 0;
    padding:12px;
  padding: 0;
    gap:10px;
  display:flex;
   }
   flex-direction: column;
  gap: 8px;
}


.mw-parser-output .journey-list li{
  .mw-parser-output .bro-home-card{
  display:flex;
    flex:1 1 100%;
  align-items:center;
    min-width:0;
  gap: 10px;
    padding:12px;
}
  }


.mw-parser-output .journey-qty{
  .mw-parser-output .bro-home-head{
  min-width: 42px;
    padding:10px 14px;
  font-weight: 800;
   }
   opacity: .8;
}
}
.mw-parser-output .journey-divider{
  height: 1px;
  background: rgba(15,43,58,.10);
  margin: 6px 0;
}
/* Bronze / Silver / Gold (se quiser) */
.mw-parser-output .tier-bronze{ background: linear-gradient(180deg, #f6efe8 0%, #ffffff 55%); }


/* ============================================================
/* ============================================================
   BRO AURORA — Tabelas/Boxes estilo "card" (clean)
   LINKS BONITINHOS
  Uso:
  {| class="wikitable bro-table" ... |}
  {| class="wikitable bro-journey" ... |}
   ============================================================ */
   ============================================================ */
 
.mw-parser-output .broaurora-link{
.mw-parser-output table.bro-table,
   display:flex;
.mw-parser-output table.bro-journey{
   align-items:center;
   border-collapse: separate;
   gap:8px;
   border-spacing: 0;
   padding:8px 10px;
   width: 100%;
   border:1px solid rgba(36,161,55,.30) !important;
   max-width: 760px;
   border-radius:11px;
  margin: 14px 0 18px 0;
  background:#fff;
 
   color:var(--aur-ink) !important;
  background: #fff;
  text-decoration:none !important;
   border: 1px solid rgba(31,106,165,.18);
   box-shadow:0 1px 0 rgba(15,43,58,.03);
   border-radius: 16px;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
   overflow: hidden;
  line-height:1.12;
 
  min-width:0;
   box-shadow: 0 10px 28px rgba(15,43,58,.10);
}
}


/* título da tabela (faixa superior) */
.mw-parser-output .broaurora-link:hover{
.mw-parser-output table.bro-table > caption,
   transform:scale(1.01);
.mw-parser-output table.bro-journey > caption{
   border-color:rgba(36,161,55,.50) !important;
   caption-side: top;
  background:#f5fbff;
   padding: 12px 14px;
  color:var(--aur-blue) !important;
  font-weight: 900;
   box-shadow:0 6px 16px rgba(41,109,162,.12);
  letter-spacing: .4px;
  color: #0f2b3a;
 
  background: linear-gradient(90deg,
    rgba(36,161,55,.14),
    rgba(31,106,165,.12),
    rgba(131,98,255,.12)
  );
   border-bottom: 1px solid rgba(31,106,165,.18);
}
}


/* cabeçalho */
.mw-parser-output .broaurora-link img,
.mw-parser-output table.bro-table th,
.mw-parser-output .broaurora-link .bro-ico{
.mw-parser-output table.bro-journey th{
   flex:0 0 auto;
   padding: 10px 12px;
  text-align: left;
  color: #0f2b3a;
  font-weight: 900;
 
  background: rgba(31,106,165,.08);
  border-bottom: 1px solid rgba(31,106,165,.14);
}
}


/* células */
/* texto do link pode quebrar de forma mais bonita */
.mw-parser-output table.bro-table td,
.mw-parser-output .broaurora-link a,
.mw-parser-output table.bro-journey td{
.mw-parser-output .broaurora-link span,
   padding: 10px 12px;
.mw-parser-output .broaurora-link{
  vertical-align: top;
   overflow-wrap:break-word;
   border-bottom: 1px solid rgba(15,43,58,.08);
   word-break:normal;
}
}


/* zebra */
.mw-parser-output ul.bro-list{
.mw-parser-output table.bro-table tr:nth-child(even) td,
  list-style:none;
.mw-parser-output table.bro-journey tr:nth-child(even) td{
  margin:0;
   background: rgba(15,43,58,.02);
   padding:0;
}
}


/* última linha sem borda */
.mw-parser-output ul.bro-list > li{
.mw-parser-output table.bro-table tr:last-child td,
   margin:6px 0;
.mw-parser-output table.bro-journey tr:last-child td{
   border-bottom: 0;
}
}


/* coluna “posição” (ranking) */
/* ============================================================
.mw-parser-output table.bro-table .bro-col-pos{
  NAVI (/navi clicável)
   width: 90px;
  ============================================================ */
   white-space: nowrap;
.mw-parser-output .navi-copy{
   font-weight: 900;
   cursor:pointer;
   color: #1f6aa5;
  display:inline;
   white-space:nowrap;
  padding:0 2px;
  color:#008000;
   font-weight:normal;
   text-decoration:none;
}
}


/* listas internas */
.mw-parser-output .navi-copy:hover{
.mw-parser-output table.bro-table ul,
   color:#00a000;
.mw-parser-output table.bro-journey ul{
   text-decoration:underline;
   margin: 0;
   padding-left: 18px;
}
.mw-parser-output table.bro-table li,
.mw-parser-output table.bro-journey li{
  margin: 6px 0;
}
}


/* ============================================================
/* ============================================================
   ItemDB — manter clean e tirar “ícone de link externo” [1]
   ItemDB — clean (sem [1] de link externo)
   ============================================================ */
   ============================================================ */
.mw-parser-output a.external::after,
.mw-parser-output a.external::after,
.mw-parser-output a.external.text::after{
.mw-parser-output a.external.text::after{
   display: none !important;
   display:none !important;
   content: "" !important;
   content:"" !important;
}
}


/* teu template {{Item}} usa classes .aur-item / .aur-item-link */
.mw-parser-output a[href*="/information/itemdb/"]{
.mw-parser-output .aur-item{
   display:inline-flex !important;
   display:inline-flex;
   align-items:center !important;
   align-items:center;
   gap:8px !important;
   gap:8px;
   padding:0 !important;
   line-height:24px;
   border:0 !important;
   vertical-align:middle;
  background:transparent !important;
}
  border-radius:0 !important;
 
.mw-parser-output .aur-item-link{
   text-decoration:none !important;
   text-decoration:none !important;
   color:#0f2b3a !important;
  line-height:24px !important;
  vertical-align:middle !important;
   color:var(--aur-ink) !important;
   font-weight:600;
   font-weight:600;
  transform:none !important;
  transition:color .12s ease;
}
}
.mw-parser-output .aur-item-link:hover{
 
   color:#1f6aa5 !important;
.mw-parser-output a[href*="/information/itemdb/"]:hover{
   color:var(--aur-blue) !important;
   text-decoration:underline !important;
   text-decoration:underline !important;
}
.mw-parser-output a[href*="/information/itemdb/"] > span:first-child{
  width:24px !important;
  height:24px !important;
  flex:0 0 24px !important;
  border-radius:6px !important;
  background-color:transparent !important;
}
}


/* ============================================================
/* ============================================================
   Journey Card (Caixa de Jornada / Recompensas) — Aurora clean
   PÁGINA INICIAL — CTAs EM GRADE 3x2
   Cole no FINAL do MediaWiki:Common.css (pra sobrescrever)
   Este bloco sobrescreve as regras flex antigas da bro-cta-gallery.
   ============================================================ */
   ============================================================ */


/* Paleta Aurora (ajuste se quiser) */
.mw-parser-output ul.bro-cta-gallery.bro-cta-grid {
:root{
  display:grid !important;
   --aur-ink: #0f2b3a;
   grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
   --aur-blue: #1f6aa5;
   grid-auto-flow:row !important;
   --aur-green: #24a137;
  justify-content:stretch !important;
 
   align-items:stretch !important;
   --aur-border: rgba(31,106,165,.18);
  gap:6px !important;
   --aur-border-strong: rgba(31,106,165,.28);
   flex-wrap:initial !important;
 
  width:100% !important;
   --aur-line: rgba(15,43,58,.10);
   max-width:none !important;
   --aur-shadow: 0 10px 30px rgba(15,43,58,.10);
  margin:0 0 10px !important;
 
   padding:0 !important;
   --aur-bg-top: rgba(157, 221, 255, .22);
   border:0 !important;
   --aur-bg-mid: rgba(207, 240, 255, .10);
  background:transparent !important;
   list-style:none !important;
   box-sizing:border-box !important;
}
}


/* Card base */
.mw-parser-output ul.bro-cta-gallery.bro-cta-grid > li.gallerybox {
.mw-parser-output .journey-card{
  float:none !important;
   max-width: 420px;                 /* um pouco mais “respirado” */
  display:block !important;
   border-radius: 18px;
  flex:none !important;
   padding: 16px 16px 14px;
  width:100% !important;
 
   max-width:none !important;
   background:
   height:auto !important;
    linear-gradient(180deg, var(--aur-bg-top) 0%, #ffffff 55%);
  margin:0 !important;
 
   padding:0 !important;
   border: 1px solid var(--aur-border);
   border:0 !important;
   box-shadow: var(--aur-shadow);
   background:transparent !important;
   box-shadow:none !important;
  box-sizing:border-box !important;
}
}


/* Header */
.mw-parser-output ul.bro-cta-gallery.bro-cta-grid > li.gallerybox .thumb,
.mw-parser-output .journey-head{
.mw-parser-output ul.bro-cta-gallery.bro-cta-grid > li.gallerybox .thumbinner {
   display:flex;
   display:block !important;
   align-items:center;
  width:100% !important;
   gap: 12px;
   max-width:none !important;
   margin: 2px 0 10px;
   height:auto !important;
   margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  line-height:0 !important;
  overflow:hidden !important;
  border-radius:10px !important;
}
}


/* Badge (troféu/ícone) */
.mw-parser-output ul.bro-cta-gallery.bro-cta-grid .gallerytext,
.mw-parser-output .journey-badge{
.mw-parser-output ul.bro-cta-gallery.bro-cta-grid .gallerycaption,
  width: 46px;
.mw-parser-output ul.bro-cta-gallery.bro-cta-grid .magnify {
  height: 46px;
   display:none !important;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
 
  background: linear-gradient(180deg, rgba(36,161,55,.12), rgba(31,106,165,.10));
  border: 1px solid var(--aur-border);
  box-shadow: 0 6px 16px rgba(15,43,58,.08);
  font-size: 20px;
}
 
/* Título e preço */
.mw-parser-output .journey-title{ line-height: 1.05; }
.mw-parser-output .journey-name{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .2px;
  color: var(--aur-ink);
}
.mw-parser-output .journey-price{
   font-weight: 800;
  color: rgba(15,43,58,.78);
  margin-top: 2px;
}
}


/* Subtítulo (nome da caixa) */
.mw-parser-output ul.bro-cta-gallery.bro-cta-grid a {
.mw-parser-output .journey-sub{
  display:block !important;
   margin: 6px 0 12px;
  width:100% !important;
   font-weight: 700;
  height:auto !important;
   color: rgba(15,43,58,.68);
   margin:0 !important;
   padding:0 !important;
   line-height:0 !important;
}
}


/* Lista */
.mw-parser-output ul.bro-cta-gallery.bro-cta-grid img,
.mw-parser-output .journey-list{
.mw-parser-output ul.bro-cta-gallery.bro-cta-grid .mw-file-element {
   list-style: none;
   display:block !important;
   margin: 0;
  width:100% !important;
   padding: 0;
  max-width:none !important;
 
  height:auto !important;
   display:flex;
  aspect-ratio:10 / 3 !important;
   flex-direction: column;
  object-fit:cover !important;
   margin:0 !important;
   padding:0 !important;
  border:0 !important;
   border-radius:10px !important;
  box-shadow:none !important;
  transform:scale(1);
   transform-origin:center center;
  filter:brightness(1);
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}
}


/* Itens com divisória “clean” */
.mw-parser-output ul.bro-cta-gallery.bro-cta-grid > li.gallerybox:hover {
.mw-parser-output .journey-list li{
   position:relative;
   display:flex;
   z-index:2;
  align-items:center;
  gap: 10px;
 
   padding: 8px 4px;
  border-bottom: 1px solid rgba(15,43,58,.08);
}
}


/* remove a linha do último item (antes do divisor final) */
.mw-parser-output ul.bro-cta-gallery.bro-cta-grid > li.gallerybox:hover img,
.mw-parser-output .journey-list li:last-child{
.mw-parser-output ul.bro-cta-gallery.bro-cta-grid > li.gallerybox:hover .mw-file-element {
   border-bottom: 0;
   transform:scale(1.025);
  filter:brightness(1.07);
  box-shadow:0 5px 14px rgba(31,53,184,.22) !important;
}
}


/* Quantidade */
@media (max-width:900px) {
.mw-parser-output .journey-qty{
  .mw-parser-output ul.bro-cta-gallery.bro-cta-grid {
  min-width: 44px;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  font-weight: 900;
    gap:6px !important;
  color: rgba(15,43,58,.70);
  }
}


/* O divisor “manual” que você já usa */
  .mw-parser-output ul.bro-cta-gallery.bro-cta-grid > li.gallerybox {
.mw-parser-output .journey-divider{
    max-width:none !important;
  height: 1px;
   }
  background: rgba(15,43,58,.12);
  margin: 8px 0;
  padding: 0 !important;
   border-bottom: 0 !important;
}
}


/* Links de item dentro da lista: mantém clean e Aurora */
@media (max-width:520px) {
.mw-parser-output .journey-card a[href*="/information/itemdb/"]{
  .mw-parser-output ul.bro-cta-gallery.bro-cta-grid {
  text-decoration: none !important;
    grid-template-columns:1fr !important;
  color: var(--aur-ink) !important;
   }
  font-weight: 700;
}
.mw-parser-output .journey-card a[href*="/information/itemdb/"]:hover{
  color: var(--aur-blue) !important;
   text-decoration: underline !important;
}
}
/* ============================================================
  Banner principal da Página Inicial
  (Somente Bemvindo1.png)
  ============================================================ */


/* ========= Tiers (muda só a “tinta” do topo) ========= */
.mw-parser-output .bro-banner-home{
.mw-parser-output .journey-card.tier-bronze{
    width:100%;
  background: linear-gradient(180deg, rgba(205, 145, 95, .22) 0%, #ffffff 56%);
    max-width:1060px;
  border-color: rgba(205,145,95,.25);
    margin:0 auto 10px;
    text-align:center;
}
}


.mw-parser-output .journey-card.tier-silver{
.mw-parser-output .bro-banner-home,
  background: linear-gradient(180deg, rgba(170, 190, 210, .28) 0%, #ffffff 56%);
.mw-parser-output .bro-banner-home .thumb,
  border-color: rgba(170,190,210,.30);
.mw-parser-output .bro-banner-home .thumbinner,
.mw-parser-output .bro-banner-home .image,
.mw-parser-output .bro-banner-home a{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 auto !important;
}
}


.mw-parser-output .journey-card.tier-gold{
.mw-parser-output .bro-banner-home img{
  background: linear-gradient(180deg, rgba(255, 199, 78, .20) 0%, #ffffff 56%);
    display:block;
  border-color: rgba(255,199,78,.28);
    width:1060px !important;
    max-width:100%;
    height:auto !important;
    margin:0 auto !important;
    border-radius:10px;
    transition:transform .22s ease;
}
}


/* Hover bem discreto (clean) */
.mw-parser-output .bro-banner-home:hover img{
.mw-parser-output .journey-card:hover{
    transform:scale(1.02);
  border-color: var(--aur-border-strong);
  box-shadow: 0 14px 42px rgba(15,43,58,.12);
}
}

Edição atual tal como às 17h18min de 15 de julho de 2026

/* ===== CTAs com <gallery> — bulletproof para várias versões do MW ===== */
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');

/* ============================================================
   PALETA AURORA (global)
   ============================================================ */
:root{
  --aur-ink: #0f2b3a;
  --aur-blue: #1f6aa5;
  --aur-green: #24a137;
  --aur-yellow: #FFC72E;

  --aur-border: rgba(15,43,58,.10);
  --aur-border-strong: rgba(15,43,58,.16);
  --aur-line: rgba(15,43,58,.10);
  --aur-soft: rgba(15,43,58,.04);
  --aur-shadow: 0 10px 28px rgba(15,43,58,.10);
}

/* ============================================================
   CONTAINER GERAL
   ============================================================ */
.broaurora-root{
  max-width:1360px;
  margin:0 auto;
  padding:0 16px;
  box-sizing:border-box;
}

/* ============================================================
   CTAs (gallery)
   ============================================================ */
.mw-parser-output .bro-cta-gallery{
  display:flex !important;
  justify-content:center;
  align-items:stretch;
  gap:18px;
  flex-wrap:nowrap;
  margin:0 auto 0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

.mw-parser-output .bro-cta-gallery .gallerybox,
.mw-parser-output .bro-cta-gallery li.gallerybox{
  float:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  display:block !important;
  vertical-align:middle !important;
  flex:0 1 300px;
  max-width:340px;
  box-sizing:border-box;
}

.mw-parser-output .bro-cta-gallery .thumb,
.mw-parser-output .bro-cta-gallery .thumbinner{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.mw-parser-output .bro-cta-gallery .gallerytext,
.mw-parser-output .bro-cta-gallery .gallerycaption,
.mw-parser-output .bro-cta-gallery .magnify{
  display:none !important;
}

.mw-parser-output .bro-cta-gallery img{
  display:block;
  width:100%;
  height:auto;
  transition:transform .22s ease;
  transform-origin:center center;
}

.mw-parser-output .bro-cta-gallery .gallerybox:hover img{
  transform:scale(1.04);
}

@media (max-width: 900px){
  .mw-parser-output .bro-cta-gallery{
    flex-wrap:wrap;
    gap:14px;
  }

  .mw-parser-output .bro-cta-gallery .gallerybox,
  .mw-parser-output .bro-cta-gallery li.gallerybox{
    flex:1 1 100%;
    max-width:300px;
  }
}

/* ============================================================
   BANNER INFORMAÇÕES
   ============================================================ */
.mw-parser-output .bro-info-banner{
  text-align:center;
  margin:8px 0 4px;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.mw-parser-output .bro-info-banner > *{
  margin:0 auto !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.mw-parser-output .bro-info-banner .thumb,
.mw-parser-output .bro-info-banner .thumbinner,
.mw-parser-output .bro-info-banner .image,
.mw-parser-output .bro-info-banner .floatnone,
.mw-parser-output .bro-info-banner .center,
.mw-parser-output .bro-info-banner .center > *,
.mw-parser-output .bro-info-banner a,
.mw-parser-output .bro-info-banner span{
  margin:0 auto !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  width:auto !important;
  max-width:none !important;
}

.mw-parser-output .bro-info-banner .magnify,
.mw-parser-output .bro-info-banner .gallerytext,
.mw-parser-output .bro-info-banner .gallerycaption{
  display:none !important;
}

.mw-parser-output .bro-info-banner img{
  display:block;
  margin:0 auto;
  width:760px;
  max-width:100%;
  height:auto;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  transition:transform .22s ease;
  transform-origin:center center;
}

.mw-parser-output .bro-info-banner:hover img{
  transform:scale(1.04);
}

/* ============================================================
   HOME / BLOCOS
   ============================================================ */
.mw-parser-output .bro-home-section{
  background:#fff;
  border-radius:18px;
  margin:10px 0 20px;
  border:1px solid #e9ecef;
  box-shadow:0 8px 22px rgba(15,43,58,.10);
  overflow:hidden;
}

.mw-parser-output .bro-home-head{
  background:linear-gradient(90deg,#2F53C8,#4972E9,#2F53C8);
  padding:12px 20px;
  text-align:center;
}

.mw-parser-output .bro-home-title{
  font-family:'Luckiest Guy', Impact, 'Arial Black', system-ui, sans-serif;
  color:#FFD23C;
  margin:0;
  font-size:clamp(1.15rem,1.8vw,1.55rem);
  font-weight:900;
  letter-spacing:.4px;
  -webkit-text-stroke:0.6px rgba(0,0,0,.9);
  text-shadow:
    .5px 0 0 rgba(0,0,0,.7), -.5px 0 0 rgba(0,0,0,.7),
    0 .5px 0 rgba(0,0,0,.7),  0 -.5px 0 rgba(0,0,0,.7);
}

.mw-parser-output .bro-home-cards{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  padding:16px;
  align-items:stretch;
  box-sizing:border-box;
}

.mw-parser-output .bro-home-card{
  flex:1 1 280px;
  min-width:260px;
  border:1px solid rgba(36,161,55,.28);
  border-radius:14px;
  padding:14px;
  background:#fff;
  box-sizing:border-box;
}

.mw-parser-output .bro-home-card.bro-home-card-wide{
  flex:1.18 1 330px;
  min-width:300px;
}

.mw-parser-output .bro-home-card.plain{
  border:none;
  padding:0;
  background:transparent;
}

.mw-parser-output .bro-home-card-title{
  color:#1a2a3a;
  font-size:1.05em;
  margin:0 0 8px;
  border-bottom:1px solid rgba(36,161,55,.40);
  padding-bottom:6px;
  text-align:center;
}

/* ===== grids internos ===== */
.mw-parser-output .bro-home-grid-2{
  display:grid;
  grid-template-columns:1.22fr 1fr;
  gap:8px;
}

.mw-parser-output .bro-home-grid-3{
  display:grid;
  grid-template-columns:1fr 1.28fr .88fr;
  gap:8px;
}

.mw-parser-output .bro-home-subcard{
  border:1px solid rgba(36,161,55,.28);
  border-radius:12px;
  padding:10px;
  background:#fff;
  box-sizing:border-box;
  min-width:0;
}

@media (max-width: 1100px){
  .mw-parser-output .bro-home-grid-3{
    grid-template-columns:1fr;
  }
}

/* ajuste fino para grids internos */
.mw-parser-output .bro-home-card .bro-home-grid-2 .broaurora-link,
.mw-parser-output .bro-home-card .bro-home-grid-3 .broaurora-link{
  padding:8px 9px;
  gap:8px;
  line-height:1.12;
}

/* títulos internos opcionais */
.mw-parser-output .bro-home-subtitle{
  margin:0 0 10px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(36,161,55,.25);
  text-align:center;
  color:#1a2a3a;
  font-size:1em;
  font-weight:700;
}

@media (max-width: 900px){
  .mw-parser-output .bro-home-cards{
    padding:14px;
    gap:12px;
  }

  .mw-parser-output .bro-home-grid-2{
    grid-template-columns:1fr;
  }

  .mw-parser-output .bro-home-grid-3{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .mw-parser-output .bro-home-cards{
    padding:12px;
    gap:10px;
  }

  .mw-parser-output .bro-home-card{
    flex:1 1 100%;
    min-width:0;
    padding:12px;
  }

  .mw-parser-output .bro-home-head{
    padding:10px 14px;
  }
}

/* ============================================================
   LINKS BONITINHOS
   ============================================================ */
.mw-parser-output .broaurora-link{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid rgba(36,161,55,.30) !important;
  border-radius:11px;
  background:#fff;
  color:var(--aur-ink) !important;
  text-decoration:none !important;
  box-shadow:0 1px 0 rgba(15,43,58,.03);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
  line-height:1.12;
  min-width:0;
}

.mw-parser-output .broaurora-link:hover{
  transform:scale(1.01);
  border-color:rgba(36,161,55,.50) !important;
  background:#f5fbff;
  color:var(--aur-blue) !important;
  box-shadow:0 6px 16px rgba(41,109,162,.12);
}

.mw-parser-output .broaurora-link img,
.mw-parser-output .broaurora-link .bro-ico{
  flex:0 0 auto;
}

/* texto do link pode quebrar de forma mais bonita */
.mw-parser-output .broaurora-link a,
.mw-parser-output .broaurora-link span,
.mw-parser-output .broaurora-link{
  overflow-wrap:break-word;
  word-break:normal;
}

.mw-parser-output ul.bro-list{
  list-style:none;
  margin:0;
  padding:0;
}

.mw-parser-output ul.bro-list > li{
  margin:6px 0;
}

/* ============================================================
   NAVI (/navi clicável)
   ============================================================ */
.mw-parser-output .navi-copy{
  cursor:pointer;
  display:inline;
  white-space:nowrap;
  padding:0 2px;
  color:#008000;
  font-weight:normal;
  text-decoration:none;
}

.mw-parser-output .navi-copy:hover{
  color:#00a000;
  text-decoration:underline;
}

/* ============================================================
   ItemDB — clean (sem [1] de link externo)
   ============================================================ */
.mw-parser-output a.external::after,
.mw-parser-output a.external.text::after{
  display:none !important;
  content:"" !important;
}

.mw-parser-output a[href*="/information/itemdb/"]{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  border-radius:0 !important;
  text-decoration:none !important;
  line-height:24px !important;
  vertical-align:middle !important;
  color:var(--aur-ink) !important;
  font-weight:600;
  transform:none !important;
  transition:color .12s ease;
}

.mw-parser-output a[href*="/information/itemdb/"]:hover{
  color:var(--aur-blue) !important;
  text-decoration:underline !important;
}

.mw-parser-output a[href*="/information/itemdb/"] > span:first-child{
  width:24px !important;
  height:24px !important;
  flex:0 0 24px !important;
  border-radius:6px !important;
  background-color:transparent !important;
}

/* ============================================================
   PÁGINA INICIAL — CTAs EM GRADE 3x2
   Este bloco sobrescreve as regras flex antigas da bro-cta-gallery.
   ============================================================ */

.mw-parser-output ul.bro-cta-gallery.bro-cta-grid {
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow:row !important;
  justify-content:stretch !important;
  align-items:stretch !important;
  gap:6px !important;
  flex-wrap:initial !important;
  width:100% !important;
  max-width:none !important;
  margin:0 0 10px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  list-style:none !important;
  box-sizing:border-box !important;
}

.mw-parser-output ul.bro-cta-gallery.bro-cta-grid > li.gallerybox {
  float:none !important;
  display:block !important;
  flex:none !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
}

.mw-parser-output ul.bro-cta-gallery.bro-cta-grid > li.gallerybox .thumb,
.mw-parser-output ul.bro-cta-gallery.bro-cta-grid > li.gallerybox .thumbinner {
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  line-height:0 !important;
  overflow:hidden !important;
  border-radius:10px !important;
}

.mw-parser-output ul.bro-cta-gallery.bro-cta-grid .gallerytext,
.mw-parser-output ul.bro-cta-gallery.bro-cta-grid .gallerycaption,
.mw-parser-output ul.bro-cta-gallery.bro-cta-grid .magnify {
  display:none !important;
}

.mw-parser-output ul.bro-cta-gallery.bro-cta-grid a {
  display:block !important;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  line-height:0 !important;
}

.mw-parser-output ul.bro-cta-gallery.bro-cta-grid img,
.mw-parser-output ul.bro-cta-gallery.bro-cta-grid .mw-file-element {
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  aspect-ratio:10 / 3 !important;
  object-fit:cover !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:10px !important;
  box-shadow:none !important;
  transform:scale(1);
  transform-origin:center center;
  filter:brightness(1);
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}

.mw-parser-output ul.bro-cta-gallery.bro-cta-grid > li.gallerybox:hover {
  position:relative;
  z-index:2;
}

.mw-parser-output ul.bro-cta-gallery.bro-cta-grid > li.gallerybox:hover img,
.mw-parser-output ul.bro-cta-gallery.bro-cta-grid > li.gallerybox:hover .mw-file-element {
  transform:scale(1.025);
  filter:brightness(1.07);
  box-shadow:0 5px 14px rgba(31,53,184,.22) !important;
}

@media (max-width:900px) {
  .mw-parser-output ul.bro-cta-gallery.bro-cta-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:6px !important;
  }

  .mw-parser-output ul.bro-cta-gallery.bro-cta-grid > li.gallerybox {
    max-width:none !important;
  }
}

@media (max-width:520px) {
  .mw-parser-output ul.bro-cta-gallery.bro-cta-grid {
    grid-template-columns:1fr !important;
  }
}
/* ============================================================
   Banner principal da Página Inicial
   (Somente Bemvindo1.png)
   ============================================================ */

.mw-parser-output .bro-banner-home{
    width:100%;
    max-width:1060px;
    margin:0 auto 10px;
    text-align:center;
}

.mw-parser-output .bro-banner-home,
.mw-parser-output .bro-banner-home .thumb,
.mw-parser-output .bro-banner-home .thumbinner,
.mw-parser-output .bro-banner-home .image,
.mw-parser-output .bro-banner-home a{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 auto !important;
}

.mw-parser-output .bro-banner-home img{
    display:block;
    width:1060px !important;
    max-width:100%;
    height:auto !important;
    margin:0 auto !important;
    border-radius:10px;
    transition:transform .22s ease;
}

.mw-parser-output .bro-banner-home:hover img{
    transform:scale(1.02);
}