/* Sitio público de Solarpunk: mismos tokens que la app (ADR-0004, solarpunk orgánico). */
:root {
  --bg: #e8efe2; --card: #f6f9f2; --fg: #22392d; --muted: #5b7366; --border: #c9d8c4;
  --leaf: #2f5d46; --sun: #d48a12; --on-leaf: #f6f9f2; --radius: 16px;
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--fg); background: var(--bg); line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --bg: #101a15; --card: #17241d; --fg: #e2eee5; --muted: #9bb5a5; --border: #2a3d33; --leaf: #7cc59a; --sun: #f0b14a; --on-leaf: #0f1a14; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
a { color: var(--leaf); }

.portada { padding: 16px; background: radial-gradient(1200px 500px at 80% -10%, color-mix(in srgb, var(--sun) 18%, transparent), transparent), var(--card); border-bottom: 1px solid var(--border); }
.barra { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.marca { font-size: 1.25rem; font-weight: 650; color: var(--leaf); text-decoration: none; }
.intro { max-width: 760px; margin: 48px auto 40px; text-align: center; }
.etiqueta { display: inline-block; margin: 0 0 12px; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); font-size: 0.85rem; }
h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.15; margin: 0 0 14px; font-weight: 650; }
.bajada { color: var(--muted); font-size: 1.1rem; margin: 0 auto 24px; max-width: 640px; }
.acciones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.boton { display: inline-block; padding: 8px 18px; border-radius: 999px; background: var(--leaf); color: var(--on-leaf); text-decoration: none; font-weight: 550; }
.boton.grande { padding: 12px 24px; font-size: 1.05rem; }
.boton.fantasma { background: transparent; color: var(--fg); border: 1px solid var(--border); }

main { max-width: 1100px; margin: 0 auto; padding: 32px 16px; }
.capturas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
figure { margin: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
figure img { display: block; width: 100%; height: auto; }
figcaption { padding: 12px 16px 16px; color: var(--muted); font-size: 0.95rem; }
figcaption b { color: var(--fg); }

.rasgos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 40px 0; }
.rasgos div { padding: 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); }
.rasgos h2 { margin: 0 0 6px; font-size: 1.1rem; color: var(--leaf); }
.rasgos p { margin: 0; color: var(--muted); }

.descargar { padding: 24px; border-radius: var(--radius); border: 1px solid var(--sun); background: color-mix(in srgb, var(--sun) 8%, var(--card)); }
.descargar h2 { margin-top: 0; }

/* Página de descargas */
.tabla { width: 100%; border-collapse: collapse; margin: 16px 0; }
.tabla th, .tabla td { padding: 10px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.tabla td:last-child { text-align: right; color: var(--muted); white-space: nowrap; }
.nota { color: var(--muted); font-size: 0.9rem; }

footer { padding: 24px 16px 40px; text-align: center; color: var(--muted); font-size: 0.9rem; }
@media (max-width: 600px) { .intro { margin: 28px auto; } .tabla td:last-child { display: none; } }