Página principal
<style>
/* ===== CONTAINER GERAL ===== */
.bro-wiki-wrap{
width:100%; max-width:1280px; margin:0 auto; box-sizing:border-box;
}
/* ===== HERO ===== */ .bro-hero{
text-align:center; padding:28px 16px 8px;
}
/* ===== CTA ROW RESPONSIVA ===== */ .bro-cta-row{
display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin:0 0 28px; padding:0 12px;
}
.bro-cta-item{
flex:1 1 280px; max-width:360px; min-width:220px; text-align:center;
}
.bro-cta-item img{
width:100%; height:auto; display:block; border-radius:16px; box-shadow:0 8px 25px rgba(15,43,58,.12);
}
/* ===== BLOCOS ===== */ .bro-box{
background:#fff; border-radius:20px; margin:0 0 30px; border:1px solid #e9ecef; box-shadow:0 8px 25px rgba(15,43,58,.12); overflow:hidden;
}
.bro-box-head{
background:linear-gradient(90deg,#2F53C8,#4972E9,#2F53C8); padding:18px 24px; text-align:center;
}
.bro-box-title{
font-family:'Luckiest Guy', Impact, 'Arial Black', system-ui, sans-serif; color:#FFD23C; margin:0; font-size:clamp(1.25rem, 2.6vw, 1.8rem); font-weight:900; letter-spacing:.5px; -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);
}
.bro-box-body{
display:flex; flex-wrap:wrap; gap:20px; padding:24px; box-sizing:border-box;
}
/* ===== CARDS ===== */ .bro-card{
flex:1 1 280px; min-width:0; border:1px solid rgba(36,161,55,.30); border-radius:14px; padding:18px; box-sizing:border-box;
}
.bro-card.plain{
border:none; padding:0;
}
.bro-card-title{
color:#1a2a3a; font-size:1.15em; margin:0 0 12px; border-bottom:1px solid rgba(36,161,55,.45); padding-bottom:8px; text-align:center;
}
/* ===== LISTAS ===== */ .bro-list{
list-style:none; margin:0; padding:0;
}
.bro-list li{
margin:0 0 10px; line-height:1.4;
}
.bro-list li:last-child{
margin-bottom:0;
}
/* ===== GRID INTERNO ===== */ .bro-inner-grid{
display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
/* ===== RODAPÉ ===== */ .bro-footer{
text-align:center; margin:40px 0; color:#555; padding:0 14px;
}
.bro-footer p{
margin:0 0 8px;
}
.bro-footer p:last-child{
margin-bottom:0;
}
/* ===== RESPONSIVO ===== */ @media (max-width: 900px){
.bro-box-body{
gap:16px;
padding:18px;
}
.bro-inner-grid{
grid-template-columns:1fr;
}
}
@media (max-width: 600px){
.bro-hero{
padding:18px 10px 4px;
}
.bro-cta-row{
gap:12px;
padding:0 8px;
}
.bro-cta-item{
flex:1 1 100%;
max-width:none;
min-width:0;
}
.bro-box-head{
padding:14px 14px;
}
.bro-box-body{
padding:14px;
gap:12px;
}
.bro-card{
flex:1 1 100%;
padding:14px;
}
.bro-card-title{
font-size:1.05em;
}
} </style>
