:root{
  --bg: #F5F6FA;
  --card:#ffffff;
  --text:#222;
  --muted:#6b7280;
  --brand:#0A3D62;      /* azul escuro */
  --brand-2:#1B9CFC;    /* azul claro */
  --shadow: 0 10px 16px rgba(0,0,0,.06);
  --radius: 14px;
}

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

header{
  background: var(--brand);
  color:#fff;
  padding: 1.25rem 1rem;
  text-align:center;
}
header h1{margin:.2rem 0 0 0;font-weight:800}
.filters{margin-top:.8rem;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}

.chip{
  background: var(--brand-2);
  color:#fff;
  border:none;
  padding:.5rem .85rem;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
  box-shadow: var(--shadow);
}
.chip:hover{opacity:.92}
.chip-secondary{background:#0ea5e9}

main{max-width:1100px;margin:0 auto;padding:1.25rem}

h2{
  color: var(--brand);
  margin: 0 0 .75rem 0;
  border-bottom:2px solid var(--brand);
  padding-bottom:.35rem;
}

.panel{
  background: var(--card);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
  margin-bottom:1.25rem;
}
.hidden{display:none}

label{font-size:.95rem;color:var(--muted)}
input,textarea,select,button{
  width:100%;
  margin:.4rem 0 .9rem 0;
  padding:.8rem .9rem;
  border:1px solid #d1d5db;
  border-radius:12px;
  font-size:1rem;
}
textarea{min-height:110px;resize:vertical}
button{
  background: var(--brand);
  color:#fff;
  border:none;
  cursor:pointer;
  font-weight:700;
}
button:hover{opacity:.96}
.status{color:var(--muted);font-size:.95rem;margin-top:.25rem}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.card{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
}
.card h3{margin:.25rem 0 .5rem 0}
.card p{margin:0 0 .7rem 0;line-height:1.45}
.thumb{width:100%;border-radius:10px;display:block}
.meta{font-size:.85rem;color:var(--muted);margin-top:.4rem}
.badge{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.85rem;font-weight:700;background:#eef2ff;color:#4338ca;
  padding:.35rem .6rem;border-radius:999px;margin-bottom:.6rem;
}

@media (max-width: 900px){
  .grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 640px){
  .grid{grid-template-columns: 1fr;}
}