/* Reset */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:0;background:none}

/* Paleta */
:root{
  --green-900:#0f3b22;
  --green-700:#226b3a;
  --green-600:#2a7b43;
  --green-300:#7fc79a;
  --sand-100:#e7efea;
  --sand-50:#f4f8f6;
  --text-100:#f8faf9;
  --text-700:#243227;
  --white:#fff;
  --shadow:0 8px 24px rgba(0,0,0,.12);
  --radius:18px;
}

/* Base */
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  color:var(--text-700);
  background: linear-gradient(180deg,var(--green-900) 0%, #144a2a 40%, var(--green-900) 100%);
}

/* Layout container */
.wrap{max-width:1100px;margin-inline:auto;padding:clamp(16px,4vw,40px)}

/* Hero */
.hero{
  color:var(--text-100);
  padding:clamp(24px,5vw,56px);
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background: radial-gradient(1100px 520px at 20% -10%, rgba(127,199,154,.25), transparent 60%);
  position:relative;overflow:hidden
}
.badge{
  display:inline-block;background:rgba(127,199,154,.22);border:1px solid rgba(127,199,154,.45);
  color:#e8fff2;padding:.35rem .6rem;border-radius:999px;text-transform:uppercase;letter-spacing:.04em;font-size:.85rem
}
h1{margin:.6rem 0 .4rem;font-weight:800;font-size:clamp(1.6rem,2.4vw + 1rem,2.6rem);letter-spacing:.2px}
.hero p{margin:.2rem 0 1rem;color:#e7f5ec;max-width:70ch;line-height:1.5}
.hero-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.btn{
  background:var(--green-300);color:#08311b;border-radius:12px;padding:.7rem 1rem;font-weight:700;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;box-shadow:0 6px 20px rgba(0,0,0,.18)
}
.btn:hover{transform:translateY(-1px);background:#9bd8b1}
.btn.secondary{background:transparent;color:var(--text-100);border:1px solid rgba(255,255,255,.2);box-shadow:none}
.hero-mark{position:absolute;right:-40px;top:-40px;width:220px;height:220px;background:conic-gradient(from 90deg, rgba(127,199,154,.08), rgba(127,199,154,0));border-radius:50%;filter:blur(6px);pointer-events:none}

/* Controls */
.controls{margin:26px 0 14px;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.chip{
  background:var(--sand-50);border:1px solid #d8e6df;color:#1e3a2a;border-radius:999px;padding:.45rem .8rem;font-weight:600
}
.chip[data-active="true"]{background:#dff3e7;border-color:#b6e3cc}
.search{margin-left:auto;display:flex;align-items:center;gap:.4rem;background:var(--sand-50);border:1px solid #d8e6df;padding:.45rem .7rem;border-radius:10px}
.search input{border:0;outline:0;background:transparent;min-width:220px;color:#153b29}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,20px);margin-top:10px}
.card{
  grid-column:span 6;background:var(--sand-100);border:1px solid #d8e6df;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .08s ease
}
.card:hover{transform:translateY(-2px)}
.card-header{background:linear-gradient(180deg,var(--green-700),var(--green-600));color:var(--white);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-title{margin:0;font-size:1.05rem;font-weight:800;letter-spacing:.2px}
.tag{font-size:.75rem;font-weight:700;padding:.25rem .5rem;border-radius:999px;background:rgba(255,255,255,.14);color:#eafff2;border:1px solid rgba(255,255,255,.24);white-space:nowrap}
.card-content{display:flex;gap:0;min-height:180px}
.card-preview{background:#f9fcfb;border-right:1px solid #d8e6df;overflow:hidden;display:flex;align-items:center;justify-content:center;width:150px;min-width:150px;padding:16px}
.card-preview img{width:100%;height:auto;max-height:200px;object-fit:contain;object-position:center}
.card-body{padding:14px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-body p{margin:0;line-height:1.5}
.file-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.dl{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1px solid #dfe8e3;border-radius:10px;padding:.5rem .7rem;font-weight:700}
.dl:hover{background:#f6fbf8}
.utils{display:flex;gap:.4rem;margin-top:6px}
.mini{font-size:.85rem;padding:.4rem .6rem}

/* Footer */
footer{color:#ddf3e7;opacity:.9;font-size:.9rem;padding:26px 0 6px;text-align:center}
footer a{text-decoration:underline}

/* Responsive */
@media (max-width: 1024px){
  .card{grid-column:span 6}
}
@media (max-width: 820px){
  .card{grid-column:span 12}
  .search input{min-width:140px}
  .wrap{padding:20px}
}
@media (prefers-reduced-motion: reduce){
  .btn,.card{transition:none}
}