/* ============================================================
   mapa-parceiras.css: mapa "onde dá para voar com as suas milhas"
   Usado no capítulo de como usar as milhas das páginas de programa.
   Todas as classes começam com mp- para não brigar com o resto do site.
   Sem JavaScript, o bloco aparece como lista simples, com os avisos abertos.
   ============================================================ */

.mp {
    --mp-card: #ffffff;
    --mp-ink: #0b1b33;
    --mp-ink2: #4a5b75;
    --mp-line: #dbe4f0;
    --mp-line2: #b9c7da;
    --mp-acc: #1565c9;
    --mp-on-acc: #ffffff;
    --mp-on-acc2: #d6e6fb;
    --mp-acc-soft: #e6f0fc;
    --mp-acc-ink: #0d4a96;
    --mp-pega: #e39a0b;
    --mp-on-pega: #2b1a00;
    --mp-pega-soft: #fff1d1;
    --mp-pega-ink: #5e3b00;
    --mp-ico-bg: transparent;
    --mp-fundo: var(--bg, #f5f8fc);
    margin: 22px 0 26px;
    color: var(--mp-ink);
}
:root[data-tema="escuro"] .mp {
    --mp-card: #0a1524;
    --mp-ink: #e8f0fa;
    --mp-ink2: #9fb0c8;
    --mp-line: #1b2a3d;
    --mp-line2: #33495f;
    --mp-acc: #63b3ff;
    --mp-on-acc: #00121f;
    --mp-on-acc2: #0b3a66;
    --mp-acc-soft: #0f2741;
    --mp-acc-ink: #9fd0ff;
    --mp-pega: #ffc24d;
    --mp-on-pega: #2b1a00;
    --mp-pega-soft: #2b2009;
    --mp-pega-ink: #ffd27a;
    --mp-ico-bg: #ffffff;
}

.mp *, .mp *::before, .mp *::after { box-sizing: border-box; }
.mp [hidden] { display: none !important; }

.mp .mp-titulo {
    font-size: clamp(1.1rem, 3vw, 1.3rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--mp-ink);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.mp .mp-intro { margin: 0 0 14px; color: var(--mp-ink2); max-width: 62ch; }

/* Listas sem as bolinhas e o recuo das listas do resto da página */
.mp ul.mp-legenda { list-style: none; margin: 0 0 8px; padding: 0; }
.mp ul.mp-cias { list-style: none; margin: 14px 0 0; padding: 0 0 0 46px; display: grid; gap: 8px; }
.mp .mp-legenda > li,
.mp .mp-cias > li { padding: 0; margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.mp .mp-legenda > li::before,
.mp .mp-cias > li::before { content: none; display: none; }

.mp ul.mp-legenda { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.82rem; color: var(--mp-ink2); }
.mp .mp-legenda > li { display: flex; align-items: center; gap: 8px; }
.mp-mini {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    font-size: 0.74rem; font-weight: 800; line-height: 1;
}
.mp-mini.mp-pega { background: var(--mp-pega); color: var(--mp-on-pega); }
.mp-mini.mp-dica { background: var(--mp-acc); color: var(--mp-on-acc); }

.mp-mapa { position: relative; margin-top: 18px; }
.mp-fios { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.mp-fios .mp-f { fill: none; stroke: var(--mp-line2); stroke-width: 1.5; stroke-linecap: round; }
.mp-fios .mp-f.mp-tronco { stroke: var(--mp-acc); stroke-width: 2; }
.mp-fios .mp-f.mp-pega { stroke: var(--mp-pega); stroke-width: 2.2; }
.mp-fios .mp-f.mp-dica { stroke: var(--mp-acc); stroke-width: 2.2; }
.mp-fios .mp-f.mp-ativo { stroke-width: 3.4; }
.mp-fios .mp-f.mp-spine-ativo { stroke-width: 3; }
.mp-fios .mp-hit { fill: none; stroke: transparent; stroke-width: 20; pointer-events: stroke; cursor: pointer; }

.mp-hub-wrap, .mp-g-no, .mp-chip, .mp-aviso, .mp-mais { position: relative; z-index: 1; }
.mp-hub-wrap { display: flex; flex-direction: column; align-items: flex-start; }
.mp-hub {
    display: flex; flex-direction: column; width: max-content; max-width: 100%;
    background: var(--mp-acc); color: var(--mp-on-acc); border-radius: 16px; padding: 12px 20px;
}
.mp-hub strong { font-size: 1.05rem; font-weight: 800; line-height: 1.2; }
.mp-hub span { font-size: 0.8rem; color: var(--mp-on-acc2); }
.mp-hub-wrap .mp-aviso { margin-top: 34px; margin-left: 30px; }

.mp-grupos { display: grid; gap: 28px; margin: 28px 0 0 52px; }
.mp-g-no {
    display: inline-flex; flex-direction: column;
    background: var(--mp-acc-soft); border: 1.5px solid var(--mp-acc); color: var(--mp-acc-ink);
    border-radius: 14px; padding: 8px 14px;
}
.mp-g-no strong { font-size: 0.92rem; font-weight: 700; line-height: 1.25; }
.mp-g-no span { font-size: 0.76rem; }

.mp-chip {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: inherit; font-size: 0.86rem; font-weight: 500; line-height: 1.3;
    padding: 5px 14px 5px 6px; border-radius: 999px;
    border: 1px solid var(--mp-line); background: var(--mp-card); color: var(--mp-ink);
    text-align: left; max-width: 100%;
}
button.mp-chip { cursor: pointer; border-color: var(--mp-line2); margin: 0; }
button.mp-chip.mp-pega:hover, button.mp-chip.mp-pega[aria-expanded="true"] { border-color: var(--mp-pega); }
button.mp-chip.mp-dica:hover, button.mp-chip.mp-dica[aria-expanded="true"] { border-color: var(--mp-acc); }
.mp-nome small { display: block; line-height: 1.2; font-size: 0.72rem; color: var(--mp-ink2); font-weight: 400; }
.mp-ico {
    flex: none; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background: var(--mp-ico-bg);
}
.mp-ico img { width: 22px; height: 22px; object-fit: contain; display: block; margin: 0; }

.mp-badge {
    position: absolute; z-index: 2; width: 24px; height: 24px; margin: -12px 0 0 -12px;
    border-radius: 50%; border: 2px solid var(--mp-fundo); padding: 0;
    font-family: inherit; font-size: 0.78rem; font-weight: 800; line-height: 1;
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.15s;
}
.mp-badge:hover { transform: scale(1.12); }
.mp-badge.mp-pega { background: var(--mp-pega); color: var(--mp-on-pega); }
.mp-badge.mp-dica { background: var(--mp-acc); color: var(--mp-on-acc); }

.mp-aviso { margin: 8px 0 2px; padding: 10px 13px; border-radius: 10px; font-size: 0.86rem; line-height: 1.5; max-width: 38ch; }
.mp-aviso strong { display: block; font-weight: 700; margin-bottom: 2px; }
.mp-aviso.mp-pega { background: var(--mp-pega-soft); color: var(--mp-pega-ink); }
.mp-aviso.mp-dica { background: var(--mp-acc-soft); color: var(--mp-acc-ink); }
.mp-aviso:not([hidden]) { animation: mp-abre 0.2s ease; }
@keyframes mp-abre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.mp-mais {
    font-family: inherit; font-size: 0.84rem; font-weight: 500; line-height: 1.2;
    color: var(--mp-acc-ink); background: none; border: 1px dashed var(--mp-line2);
    border-radius: 999px; padding: 8px 14px; cursor: pointer; margin: 10px 0 0 46px;
}
.mp-mais:hover { border-color: var(--mp-acc); }
.mp .mp-nota { margin: 22px 0 0; font-size: 0.8rem; color: var(--mp-ink2); max-width: 62ch; }

.mp-chip:focus-visible, .mp-badge:focus-visible, .mp-mais:focus-visible { outline: 2px solid var(--mp-acc); outline-offset: 3px; }

/* Celular: árvore com as linhas na lateral, grupos grandes mostram 8 e um botão */
.mp:not(.mp-largo) .mp-cias.mp-fechada > li.mp-extra { display: none; }

/* Espaço largo (o JavaScript liga quando o bloco tem 700 px ou mais): grupos em leque */
.mp.mp-largo .mp-hub-wrap { align-items: center; }
.mp.mp-largo .mp-hub { align-items: center; text-align: center; }
.mp.mp-largo .mp-hub-wrap .mp-aviso { text-align: left; margin-left: 0; }
.mp.mp-largo .mp-grupos { grid-template-columns: repeat(var(--mp-cols, 3), minmax(0, 1fr)); gap: 18px; margin: 76px 0 0; }
.mp.mp-largo ul.mp-cias { padding-left: 38px; }
.mp.mp-largo .mp-mais { display: none; }

@media (prefers-reduced-motion: reduce) {
    .mp *, .mp *::before, .mp *::after { animation: none !important; transition: none !important; }
}