/* Ajustes do site RCS Global, carregados DEPOIS de main.min.css (que continua igual ao original).
   Tudo aqui sobrescreve o original por ordem de carga. */

/* ------------------------------------------------------------------
   Fonte Montserrat servida pelo próprio site, em WOFF2 variável (um arquivo por conjunto de caracteres cobre todos os pesos):
   ~38 kB (latin, usado pelo português) + ~70 kB (latin-ext, só baixado se aparecer um caractere dele). Antes eram 5 arquivos
   TTF do Google, um por peso. Estas regras vêm depois das do main.min.css e valem sobre elas.
   ------------------------------------------------------------------ */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/montserrat-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/montserrat-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/montserrat-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/montserrat-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/montserrat-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/montserrat-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/montserrat-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/montserrat-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/montserrat-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/montserrat-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ------------------------------------------------------------------
   0. Fonte única: Montserrat em todo o texto.
   Vários textos não declaram fonte própria (título "Converta moedas…", títulos e tabela do simulador, menu, botões
   "Abra sua conta", títulos dos cards de benefícios, perguntas do FAQ…) e herdavam a fonte padrão do Bootstrap
   (a do sistema), que destoava do resto. O fallback sans-serif só vale enquanto a Montserrat não carrega.
   ------------------------------------------------------------------ */
html, body {
    font-family: 'Montserrat', sans-serif;
}

/* ------------------------------------------------------------------
   1. Final da página no iPhone
   O Safari do iPhone só respeita o overflow horizontal escondido quando ele está no <html> também. Sem isso, o vídeo do
   hero (1024px) e os carrosséis (2000px+) alargam a página e o Safari afasta o zoom, deixando o fundo branco à mostra
   embaixo do rodapé. Com o <html> azul-marinho, o "efeito elástico" do fim da rolagem também fica na cor do rodapé.
   ------------------------------------------------------------------ */
html {
    background-color: #1b1a37;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}
body {
    background-color: #fff;
    overflow-x: hidden;
    max-width: 100%;
    /* Com o <html> colorido, o fundo branco do <body> passa a ser pintado por cima de elementos com z-index negativo
       (como o painel escuro atrás de "Depoimentos de clientes satisfeitos"). O isolation cria um contexto próprio
       e devolve esses elementos para a frente do fundo do body. */
    isolation: isolate;
}

/* ------------------------------------------------------------------
   2. Hero + fundo atrás do simulador: o hero termina no azul-marinho dele (e não mais em branco) e a faixa do
   simulador continua nessa mesma cor até 50% da altura; dali em diante vira degradê até o branco, embaixo.
   O flow-root deixa as margens das duas seções dentro da faixa, sem sobrar espaço sem cor.
   ------------------------------------------------------------------ */
.page__banner { background-color: #1b1a37; }
.page__banner .masks .bottom {
    background: linear-gradient(0deg, #1b1a37 0%, rgba(27, 26, 55, 0) 100%);
}

/* Vídeo do hero no celular: tamanho FIXO (1024x640, preso ao canto superior esquerdo).
   O CSS original deixa "width:auto; height:auto"; o Safari do iPhone calcula esse tamanho diferente do Chrome e o vídeo
   terminava antes da base da área de 640px, deixando uma borda reta e uma faixa de outra cor logo abaixo (visível ao lado
   do botão "Baixe nosso App"). Com o tamanho fixo ele sempre preenche a área, e o degradê azul-marinho da base
   (.bottom, 300px) funde o fim do vídeo com o fundo da página. */
@media (max-width: 768px) {
    .page__banner .masks { background-color: #1b1a37; }
    .page__banner .masks video {
        top: 0;
        left: 0;
        width: 1024px;
        height: 640px;
        max-width: none;
        max-height: none;
        object-fit: cover;
        object-position: 0 0;
    }
    .page__banner .masks .bottom { height: 300px; }
}

.faixa-simulador {
    display: flow-root;
    padding-bottom: 203px; /* distância até a barra "Descubra" (era a margem de cima da barra, 143px; +60px a pedido) */
    background-color: #fff;
    /* o azul-marinho vai até um ponto FIXO depois do fim do hero (300px; 484px no celular) e dali clareia até o fim da faixa.
       A página Seja um parceiro usa o mesmo ponto (parceiro.css), para o degradê começar no mesmo pixel nas duas. */
    background-image: linear-gradient(180deg, #1b1a37 0, #1b1a37 300px, #fff 598px); /* fim FIXO em 598px (a transição tem sempre 298px), não em 100%: assim o espaço extra no fim da faixa não estica o degradê */
}
@media (max-width: 768px) {
    /* no celular o simulador já tem 290px de margem embaixo; 73 + 290 (eram 103 + 290 = 393px; ficou 30px menor) */
    .faixa-simulador { padding-bottom: 73px; background-image: linear-gradient(180deg, #1b1a37 0, #1b1a37 484px, #fff 968px); }
}

/* Título ao lado do simulador ("Converta moedas, de forma que caiba no seu bolso"): menor (era 40px) e com o mesmo
   peso dos demais títulos do site (700; era 500). No celular o texto fica centralizado. */
.page-conversor .background-conversor .titulo-conversor h2 {
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
}
@media (max-width: 768px) {
    .page-conversor .background-conversor .titulo-conversor { text-align: center; }
    .page-conversor .background-conversor .titulo-conversor h2 { font-size: 26px; line-height: 34px; }
}

/* Card do simulador: cor sólida, a mesma da ponta direita do degradê anterior (o roxo da marca), sem degradê */
.page-conversor .background-conversor {
    background-color: #4b4894;
    background-image: none;
}

/* ------------------------------------------------------------------
   3. FAQ compacto (lista da página e lista do "Ver mais")
   ------------------------------------------------------------------ */
.page__faq { padding-top: 44px; padding-bottom: 56px; }
.page__faq .faq__heading { margin-bottom: 24px; }
.page__faq .faq__heading .title { font-size: 18px; margin-bottom: 4px; }
.page__faq .faq__heading .description { font-size: 24px; line-height: 30px; }

.page__faq .wrapper { gap: 10px; }

.page__faq .wrapper .question {
    border-radius: 16px;
    background-color: rgba(255, 255, 255, .97);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 6px 18px rgba(14, 13, 40, .18);
    /* Sem "transition" aqui: o card usa a animação de entrada do AOS (fade-right, opacity + transform, 0,4s), igual aos
       demais blocos do site. Uma transição própria sobrescrevia a do AOS e o card aparecia de uma vez, sem animar. */
}
.page__faq .wrapper .question:hover { background-color: #fff; box-shadow: 0 8px 22px rgba(14, 13, 40, .26); }
.page__faq .wrapper .question[open] { background-color: #fff; }

.page__faq .wrapper .question .question__title {
    padding: 14px 16px 14px 20px;
    font-size: 15px;
    line-height: 21px;
    gap: 14px;
    align-items: center;
    cursor: pointer;
}
.page__faq .wrapper .question .question__title.active { padding-bottom: 14px; }
.page__faq .wrapper .question .question__title::-webkit-details-marker { display: none; }
.page__faq .wrapper .question .question__title svg {
    flex: none;
    width: 20px;
    height: 20px;
    transition: all linear .15s; /* o mesmo do ícone original do FAQ */
}
.page__faq .wrapper .question[open] > .question__title svg { transform: rotate(90deg); }

.page__faq .wrapper .question .question__content {
    padding: 0 20px 16px;
    font-size: 14px;
    line-height: 21px;
    max-width: none;
}
.page__faq .wrapper .question .question__content .question__video { margin-bottom: 8px; }

.page__faq .faq__bottom { margin-top: 24px; }
.page__faq .faq__bottom a { padding: 11px 22px; font-size: 15px; border-radius: 12px; }

@media (min-width: 768px) {
    .page__faq { padding-top: 72px; padding-bottom: 84px; }
    .page__faq .faq__heading { margin-bottom: 32px; }
    .page__faq .faq__heading .description { font-size: 30px; line-height: 40px; }

    /* uma única coluna, uma pergunta embaixo da outra (largura do original: 970px) */
    .page__faq .wrapper { gap: 12px; max-width: 970px; }
    .page__faq .wrapper .question .question__title { padding: 16px 20px 16px 24px; }
    .page__faq .wrapper .question .question__title.active { padding-bottom: 16px; }
    .page__faq .wrapper .question .question__content { padding: 0 24px 18px; gap: 16px; max-width: none; }
    .page__faq .wrapper .question .question__content .question__video .icon__video { width: 44px; height: 44px; }
}

/* ------------------------------------------------------------------
   4. Janela "Ver mais" do FAQ: sem o painel de fundo atrás dos cards.
   Tudo fica sobre o mesmo véu azul embaçado do menu lateral, e a camada preta extra do Bootstrap some.
   ------------------------------------------------------------------ */
#faqtotal.modal {
    background: linear-gradient(180deg, rgba(27, 26, 55, .80) 0%, rgba(58, 55, 128, .76) 100%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
#faqtotal .modal-dialog { max-width: 1000px; }
#faqtotal .modal-content,
#faqtotal .modal-dialog .modal-content {
    background: transparent !important;
    background-image: none !important;
    border: 0;
    box-shadow: none;
    padding-top: 70px;
    padding-bottom: 40px;
}
/* a lista ocupa sempre a largura toda da janela: sem isso, o conteúdo (flex centralizado) encolhia quando a pergunta aberta tinha resposta curta */
#faqtotal .modal-content > div { width: 100%; }
#faqtotal .modal-content .wrapper { padding: 0 15px; }
@media (min-width: 768px) {
    #faqtotal .modal-content .wrapper { padding: 0; }
}
body:has(#faqtotal.show) .modal-backdrop { opacity: 0 !important; }

/* Carrossel de benefícios no celular: o vídeo ocupa o lugar do antigo GIF, com a mesma moldura (204x434, cantos
   arredondados do original) e fundo branco enquanto carrega. O toque liga e desliga. */
.page__benefits .benefit__card--mobile .mock__wrapper .overlay video.mock--overlay {
    display: block; /* como as imagens do site: é o que faz o margin auto do original centralizar na moldura */
    object-fit: fill;
    background: #fff;
    cursor: pointer;
}

/* ------------------------------------------------------------------
   6. Botões das lojas de aplicativo (App Store / Google Play): todos com a MESMA LARGURA (168px), em qualquer
   lugar do site (rodapé da home, das lojas e da página de parceiros, menu do celular e barra lateral) e em qualquer tela.
   A altura acompanha a proporção de cada selo, então o do Google Play fica um pouco mais baixo que o da App Store.
   No menu do celular eles ficam um sobre o outro.
   ------------------------------------------------------------------ */
body img[src$="btn-app-1.svg"],
body img[src$="btn-app-2.svg"] {
    width: 168px;
    max-width: 100%;
    height: auto;
}
.navbar__overlay.open .overlay__content .app__buttons .buttons-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* ------------------------------------------------------------------
   7. Barra "Descubra a praticidade do App RCS Global": tudo centralizado (título, subtítulo e botão, um embaixo do
   outro), no desktop e no celular. Os tamanhos de texto e o fundo ficam no <style> de partials/cta-converta.blade.php.
   ------------------------------------------------------------------ */
.cta-app.page__cta { padding-top: 61px; padding-bottom: 59px; }
.cta-app .wrapper {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding-right: 0;
    margin-left: 0;
}
.cta-app .wrapper .title,
.cta-app .title .cta-app__sub { text-align: center; }

/* ------------------------------------------------------------------
   5. Rodapé no celular: botões das lojas centralizados (o alinhamento à esquerda é do desktop)
   e sem a faixa branca sobrando embaixo do card
   ------------------------------------------------------------------ */
@media (max-width: 1199px) {
    .page__footer .footer__main .main__wrapper .main__contents .apps { align-items: center; }
    .page__footer .footer__main .main__wrapper .main__contents { padding-bottom: 44px; }
    .page__footer { padding-bottom: 56px; }
}

/* ------------------------------------------------------------------
   8. Menu do celular: gaveta simples que desliza da direita e ocupa só uma parte da tela (até 320px), com o resto
   escurecido atrás. Sem zoom, sem fade do cartão e sem efeitos nos botões. Abre deslizando, fecha deslizando
   (botão X, toque fora, link ou arrastar para a direita). Só vale até 768px; no desktop a barra lateral com QR não muda.
   O main.min.css tem regras gerais, com ".open" e vários níveis (centralizam os links, somam 32px/86px de margem,
   põem borda nos botões), que valem também no celular. Por isso os seletores abaixo repetem a classe do painel
   (".overlay__content.overlay__content.overlay__content"): é só para ter prioridade sobre elas, sem usar !important.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .navbar__overlay,
    .navbar__overlay.open {
        display: block;
        top: 0;
        left: 0;
        right: auto;
        width: 100vw;
        height: 100%;
        background: rgba(8, 8, 24, .55);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        animation: none;
        transform: none;
    }
    .navbar__overlay {
        opacity: 0;
        visibility: hidden;
        transition: opacity .28s ease, visibility 0s linear .28s;
    }
    .navbar__overlay.open {
        opacity: 1;
        visibility: visible;
        transition: opacity .28s ease, visibility 0s;
    }

    .navbar__overlay .overlay__content.overlay__content.overlay__content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(82vw, 320px);
        max-width: none;
        height: 100%;
        margin: 0;
        padding: 22px 24px 28px;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        background: #1b1a37;
        background-image: none;
        border-radius: 0;
        box-shadow: -10px 0 30px rgba(0, 0, 0, .35);
        transform: translateX(100%);
        transition: transform .28s ease;
    }
    .navbar__overlay.open .overlay__content.overlay__content.overlay__content { transform: translateX(0); }
    .navbar__overlay .overlay__content.overlay__content.overlay__content.is-dragging { transition: none; }

    /* topo: logo e botão de fechar */
    .navbar__overlay .overlay__content.overlay__content.overlay__content .overlay__header {
        width: 100%;
        margin: 0 0 18px;
        padding: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .navbar__overlay .overlay__content.overlay__content.overlay__content .overlay__logo img { display: block; height: 44px; width: auto; }
    .navbar__overlay .overlay__content.overlay__content.overlay__content .overlay__close,
    .navbar__overlay .overlay__content.overlay__content.overlay__content .overlay__close:hover,
    .navbar__overlay .overlay__content.overlay__content.overlay__content .overlay__close:focus { transform: none; transition: background-color .15s ease; }

    /* links: lista alinhada à esquerda, com divisórias finas */
    .navbar__overlay .overlay__content.overlay__content.overlay__content .overlay__links {
        margin: 0 0 8px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .navbar__overlay .overlay__content.overlay__content.overlay__content .overlay__links .mobile__anchor {
        padding: 15px 2px;
        border-radius: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        font-size: 16px;
        font-weight: 600;
        text-align: left;
        transition: color .15s ease;
    }
    .navbar__overlay .overlay__content.overlay__content.overlay__content .overlay__links .mobile__anchor:last-child { border-bottom: 0; }
    .navbar__overlay .overlay__content.overlay__content.overlay__content .overlay__links .mobile__anchor:hover,
    .navbar__overlay .overlay__content.overlay__content.overlay__content .overlay__links .mobile__anchor:focus { background: none; transform: none; }

    /* botões das lojas: sem decoração, alinhados à esquerda com os links, mesma largura, encostados embaixo */
    .navbar__overlay .overlay__content.overlay__content.overlay__content .app__buttons {
        margin: auto 0 0;
        padding: 20px 0 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
        border-radius: 0;
        background: none;
        text-align: left;
        animation: none;
        display: block;
    }
    .navbar__overlay .overlay__content.overlay__content.overlay__content .app__buttons::before,
    .navbar__overlay .overlay__content.overlay__content.overlay__content .app__buttons p::before,
    .navbar__overlay .overlay__content.overlay__content.overlay__content .app__buttons p::after,
    .navbar__overlay .overlay__content.overlay__content.overlay__content .app__buttons a::before,
    .navbar__overlay .overlay__content.overlay__content.overlay__content .app__buttons a::after { content: none; display: none; }
    .navbar__overlay .overlay__content.overlay__content.overlay__content .app__buttons p {
        justify-content: flex-start;
        margin: 0 0 12px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .8px;
        text-align: left;
        opacity: .85;
    }
    .navbar__overlay .overlay__content.overlay__content.overlay__content .app__buttons .buttons-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
    }
    .navbar__overlay .overlay__content.overlay__content.overlay__content .app__buttons a,
    .navbar__overlay .overlay__content.overlay__content.overlay__content .app__buttons a:hover,
    .navbar__overlay .overlay__content.overlay__content.overlay__content .app__buttons a:focus { box-shadow: none; transform: none; transition: none; overflow: visible; border-radius: 0; }
    .navbar__overlay .overlay__content.overlay__content.overlay__content .app__buttons img,
    .navbar__overlay .overlay__content.overlay__content.overlay__content .app__buttons a:hover img { border: 0; border-radius: 0; box-shadow: none; filter: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
    .navbar__overlay, .navbar__overlay .overlay__content.overlay__content.overlay__content { transition: none !important; }
}

/* ------------------------------------------------------------------
   9. Barra lateral com QR code (desktop): cabe sempre na altura da tela, sem rolagem. O painel é uma coluna centralizada
   e o QR, as fontes e as margens acompanham a altura da janela (unidades vh, com mínimo e máximo); os dois botões das
   lojas ficam lado a lado. Se a janela for baixa demais, aí sim o painel rola por dentro. As regras gerais do
   main.min.css têm vários níveis (".open ... .title"), por isso o ".open" repetido: é só para ter prioridade.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
    .sidebar__overlay.open.open { overflow: hidden; }
    .sidebar__overlay.open.open .sidebar__content {
        top: 0;
        bottom: 0;
        height: 100%;
        width: 576px;
        padding: clamp(24px, 5vh, 60px) 101px clamp(24px, 5vh, 60px) 79px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow-y: auto;
    }
    .sidebar__overlay.open.open .sidebar__content .sidebar__close { top: clamp(16px, 3vh, 34px); right: 124px; }
    .sidebar__overlay.open.open .sidebar__content .title {
        font-size: clamp(24px, 4.2vh, 36px);
        line-height: 1.3;
        margin-bottom: clamp(8px, 1.8vh, 20px);
    }
    .sidebar__overlay.open.open .sidebar__content .instructions {
        font-size: clamp(12px, 1.8vh, 15px);
        line-height: 1.6;
        margin-bottom: clamp(12px, 2.6vh, 30px);
    }
    .sidebar__overlay.open.open .sidebar__content .boxLinks {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        column-gap: 12px;
    }
    .sidebar__overlay.open.open .sidebar__content .qrcode {
        flex: 0 0 100%;
        width: clamp(140px, 30vh, 300px);
        max-width: clamp(140px, 30vh, 300px);
        height: clamp(140px, 30vh, 300px);
        margin-bottom: clamp(12px, 3vh, 30px);
    }
    .sidebar__overlay.open.open .sidebar__content .download {
        flex: 0 0 100%;
        margin: 0 0 clamp(8px, 1.6vh, 16px);
        font-size: clamp(13px, 2vh, 18px);
    }
    .sidebar__overlay.open.open .sidebar__content .app__button { margin: 0; }
    /* Lado a lado, os dois selos ficam com a MESMA ALTURA (a largura acompanha a proporção de cada um). No resto do site
       valem os 168px de largura da seção 6; aqui, como estão em linha, o que importa é a altura igual. */
    .sidebar__overlay.open.open .sidebar__content .app__button img {
        height: clamp(40px, 6vh, 56px);
        width: auto;
        max-width: none;
        display: block;
    }
}

/* ------------------------------------------------------------------
   10. Links das unidades (home) e bloco de atendimento da unidade (páginas de loja)
   ------------------------------------------------------------------ */

.store-info { padding: 20px 0 60px; }
.store-info__box { background: #f4f3ff; border: 1px solid #e4e3f7; border-radius: 24px; padding: 32px 24px; color: #1b1a37; }
.store-info__title { margin: 0 0 12px; font: 700 26px/34px 'Montserrat', sans-serif; }
.store-info__text { margin: 0 0 22px; font: 400 15px/25px 'Montserrat', sans-serif; max-width: 760px; }
.store-info__list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 14px 32px; }
.store-info__list li { display: flex; flex-direction: column; gap: 2px; font: 500 15px/22px 'Montserrat', sans-serif; }
.store-info__list li span { font: 600 12px 'Montserrat', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #6e69df; }
.store-info__list a { color: #1b1a37; text-decoration: none; word-break: break-word; }
.store-info__list a:hover { color: #4b4894; text-decoration: underline; }
.store-info__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.store-info__cta .button__gradient { display: inline-block; }
.store-info__home { color: #4b4894; font: 600 15px 'Montserrat', sans-serif; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) {
    .store-info { padding: 30px 0 90px; }
    .store-info__box { padding: 44px 48px; }
    .store-info__title { font-size: 32px; line-height: 42px; }
    .store-info__list { grid-template-columns: 1fr 1fr; }
}

/* Linha de redução de risco abaixo do botão principal do hero */
.page__banner .banner__contents .hero__nota { margin: 14px 0 0; font: 500 13px/18px 'Montserrat', sans-serif; color: rgba(255, 255, 255, .85); letter-spacing: .01em; }
@media (min-width: 769px) {
    /* o hero tem 760px de altura fixa: sobe o botão 14px (40 -> 26) para a linha de baixo caber. Parceiros usa o mesmo valor. */
    .page__banner .banner__contents > p.description:not(.desc-m) { margin-bottom: 26px; }
    .page__banner .banner__contents .hero__nota { margin-top: 2px; }
}

/* Celular: espaço padrão entre o logo e o início do hero, igual em home, lojas e Seja um parceiro: o texto começa a 120px do topo (eram 100px).
   O hero ganha os mesmos 60px de altura (760 → 820px) e a foto desce junto, mantendo a posição original em relação ao fim do hero
   (base cortada como no site original); assim a linha "Abertura grátis · Sem anuidade · iOS e Android" não encosta na foto. */
@media (max-width: 768px) {
    .page__banner { height: 820px; }
    .page__banner .banner__contents { padding-top: 120px; }
}

/* ------------------------------------------------------------------
   11. Botões de ação (degradê roxo → azul-claro): todos iguais ao botão do hero
   Minimalista: o degradê fica parado (sem deslizar, sem brilho); no hover o botão só cresce um pouco, sobe 3px e o brilho da sombra aumenta.
   ------------------------------------------------------------------ */
.button__gradient,
a.button__cta.button__cta.button__cta,
a.button__conta.button__conta.button__conta,
.pp a.pbtn.pbtn,
.pp button.pbtn.pbtn {
    transition: transform .25s ease, box-shadow .25s ease;
}
.button__gradient::before { transition: none; }
.button__gradient:hover::before { left: 0; }

a.button__cta.button__cta.button__cta,
a.button__conta.button__conta.button__conta,
.pp a.pbtn.pbtn,
.pp button.pbtn.pbtn {
    background-image: linear-gradient(to left, #6e69df, #4cbef1);
    background-color: #6e69df;
    box-shadow: 0 0 26px rgba(76, 190, 241, .46);
}

.button__gradient:hover,
a.button__cta.button__cta.button__cta:hover,
a.button__conta.button__conta.button__conta:hover,
.pp a.pbtn.pbtn:hover,
.pp button.pbtn.pbtn:hover {
    background-image: linear-gradient(to left, #6e69df, #4cbef1);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 0 26px rgba(76, 190, 241, .65);
}
.button__gradient:hover { background-image: none; }

@media (prefers-reduced-motion: reduce) {
    .button__gradient, a.button__cta, a.button__conta, .pp a.pbtn, .pp button.pbtn { transition: none !important; }
    .button__gradient:hover, a.button__cta:hover, a.button__conta:hover, .pp a.pbtn:hover, .pp button.pbtn:hover { transform: none !important; }
}

/* Benefícios (desktop): encaixe exato do GIF na tela do iPhone da moldura (mock-desktop.png, 376x634). Medido pixel a pixel na imagem,
   pela borda preta do aro: a tela vai de x=53 a x=321 (269px, centrada na imagem) e de y=28 até y=606 (579px; o trecho final tem a
   barra "home" da moldura), com cantos de ~34px. A caixa .mock__wrapper começa na borda esquerda da imagem. O GIF (462x1000, proporção
   0,462) tem a mesma proporção da tela (269x579), então "cover" quase não corta nada. */
.page__benefits .benefits--desktop .desktop__wrapper .col--2 .mock__wrapper .overlay {
    left: 53px;
    top: 28px;
    border-radius: 34px;
    overflow: hidden;
}
.page__benefits .benefits--desktop .desktop__wrapper .col--2 .mock__wrapper .overlay .mock--overlay {
    display: block;
    width: 269px;
    height: 579px;
    border-radius: 34px;
    object-fit: cover;
    object-position: center;
}
/* Janela da unidade: o QR code enviado pelo painel pode ter qualquer tamanho em pixels. O original do site aparecia com 297px,
   então ele é mostrado em 297x297px (a coluna do QR não encolhe). No celular, no máximo a largura da janela. */
.modal.modal__unit .modal-dialog .modal-content .unit__wrapper .qrcode { flex: 0 0 auto; }
.modal.modal__unit .modal-dialog .modal-content .unit__wrapper .qrcode img {
    display: block;
    width: 297px;
    height: 297px;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto;
}
@media (min-width: 769px) {
    .modal.modal__unit .modal-dialog .modal-content .unit__wrapper .qrcode img { max-width: none; }
}

/* FAQ: o main.min.css deixa todo link como bloco (a { display: block }), o que quebrava a linha antes e depois de um link no meio
   da resposta ("veja a [tabela de tarifas] )"). Links de texto voltam a ficar na linha; só o botão de baixar o PDF continua em bloco. */
.question__text a:not(.button__gradient) {
    display: inline;
}

/* ==== Foto do hero (celular + cartão) em AVIF e bandeiras em SVG ====
   A foto fica num quadro de 859x572 (480x320 no celular), igual ao do arquivo antigo, então o layout não muda.
   As bandeiras são porcentagens do quadro, então acompanham o tamanho da foto. */
.hero-cel__box { position: relative; display: block; }
.hero-cel__box picture { display: block; }
.hero-cel__box img { display: block; width: 859px; height: auto; max-width: none; }
@media (max-width: 767px) {
    .hero-cel__box img { width: auto; height: 320px; }
}

.hero-flags { position: absolute; inset: 0; pointer-events: none; }
.hero-flag {
    position: absolute;
    width: 7.2%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    background: #fff;                       /* a borda branca é o espaço entre este círculo e o miolo */
    border-radius: 50%;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .28);
}
/* miolo = só a bandeira: o SVG tem 92x92 com a bandeira (raio 26) no centro, cercada por anel branco e sombra; recortamos o centro (52x52) */
.hero-flag__miolo { position: relative; display: block; width: 90%; height: 90%; border-radius: 50%; overflow: hidden; }
.hero-flag__miolo img,
.pp .hero__img .hero-flag__miolo img { position: absolute; display: block; width: 177%; height: 177%; max-width: none; left: -38.5%; top: -38.5%; border-radius: 0; }

/* Janela da unidade: o QR code só aparece no desktop. No celular quem abre a janela já está no aparelho que
   baixaria o app, então o QR não faz sentido (e a imagem nem é baixada: o lazysizes ignora elementos escondidos). */
@media (max-width: 767px) {
    .modal.modal__unit .modal-dialog .modal-content .unit__wrapper .qrcode { display: none !important; }
}

/* Botão flutuante do WhatsApp: ele é injetado pelo Google Tag Manager e usa o ícone "fab fa-whatsapp" da biblioteca Font Awesome,
   que o site deixou de carregar (era um CSS + fontes de ~100 KB de terceiros). Aqui o mesmo ícone é desenhado com uma máscara SVG,
   sem baixar a biblioteca. Se um dia o GTM passar a usar outros ícones "fa-*", eles também precisarão de uma regra assim. */
.fab.fa-whatsapp {
    display: inline-block;
    width: .875em;
    height: 1em;
    line-height: 1;
    vertical-align: -.125em;
}
.fab.fa-whatsapp::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask: url("/assets/img/icons/whatsapp.svg") center / contain no-repeat;
    mask: url("/assets/img/icons/whatsapp.svg") center / contain no-repeat;
}

/* Menu superior (desktop) com 6 links: nada quebra em duas linhas. O espaço reservado ao logo (297px) era maior que o necessário
   (o logo tem ~140px) e é ele que abre espaço para o link "Seja um parceiro". */
.page__header .header--desktop .wrapper .logo { width: 160px; }
.page__header .header--desktop .wrapper .desktop__links a,
.page__header .header--desktop .wrapper .button__sidebar { white-space: nowrap; }
@media (max-width: 1199px) {
    .page__header .header--desktop .wrapper .logo { width: 145px; }
    .page__header .header--desktop .wrapper .desktop__links { gap: 12px; }
    .page__header .header--desktop .wrapper .desktop__links a { font-size: 14px; }
    .page__header .header--desktop .wrapper .button__sidebar { padding: 13px 15px; font-size: 15px; }
}

/* Item do menu da página atual (home = Início; Seja um parceiro): azul da marca + sublinhado, sem mudar a largura do texto */
.page__header .header--desktop .wrapper .desktop__links a[aria-current="page"] {
    color: #4cbef1;
    text-decoration-color: #4cbef1;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}
.mobile__anchor[aria-current="page"] {
    color: #4cbef1 !important;
    background: rgba(76, 190, 241, .12);
    box-shadow: inset 3px 0 0 #4cbef1;
}