:root {
    --gg-yellow: #ffcb2d;
    --gg-dark: #30343b;
    --gg-muted: #6c757d;
    --card-radius: 1.25rem;
}

body {
    background: #f5f7fb;
}

.brandbar {
    border-bottom: 1px solid rgba(0,0,0,.05);
    background: #fff;
}

.brand-logo {
    font-weight: 800;
    letter-spacing: .5px;
    color: var(--gg-dark);
    text-transform: uppercase;
}

.brand-logo .seed {
    color: var(--gg-yellow);
    margin: 0 .25rem;
}

.search-wrap {
    max-width: 520px;
}

.app-card {
    border: 0;
    border-radius: var(--card-radius);
    box-shadow: 0 8px 28px rgba(43,55,86,.08);
    transition: transform .25s ease, box-shadow .25s ease;
    background: #fff;
}

.app-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(43,55,86,.12);
}

/* 🔥 Ícone maior */
.app-icon-box {
    width: 90px;
    height: 90px;
    border-radius: 1rem;
    background: #f0f2f7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.app-icon-box img {
    width: 75px;
    height: 75px;
    object-fit: contain;
}

/* 🛍️ Botões das lojas com tamanho fixo e igual */
.store-badge {
    height: 40px;
    object-fit: contain;
}

/* Ajuste automático para telas pequenas */
@media (max-width: 576px) {
    .app-icon-box {
        width: 100px;
        height: 100px;
        border-radius: 1.5rem;
    }
    .app-icon-box img {
        width: 90px;
        height: 90px;
    }
    .store-badge {
        height: 40px;
    }
}

.footer {
    color: var(--gg-muted);
    font-size: .95rem;
}

.badge-play {
    content: url('assets/img/google-play.png');
}

.badge-appstore {
    content: url('assets/img/apple-store.png');
}
/* ===== Hover/Focus dos botões das lojas ===== */
.store-badge {            /* mantém o tamanho definido */
    height: 40px;
    max-width: 100%;
    object-fit: contain;
    display: block;
    border-radius: .6rem;     /* cantos arredondados p/ sombra ficar suave */
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    cursor: pointer;
}

/* Efeito over (hover) e teclado (focus-visible) */
a:hover .store-badge,
a:focus-visible .store-badge {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 12px 24px rgba(0,0,0,.18);
    filter: brightness(1.05) saturate(1.1);
}

/* Clique/active dá um feedback rapidinho */
a:active .store-badge {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 6px 16px rgba(0,0,0,.2);
}

/* Acessibilidade: foco visível no link */
a:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: 3px;
    border-radius: .7rem;
}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
    .store-badge {
        transition: none;
    }
}
/* ===== Header empilhado no celular (logo em cima, busca embaixo) ===== */
@media (max-width: 576px) {
    .brandbar {
        padding-top: .75rem;        /* afasta a logo do topo */
        padding-bottom: .5rem;
    }

    .brandbar .container {
        flex-direction: column;     /* empilha */
        align-items: stretch;
        gap: .5rem;
    }

    .brand-logo {
        font-size: 1.6rem;
        line-height: 1.1;
    }

    .search-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: .35rem;         /* respiro entre logo e busca */
    }

    /* NÃO deixar o ícone quebrar para cima do input */
    .search-wrap .input-group {
        width: 100%;
        flex-wrap: nowrap;          /* mantém ícone e input na mesma linha */
    }
    .search-wrap .input-group-text {
        flex: 0 0 auto;             /* largura só do conteúdo (o ícone) */
    }
    .search-wrap .form-control {
        flex: 1 1 auto;             /* ocupa o restante */
        width: 1%;                  /* evita forçar quebra; deixa o flex calcular */
        min-width: 0;               /* impede overflow do flex item */
    }
}
/* ===== Alinhar ícone com o NOME do app no celular ===== */
@media (max-width: 576px) {
    /* já garante que as colunas do card começam pelo topo */
    .app-card .row {
        align-items: flex-start !important;
    }

    /* zera qualquer deslocamento do título */
    .app-card h2 {
        margin-top: 0;        /* cola o título no topo da coluna */
        line-height: 1.25;    /* deixa compacto */
    }

    /* mantém o parágrafo logo abaixo do título, sem “empurrar” pra baixo */
    .app-card p {
        margin-top: .25rem;
    }

    /* garante que o ícone não tenha “respiro” extra no topo */
    .app-icon-box {
        align-items: center;  /* centraliza o logo dentro da caixinha */
        padding-top: 0;       /* se existir em alguma versão anterior */
        margin-top: 0;        /* evita qualquer offset */
    }
}