/* MOBILE-FIRST TWEAKS FOR AFROBELEZA HOME */
/* Base (works for all) */
:root{
–roxo:#4F1E5E; –verde:#1E5E3D; –dourado:#E0A82A; –bege:#C49A5A; –preto:#2C2C2C; –branco:#fff;
–serif:’Playfair Display’, Georgia, serif; –sans:’Montserrat’,’Lato’,system-ui,sans-serif;
}
body{font-family:var(–sans);color:var(–preto)}
h1,h2,h3,h4{font-family:var(–serif);color:var(–roxo);margin-top:.2em}
img{max-width:100%;height:auto;display:block}
/* Layout blocks */
.af-hero{display:grid;grid-template-columns:1.4fr .9fr;gap:28px;align-items:start}
.af-hero .main img{border-radius:12px}
.af-hero .kicker{display:inline-block;background:var(–roxo);color:#fff;padding:.25rem .6rem;border-radius:6px;font-size:.8rem;margin-bottom:8px}
.af-hero .btn{background:var(–verde);color:#fff;padding:.65rem 1rem;border-radius:8px;display:inline-block}
/* Breaking bar */
.af-breaking{background:var(–dourado);color:#2C2C2C;padding:.6rem 1rem;border-top:4px solid var(–roxo);border-bottom:1px solid rgba(0,0,0,.08)}
.af-breaking strong{margin-right:.6rem}
/* Rows/cards */
.af-row{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.af-card{background:#fff;border:1px solid #eee;border-radius:12px;overflow:hidden}
.af-card .pad{padding:14px}
/* Latest list (sidebar) */
.af-latest .item{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid #eee}
.af-latest h4{margin:0;font-size:1rem}
.af-latest .cat{color:var(–verde);font-weight:600;font-size:.8rem}
/* Action bar */
.af-actions{background:var(–verde);color:#fff;padding:14px;border-radius:10px;display:flex;justify-content:center;gap:28px}
.af-actions .ico{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-weight:700}
/* Footer band */
.af-footerband{background:var(–roxo);color:#f4e6c6;padding:20px;border-top:4px solid var(–dourado)}
.af-footerband a{color:#f4e6c6;text-decoration:none;margin-right:16px}
/* ====== RESPONSIVE ====== */
@media (max-width: 992px){
.af-hero{grid-template-columns:1fr;gap:16px}
.af-hero .main h1{font-size:1.8rem;line-height:1.2}
.af-latest .item{grid-template-columns:80px 1fr}
.af-row{grid-template-columns:1fr}
.af-actions{gap:16px}
}
@media (max-width: 640px){
.af-breaking{font-size:.9rem}
.af-hero .btn{width:100%;text-align:center}
.af-latest h4{font-size:.95rem}
.af-actions .ico{width:40px;height:40px}
.af-footerband div{gap:8px}
}
@media (max-width: 420px){
.af-hero .main h1{font-size:1.5rem}
h2{font-size:1.25rem}
h3{font-size:1.1rem}
.af-latest .item{grid-template-columns:70px 1fr}
}