:root{
  --bg:#f5f7fb;
  --card:#fff;
  --text:#0f172a;
  --muted:#475569;
  --line:#e2e8f0;
  --primary:#0b2a3a;
  --primary2:#0f4c5c;
  --chip:#eef2ff;
  --chipText:#1e293b;
  --shadow:0 10px 30px rgba(15,23,42,0.08);
  --radius:16px;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

img{max-width:100%; height:auto}

.wrap{max-width:1120px; margin:0 auto; padding:0 16px}

/* ===== Header ===== */
.top{
  background:linear-gradient(135deg, var(--primary), var(--primary2));
  color:#fff;
}
.top .wrap{
  padding:18px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.brand a{display:flex; flex-direction:column; text-decoration:none; color:#fff}
.brand__site{font-weight:800; letter-spacing:0.04em}
.brand__niche{opacity:0.9; font-size:13px}

.nav{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.nav a{color:#fff; text-decoration:none; opacity:.92}
.nav a:hover{opacity:1; text-decoration:underline}

/* ===== Cards / Panels ===== */
.card, .panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.card{overflow:hidden; display:flex; flex-direction:column; min-height:100%}
.panel{padding:16px}

.hero{padding:18px 0 10px}
.hero__grid{display:grid; grid-template-columns: 1.2fr 0.8fr; gap:14px; align-items:center}
@media (max-width: 980px){.hero__grid{grid-template-columns:1fr}}

.hero h1{margin:0; font-size:28px; line-height:1.2}
.lead{margin:10px 0 0; color:var(--muted); font-size:15px; line-height:1.55}

.hr{height:1px; background:var(--line); margin:12px 0}

/* ===== Buttons ===== */
.btn, button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(15,23,42,0.15);
  background:#fff;
  padding:11px 14px;
  border-radius:12px;
  cursor:pointer;
  text-decoration:none;
  color:inherit;
  white-space:nowrap;
}
.btn:hover{filter:brightness(0.99)}

.btn--primary{
  background:#16a34a;
  border-color:#16a34a;
  color:#fff;
}
.btn--primary:hover{filter:brightness(0.98)}

.btn--ghost{
  background:#fff;
}

/* ===== Search ===== */
.search{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.search input{
  flex:1;
  min-width:240px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  font-size:15px;
  outline:none;
  background:#fff;
}
.search input:focus{border-color:#94a3b8; box-shadow:0 0 0 4px rgba(148,163,184,0.18)}

/* ===== Chips (Categorias/Tags) ===== */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}

.chip,
.chips > a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  text-decoration:none;
  background:var(--chip);
  color:var(--chipText);
  border:1px solid rgba(15,23,42,0.08);
  font-size:13px;
}

.chip:hover,
.chips > a:hover{filter:brightness(0.98)}

.chip--active{background:var(--primary); color:#fff; border-color:rgba(255,255,255,0.15)}

.count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:rgba(15,23,42,0.08);
  font-size:12px;
  line-height:1;
}
.chip--active .count{background:rgba(255,255,255,0.22)}

.is-hidden{display:none !important}

/* ===== Grid cards ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
@media (max-width: 980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 640px){.grid{grid-template-columns:1fr}}

.card__thumb{width:100%; aspect-ratio: 16 / 9; background:#0b2a3a; display:block}
.card__thumb img{width:100%; height:100%; object-fit:cover; display:block}

.card__body{padding:14px}
.card__meta{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:8px}

.badge{
  font-size:12px;
  padding:5px 8px;
  border-radius:999px;
  background:#f1f5f9;
  border:1px solid rgba(15,23,42,0.06);
  color:#0f172a;
  text-decoration:none;
}
.badge--cat{background:#e0f2fe}

.card__title{font-size:17px; line-height:1.25; margin:0 0 8px}
.card__title a{text-decoration:none}
.card__title a:hover{text-decoration:underline}

.card__desc{color:var(--muted); font-size:14px; line-height:1.45; margin:0}

.card__actions{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}

/* ===== Pagination ===== */
.pagination{
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  margin:18px 0 2px;
}

/* ===== Article page ===== */
.article{padding:18px 0 30px}
.breadcrumbs{font-size:13px; color:var(--muted); margin-bottom:10px}
.breadcrumbs a{color:var(--muted); text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}

.split{display:grid; grid-template-columns: 1.2fr 0.8fr; gap:16px}
@media (max-width: 980px){.split{grid-template-columns:1fr}}

.thumb{
  width:100%;
  aspect-ratio: 16 / 9;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.08);
}

.meta{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.pad{padding:14px 0 0}

.article h1{margin:10px 0 6px; font-size:30px; line-height:1.2}
.content{margin-top:14px; font-size:16px; line-height:1.75}
.content p{margin:0 0 14px}
.content h2{margin:20px 0 10px; font-size:22px}
.content a{color:inherit; text-decoration:underline}

.aside .panel{position:sticky; top:12px}

/* ===== Footer ===== */
.footer{border-top:1px solid var(--line); padding:18px 0; color:var(--muted)}
.small{font-size:13px}
.muted{color:var(--muted)}


/* Tag map clusters */
.panel__head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px}
.cluster{margin-top:12px; padding-top:10px; border-top:1px dashed rgba(15,23,42,0.12)}
.cluster:first-child{margin-top:0; padding-top:0; border-top:0}
.cluster__title{font-weight:700; font-size:13px; letter-spacing:0.2px; color:#0f172a; margin-bottom:8px}
.is-hidden{display:none !important}

/* link defaults */
a{color:inherit}
a:hover{text-decoration:none}

/* card images: enforce aspect ratio */
.card__media{aspect-ratio:16/9; overflow:hidden; border-radius:16px}
.card__media img{width:100%; height:100%; object-fit:cover; display:block}