/* ═══════════════════════════════════════
   Birthday Widget — Gallery CSS
   ═══════════════════════════════════════ */

/* ── Botão "Carregar mais 30" (paginação real de Integrantes) ──
   Classe própria, separada de .bwg-mobile-mais de propósito: aquele botão
   é removido e recriado pelo limitador de mobile/tablet a cada resize
   (aplicarLimite), o que apagaria este junto se compartilhasse a classe.
   As cores/tipografia vêm dos mesmos controles "Ver mais" do Elementor
   (selectors já apontam pros dois), só o layout de wrapper é próprio, sem
   herdar as regras condicionais por breakpoint do outro botão.

   Dois detalhes que faltavam e causaram o bug visto no editor (botão
   gigante e no TOPO do grid, antes dos cards):
   - "order" — o grid usa CSS order pra sequenciar os cards (1, 2, 3...);
     sem um order aqui, o item cai no valor padrão (0) e o grid o
     posiciona ANTES de tudo que tem order positivo, não importa a ordem
     real no DOM. order:9999 garante que fique sempre por último.
   - "align-self: start" — sem isso, o item (sozinho numa linha do grid)
     esticava pra preencher a altura da linha, e o botão (dentro de um
     flex com align-items padrão = stretch) esticava junto, virando uma
     cápsula enorme em vez de um botão normal. */
.bwg-carregar-mais {
    grid-column: 1 / -1;
    order: 9999;
    align-self: start;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    width: 100%;
}
.bwg-carregar-mais button {
    border-radius: 999px;
    align-self: center;
}

/* ── Botão "Ver mais" local (limitador mobile/tablet) ──
   Mesmo bug do botão acima, só que aqui as regras de layout ficam
   espalhadas em vários breakpoints diferentes (cada um com seu próprio
   .bwg-mobile-mais) — e nenhum deles tinha o align-items/align-self que
   evita o esticamento. Regra base, sem media query, corrige em todos de
   uma vez em vez de repetir em cada bloco. */
.bwg-mobile-mais {
    align-items: center;
}
.bwg-mobile-mais button {
    align-self: center;
}

/* ── Container ── */
.bwg-wrap {
    background: #f4f1f8;
    border-radius: 14px;
    padding: 24px;

    /* Escala de espaçamento do card, consolidada aqui — antes cada
       breakpoint (base/≤1024px/≤767px) repetia um conjunto de valores
       calibrado à mão e independente dos outros (padding do
       .bwg-card-content + o "left" de cada campo), sem nenhuma relação
       entre eles, o que era a causa da inconsistência relatada. Os
       valores em si continuam os mesmos de antes — só passaram a viver
       num só lugar por breakpoint, então ajustar um não desalinha os
       outros campos do mesmo card sem querer. */
    --bwg-card-content-padding: 20px 20px 16px 108px;
    --bwg-card-field-left: 1rem;
    --bwg-card-email-left: 0.8rem;
}

/* ── Top bar: Mês | Busca | Área ── */
.bwg-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

/* Invisível pro layout por padrão — os filhos (.bwg-filtrar-group,
   .bwg-slot-mes, .bwg-drop-wrap da área) se comportam como se estivessem
   direto dentro de .bwg-top, preservando 100% do comportamento já
   existente em tablet/mobile. Só vira um flex container de verdade no
   desktop (ver @media min-width:1025px), onde a busca precisa ficar
   sozinha na própria linha pra alinhar com a coluna do grid. */
.bwg-outros-controles {
    display: contents;
}

/* Mesma lógica: invisível pro layout por padrão, só vira um flex
   container de verdade no desktop (ver @media min-width:1025px), pra
   mês/A-Z + área ocuparem juntos a largura exata da 3ª coluna do grid. */
.bwg-mes-area-group {
    display: contents;
}

/* ── Busca ── */
.bwg-busca {
    flex: 1;
    min-width: 180px;
    display: flex;
    align-items: center;
    /* Era space-between: com só 2 filhos (ícone + input) e espaço sobrando
       na caixa, space-between empurra os dois pras pontas opostas — o que
       deixava o controle Elementor "Distância entre ícone e texto" (gap)
       sem efeito visível nenhum, sempre vencido pelo espaço distribuído.
       flex-start + input com flex:1 (abaixo) faz o gap ser realmente o
       único espaçamento entre eles, com o input ocupando o resto. */
    justify-content: flex-start;
    gap: 8px;
    padding: 0 16px;
    height: 44px;
    background: #fdf0f7;
    border: 1.5px solid #e8a0c8;
    border-radius: 10px;
}
.bwg-busca input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #c080a8;
    width: 100%;
    flex: 1;
    min-width: 0;
}
.bwg-busca input::placeholder { color: #c080a8; }
.bwg-busca input:focus { outline: none !important; box-shadow: none !important; color: #333; }
.bwg-busca svg { flex-shrink: 0; }
.bwg-busca-icon { flex-shrink: 0; display: flex; align-items: center; color: #b5005b; }
.bwg-busca-icon svg { display: block; }
.bwg-busca-icon i { line-height: 1; }

/* ── Feedback visual de carregamento (heurística de Nielsen: visibilidade
   do status do sistema) — busca/filtro podem precisar buscar centenas de
   pessoas via AJAX antes de filtrar; sem isso, parecia que a busca não
   fazia nada por vários segundos.
   Girar o próprio ícone de lupa (versão anterior) passava despercebido —
   não lê como "carregando" e, em buscas rápidas, nem chegava a completar
   um giro visível. Troca por um spinner de anel dedicado (padrão comum de
   loading), que substitui o ícone enquanto carrega. */
.bwg-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2.5px solid rgba(181, 0, 91, 0.25);
    border-top-color: #b5005b;
    border-radius: 50%;
    flex-shrink: 0;
    animation: bwg-spin 0.7s linear infinite;
}
.bwg-busca.bwg-carregando .bwg-busca-icon { display: none; }
.bwg-busca.bwg-carregando .bwg-spinner { display: block; }
@keyframes bwg-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.bwg-carregar-mais button[disabled] {
    opacity: 0.6;
    cursor: default;
}
.bwg-grid-carregando-msg {
    grid-column: 1 / -1;
    padding: 24px 0;
    text-align: center;
    color: #888;
    font-size: 13px;
}
.bwg-erro-msg {
    grid-column: 1 / -1;
    padding: 10px 16px;
    margin-top: 8px;
    text-align: center;
    color: #b5005b;
    background: #fdeef4;
    border-radius: 8px;
    font-size: 13px;
}
/* Estado vazio: busca/filtro sem nenhum resultado — antes a área de
   cards só ficava em branco, sem indicar se travou, se ainda estava
   carregando, ou se realmente não achou ninguém. */
.bwg-vazio-filtro {
    grid-column: 1 / -1;
    padding: 32px 16px;
    text-align: center;
    color: #888;
    font-size: 14px;
}
/* Mensagem de carregamento perto dos cards — complementa o spinner
   discreto do ícone da busca (que fica longe do dropdown de área/mês
   recém-clicado e passava despercebido em filtros mais demorados). */
.bwg-carregando-filtro-msg {
    padding: 16px 0;
    text-align: center;
    color: #E50876;
    font-size: 13px;
}
/* Botão "Limpar filtros" — ícone "x" dentro da própria busca (opção
   aprovada pelo cliente entre 3 alternativas), só aparece via JS quando
   algum filtro não-padrão está ativo. Fica antes do <input> no HTML de
   propósito: .bwg-busca é row-reverse (ver comentário no PHP), então
   "antes no DOM" = mais à DIREITA na tela, depois do texto digitado. */
.bwg-limpar-filtros {
    display: none;
    align-items: center;
    justify-content: center;
    /* appearance:none — sem isto, o <button> mantém a aparência nativa
       do navegador por baixo do CSS (background:none só zera a camada
       CSS, não a "pintura" própria do botão). É isso que fazia o hover
       aparecer como um quadrado sólido colado, em vez de nada. */
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    border-radius: 50%;
    /* Alvo de toque real de ~40px (14px do ícone + 13px de padding em
       cada lado) — 2px de padding media apenas 18x18px, bem abaixo do
       mínimo recomendado (WCAG 2.5.5 / Apple HIG / Material: 44px). O
       ícone continua visualmente pequeno; só a área clicável cresce. */
    padding: 13px;
    margin: -13px;
    color: #DF007C;
    cursor: pointer;
    flex-shrink: 0;
}
.bwg-limpar-filtros:hover,
.bwg-limpar-filtros:focus,
.bwg-limpar-filtros:active {
    background: transparent !important;
    color: #993556;
}

/* ── Dropdowns ── */
.bwg-drop-wrap { position: relative; }
.bwg-drop-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    height: 44px;
    background: #ffffff;
    border: 1.5px solid #e8e8e8;
    border-radius: 10px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s;
}
.bwg-drop-btn:hover { border-color: #c0a0cc; }
.bwg-drop-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.bwg-drop-chevron {
    transition: transform 0.2s;
    /* Empurra a seta pro fim do botão mesmo quando o texto é curto
       (ex: "Janeiro") — sem isso, ela ficava colada no texto, com um
       vão vazio sobrando à direita dentro da caixa (que tem largura
       mínima de 180px). "Todas as Áreas" só parecia certo porque o
       texto, mais comprido, já preenchia a caixa quase inteira sozinho. */
    margin-left: auto;
}
.bwg-drop-wrap.open .bwg-drop-chevron { transform: rotate(180deg); }
.bwg-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    background: #ffffff;
    border: 1.5px solid #e8e8e8;
    border-radius: 10px;
    z-index: 99;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    display: none !important;
}
.bwg-drop-wrap.open .bwg-dropdown { display: block !important; }
.bwg-drop-search-wrap {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}
.bwg-drop-search {
    width: 100%;
    padding: 6px 10px;
    border: 1.5px solid #e8e8e8;
    border-radius: 8px;
    font-size: 13px;
    color: #333;
    outline: none;
    background: #fff;
}
.bwg-drop-search:focus { border-color: #c0a0cc; }
.bwg-drop-opt { padding: 10px 16px; font-size: 14px; color: #555; cursor: pointer; }
.bwg-drop-opt:hover,
.bwg-drop-opt:focus-visible { background: #f9f5fb; color: #7b2d8b; outline: none; }
.bwg-drop-opt.ativo { background: #7b2d8b; color: #ffffff; font-weight: 600; }


/* ── Grid ── */
.bwg-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 24px;
    padding-top: 20px;
}

/* ── Card outer ── */
.bwg-card-outer {
    position: relative;
    margin-top: 20px;
    min-width: 0;
}

/* ── Badge ── */
/* top/right/width/height/background/padding em !important: existe uma regra
   escopada só a este widget nesta página (.elementor-7723 .elementor-element
   .bwg-card-badge, origem não localizada — não está no CSS Personalizado do
   widget nem foi encontrada ainda em página/seção) com mais especificidade
   que o CSS do plugin, deslocando o badge (top:-30px em vez de -16px) e
   mudando o tamanho (49px/46px em vez de 54/38/36px). Em vez de depender de
   achar e remover essa regra, força-se aqui o mesmo valor com !important,
   do mesmo jeito que bwgSetVisivel() já faz em JS para o mesmo tipo de
   conflito com CSS do Elementor. */
.bwg-card-badge {
    position: absolute;
    top: -16px !important;
    right: 24px !important;
    width: 54px !important;
    height: 54px !important;
    /* background vem do controle Elementor "Cor de fundo" (badge_bg) */
    padding: 0 !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* sombra vem do controle Elementor "Sombra" (badge_shadow) */
    z-index: 10;
}
.bwg-badge-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* ── Card ── */
.bwg-card {
    background: #ffffff;
    border-radius: 24px;
    width: 100%;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 200px;
    overflow: visible;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.30), 0 1px 3px 1px rgba(0,0,0,0.15);
    border-bottom: 4px solid #7C1E7B;
    transition: transform 0.18s;
}
.bwg-card:hover { transform: translateY(-3px); }
/* transform vem do controle Elementor "Mover badge no hover" (selectors_dictionary) */
.bwg-card-outer:hover .bwg-card-badge { transition: transform 0.18s; }
.bwg-card-badge { transition: transform 0.18s; }

/* ── Pílula ── */
.bwg-card-pilula-wrap {
    position: absolute;
    left: 20px;
    top: 3.8rem;
    transform: translateY(-50%);
    z-index: 5;
}
.bwg-card-pilula {
    width: 80px;
    height: 160px;
    border-radius: 80px;
    background: linear-gradient(170deg, #d4b8e8 0%, #f0c0d8 100%);
    box-shadow: 0 6px 20px rgba(160,100,200,0.20);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    position: relative;
}
.bwg-card-pilula img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    image-rendering: high-quality;
}

/* ── Conteúdo ── */
.bwg-card-content {
    flex: 1;
    min-width: 0;
    padding: var(--bwg-card-content-padding);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bwg-card-top { display: flex; flex-direction: column; gap: 4px; }

.bwg-card-area {
    font-size: 13px;
    font-weight: 600;
    color: #e8005a;
    text-transform: uppercase;
    position: relative;
    left: var(--bwg-card-field-left);
    /* Mesmo ajuste já feito em .bwg-card-email (ver comentário lá): sem
       encolher a largura pelo mesmo tanto que o "left" desloca, a borda
       DIREITA deste campo also fica colada na borda do card em vez de
       respeitar o padding-right do content. Nome/Área nunca tinham
       recebido essa correção, só o e-mail. */
    width: calc(100% - var(--bwg-card-field-left));
    box-sizing: border-box;
}
.bwg-card-nome {
    font-size: 15px;
    font-weight: 600;
    color: #000;
    line-height: 1.3;
    position: relative;
    left: var(--bwg-card-field-left);
    width: calc(100% - var(--bwg-card-field-left));
    box-sizing: border-box;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.bwg-divider {
    border: none;
    border-top: 1.5px dashed #ddd;
    margin: 10px 0;
}

.bwg-card-email {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #000;
    margin-bottom: 10px;
    position: relative;
    left: var(--bwg-card-email-left);
    /* Sem isto, o "left" (que desloca a caixa inteira, não só o conteúdo)
       empurrava a borda DIREITA do e-mail junto — sobrava só ~7px até a
       borda do card em vez dos ~20px do padding, e a "..." do texto
       cortado ficava visualmente colada na borda arredondada. Encolher a
       largura pelo mesmo tanto que desloca devolve a margem direita sem
       perder o recuo à esquerda. Testado ao vivo: clearance volta de 7px
       pra 20px, igual aos outros campos. */
    width: calc(100% - var(--bwg-card-email-left));
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-transform: none;
}
.bwg-email-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.bwg-card-bottom { display: flex; align-items: center; gap: 8px; }

.bwg-card-aniversario { display: flex; flex-direction: column; min-width: 70px; }
.bwg-card-aniversario-label {
    font-size: 10px;
    color: rgba(0,0,0,0.45);
    text-transform: uppercase;
    font-weight: 300;
    position: relative;
    right: 4.5rem;
    bottom: 0.7rem;
}
.bwg-card-aniversario-data {
    color: #F47216;
    font-size: 18px;
    font-weight: 600;
    line-height: normal;
    position: relative;
    right: 4.6rem;
    bottom: 0.5rem;
}

.bwg-card-lider {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    /* min-width real (não 0): sem isso, .bwg-card-lider era o único item
       flex de .bwg-card-bottom sem piso nenhum, e absorvia sozinho
       qualquer déficit de espaço — sobrando 0-1 caractere visível do
       nome do líder em vez de simplesmente não caber. 64px é o
       suficiente pra um nome curto continuar legível; abaixo de 1366px
       esse cenário nem chega a ocorrer (líder já fica com display:none). */
    min-width: 64px;
    position: relative;
    right: 3.5rem;
    bottom: 0.4rem;
}
.bwg-lider-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bwg-lider-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bwg-lider-label { font-size: 10px; color: #e8005a; font-weight: 700; }
.bwg-lider-nome { font-size: 11px; color: #e8005a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bwg-card-plus {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 20px;
    cursor: pointer;
    background: #fff;
    text-decoration: none;
    padding: 0 0 2px 0;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.bwg-card-plus:hover {
    background: #7b2d8b;
    color: #fff;
    border-color: #7b2d8b;
    transform: scale(1.08);
}

.bwg-vazio {
    font-size: 14px;
    color: #aaa;
    padding: 24px 0;
    text-align: center;
    grid-column: 1 / -1;
}

/* ── Responsivo ── */
/* ═══════════════════════
   RESPONSIVO — Tablet (≤1024px)
═══════════════════════ */
/* ═══════════════════════════════
   RESPONSIVO — Tablet (≤1024px) — 2 colunas
═══════════════════════════════ */
@media (max-width: 1024px) {
    /* .bwg-grid (grid-template-columns/gap) removida daqui: totalmente
       sobrescrita, propriedade por propriedade, pelo bloco @media
       (min-width:768px) and (max-width:1024px) mais abaixo no arquivo,
       que é mais específico (.bwg-wrap .bwg-grid) e usa !important.
       As demais regras abaixo continuam ativas — não são tocadas por
       aquele bloco. */
    .bwg-card-badge { width: 38px !important; height: 38px !important; right: 12px !important; top: -12px !important; }
    .bwg-badge-img { width: 20px; height: 20px; }

    .bwg-card-pilula { width: 60px; height: 124px; border-radius: 50px; }
    .bwg-card-pilula-wrap { left: 12px; }
    .bwg-wrap {
        --bwg-card-content-padding: 12px 12px 10px 80px;
        --bwg-card-field-left: 0.6rem;
        --bwg-card-email-left: 0.3rem;
    }

    .bwg-card-nome { font-size: 13px; }
    .bwg-card-area { font-size: 11px; }
    .bwg-card-email { font-size: 11px; margin-bottom: 8px; }

    .bwg-card-aniversario-label { font-size: 9px; right: 2.5rem; bottom: 0.6rem; }
    .bwg-card-aniversario-data { font-size: 14px; right: 2.5rem; bottom: 0.4rem; }
    .bwg-card-lider { right: 1.8rem; bottom: 0.3rem; }
    .bwg-lider-label { font-size: 9px; }
    .bwg-lider-nome { font-size: 10px; }

    .bwg-card-plus { width: 26px; height: 26px; font-size: 16px; }
    .bwg-divider { margin: 7px 0; }
}

/* ── Tooltip do badge ── */
.bwg-badge-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #F47216;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 20px;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    box-shadow: none;
    border: 1.5px solid rgba(255,255,255,0.3);
    z-index: 20;
    width: max-content;
}
.bwg-card-badge:hover .bwg-badge-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Dropdown scroll ── */
.bwg-drop-list {
    max-height: 200px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.bwg-drop-list::-webkit-scrollbar { width: 4px; }
.bwg-drop-list::-webkit-scrollbar-track { background: transparent; }
.bwg-drop-list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* Botoes Aniversariantes / Integrantes */
.bwg-modo-btn {
    padding: 8px 20px;
    border-radius: 999px;
    border: 1.5px solid #DF007C;
    background: transparent;
    color: #DF007C;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s, color 0.18s;
    white-space: nowrap;
    flex-shrink: 0;
}
.bwg-modo-btn.bwg-modo-ativo {
    background: #DF007C;
    color: #fff;
}
.bwg-az-btn.bwg-az-ativo {
    border-color: #DF007C !important;
    background: #fff3f8 !important;
    color: #DF007C !important;
}
/* Estado "Z → A" (ordem invertida) — preenchido sólido, mesmo padrão
   visual do toggle Aniversariantes/Integrantes, pra diferenciar da
   direção padrão (A → Z) sem depender só do texto do botão. */
.bwg-az-btn.bwg-az-desc {
    background: #DF007C !important;
    color: #fff !important;
}

/* Ordem correta dos controles do topo */
.bwg-top .bwg-busca    { order: 1 !important; }
.bwg-top .bwg-modo-btn { order: 2 !important; }
.bwg-top .bwg-slot-mes { order: 3 !important; }
.bwg-top .bwg-drop-wrap { order: 4 !important; }

/* Filtrar por: label + botões agrupados */
.bwg-filtrar-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}
.bwg-filtrar-label {
    font-size: 12px;
    color: #888;
    font-weight: 500;
}
.bwg-filtrar-btns {
    display: flex;
    gap: 8px;
}

/* Responsivo tablet */
@media (max-width: 1024px) {
    .bwg-filtrar-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }
    .bwg-filtrar-label {
        text-align: center !important;
        width: 100% !important;
        white-space: nowrap !important;
    }
    .bwg-filtrar-btns {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }
}



/* ═══════════════════════════════════════════════════════════════
   INCORPORADO DO CUSTOM CSS DO ELEMENTOR — 29/07/2026
   ═══════════════════════════════════════════════════════════════
   Este bloco existia como "CSS Personalizado" no painel do widget
   no Elementor. Foi trazido para dentro do plugin para que passe a
   valer em qualquer instância do widget, em qualquer página, sem
   precisar ser colado manualmente a cada novo ambiente (produção,
   homologação, etc.).

   Ficou de propósito no FINAL do arquivo — é a mesma posição que
   ocupava antes (Custom CSS do Elementor é impresso depois do CSS
   do plugin), então o resultado visual é idêntico ao que já estava
   no ar.

   Removido na incorporação:
   - Uma regra fixada em #bwg-cracha-34f2967, que é o ID de um
     elemento Elementor de UMA página específica — não faz sentido
     dentro do plugin, que serve várias instâncias do widget.
   - Uma duplicata de "html, body { overflow-x: hidden }" que já
     aparece uma vez, sem media query, logo abaixo.

   Se precisar reverter para o estado anterior a esta incorporação,
   use o zip da versão 1.5.3 anterior a esta data.
   ═══════════════════════════════════════════════════════════════ */
html,
body {
    /* overflow-y explícito por causa de uma regra da especificação CSS que
       gera efeito colateral: quando overflow-x é hidden/scroll/auto e
       overflow-y não é definido, o navegador COMPUTA overflow-y como
       "auto" sozinho — mesmo sem nenhuma regra pedindo isso.
       Isso é o que gerava a barra de rolagem duplicada relatada: em algum
       lugar fora deste plugin (Elementor ou o tema) existe um container
       com overflow-x:hidden na mesma situação, e o "auto" resultante cria
       um segundo scrollbar aninhado dentro da página.
       Aqui, no html/body, o efeito é inofensivo (é a rolagem normal da
       página). Mas fixamos os dois eixos explicitamente para que esta
       regra do plugin nunca contribua para o mesmo problema em outro
       lugar do site. */
    overflow-x: hidden !important;
    overflow-y: visible !important;
    max-width: 100vw !important;
}

.bwg-drop-btn {
    border-radius: 36px !important;
}

.bwg-wrap .bwg-drop-btn:hover,
.bwg-wrap .bwg-drop-btn:focus-within,
.bwg-wrap .bwg-drop-btn:focus-visible,
.bwg-wrap .bwg-drop-wrap.open .bwg-drop-btn {
    /* border-color vem do controle Elementor "Cor da borda (hover / aberto)" (drop_hover_border_color) */
    border-width: 1px !important;
    border-style: solid !important;
    background: #FFF !important;
    box-shadow: 0 0 8px 0 rgba(229, 8, 118, 0.35) !important;
}

/* O botão de ordenação carrega .bwg-drop-btn junto com .bwg-az-btn, para
   herdar o formato dos dropdowns de Mês e Área — e herdava também o
   "background: #FFF" da regra de hover/foco acima.
   No estado "A → Z" isso é correto e foi conferido: .bwg-az-ativo pinta o
   texto de #DF007C, que continua legível sobre branco.
   No estado "Z → A" some: .bwg-az-desc pinta o texto de #fff, e o fundo
   virava branco no hover — texto branco sobre fundo branco, o rótulo
   desaparecia até tirar o mouse. Com o clique era pior: o botão fica focado
   depois de acionado, então :focus-within segurava o estado invisível.
   Aqui o preenchimento sólido é preservado nos quatro estados. O box-shadow
   da regra acima NÃO é sobrescrito de propósito: é ele que continua dando o
   retorno visual do hover, do mesmo jeito que no botão de modo ativo, que
   também não muda de cor ao passar o mouse. */
.bwg-wrap .bwg-az-btn.bwg-az-desc:hover,
.bwg-wrap .bwg-az-btn.bwg-az-desc:focus,
.bwg-wrap .bwg-az-btn.bwg-az-desc:focus-within,
.bwg-wrap .bwg-az-btn.bwg-az-desc:focus-visible,
.bwg-wrap .bwg-az-btn.bwg-az-desc:active {
    background: #DF007C !important;
    color: #fff !important;
}

.bwg-drop-chevron {
    stroke: #E50876 !important;
}

.bwg-wrap .bwg-drop-list::-webkit-scrollbar {
    width: 8px;
}

.bwg-wrap .bwg-drop-list::-webkit-scrollbar-track {
    background: #F3F3F3;
    border-radius: 999px;
}

.bwg-wrap .bwg-drop-list::-webkit-scrollbar-thumb {
    background: #7C1E7B;
    border-radius: 999px;
}

.bwg-wrap .bwg-drop-list::-webkit-scrollbar-thumb:hover {
    background: #5E1760;
}

.bwg-wrap .bwg-drop-list {
    scrollbar-width: thin;
    scrollbar-color: #7C1E7B #F3F3F3;
}

.bwg-wrap .bwg-drop-btn svg {
    stroke: #E50876 !important;
}

.bwg-wrap .bwg-busca {
    /* Visual (mantido do Custom CSS): borda, radius maior, ícone à direita.
       Removido daqui: order e a dupla min-width/max-width contraditória
       (360px vs 260px na mesma regra) — essa contradição, mais um width
       fixo de 320px competindo com o flex:1 do CSS base, é o que forçava
       a busca a quebrar linha em telas de notebook. */
    display: flex !important;
    height: 48px !important;
    padding: 0 16px !important;
    align-items: center !important;
    /* gap vem do controle Elementor "Distância entre ícone e texto" (busca_icon_gap) */
    border-radius: 60px !important;
    border: 1px solid #CDCDCD !important;
    background: #FFF !important;
    flex-direction: row-reverse !important;
}

.bwg-wrap .bwg-busca:focus-within {
    border-color: #E5007E !important;
    box-shadow: 0 0 0 4px rgba(229, 0, 126, 0.12) !important;
    border-radius: 999px !important;
}

.bwg-wrap .bwg-busca input {
    background: transparent !important;
    color: #333 !important;
    border: none !important;
}

.bwg-wrap .bwg-busca input::placeholder {
    color: #999 !important;
}

.bwg-wrap .bwg-busca-icon svg,
.bwg-wrap .bwg-busca-icon path {
    stroke: #E50876 !important;
    fill: #E50876 !important;
}

.bwg-wrap .bwg-drop-opt {
    color: black !important;
    background: transparent !important;
    font-weight: 400 !important;
    padding: 12px 16px !important;
    transition: background 0.15s ease;
}

/* hover da opção do dropdown vem dos controles Elementor drop_opt_hover_bg/drop_opt_hover_color */

.bwg-wrap .bwg-drop-opt.ativo {
    color: #E50876 !important;
    background: transparent !important;
    font-weight: 500 !important;
}

.bwg-wrap .bwg-drop-search {
    border-radius: 999px !important;
}

.bwg-drop-btn svg {
    width: 17px !important;
    height: 20px !important;
}

.bwg-wrap .bwg-email-icon,
.bwg-wrap .bwg-lider-icon {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

.bwg-busca input {
    /* Cor final acordada: fundo cinza claro, sem a borda transparente
       que outra regra deste arquivo também define para este elemento.
       padding-left:1px do Custom CSS original não tinha efeito perceptível
       e foi removido. */
    background-color: #F3F3F3 !important;
}

.bwg-wrap .bwg-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.bwg-wrap .bwg-card-pilula img {
    object-fit: cover !important;
    object-position: top center !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.bwg-divider {
    margin-left: 1rem !important;
}

.bwg-wrap .bwg-card-pilula {
    overflow: hidden !important;
}

.bwg-wrap .bwg-card-outer {
    transition: transform 0.18s;
}

.bwg-wrap .bwg-card-outer:hover {
    transform: translateY(-3px);
}

.bwg-wrap .bwg-card-outer:hover .bwg-card {
    transform: none !important;
}

.bwg-wrap .bwg-card-aniversario-data {
    text-align: center !important;
    display: block !important;
}

/* sombra do tooltip vem do controle Elementor "Sombra" (tooltip_shadow) */

.bwg-modo-btn {
    padding: 10px 28px !important;
}

.bwg-modo-btn:hover {
    transition: all 0.3s ease;
}

.bwg-az-btn {
    border-radius: 999px !important;
}

.bwg-wrap .bwg-card-outer:nth-child(3n) .bwg-badge-tooltip {
    left: auto !important;
    right: 0 !important;
    transform: translateX(0) translateY(0) !important;
}

.bwg-wrap .bwg-card-outer:nth-child(3n):hover .bwg-badge-tooltip {
    transform: translateX(0) translateY(-4px) !important;
}

/* POP-UP */

.bwg-card-plus {
    padding: 0 0.3px 0;
}

.bwg-cracha-header {
    padding-bottom: 10px !important;
    overflow: visible !important;
}

.bwg-cracha-onda {
    position: absolute !important;
    bottom: -92px !important;
    height: 80px !important;
    z-index: 3 !important;
}

.bwg-cracha-onda path {
    fill: #7C1E7B !important;
}

.bwg-cracha-body {
    padding-top: 25px !important;
}

.bwg-cracha-name-block {
    padding-bottom: 40px !important;
    word-break: break-word !important;
    white-space: normal !important;
    font-size: 20px;
}

.bwg-nome-longo .bwg-cracha-name-block {
    padding-bottom: 25px !important;
}

.bwg-cracha-nome {
    word-break: break-word !important;
    white-space: normal !important;
}

.bwg-cracha-avatar {
    width: 100px !important;
    height: 100px !important;
    border-radius: 60% !important;
    box-shadow: 0 0 0 3px #7C1E7B !important;
    position: relative !important;
    z-index: 6 !important;
}

.bwg-cracha-btn {
    margin-top: 15px !important;
    border-radius: 999px !important;
}

.bwg-cracha-label i,
.bwg-cracha-label svg,
.bwg-cracha-label span {
    width: 17px !important;
    height: 17px !important;
    margin-right: 8px !important;
}

.bwg-cracha-body > div:nth-child(3) .bwg-cracha-row > div:nth-child(2) .bwg-cracha-label i,
.bwg-cracha-body > div:nth-child(3) .bwg-cracha-row > div:nth-child(2) .bwg-cracha-label svg,
.bwg-cracha-body > div:nth-child(3) .bwg-cracha-row > div:nth-child(2) .bwg-cracha-label span {
    width: 21px !important;
    height: 21px !important;
}

.bwg-cracha-label {
    margin-bottom: 15px !important;
    font-family: "Open Sans" !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

.bwg-cracha-value {
    font-size: 12.5px !important;
}

.bwg-cracha-wrap {
    width: 380px !important;
}

@media (min-width: 1025px) {
    .bwg-mobile-mais {
        grid-column: 1 / -1 !important;
        display: flex !important;
        justify-content: center !important;
    }

    .bwg-mobile-mais button {
        border-radius: 999px !important;
    }

    .bwg-wrap .bwg-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    /* ── Barra de controles: uma linha, mesma altura ──────────────────
       Três defeitos medidos em produção (a 1900px de largura) e o que
       corrige cada um:

       1. A busca esticava até 1123px, porque tem flex-grow e nada a
          limitava — engolia todo o espaço sobrando da linha.
          → max-width limita o quanto ela cresce; abaixo desse valor ela
            continua encolhendo normalmente (em 1030px fica com 253px),
            então a linha nunca quebra.

       2. Os botões Aniversariantes/Integrantes ficavam 14px MAIS BAIXOS
          que o resto: o .bwg-filtrar-group empilha o label "Filtrar por:"
          (21px) acima dos botões, e o grupo inteiro era centralizado
          verticalmente — jogando os botões abaixo do eixo dos demais.
          → align-items:flex-end alinha todos pela BASE, então o label
            passa a sobrar acima sem deslocar mais nada.

       3. Três alturas diferentes na mesma linha: botão de modo 42px,
          A→Z e Área 44px, busca 48px.
          → tudo em 48px (a altura que a busca já tinha).

       Escopado em min-width:1025px de propósito: no tablet a barra é de
       3 linhas e no mobile é empilhada — lá esses valores não se aplicam. */
    /* A tentativa de alinhar a busca com a 1ª coluna do grid (linha
       própria, order:-1 + .bwg-outros-controles) foi abandonada a
       pedido do usuário — preferiu voltar pra tudo numa linha só.
       .bwg-outros-controles continua existindo no HTML (é
       display:contents por padrão, ver regra fora de media query), só
       não vira mais um flex container separado aqui.

       Mas "mesma linha" sozinho deixava a busca fora de posição: com
       justify-content:center, o que fica ALINHADO é o GRUPO inteiro
       (filtrar-group + busca + mês + área) — a busca em si só cai
       exatamente sobre um card se o que vem ANTES dela (filtrar-group)
       tiver a MESMA largura de uma coluna do grid. Testado ao vivo:
       com justify-content:center puro, a busca ficava ~11px deslocada
       da coluna do meio — pequeno, mas visível.

       Fix: filtrar-group (que já vem antes da busca, por causa do
       "order" definido mais acima no arquivo) ganha a largura exata de
       uma coluna do grid (mais a diferença entre o gap da barra, 12px,
       e o gap do grid, 24px). A busca — que já tem essa mesma largura,
       ver .bwg-wrap .bwg-busca max-width logo abaixo — passa a
       encostar exatamente no início da 2ª coluna, sem precisar de
       margin/position calculado à parte (testado: erro caiu de 11px
       pra 0px). justify-content some (não faz mais falta: a largura
       de filtrar-group já ocupa o espaço à esquerda da busca). */
    .bwg-wrap .bwg-top {
        align-items: flex-end !important;
        /* Causa raiz do desalinhamento (não só um ajuste fino): o gap desta
           barra era 12px, o do grid é 24px. Em vez de compensar essa
           diferença alargando/empurrando cada zona individualmente com
           +12px/-12px (frágil, cada peça dependia da matemática das outras
           — ver histórico de comentários abaixo), o gap da barra passa a
           ser IGUAL ao do grid aqui. Com gaps iguais, cada zona (filtrar/
           busca/mês+área) usa a MESMA largura de 1 coluna sem nenhuma
           compensação, e as 3 caem exatas sobre as 3 colunas do grid. */
        gap: 24px !important;
    }

    .bwg-wrap .bwg-filtrar-group {
        /* Antes: + 12px pra compensar o gap de 12px vs 24px do grid (ver
           comentário grande logo abaixo, escrito antes desta correção).
           Com .bwg-top já em gap:24px, essa compensação não é mais
           necessária — largura exata de 1 coluna, igual às outras 2 zonas. */
        width: calc((100% - 48px) / 3) !important;
        box-sizing: border-box !important;
        /* Grid de 1 coluna, em vez de flex-column: o label "Filtrar por:"
           e a linha de botões viram itens da MESMA coluna de grid, que se
           ajusta ao mais largo dos dois (os botões). Isso faz a borda
           ESQUERDA do label cair exatamente na borda esquerda de
           "Aniversariantes" — os dois compartilham a mesma largura de
           coluna, em vez de cada um ser alinhado (à direita) de forma
           independente, que juntava as bordas DIREITAS, não as esquerdas
           (o que ficava com o label acima de "Integrantes", não de
           "Aniversariantes" — pedido específico do cliente).
           justify-content:end empurra essa coluna única pro fim da
           largura total de .bwg-filtrar-group (perto da busca). */
        display: grid !important;
        grid-template-columns: max-content !important;
        justify-content: end !important;
        row-gap: 6px !important;
    }

    /* max-width da busca não é mais fixado aqui — virou o controle
       Elementor "busca_max_width" (280px de padrão no desktop), que
       antes existia mas nunca tinha efeito de verdade por causa desta
       mesma regra fixa (!important vencendo o valor não-important do
       controle, sempre). Mesmo problema documentado no mapeamento pro
       controle de altura/largura em geral — corrigido aqui pra este
       controle especificamente. */

    .bwg-wrap .bwg-modo-btn,
    .bwg-wrap .bwg-drop-btn {
        height: 48px !important;
    }

    /* Os botões Aniversariantes/Integrantes ficavam menores que
       .bwg-filtrar-group (que já tem a largura exata da 1ª coluna, ver
       acima) — sobrava espaço vazio à direita deles, então essa zona não
       terminava no mesmo lugar que o fim do 1º card. flex:1 em cada
       botão estica os dois pra preencher a largura toda do grupo. */
    .bwg-wrap .bwg-filtrar-btns {
        width: 100% !important;
    }
    /* Antes os botões Aniversariantes/Integrantes tinham flex:1 aqui —
       esticavam pra preencher a largura toda de .bwg-filtrar-group (que
       precisa ter a largura exata da 1ª coluna, ver acima, pro
       alinhamento da busca funcionar). Ficavam maiores do que o desenho
       original. Removido: os botões voltam ao tamanho natural (padding). */
    /* flex-end de propósito: pedido do cliente pra este par ficar colado
       no FIM da 1ª coluna (perto da busca), não no início — diferente do
       par A→Z/Área, que fica colado no INÍCIO da 3ª coluna (ver
       .bwg-mes-area-group). Cada par tem seu próprio lado, o meio de cada
       coluna fica vazio nos dois casos. */
    .bwg-wrap .bwg-filtrar-btns {
        justify-content: flex-end !important;
        /* Gap entre Aniversariantes/Integrantes era 8px (regra base,
           sem media query), enquanto A→Z/Área usa 12px (.bwg-mes-area-
           -group) — inconsistente entre os dois pares "colados", mesmo
           com o alinhamento geral já certo. Iguala ao valor do outro
           par, sem mexer em posição/ordem de nada. */
        gap: 12px !important;
    }
    /* O título "Filtrar por:" e a linha de botões agora são itens da
       MESMA coluna de grid (.bwg-filtrar-group virou display:grid, ver
       acima) — a coluna se ajusta ao mais largo dos dois (os botões), e
       texto à ESQUERDA (não à direita) faz a borda esquerda do título
       cair exatamente na borda esquerda de "Aniversariantes". Pedido
       específico do cliente: alinhar com o INÍCIO do botão, não com o
       fim do grupo (que ficava acima de "Integrantes" em vez de
       "Aniversariantes"). */
    .bwg-wrap .bwg-filtrar-label {
        display: block !important;
        text-align: left !important;
        width: 100% !important;
    }
    /* Mês/A-Z + Área juntos ocupam a largura exata da 3ª coluna do grid —
       mesmo raciocínio/matemática já testada ao vivo pra filtrar-group e
       busca (ver comentário grande acima): 2 deficits de gap (12px da
       barra vs 24px do grid) já foram compensados por elas duas, então
       esta 3ª zona já cai exatamente no início da 3ª coluna — só precisa
       da largura exata de 1 coluna, sem nenhum +12px extra. */
    /* A→Z e Área tinham flex:1 + width:100% aqui — esticavam pra
       preencher a largura toda da caixa (que precisa ter a largura exata
       da 3ª coluna, mesmo raciocínio do filtrar-group acima). Deixavam os
       dois maiores que o desenho original. Removido: cada um volta ao
       tamanho natural; justify-content:space-between mantém A→Z encostado
       no início e Área encostada no fim da caixa (que ainda termina
       exatamente no fim da 3ª coluna — só o que está DENTRO da caixa
       parou de esticar). Área ganha um mínimo de largura à parte, pedido
       explícito pra dar mais espaço aos nomes de área. */
    .bwg-wrap .bwg-mes-area-group {
        display: flex !important;
        /* Bug real: só no desktop este grupo vira uma caixa própria (nos
           outros breakpoints ele é display:contents e "some" do cálculo
           de order, deixando .bwg-slot-mes/.bwg-drop-wrap tomarem seu
           lugar, já com a orderm certa). Sem "order" aqui, ele empatava
           em 0 com .bwg-filtrar-group e — por vir depois no DOM — ainda
           assim ficava ANTES de .bwg-busca (order:1), porque empate de
           order é resolvido por ordem no DOM, não pela posição visual
           pretendida. Resultado: busca caía pro fim da linha (3ª posição
           visual) e este grupo ficava no meio, no lugar da busca. */
        order: 2 !important;
        width: calc((100% - 48px) / 3) !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        /* space-between empurrava "Todas as Áreas" pra ponta direita da
           caixa (que tem a largura de 1 coluna inteira), deixando um vão
           vazio entre ela e "A → Z". Referência do cliente: os dois ficam
           colados à ESQUERDA, com o espaço sobrando à direita — não
           esticados de ponta a ponta. */
        justify-content: flex-start !important;
    }
    .bwg-wrap .bwg-mes-area-group .bwg-drop-wrap {
        min-width: 180px !important;
    }
}

/* ── "Notebook estreito" (1025-1366px): esconde o Líder no card ──
   3 colunas nessa faixa deixam pouco espaço por card — nome quebrava em
   2 linhas (inconsistente com os outros cards) e e-mail/líder cortavam.
   Decisão do cliente: em vez de mexer em fonte/tamanho, esconder o Líder
   só nesta faixa (ele já não é essencial pro card — quem quiser, abre o
   crachá no "+"), dando o espaço que faltava pro nome/e-mail caberem
   numa linha só. Volta a aparecer normalmente a partir de 1367px. */
@media (min-width: 1025px) and (max-width: 1366px) {
    .bwg-wrap .bwg-card-lider {
        display: none !important;
    }
    /* O "+" só fica encostado na borda direita porque o Líder (ao lado,
       com flex:1) empurra ele pra lá — não tem alinhamento próprio.
       Escondendo o Líder, esse empurrão some e o "+" cola perto da data
       de aniversário. margin-left:auto restaura o mesmo efeito sem
       depender do Líder estar presente. */
    .bwg-wrap .bwg-card-plus {
        margin-left: auto !important;
    }
}

@media (max-width: 1366px) {
    /* ── Notebook: barra de controles em UMA linha só ──
       Antes havia aqui: 4 declarações de "order" contradizendo as já
       existentes no arquivo (busca ora era 1, ora 2, ora 3), e um
       "margin-left: 33.5rem" (536px) fixo em .bwg-filtrar-group — um
       valor calibrado no olho para uma largura específica de tela, que
       em qualquer outra largura de notebook empurrava tudo para fora
       da linha e forçava a quebra. Essa era a causa do bug relatado.

       A ordem correta (Filtrar por: → busca → mês → área) já está
       definida uma única vez, sem media query, mais acima no arquivo —
       não precisa ser repetida aqui.

       O que resolve o notebook não é reordenar nem empurrar com
       margem: é permitir que a busca ENCOLHA em vez de manter uma
       largura fixa brigando com os outros elementos por espaço. */
    .bwg-wrap .bwg-busca {
        flex: 1 1 220px !important;
        min-width: 0 !important;
    }

    /* Largura próxima da versão desktop (380px, ver regra base) — só um
       pouco menor pra sobrar respiro nas laterais em 1366px. Antes esse
       valor era 280px (100px mais estreito que o desktop) e ainda por
       cima levava um transform:scale(0.75) — os dois juntos deixavam o
       crachá pequeno e desproporcional sem necessidade: 380px de largura
       não corre risco nenhum de estourar um viewport de 1366px.

       O conteúdo do crachá (sem nenhum encolhimento) mede ~784px de
       altura. Em notebooks de 768px de altura de tela (a resolução mais
       comum nessa faixa), isso é ~16px mais alto que a tela inteira — e
       o overlay é position:fixed, sem scroll (overflow-y:visible), então
       sem tratamento o rodapé do crachá ficava cortado, inacessível.
       max-height + overflow-y resolve esse resto sem precisar encolher
       nada visualmente. */
    /* overflow-y:auto ficava no wrap inteiro (header + corpo) — a barra
       de rolagem nativa cortava reto por cima do header, bem em cima do
       botão fechar "x" e da onda decorativa. Tentativa 1 (display:flex no
       wrap) causou um bug PIOR em celular de verdade (relatado ao vivo,
       não reproduzido no Chrome desktop): uma faixa branca cobrindo a
       onda, o tipo de bug de empilhamento (z-index) que varia entre
       motores de navegador (Chrome vs Safari) — arriscado corrigir às
       cegas sem um iPhone real pra testar.
       Solução mais simples e segura: NÃO mexer no display do wrap (evita
       qualquer comportamento de flex/empilhamento diferente entre
       navegadores). Só o CORPO ganha altura máxima própria e rolagem —
       header e transição continuam em fluxo normal de bloco, exatamente
       como sempre foram, garantindo que ficam por cima da rolagem sem
       depender de z-index/flex pra isso. */
    .bwg-cracha-wrap {
        width: 360px !important;
        overflow: visible !important;
    }

    .bwg-cracha-body {
        max-height: calc(90vh - 210px) !important;
        overflow-y: auto !important;
    }

    .bwg-cracha-nome {
        font-size: 18px !important;
    }

    .bwg-cracha-value {
        font-size: 12px !important;
    }

    .bwg-cracha-label {
        font-size: 9px !important;
    }

    /* Correção anterior (líder cortado entre 1025px-1366px) escondia o
       líder por completo nesta faixa inteira, e compensava o espaço
       vazio resultante com justify-content:space-between — só que esse
       @media é (max-width:1366px), sem piso de 1025px, e telas de
       notebook comuns (1366px, 1280px) caem aqui: o líder sumia (e o
       space-between agia) no notebook/desktop, não só em tablet/mobile
       como deveria. O `min-width:64px` já dado a .bwg-card-lider (regra
       base acima) resolve o corte sozinho — não precisa mais escondê-lo
       nem recompensar o espaço aqui. Tablet/mobile continuam escondendo
       o líder e compensando o espaço pelas regras próprias delas, mais
       abaixo no arquivo. */

    /* O badge "aniversariante hoje" (54x54, top:-16px na base) passava
       por cima do rótulo de Área nesta faixa — sobrava só 25px de
       espaço (padding-top 20 + margin-top 5 da Área) pra um badge que
       desce até 38px do topo do card. Reduzido pro mesmo tamanho que o
       breakpoint ≤1024px já usa (comprovadamente sem esse problema),
       em vez de inventar um valor novo. */
    .bwg-card-badge {
        width: 38px !important;
        height: 38px !important;
        right: 12px !important;
        top: -16px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* ── Tablet: barra de controles em 3 linhas previsíveis ──
       O bloco anterior tentava caber tudo com min-width, max-width,
       flex-basis e box-sizing competindo em quase toda regra — 9
       declarações !important só para o container, sem que o resultado
       final fosse previsível. Reescrito como 3 linhas simples:

       1. "Filtrar por:" + botões Aniversariantes/Integrantes, centralizado
       2. Busca, ocupando a largura toda
       3. Mês + Área lado a lado, dividindo o espaço

       Cada linha ocupa 100% da largura do container — não há mais
       cálculo de porcentagem ou padding lateral duplicado do .bwg-wrap. */
    .bwg-wrap .bwg-top {
        flex-wrap: wrap !important;
        justify-content: center !important;
        row-gap: 14px !important;
    }

    .bwg-wrap .bwg-filtrar-group {
        width: 100% !important;
        align-items: center !important;
    }

    .bwg-wrap .bwg-filtrar-btns {
        justify-content: center !important;
    }

    .bwg-wrap .bwg-busca {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        order: 1 !important;
    }

    /* Une a altura da busca (controle Elementor "Altura" da seção
       Filtros — Busca) com os botões de dropdown/modo ao lado — sem
       isso, a busca fica 48px (valor do controle) enquanto os outros
       ficam na altura própria deles (44px o dropdown, ~41px os botões
       de modo), desalinhando a linha inteira. */
    .bwg-wrap .bwg-modo-btn,
    .bwg-wrap .bwg-drop-btn {
        height: 48px !important;
    }

    .bwg-wrap .bwg-slot-mes,
    .bwg-wrap .bwg-drop-wrap {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    .bwg-wrap .bwg-slot-mes .bwg-drop-btn,
    .bwg-wrap .bwg-drop-wrap .bwg-drop-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .bwg-wrap .bwg-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: 250px !important;
        column-gap: 18px !important;
        row-gap: 78px !important;
        width: 100% !important;
        max-width: 760px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
        justify-items: stretch !important;
        align-items: stretch !important;
    }

    .bwg-wrap .bwg-card-outer {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 250px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .bwg-wrap .bwg-card {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 250px !important;
        margin: 0 !important;
        padding-bottom: 82px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .bwg-wrap .bwg-card-content {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .bwg-wrap .bwg-card-top {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .bwg-wrap .bwg-card-nome {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    .bwg-wrap .bwg-card-email {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .bwg-wrap .bwg-card-lider {
        display: none !important;
    }
    .bwg-card-bottom {
        justify-content: space-between !important;
    }

    /* Antes era "display:none !important" aqui — escondia o botão "Ver
       mais" por completo no tablet. Com a paginação real (30 carregados
       de cada vez, e o limitador local mostrando só 6 por vez dentro
       desse lote), sem esse botão o usuário ficava travado vendo só 6
       pessoas no tablet, sem nenhum jeito de ver mais — bug real
       reportado ao vivo. Trocado por display:flex (mesmo padrão usado
       nos outros breakpoints), pra mostrar E centralizar certo. */
    /* grid-column: 1 / -1 tira o botão do fluxo de 2 colunas do grid —
       sem isso ele virava um item de grid normal, ocupando sozinho uma
       célula vazia (a coluna 1 da linha seguinte), sem nenhuma relação
       visual com os cards ao redor. Mesma regra já usada no desktop
       (ver @media min-width:1025px), só faltava aqui. */
    .bwg-mobile-mais {
        /* Causa raiz corrigida na origem: o botão agora é inserido DEPOIS
           do grid (irmão), não mais dentro dele (ver JS em
           elementor-gallery-class.php) — não herda mais a altura fixa de
           linha do grid (250px aqui, pensada pra pílula/avatar do card).
           display:flex + justify-content:center só centraliza o botão
           dentro da largura normal do .bwg-wrap. */
        display: flex !important;
        justify-content: center !important;
        /* Nem colado (sem separação de "próxima ação" vs. conteúdo do
           card) nem o vão de sobra do bug antigo — heurística de
           agrupamento visual: gap claramente maior que o dos cards entre
           si, sem virar uma seção à parte. */
        margin-top: 40px !important;
    }

    .bwg-wrap .bwg-card-bottom {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 18px !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 58px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .bwg-wrap .bwg-card-aniversario {
        position: absolute !important;
        left: 20px !important;
        bottom: 0 !important;
        display: block !important;
        width: 82px !important;
        min-width: 82px !important;
        max-width: 82px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        transform: none !important;
        z-index: 2 !important;
        box-sizing: border-box !important;
    }

    .bwg-wrap .bwg-card-aniversario-label {
        position: static !important;
        display: block !important;
        width: 100% !important;
        margin: 0 0 5px 0 !important;
        padding: 0 !important;
        text-align: center !important;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        line-height: 1.2 !important;
        transform: none !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    .bwg-wrap .bwg-card-aniversario-data {
        position: static !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        line-height: 1.2 !important;
        transform: none !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    .bwg-wrap .bwg-card-plus {
        position: absolute !important;
        right: 18px !important;
        bottom: 7px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
        z-index: 3 !important;
    }

    .bwg-wrap .bwg-card-outer:nth-child(2n) .bwg-badge-tooltip {
        left: auto !important;
        right: 0 !important;
        transform: translateX(0) translateY(0) !important;
    }

    .bwg-wrap .bwg-card-outer:nth-child(2n):hover .bwg-badge-tooltip {
        transform: translateX(0) translateY(-4px) !important;
    }

    /* "overflow: hidden" (shorthand) equivale a overflow-y:hidden — como
       esta regra vem depois da versão notebook (que usa max-height:90vh
       + overflow-y:auto pra evitar cortar o rodapé do crachá), ela vencia
       e voltava a cortar, sem sequer ter um max-height próprio aqui. Mesmo
       tratamento aplicado. */
    /* Mesmo tratamento do breakpoint de notebook acima (ver comentário
       grande lá): display:flex no wrap causou um bug pior num iPhone real
       (faixa branca cobrindo a onda, não reproduzido no Chrome desktop).
       Wrap volta a ficar em fluxo normal de bloco; só o corpo ganha altura
       máxima e rolagem própria. */
    .bwg-cracha-wrap {
        width: 400px !important;
        overflow: visible !important;
    }

    .bwg-cracha-body {
        max-height: calc(90vh - 230px) !important;
        overflow-y: auto !important;
    }

    .bwg-cracha-nome {
        font-size: 17px !important;
        word-break: break-word !important;
        white-space: normal !important;
    }

    .bwg-cracha-avatar {
        width: 90px !important;
        height: 90px !important;
        border-radius: 60% !important;
        box-shadow: 0 0 0 3px #7C1E7B !important;
        position: relative !important;
        z-index: 6 !important;
    }

    .bwg-cracha-body {
        padding: 25px 16px 16px !important;
        gap: 12px !important;
    }

    .bwg-cracha-btn {
        padding: 12px !important;
        font-size: 12px !important;
        margin-top: 15px !important;
    }

    .bwg-cracha-header {
        padding-bottom: 10px !important;
        overflow: visible !important;
    }

    .bwg-cracha-onda {
        position: absolute !important;
        bottom: -92px !important;
        height: 80px !important;
        z-index: 3 !important;
    }

    .bwg-cracha-name-block {
        padding-bottom: 40px !important;
    }

    .bwg-nome-longo .bwg-cracha-name-block {
        padding-bottom: 25px !important;
    }
}

/* ═══════════════════════════════
   RESPONSIVO — Mobile (≤767px) — 1 coluna
═══════════════════════════════ */
/* ── Movido pro FIM do arquivo de propósito ──────────────────────────
   Bug real encontrado em produção: ".bwg-wrap .bwg-grid" aqui embaixo
   (grid-template-columns: minmax(0, 1fr) !important) tem a MESMA
   especificidade e o MESMO !important que ".bwg-wrap .bwg-grid" da seção
   "incorporado do Custom CSS do Elementor" (repeat(3, ...) !important,
   mais acima no arquivo, sem media query — sempre ativo). Quando os dois
   empatam em especificidade+importância, quem vier DEPOIS no arquivo
   vence — em QUALQUER largura de tela, mesmo dentro de uma media query
   que só bate no mobile. Da primeira vez que este bloco foi consolidado,
   ele foi parar ANTES da seção "repeat(3)" — isso fazia o mobile herdar
   3 colunas do desktop e os cards ficarem sobrepostos. A correção não é
   reescrever o CSS: é manter este bloco fisicamente depois de qualquer
   regra sem media query que toque nos mesmos seletores. */
@media (max-width: 767px) {
    .bwg-wrap { padding: 14px; border-radius: 10px; }

    /* Top bar — busca em cima, dropdowns lado a lado */
    .bwg-top {
        flex-direction: column;
        /* 20px (era 8px): espaço claro ENTRE os 3 grupos (Filtrar por /
           Busca / Mês+Área) — pedido do cliente depois de reconsiderar as
           fileiras com rolagem horizontal (voltou a empilhar 100% de
           largura, mas com respiro entre os grupos desta vez). O espaço
           DENTRO de cada grupo (Aniversariantes↔Integrantes, A→Z↔Área)
           continua menor — ver .bwg-filtrar-btns/.bwg-mes-area-group. */
        gap: 20px;
        margin-bottom: 20px;
        align-items: stretch;
    }
    .bwg-busca { min-width: 100%; order: 0; }
    .bwg-drop-wrap { flex: 1; }
    /* Mesma altura da busca (controle Elementor "Altura", 48px por
       padrão) — sem isso os dropdowns e os botões Aniversariantes/
       Integrantes ficavam visivelmente mais baixos que a busca. */
    .bwg-modo-btn,
    .bwg-drop-btn {
        height: 48px !important;
    }
    .bwg-drop-btn {
        width: 100%;
        justify-content: space-between;
        padding: 0 12px;
        font-size: 13px;
    }
    .bwg-dropdown { min-width: 100%; }

    /* Grid — 1 coluna */
    .bwg-grid { grid-template-columns: minmax(0, 1fr); gap: 44px 0; }

    /* Card — min-width evita que, em telas muito estreitas, o card
       encolha a ponto da pílula (54px + 10px de recuo) não caber mais
       direito e vazar pra fora da curva arredondada do canto. */
    .bwg-card { min-height: 155px; min-width: 280px; }

    /* Badge */
    .bwg-card-badge { width: 36px !important; height: 36px !important; right: 10px !important; top: -12px !important; }
    .bwg-badge-img { width: 18px; height: 18px; }

    /* Pílula */
    .bwg-card-pilula-wrap { left: 10px; }
    .bwg-card-pilula { width: 54px; height: 112px; border-radius: 44px; }

    /* Conteúdo */
    .bwg-wrap {
        --bwg-card-content-padding: 12px 10px 10px 72px;
        --bwg-card-field-left: 0.3rem;
        --bwg-card-email-left: 0.2rem;
    }
    .bwg-card-nome { font-size: 12px; }
    .bwg-card-area { font-size: 10px; }
    .bwg-card-email { font-size: 10px; margin-bottom: 8px; }
    .bwg-email-icon { width: 18px; height: 18px; font-size: 10px; }

    /* Data */
    .bwg-card-aniversario-label { font-size: 8px; right: auto; bottom: auto; }
    .bwg-card-aniversario-data { font-size: 12px; right: auto; bottom: auto; }

    /* Líder */
    .bwg-card-lider { right: auto; bottom: auto; gap: 4px; }
    .bwg-lider-label { font-size: 8px; }
    .bwg-lider-nome { font-size: 9px; }

    /* Divisor */
    .bwg-divider { margin: 6px 0; }

    /* Botão + */
    .bwg-card-plus { width: 24px; height: 24px; font-size: 14px; }

    .bwg-modo-btn {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
    /* Mês/A→Z + Área: de volta a empilhados, 100% de largura cada — a
       fileira com rolagem horizontal (chips) foi reconsiderada depois de
       testar ao vivo (barra de rolagem feia mesmo escondida, e sem pista
       nenhuma de que dava pra arrastar em telas mais estreitas). O
       respiro ENTRE este grupo e os outros vem do gap de .bwg-top acima;
       aqui dentro, só o espaço pequeno entre Mês/A→Z e Área. */
    .bwg-mes-area-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .bwg-az-btn {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
    .bwg-slot-mes {
        width: 100% !important;
    }
    .bwg-slot-mes .bwg-drop-btn,
    .bwg-slot-mes .bwg-az-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    .bwg-mes-area-group .bwg-drop-wrap {
        width: 100% !important;
    }
    .bwg-mes-area-group .bwg-drop-wrap .bwg-drop-btn {
        width: 100% !important;
    }
    .bwg-mes-area-group .bwg-dropdown {
        min-width: 100% !important;
    }

    .bwg-filtrar-group {
        width: 100% !important;
        align-items: flex-start !important;
    }
    .bwg-filtrar-label {
        white-space: nowrap !important;
    }
    /* Aniversariantes/Integrantes: mesmo padrão acima — empilhados, 100%
       de largura cada, gap pequeno só entre os dois. */
    .bwg-filtrar-btns {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .bwg-filtrar-btns .bwg-modo-btn {
        width: 100% !important;
        text-align: center !important;
    }

    .bwg-wrap .bwg-top {
        flex-direction: column !important;
        align-items: stretch !important;
        margin-left: 0 !important;
    }

    .bwg-wrap .bwg-busca {
        width: 100% !important;
        min-width: auto !important;
        max-width: 100% !important;
        /* flex resetado de propósito: o bloco @media (max-width:1366px) mais
           acima define "flex: 1 1 220px" para permitir que a busca ENCOLHA na
           barra de uma linha do notebook. Lá o .bwg-top é row, então esse 220px
           é flex-basis no eixo HORIZONTAL (largura) — correto.
           Aqui no mobile o .bwg-top vira column: o eixo principal passa a ser
           o VERTICAL, e o mesmo flex-basis de 220px passa a valer como ALTURA,
           esticando o campo de busca num "oval" de 220px de altura (e vencendo
           até o "height: 48px !important", porque em flex o flex-basis do eixo
           principal tem precedência sobre height). Como 767px também casa com
           o media query de 1366px, a regra chegava aqui sem ninguém desfazer.
           flex:0 0 auto devolve o controle da altura para o height. */
        flex: 0 0 auto !important;
    }

    /* Removido: "margin-left: 2.5rem !important" aqui era um contorno
       calibrado à mão pro mesmo vazamento de flex-basis descrito no
       comentário logo acima (.bwg-busca flex:0 0 auto) — testado ao vivo
       e confirmado que aquele fix já resolve a causa raiz sozinho; sem
       este contorno o campo de busca já mede uma altura normal (48px),
       e o gap ícone↔texto volta a ser o padrão de 8px (gap flex) usado
       em todo o resto do widget, em vez de destoar com 40px só aqui. */

    .bwg-wrap .bwg-card-outer {
        /* O grid mobile usa justify-items:center, o que faz os itens NÃO
           esticarem: cada .bwg-card-outer passa a ter largura de conteúdo.
           Como o .bwg-card interno tem max-width:300px, o outer virava 300px
           fixos — maior que a coluna em telas estreitas (ex.: 287px em um
           iPhone de 375px), transbordando ~13px para fora do container.
           Preenchendo a coluna aqui, o card interno (width:100%) passa a
           acompanhar a largura real disponível. */
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .bwg-wrap .bwg-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center !important;
    }

    .bwg-wrap .bwg-card {
        position: relative !important;
        width: 100% !important;
        /* Era max-width:300px, o que deixava o card mais estreito que a
           barra de filtros em qualquer celular acima de ~348px de largura
           (medido: busca 382px vs card 300px numa tela de 470px).
           100% faz o card acompanhar a largura da coluna, que é a mesma
           largura da busca e dos dropdowns. */
        max-width: 100% !important;
        margin-left: 0 !important;
        transform: none !important;
    }

    .bwg-wrap .bwg-card-content,
    .bwg-wrap .bwg-card-content * {
        min-width: 0 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .bwg-wrap .bwg-divider {
        margin-left: 0 !important;
    }

    .bwg-wrap .bwg-filtrar-group {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        align-items: center !important;
        margin-bottom: 0 !important;
    }

    /* Aniversariantes/Integrantes: de volta a empilhados 100% de largura
       cada (mesma reconsideração do grupo Mês/A→Z + Área acima). */
    .bwg-wrap .bwg-filtrar-btns {
        justify-content: center !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .bwg-wrap .bwg-filtrar-btns .bwg-modo-btn {
        width: 100% !important;
        text-align: center !important;
    }

    .bwg-card-badge {
        top: -20px !important;
        right: 8px !important;
    }

    .bwg-badge-tooltip {
        font-size: 10px !important;
        padding: 4px 10px !important;
        white-space: normal !important;
        max-width: 130px !important;
        text-align: center !important;
    }

    .bwg-mobile-mais {
        /* Mesma correção de origem do breakpoint de tablet acima: botão
           agora é irmão do grid, não filho — não herda mais a altura de
           linha do grid (44px de row-gap aqui). */
        margin-left: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        /* Mesma heurística do tablet acima: separação clara do card
           anterior, sem virar um vão gigante e sem colar. */
        margin-top: 32px !important;
    }

    .bwg-wrap .bwg-card-lider {
        display: none !important;
    }

    .bwg-wrap .bwg-card-bottom {
        display: grid !important;
        grid-template-columns: 100px minmax(0, 1fr) auto !important;
        align-items: center !important;
        width: 100% !important;
        gap: 8px !important;
    }

    .bwg-wrap .bwg-card-aniversario {
        position: absolute !important;
        left: 10px !important;
        bottom: 16px !important;
        width: 100px !important;
        min-width: 100px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        text-align: center !important;
        z-index: 2 !important;
    }

    .bwg-wrap .bwg-card-aniversario-label {
        position: static !important;
        display: block !important;
        width: 100% !important;
        margin: 0 0 4px 0 !important;
        padding: 0 !important;
        text-align: center !important;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        line-height: 1.2 !important;
        right: auto !important;
        bottom: auto !important;
    }

    .bwg-wrap .bwg-card-aniversario-data {
        position: static !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        line-height: 1.2 !important;
        right: auto !important;
        bottom: auto !important;
    }

    .bwg-wrap .bwg-card-plus {
        grid-column: 3 !important;
        position: static !important;
        margin: 0 !important;
        padding: 0 0.3px !important;
        justify-self: end !important;
        align-self: center !important;
        /* Não é "none": o card tem border-radius:24px, e o botão ficava a
           só ~20px das bordas direita/inferior (menos que o próprio raio),
           então o círculo visualmente "vazava" pra fora da curva do canto
           arredondado (nada clipava de verdade — só ficava sobre o fundo
           da página, não sobre o card, naquele cantinho). Testado ao vivo:
           margin-right não tinha efeito aqui (a grid absorvia), transform
           funciona nos dois eixos de forma confiável. */
        transform: translate(-8px, -8px) !important;
    }

    /* Mesmo raciocínio do breakpoint de notebook (ver comentário lá acima):
       a largura já é responsiva (calc(100vw - 32px), nunca estoura a tela
       de propósito), então o transform:scale(0.90) só encolhia o conteúdo
       por cima de uma largura que já cabia. Troca por rolagem vertical
       interna quando o conteúdo for mais alto que a tela — nunca
       horizontal, a largura já garante isso sozinha. */
    /* Mesmo tratamento dos breakpoints acima (ver comentário grande no
       notebook): display:flex no wrap causou um bug pior num iPhone real
       (faixa branca cobrindo a onda decorativa, reportado ao vivo — não
       reproduzido no Chrome desktop, provável diferença de motor de
       renderização entre Safari/Chrome mobile e Chrome desktop). Wrap
       volta a ficar em fluxo normal de bloco; só o corpo ganha altura
       máxima e rolagem própria — sem depender de flex/z-index pra manter
       o header por cima. */
    .bwg-cracha-wrap {
        width: calc(100vw - 32px) !important;
        max-width: 340px !important;
        overflow: visible !important;
    }

    .bwg-cracha-body {
        max-height: calc(90vh - 200px) !important;
        overflow-y: auto !important;
    }

    .bwg-cracha-nome {
        font-size: 16px !important;
        word-break: break-word !important;
        white-space: normal !important;
    }

    .bwg-cracha-avatar {
        width: 100px !important;
        height: 100px !important;
        border-radius: 60% !important;
        box-shadow: 0 0 0 3px #7C1E7B !important;
        position: relative !important;
        z-index: 6 !important;
    }

    .bwg-cracha-row {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .bwg-cracha-body {
        padding: 40px 14px 16px !important;
        gap: 10px !important;
    }

    .bwg-cracha-value {
        font-size: 13px !important;
    }

    .bwg-cracha-label {
        font-size: 10px !important;
    }

    .bwg-cracha-btn {
        padding: 12px !important;
        font-size: 12px !important;
        margin-top: 15px !important;
    }

    .bwg-cracha-header {
        padding-bottom: 30px !important;
        overflow: visible !important;
    }

    .bwg-cracha-onda {
        position: absolute !important;
        bottom: -59px !important;
        height: 60px !important;
        z-index: 3 !important;
    }

    .bwg-cracha-name-block {
        padding-bottom: 40px !important;
    }

    .bwg-nome-longo .bwg-cracha-name-block {
        padding-bottom: 25px !important;
    }

    .bwg-cracha-transition {
        display: none !important;
    }
}