/* Guía de NexoraMC: piezas propias sobre el estilo común (css/nexora.css). */

.g-wrap { display: grid; gap: 1.25rem; padding-bottom: 3rem; }
.ip--sm { padding: 0 0.9rem 0 0.4rem; }
.ip--sm .ip__play { width: 2.2rem; height: 2.2rem; }
@media (max-width: 520px) { .ip--sm .ip__hint { display: none; } .ip--sm .ip__value { font-size: 0.75rem; } }

.g-hero { text-align: center; display: grid; justify-items: center; gap: 0.6rem; padding: 2rem 0 0.5rem; }
.g-hero__n { width: 8rem; height: 8rem; object-fit: contain; }
.g-eyebrow { color: var(--primary-glow); }
.g-hero__title { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.g-lead { color: var(--muted-foreground); }
.g-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; }
.g-chips a { padding: 0.45rem 0.85rem; border-radius: 999px; background: var(--secondary); border: 1px solid var(--border); text-decoration: none; font-weight: 700; font-size: 0.85rem; transition: border-color 0.15s, transform 0.15s; }
.g-chips a:hover { border-color: var(--primary); transform: translateY(-1px); }
.g-chips a.is-green { background-image: var(--gradient-primary); color: var(--primary-foreground); border-color: transparent; }

.g-card { padding: 1.5rem; display: grid; gap: 1rem; scroll-margin-top: 10rem; }
.g-card h2 { font-size: 1.4rem; }
.g-note { color: var(--muted-foreground); font-size: 0.9rem; }

.g-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; counter-reset: s; }
.g-steps li { counter-increment: s; display: grid; grid-template-columns: 2.2rem 1fr; column-gap: 0.75rem; align-items: start; padding: 0.85rem; background: var(--secondary); border-radius: var(--radius); }
.g-steps li::before { content: counter(s); grid-row: span 2; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 900; background-image: var(--gradient-primary); color: var(--primary-foreground); }
.g-steps li b { display: block; }
.g-steps li span { color: var(--muted-foreground); }

.g-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.g-list li { padding: 0.9rem; background: var(--secondary); border-radius: var(--radius); border-left: 3px solid var(--primary); display: grid; gap: 0.2rem; }
.g-list li span { color: var(--muted-foreground); font-size: 0.92rem; }

.g-search input { width: 100%; font: inherit; color: var(--foreground); background: var(--input); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 0.9rem; }
.g-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px oklch(0.68 0.23 320 / 25%); }
.g-cmds { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.g-group { display: grid; gap: 0.4rem; align-content: start; }
.g-group h3 { font-size: 1rem; color: var(--primary-glow); }
.g-cmd { display: grid; gap: 0.15rem; text-align: left; padding: 0.65rem 0.8rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--secondary); color: var(--foreground); font: inherit; cursor: pointer; transition: border-color 0.15s; }
.g-cmd:hover { border-color: var(--primary); }
.g-cmd code { font: 800 0.92rem var(--font); color: var(--primary-glow); }
.g-cmd span { color: var(--muted-foreground); font-size: 0.85rem; }

.g-ranks { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.g-rank { display: grid; justify-items: center; gap: 0.25rem; padding: 0.9rem; background: var(--secondary); border-radius: var(--radius); text-align: center; }
.g-rank img { width: 4rem; height: 4rem; object-fit: contain; image-rendering: pixelated; }
.g-rank span { color: var(--commerce); font-weight: 800; }
.g-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.g-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.g-table th, .g-table td { padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--border); text-align: center; }
.g-table thead th { background: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.g-table tbody th { text-align: left; font-weight: 700; color: var(--muted-foreground); }
.g-table tr:last-child th, .g-table tr:last-child td { border-bottom: 0; }
.g-yes { color: var(--success); font-weight: 900; }
.g-no { color: var(--muted-foreground); }

.g-mission { background: linear-gradient(135deg, oklch(0.3 0.12 150 / 35%), color-mix(in oklab, var(--panel) 92%, transparent)); border-color: oklch(0.55 0.15 150 / 60%); }
.g-reward { color: var(--success); font-weight: 800; }
.g-votes { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.g-foot { text-align: center; color: var(--muted-foreground); padding: 1rem 0 2rem; }
.g-foot a { color: var(--primary-glow); }
.g-card > .btn { justify-self: start; }