/* =============================================================================
   QQ · Static pages (article detail, brands, categories)
   Dipende da tokens.css.
   ========================================================================== */

/* --- Article editorial layout ------------------------------------------- */
.qq-article {
    max-width: 780px;
    margin: 0 auto;
    padding: var(--qq-space-8) var(--qq-space-5) var(--qq-space-10);
}
.qq-article__head {
    text-align: center;
    margin-bottom: var(--qq-space-7);
}
.qq-article__crumbs {
    font-size: var(--qq-fs-micro);
    font-weight: var(--qq-fw-semi);
    letter-spacing: var(--qq-ls-kicker);
    text-transform: uppercase;
    color: var(--qq-muted);
    margin-bottom: var(--qq-space-4);
}
.qq-article__crumbs a { color: var(--qq-muted); text-decoration: none; }
.qq-article__crumbs a:hover { color: var(--qq-ink); }
.qq-article__crumbs span[aria-hidden] { margin: 0 var(--qq-space-2); opacity: 0.6; }
.qq-article__title {
    font-family: var(--qq-font-serif);
    font-weight: var(--qq-fw-medium);
    font-size: var(--qq-fs-hero);
    line-height: var(--qq-lh-tight);
    letter-spacing: var(--qq-ls-tight);
    color: var(--qq-ink);
    margin: 0;
}
.qq-article__title em { font-style: italic; }
.qq-article__intro {
    max-width: 600px;
    margin: var(--qq-space-4) auto 0;
    color: var(--qq-muted);
    font-size: var(--qq-fs-body);
    line-height: var(--qq-lh-body);
}
.qq-article__hero {
    margin: 0 0 var(--qq-space-7);
    border-radius: var(--qq-radius-md);
    overflow: hidden;
    background: var(--qq-cream-warm);
}
.qq-article__hero img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.qq-article__body {
    font-size: var(--qq-fs-body);
    line-height: 1.75;
    color: var(--qq-ink-soft);
    max-width: 68ch;
    margin: 0 auto;
}
.qq-article__body h2 {
    font-family: var(--qq-font-serif);
    font-size: var(--qq-fs-h2);
    line-height: var(--qq-lh-heading);
    color: var(--qq-ink);
    margin: var(--qq-space-8) 0 var(--qq-space-4);
    font-weight: var(--qq-fw-medium);
}
.qq-article__body h3 {
    font-family: var(--qq-font-serif);
    font-size: var(--qq-fs-h3);
    line-height: var(--qq-lh-heading);
    color: var(--qq-ink);
    margin: var(--qq-space-6) 0 var(--qq-space-3);
    font-weight: var(--qq-fw-medium);
}
.qq-article__body p { margin: 0 0 var(--qq-space-4); }
.qq-article__body a { color: var(--qq-ink); text-decoration: underline; text-underline-offset: 3px; }
.qq-article__body a:hover { color: #000; }
.qq-article__body ul, .qq-article__body ol {
    margin: 0 0 var(--qq-space-4);
    padding-left: var(--qq-space-5);
}
.qq-article__body li { margin-bottom: var(--qq-space-2); }
.qq-article__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--qq-radius-xs);
    margin: var(--qq-space-4) 0;
}
.qq-article__body blockquote {
    border-left: 3px solid var(--qq-canary);
    padding: var(--qq-space-2) 0 var(--qq-space-2) var(--qq-space-4);
    margin: var(--qq-space-5) 0;
    font-family: var(--qq-font-serif);
    font-size: var(--qq-fs-h3);
    font-style: italic;
    color: var(--qq-ink);
}

/* --- Alphabetical listing (brands / categories) ------------------------ */
.qq-listing-alpha { max-width: 1000px; }

.qq-alpha-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: var(--qq-space-4) 0;
    margin: 0 0 var(--qq-space-7);
    border-top: 1px solid var(--qq-line);
    border-bottom: 1px solid var(--qq-line);
    position: sticky;
    top: 0;
    background: var(--qq-cream);
    z-index: 5;
}
.qq-alpha-nav__item {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--qq-fs-small);
    font-weight: var(--qq-fw-semi);
    border-radius: 50%;
    text-decoration: none;
    transition: background var(--qq-t-fast), color var(--qq-t-fast);
}
.qq-alpha-nav__item.is-active {
    color: var(--qq-ink);
    background: transparent;
}
.qq-alpha-nav__item.is-active:hover {
    background: var(--qq-canary);
    color: var(--qq-ink);
}
.qq-alpha-nav__item.is-empty {
    color: var(--qq-line);
    cursor: default;
}

.qq-alpha-list__group + .qq-alpha-list__group { margin-top: var(--qq-space-8); }
.qq-alpha-list__letter {
    font-family: var(--qq-font-serif);
    font-size: var(--qq-fs-h1);
    font-weight: var(--qq-fw-medium);
    line-height: 1;
    color: var(--qq-canary);
    margin: 0 0 var(--qq-space-4);
    padding-bottom: var(--qq-space-3);
    border-bottom: 2px solid var(--qq-ink);
    display: inline-block;
    min-width: 60px;
}
.qq-alpha-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 3 220px;
    column-gap: var(--qq-space-6);
}
.qq-alpha-list__items li {
    break-inside: avoid;
    margin-bottom: var(--qq-space-2);
}
.qq-alpha-list__items a {
    display: block;
    padding: 6px 0;
    color: var(--qq-ink);
    font-size: var(--qq-fs-body);
    text-decoration: none;
    transition: color var(--qq-t-fast);
}
.qq-alpha-list__items a:hover {
    color: var(--qq-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Contact page ------------------------------------------------------- */
.qq-contact {
    max-width: 1120px;
    margin: 0 auto;
    padding: var(--qq-space-7) var(--qq-space-5) var(--qq-space-9);
}
.qq-contact__hero {
    text-align: center;
    margin-bottom: var(--qq-space-8);
}
.qq-contact__map {
    width: 100%;
    height: 380px;
    background: var(--qq-cream-warm);
    border-radius: var(--qq-radius-md);
    margin-bottom: var(--qq-space-7);
    overflow: hidden;
}
.qq-contact__map > div { height: 100%; }
.qq-contact__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--qq-space-6);
}
@media (min-width: 900px) {
    .qq-contact__grid { grid-template-columns: 340px 1fr; }
}
.qq-contact__info { }
.qq-contact__row {
    display: flex;
    align-items: flex-start;
    gap: var(--qq-space-3);
    padding: var(--qq-space-3) 0;
    border-bottom: 1px solid var(--qq-line);
}
.qq-contact__row:last-child { border-bottom: 0; }
.qq-contact__row i {
    color: var(--qq-ink);
    background: var(--qq-canary);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    flex-shrink: 0;
}
.qq-contact__row-label {
    display: block;
    font-size: var(--qq-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--qq-ls-kicker);
    color: var(--qq-muted);
    font-weight: var(--qq-fw-semi);
    margin-bottom: 2px;
}
.qq-contact__row-value {
    font-size: var(--qq-fs-body);
    color: var(--qq-ink);
    line-height: 1.5;
}
.qq-contact__row-value a { color: var(--qq-ink); text-decoration: underline; text-underline-offset: 2px; }
.qq-contact__social {
    display: flex;
    gap: var(--qq-space-3);
    margin-top: var(--qq-space-4);
}
.qq-contact__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--qq-ink);
    color: var(--qq-canary);
    border-radius: 50%;
    text-decoration: none;
    font-size: 18px;
    transition: transform var(--qq-t-fast);
}
.qq-contact__social a:hover { transform: scale(1.08); color: var(--qq-canary); }