/* ===== FAQ — Bang! RP (usa las variables de styles.css) ===== */

.faq-hero {
    padding: 8rem 0 2rem;
    background:
        radial-gradient(900px 380px at 50% -10%, rgba(255, 140, 90, .14), transparent 70%),
        linear-gradient(180deg, var(--bg2), var(--bg));
    text-align: center;
}
.faq-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; margin: .3rem 0 .6rem; }
.faq-hero h1 b { background: linear-gradient(135deg, var(--coral), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.faq-hero__sub { color: var(--muted); max-width: 640px; margin: 0 auto; font-size: 1.05rem; }

/* ----- Buscador (sticky) ----- */
.faq-tools {
    position: sticky; top: 0; z-index: 50;
    background: rgba(13, 7, 5, .92); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    padding: 1rem 0;
}
.faq-search { position: relative; max-width: 720px; margin: 0 auto; }
.faq-search__icon { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); font-size: 1.1rem; opacity: .7; pointer-events: none; }
.faq-search input {
    width: 100%; padding: 1rem 1rem 1rem 3rem;
    background: var(--bg3); border: 1.5px solid var(--line); border-radius: 999px;
    color: var(--cream); font-family: inherit; font-size: 1.02rem; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.faq-search input::placeholder { color: var(--muted); }
.faq-search input:focus { border-color: var(--coral); box-shadow: 0 0 0 4px rgba(255, 140, 90, .12); }
.faq-search__clear { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); font-size: 1.3rem; cursor: pointer; display: none; }
.faq-search__clear.show { display: block; }

/* ----- Chips de categoría ----- */
.faq-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; max-width: 980px; margin: .9rem auto 0; }
.chip {
    background: var(--bg3); border: 1px solid var(--line); color: var(--muted);
    padding: .45rem .9rem; border-radius: 999px; font-family: inherit; font-size: .86rem; font-weight: 500;
    cursor: pointer; transition: all .15s; white-space: nowrap;
}
.chip:hover { color: var(--cream); border-color: var(--coral); }
.chip--active { background: linear-gradient(135deg, var(--coral), var(--gold)); color: #2a1206; border-color: transparent; font-weight: 700; }

/* ----- Lista / contador ----- */
.faq-wrap { padding: 2.2rem 0 5rem; }
.faq-count { color: var(--muted); font-size: .9rem; text-align: center; margin-bottom: 1.6rem; }
.faq-count b { color: var(--gold); }

.faq-cat { margin-bottom: 2.4rem; }
.faq-cat__title {
    font-size: 1.35rem; font-weight: 800; margin-bottom: 1rem; padding-bottom: .5rem;
    border-bottom: 1px solid var(--line);
}

/* ----- Item acordeón ----- */
.faq {
    background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
    margin-bottom: .7rem; overflow: hidden; transition: border-color .15s;
}
.faq:hover { border-color: rgba(255, 140, 90, .3); }
.faq--open { border-color: var(--coral); }
.faq__q {
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    color: var(--cream); font-family: inherit; font-size: 1.02rem; font-weight: 600;
    padding: 1.05rem 3rem 1.05rem 1.2rem; position: relative;
}
.faq__q::after {
    content: '+'; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%);
    font-size: 1.5rem; font-weight: 400; color: var(--coral); transition: transform .2s;
}
.faq--open .faq__q::after { content: '−'; }
.faq__a { display: none; padding: 0 1.2rem 1.2rem; color: var(--muted); line-height: 1.65; }
.faq--open .faq__a { display: block; animation: faqIn .2s ease; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.faq__a p { margin: 0 0 .6rem; }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a b, .faq__a strong { color: var(--cream); }
.faq__a code, .faq__a kbd {
    background: var(--bg3); border: 1px solid var(--line); border-radius: 5px;
    padding: .08rem .4rem; font-size: .88em; color: var(--gold); font-family: ui-monospace, monospace;
}
.faq__a ul { margin: .3rem 0 .6rem; padding-left: 1.2rem; }
.faq__a li { margin-bottom: .25rem; }
.faq__a .tip { color: var(--coral); }

/* ----- Tabla de teclas ----- */
.keys-table { width: 100%; border-collapse: collapse; margin: .4rem 0; font-size: .94rem; }
.keys-table td { padding: .4rem .6rem; border-bottom: 1px solid var(--line); }
.keys-table td:first-child { width: 110px; }
.keys-table kbd { white-space: nowrap; }

/* ----- Sin resultados ----- */
.faq-none { display: none; text-align: center; color: var(--muted); padding: 3rem 1rem; }
.faq-none b { color: var(--cream); }

/* ----- aviso alpha ----- */
.faq-note { max-width: 720px; margin: 0 auto 1.6rem; text-align: center; font-size: .85rem; color: var(--muted);
    background: rgba(242, 181, 60, .07); border: 1px solid rgba(242, 181, 60, .25); border-radius: 10px; padding: .7rem 1rem; }

@media (max-width: 640px) {
    .faq__q { font-size: .96rem; padding-right: 2.6rem; }
    .keys-table td:first-child { width: 90px; }
}