/*
 * Q1Store — brand theme for the public site (q1store.me).
 *
 * Layers on top of `assets/css/rede5.css`, which is the shared public-site
 * theme: it defines the `r5-*` component classes and the `:root` palette
 * tokens. This file is loaded only for this brand (see Config\Sites -> styles)
 * and is scoped to `body.site-q1store`, so it cannot leak into the other
 * brands or into the admin panel.
 *
 * The palette comes from the brand mark (blue #2b5cff over the deep navy
 * #0e1a45), with a single warm accent (#ff7a1a) reserved for the highlighted
 * plan and the QR seal. Text and button roles use #2b5cff (~5:1 on white,
 * WCAG AA); the brighter blue of the mark is only used on dark surfaces,
 * where it clears AA comfortably.
 *
 * Everything below is ADDITIVE: the components the other brands already use
 * (`.r5-hero`, `.r5-card`, `.r5-section`, `.r5-btn*`) are reused as they are,
 * and only the new blocks this brand introduces get their own rules.
 */

body.site-q1store {
    --r5-blue-900: #0e1a45;   /* hero gradient start, footer */
    --r5-blue-700: #1c3fd6;   /* hover states */
    --r5-blue-600: #2b5cff;   /* primary button, links, icons (AA on white) */
    --r5-q1s-accent: #ff7a1a; /* decorative only: highlighted plan, QR seal */
    --r5-q1s-ink: #0b1436;
}

/* Header ------------------------------------------------------------------ */

/* Duas acoes no cabecalho ("Comecar gratis" e "Falar com vendas"): elas vem
   de `header_actions` na config e sao renderizadas por layouts/public.php.
   O cabecalho da Q1Store nao usa o botao unico do painel. */
body.site-q1store .r5-header-actions .r5-btn {
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
}

/* Como no mockup, o cabecalho mostra so a assinatura "Q1Store" (o simbolo da
   sacola fica de fora; o nome do link vem do aria-label do layout). */
body.site-q1store .r5-header .r5-logo {
    display: none;
}

/* Menu centralizado, em cinza-escuro e compacto, como no mockup. */
body.site-q1store .r5-header .r5-nav {
    margin-inline: auto;
}

body.site-q1store .r5-header .r5-nav a {
    color: #1f2a44;
    font-size: 0.82rem;
    font-weight: 500;
}

body.site-q1store .r5-header .r5-nav a:hover,
body.site-q1store .r5-header .r5-nav a.active {
    color: var(--r5-q1s-blue, #2b5cff);
}

body.site-q1store .r5-footer .r5-logo {
    height: 48px;
    background: transparent;
    padding: 0;
    border-radius: 12px;
}

body.site-q1store .r5-card-icon {
    background: rgba(43, 92, 255, 0.12);
}

body.site-q1store .r5-hero::after {
    background: radial-gradient(circle, rgba(255, 122, 26, 0.32), transparent 62%);
}

/* Faixa de atalhos -------------------------------------------------------- */

.r5-shortcuts {
    background: #fff;
    border-bottom: 1px solid var(--r5-slate-200);
}

.r5-shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 1.35rem 0.75rem;
    text-align: center;
    color: var(--r5-slate-900);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: var(--ch-radius);
    transition: var(--ch-transition);
}

.r5-shortcut:hover,
.r5-shortcut:focus-visible {
    color: var(--r5-blue-700);
    background: var(--r5-slate-50);
}

.r5-shortcut i {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    background: rgba(43, 92, 255, 0.1);
    color: var(--r5-blue-600);
}

/* Grade de recursos ------------------------------------------------------- */

.r5-feature-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--r5-slate-200);
    border-radius: var(--ch-radius);
    overflow: hidden;
    box-shadow: var(--ch-shadow-sm);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.r5-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ch-shadow);
    border-color: rgba(43, 92, 255, 0.35);
}

.r5-feature-media {
    height: 132px;
    display: grid;
    place-items: center;
    font-size: 2.4rem;
    color: #fff;
    background: linear-gradient(135deg, var(--r5-blue-900), var(--r5-blue-600));
}

.r5-feature-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.r5-feature-body {
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.r5-feature-body h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.r5-feature-body p {
    color: var(--r5-slate-600);
    font-size: 0.94rem;
    flex: 1;
}

.r5-feature-link {
    font-weight: 600;
    color: var(--r5-blue-600);
    text-decoration: none;
    font-size: 0.92rem;
}

.r5-feature-link:hover {
    text-decoration: underline;
}

/* Planos ------------------------------------------------------------------ */

.r5-plan {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--r5-slate-200);
    border-radius: var(--ch-radius);
    padding: 1.6rem;
    box-shadow: var(--ch-shadow-sm);
}

.r5-plan-featured {
    border-color: var(--r5-q1s-accent);
    box-shadow: 0 12px 28px rgba(255, 122, 26, 0.16);
}

.r5-plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.r5-plan-name {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.r5-plan-badge {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    background: var(--r5-q1s-accent);
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    white-space: nowrap;
}

.r5-plan-price {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--r5-slate-900);
    margin-bottom: 0.15rem;
}

.r5-plan-period {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--r5-slate-600);
}

.r5-plan-text {
    color: var(--r5-slate-600);
    font-size: 0.9rem;
    margin: 0.75rem 0 1rem;
}

.r5-plan-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.4rem;
    flex: 1;
    display: grid;
    gap: 0.55rem;
}

.r5-plan-list li {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    color: var(--r5-slate-600);
    font-size: 0.9rem;
}

.r5-plan-list i {
    color: #16a34a;
    margin-top: 0.15rem;
}

.r5-plans-note {
    text-align: center;
    font-size: 0.85rem;
    color: var(--r5-slate-600);
    margin-top: 2rem;
}

/* Tabela comparativa ------------------------------------------------------ */

.r5-plan-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--r5-slate-200);
    border-radius: var(--ch-radius);
    background: #fff;
    box-shadow: var(--ch-shadow-sm);
}

/* Foco visivel na area rolavel: sem isso o teclado nao consegue alcancar as
   colunas que ficam fora da tela no celular (WCAG 2.2 AA). */
.r5-plan-table-wrap:focus-visible {
    outline: 3px solid var(--r5-blue-600);
    outline-offset: 2px;
}

.r5-plan-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.r5-plan-table th,
.r5-plan-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--r5-slate-200);
    text-align: center;
    vertical-align: middle;
}

.r5-plan-table thead th {
    background: var(--r5-slate-50);
    color: var(--r5-slate-900);
    font-weight: 700;
    white-space: nowrap;
}

.r5-plan-table tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--r5-slate-900);
    white-space: nowrap;
}

.r5-plan-table tbody tr:last-child th,
.r5-plan-table tbody tr:last-child td {
    border-bottom: 0;
}

.r5-plan-table .r5-plan-table-yes {
    color: #16a34a;
    font-size: 1.05rem;
}

.r5-plan-table .r5-plan-table-no {
    color: var(--r5-slate-200);
    font-size: 1.05rem;
}

.r5-plan-table .r5-plan-table-text {
    color: var(--r5-slate-600);
}

/* Faixa de CTA ------------------------------------------------------------ */

.r5-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--r5-blue-900) 0%, var(--r5-blue-700) 100%);
    color: #fff;
    padding: 3.5rem 0;
}

.r5-cta::after {
    content: "";
    position: absolute;
    inset: -60% -10% auto auto;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(255, 122, 26, 0.3), transparent 62%);
    pointer-events: none;
}

.r5-cta h2 {
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.r5-cta p {
    color: rgba(255, 255, 255, 0.82);
}

.r5-cta-note {
    color: rgba(255, 255, 255, 0.7);
}

/* =========================================================================
 * HOME — composicao do mockup do dono
 *
 * As secoes `store_*` (public/sections/store_*.php) desenham a home do
 * q1store.me. O titulo delas e o `q1s-h2` do DS; o destaque dentro dele e o
 * `q1s-hl` nas secoes claras e o `q1s-hl-inverse` no hero escuro.
 * ========================================================================= */

/* Hero --------------------------------------------------------------------- */

/* Fundo azul da marca. O seletor (body + 2 classes) ganha do gradiente navy
   do `.r5-hero` compartilhado pela especificidade, sem `!important`. A cor
   vira variavel porque a faixa de atalhos precisa pintar a mesma emenda. */
body.site-q1store {
    --q1s-hero-bg: #008cff;
    --q1s-strip-overlap: 4rem;
}

@media (min-width: 768px) {
    body.site-q1store { --q1s-strip-overlap: 5.5rem; }
}

body.site-q1store .r5-hero-store {
    background: var(--q1s-hero-bg);
    color: #ffffff;
    padding-bottom: 3rem;
}

body.site-q1store .r5-hero-store .q1s-hero__eyebrow { color: rgba(255, 255, 255, 0.85); }
body.site-q1store .r5-hero-store .q1s-hero__lead { color: rgba(255, 255, 255, 0.92); }
body.site-q1store .r5-hero-store .q1s-hero__checks .q1s-checklist__item,
body.site-q1store .r5-hero-store .q1s-hero__checks .q1s-checklist__item i { color: #ffffff; }

/* Destaques do titulo: `QR` em branco e a "loja completa" no amarelo de
   acento dos cartoes de QR. */
body.site-q1store .q1s-hero__hl-qr { color: #ffffff; font-weight: 800; }
body.site-q1store .q1s-hero__hl-accent { color: #fca800; }

/* A sobrancelha, as checagens, a composicao de aparelhos e os chips vivem no
   DS (`q1s-hero__*`, `q1s-hero-visual`, `q1s-hero-chip`): mesma composicao,
   vocabulario do sistema. */

/* Composicao de aparelhos: uma GRADE 20x20 com proporcao fixa. Cada peca
   ocupa celulas (linhas/colunas), entao nada depende de coordenadas soltas e
   nada vaza da moldura; quem fica por cima e a ordem do DOM (laptop, telefone,
   cartao de QR, seta, chips). `min-width: 0` deixa o chip encolher em vez de
   estourar a coluna. */
body.site-q1store .q1s-hero-visual--store {
    display: grid;
    grid-template-columns: repeat(20, minmax(0, 1fr));
    grid-template-rows: repeat(20, minmax(0, 1fr));
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    padding-top: 0;
    aspect-ratio: 640 / 470;
}

body.site-q1store .q1s-hero-visual--store > * { min-width: 0; }

body.site-q1store .q1s-hero-visual--store img {
    display: block;
    width: 100%;
    height: auto;
    align-self: start;
}

body.site-q1store .q1s-hero-visual__laptop { grid-area: 1 / 1 / 21 / 21; }

body.site-q1store .q1s-hero-visual__phone {
    grid-area: 1 / 1 / 21 / 7;
    align-self: end;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.18));
}

body.site-q1store .q1s-hero-visual__qr {
    grid-area: 4 / 14 / 21 / 20;
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.22));
}

body.site-q1store .q1s-hero-visual__arrow {
    grid-area: 8 / 11 / 21 / 16;
    opacity: 0.9;
}

/* Os chips (visiveis a partir de 576px, regra do DS) ficam nas celulas do
   topo; o texto nao quebra, mas o chip nunca passa da celula. */
body.site-q1store .q1s-hero-visual--store .q1s-hero-chip {
    position: static;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.site-q1store .q1s-hero-chip--qr { grid-area: 1 / 2 / 3 / 11; align-self: start; justify-self: start; }
body.site-q1store .q1s-hero-chip--catalog { grid-area: 8 / 8 / 10 / 17; align-self: start; justify-self: start; }
body.site-q1store .q1s-hero-chip--store { grid-area: 2 / 11 / 4 / 20; align-self: start; justify-self: end; }

/* Celular estreito: moldura mais alta, aparelhos maiores (os chips ficam
   escondidos pelo DS nessa largura). */
@media (max-width: 575px) {
    body.site-q1store .q1s-hero-visual--store { aspect-ratio: 5 / 6; }
    body.site-q1store .q1s-hero-visual__phone { grid-area: 1 / 1 / 21 / 9; }
    body.site-q1store .q1s-hero-visual__qr { grid-area: 4 / 13 / 21 / 21; }
    body.site-q1store .q1s-hero-visual__arrow { grid-area: 8 / 9 / 21 / 14; }
}

/* A ilustracao do hero: largura cheia da coluna, travada em 620px. Nos
   cards de recurso a ilustracao preenche a midia 16/9 (`q1s-resource__media`
   e do DS; o tamanho do desenho e especifico desta pagina). */
body.site-q1store .r5-art {
    display: block;
    width: 100%;
    height: auto;
}

body.site-q1store .r5-art-hero {
    max-width: 620px;
    margin: 0 auto;
}

body.site-q1store .q1s-resource__media .r5-art {
    aspect-ratio: 16 / 9;
}

/* Faixa de atalhos --------------------------------------------------------- */

/* A emenda com o hero SEM margem negativa: a faixa pinta o azul do hero nos
   primeiros `--q1s-strip-overlap` do proprio fundo (no maximo metade da faixa), e o cartao (que vem
   depois, na ordem do DOM) fica por cima dele. Assim a altura do texto do
   hero nao interfere: o hero termina onde o texto termina e o cartao nunca
   sobe sobre ele. */
body.site-q1store .r5-strip {
    position: relative;
    background: linear-gradient(
        to bottom,
        var(--q1s-hero-bg) 0,
        var(--q1s-hero-bg) min(var(--q1s-strip-overlap), 50%),
        transparent min(var(--q1s-strip-overlap), 50%)
    );
}

/* O cartao, os itens e os icones da faixa vivem no DS (`q1s-strip__*`):
   mesma composicao, vocabulario do sistema. Aqui fica so a sobreposicao na
   emenda do hero, que e posicionamento especifico desta pagina. */

/* Grade de recursos e motivos ------------------------------------------------ */

/* Na variante `wide` (pagina /recursos) o texto fica na coluna da direita,
   alinhado pela base do titulo. */
body.site-q1store .q1s-section-head--split .q1s-section-head__aside {
    padding-bottom: 0.35rem;
}

/* Os cards de recurso, os motivos, os segmentos e os pontos do CTA vivem no
   DS (`q1s-resource`, `q1s-reason`, `q1s-seg*`, `q1s-cta-points`): mesma
   composicao, vocabulario do sistema. */

/* O grafico ao lado dos pontos do CTA: tamanho fixo, o resto e do DS. */
body.site-q1store .q1s-cta-points .r5-art {
    flex: none;
    width: 56px;
    height: 56px;
}

/* Cabecalho e rodape: assinatura completa ---------------------------------- */

/* O mockup mostra a assinatura COMPLETA ("Q1Store" + "QR • CATALOGO • LOJA"),
   nao so o simbolo quadrado. O simbolo continua sendo o favicon e a imagem de
   compartilhamento (`q1store.svg`), entao a assinatura entra como BACKGROUND
   do link da marca e do bloco do rodape: e decorativa, nao entra na arvore de
   acessibilidade, e o nome do link continua vindo do `alt` da imagem.

   O caminho e relativo (`../../img/...`: sobe de `css/brands/` para
   `assets/`) de proposito — resolve a partir desta folha, sem depender da
   baseURL da requisicao. */
body.site-q1store .r5-header nav > a:first-child { gap: 0.4rem; }

/* Cabecalho: a assinatura e um SEGUNDO elemento, irmao do simbolo dentro do
   link (flex), em vez de background + padding num <img>. Fica fora da arvore
   de acessibilidade (conteudo vazio) e o tamanho vem da proporcao do SVG
   (300x76), entao nao ha deslocamento em pixels para quebrar. */
body.site-q1store .r5-header nav > a:first-child::after {
    content: "";
    flex: none;
    height: 44px;
    aspect-ratio: 300 / 76;
    background: url("../../img/sites/q1store-wordmark.svg") no-repeat center / contain;
}

/* Rodape: o `<img class="r5-logo">` vem do layout compartilhado
   (layouts/public.php) e continua sendo so o simbolo. A assinatura nao e mais
   encostada nele por background/padding; para voltar a aparecer ao lado, o
   layout precisa de um segundo elemento (veja o relatorio de integracao). */

/* Rodapé: o `<img class="r5-logo">` vem do layout compartilhado (layouts/public.php)
   e só tem o símbolo; a assinatura é pintada como fundo. DÍVIDA CONHECIDA: trocar
   por um elemento próprio no layout quando o wordmark virar dado da marca
   (Config\Sites `logo_wordmark`) — ver docs/PENDENCIAS.md. */
body.site-q1store .r5-footer .r5-logo {
    width: 190px;
    height: 48px;
    background: url("../../img/sites/q1store-wordmark-light.svg") no-repeat left center / contain;
    object-position: -9999px 0; /* esconde o simbolo da sacola; fica so a assinatura */
    padding: 0;
    max-width: 100%;
}