/* AMACE · botão padrão do site (.hx-btn), no desenho do botão do MindMarket:
   caixa com o texto e uma bolinha com a seta; no hover a caixa cresce, a
   bolinha some da direita e nasce à esquerda, e o texto anda para o lado.
   Carregado em todas as páginas (a Home, a /doar, a Loja, o botão Admin...).

   Variantes: --claro, --amarelo, --vermelho, --vermelho-cheio, --azul;
   --sem-seta (só texto), --largo (largura toda), --compacto (48px, o
   tamanho do celular, para dentro de cartões). */
.hx-btn {
    --hx-btn-icone: 40px;
    --hx-btn-pad: 10px;
    --hx-btn-gap: 8px;
    --hx-mola: cubic-bezier(.17, .67, .3, 1.33);
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 60px;
    padding: var(--hx-btn-pad);
    padding-left: calc(var(--hx-btn-pad) + 6px);
    color: #1f1e1a !important;
    font-family: Quicksand, sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    isolation: isolate;
}
/* o fundo é um ::before que cresce 5% no hover, sem mexer no layout */
.hx-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 10px;
    background: var(--hx-btn-fundo);
    transition: transform .4s var(--hx-mola);
}
.hx-btn--claro { --hx-btn-fundo: #fff; --hx-btn-bola: #fcce45; --hx-btn-seta: #1f1e1a; }
.hx-btn--amarelo { --hx-btn-fundo: #fcce45; --hx-btn-bola: #fff; --hx-btn-seta: #1f1e1a; }
/* botão só com texto (o "Ver impacto" da /doar): mesma caixa, sem as bolinhas;
   no hover só o fundo cresce, o texto não anda */
.hx-btn--sem-seta { padding: 0 26px; }
.hx-btn--sem-seta .hx-btn__texto { padding: 0; }
.hx-btn.hx-btn--sem-seta:hover .hx-btn__texto, .hx-btn.hx-btn--sem-seta:focus-visible .hx-btn__texto { transform: none; }
/* vermelho cheio, texto branco (o "Falar com a equipe" da /doar) */
.hx-btn--vermelho-cheio { --hx-btn-fundo: #cd212a; --hx-btn-bola: #fff; --hx-btn-seta: #cd212a; color: #fff !important; }
/* ocupando a largura toda (o botão do formulário da /doar) */
.hx-btn--largo { display: flex; width: 100%; justify-content: center; }
/* quando o .hx-btn é um <button>: o tema pinta todo button de rosa no hover */
button.hx-btn, button.hx-btn:hover, button.hx-btn:focus {
    border: 0; border-radius: 0; background: none !important; color: #1f1e1a !important;
    text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer;
}
button.hx-btn[disabled] { opacity: .6; cursor: wait; }
.hx-btn--vermelho { --hx-btn-fundo: #faf0f0; --hx-btn-bola: #cd2121; --hx-btn-seta: #fff; }
.hx-btn--azul { --hx-btn-fundo: #2f4bbd; --hx-btn-bola: #fff; --hx-btn-seta: #2f4bbd; color: #fff !important; }
.hx-btn__texto {
    padding: 0 var(--hx-btn-pad);
    transition: transform .4s var(--hx-mola);
}
.hx-btn__icone {
    flex: 0 0 auto; /* em botão estreito a bolinha não achata */
    display: inline-grid;
    place-items: center;
    width: var(--hx-btn-icone);
    height: var(--hx-btn-icone);
    border-radius: 50%;
    background: var(--hx-btn-bola);
    color: var(--hx-btn-seta);
    transition: transform .4s var(--hx-mola);
}
.hx-btn__icone--padrao { margin-left: var(--hx-btn-gap); }
.hx-btn__icone--hover {
    position: absolute;
    top: 50%;
    left: var(--hx-btn-pad);
    transform: translateY(-50%) scale(0);
}
.hx-btn:hover::before, .hx-btn:focus-visible::before { transform: scale(1.05); }
.hx-btn:hover .hx-btn__texto, .hx-btn:focus-visible .hx-btn__texto { transform: translateX(calc(var(--hx-btn-icone) + var(--hx-btn-gap) - 6px)); }
.hx-btn:hover .hx-btn__icone--padrao, .hx-btn:focus-visible .hx-btn__icone--padrao { transform: scale(0); }
.hx-btn:hover .hx-btn__icone--hover, .hx-btn:focus-visible .hx-btn__icone--hover { transform: translateY(-50%) scale(1); }
.hx-btn:focus-visible { outline: 3px solid rgba(205, 33, 42, .35); outline-offset: 3px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) {
    .hx-btn::before, .hx-btn__texto, .hx-btn__icone { transition: none; }
}
/* 48px: o tamanho do celular, para botões dentro de cartões */
.hx-btn--compacto { --hx-btn-icone: 32px; --hx-btn-pad: 8px; height: 48px; font-size: 15px; }
.hx-btn--compacto .hx-btn__icone svg { width: 15px; height: 15px; }
.hx-btn--compacto.hx-btn--sem-seta { padding: 0 20px; }

/* celular: todos os botões ficam menores */
@media (max-width: 767px) {
    .hx-btn { --hx-btn-icone: 32px; --hx-btn-pad: 8px; height: 48px; font-size: 15px; }
    .hx-btn__icone svg { width: 15px; height: 15px; }
}

/* O hover do "Ver impacto" nos botões que não são .hx-btn: os de enviar dos
   formulários (voluntário, WhatsApp, login, inscrição de curso) e os da Minha
   conta. O fundo sai do botão e vai para um ::before, que cresce 5% com a
   mesma mola; o texto não anda. A borda dos botões brancos vira uma sombra de
   dentro do ::before, para crescer junto. */
html body :is(
    .amace-vol .amace-vol__enviar, .amace-lead .amace-lead__enviar, .amace-login .amace-login__enviar,
    .ains .ains__seguir, .ains .ains__voltar,
    .woocommerce-account .conta__conteudo button[type="submit"], .woocommerce-account .conta__conteudo .button,
    .woocommerce-account .conta__conteudo .woocommerce-Button, .woocommerce-account .conta__botao,
    .woocommerce-account .conta__conteudo .cad__doc-enviar, .woocommerce-account .cad__doc-ver,
    .woocommerce-account .conta__conteudo .woocommerce-Address-title .edit,
    .woocommerce-account .woocommerce-form-login button[type="submit"], .woocommerce-account .woocommerce-ResetPassword button[type="submit"]
) {
    --hxb: #fcce45; --hxb-borda: transparent;
    position: relative; isolation: isolate; z-index: 0;
    border-color: transparent !important; background: transparent !important; box-shadow: none !important;
    transition: color .2s ease !important;
}
html body :is(.ains .ains__voltar, .woocommerce-account .conta__botao:not(.conta__botao--forte), .woocommerce-account .cad__doc-ver, .woocommerce-account .conta__conteudo .woocommerce-Address-title .edit, .woocommerce-account .conta__conteudo .button.cancel, .woocommerce-account .conta__conteudo .button.trocar_cartao) {
    --hxb: #fff; --hxb-borda: transparent; /* branco sem contorno */
}
html body :is(
    .amace-vol .amace-vol__enviar, .amace-lead .amace-lead__enviar, .amace-login .amace-login__enviar,
    .ains .ains__seguir, .ains .ains__voltar,
    .woocommerce-account .conta__conteudo button[type="submit"], .woocommerce-account .conta__conteudo .button,
    .woocommerce-account .conta__conteudo .woocommerce-Button, .woocommerce-account .conta__botao,
    .woocommerce-account .conta__conteudo .cad__doc-enviar, .woocommerce-account .cad__doc-ver,
    .woocommerce-account .conta__conteudo .woocommerce-Address-title .edit,
    .woocommerce-account .woocommerce-form-login button[type="submit"], .woocommerce-account .woocommerce-ResetPassword button[type="submit"]
)::before {
    content: ""; position: absolute; inset: -1px; z-index: -1;
    border-radius: inherit; background: var(--hxb); box-shadow: inset 0 0 0 1px var(--hxb-borda);
    transition: transform .4s cubic-bezier(.17, .67, .3, 1.33);
}
html body :is(
    .amace-vol .amace-vol__enviar, .amace-lead .amace-lead__enviar, .amace-login .amace-login__enviar,
    .ains .ains__seguir, .ains .ains__voltar,
    .woocommerce-account .conta__conteudo button[type="submit"], .woocommerce-account .conta__conteudo .button,
    .woocommerce-account .conta__conteudo .woocommerce-Button, .woocommerce-account .conta__botao,
    .woocommerce-account .conta__conteudo .cad__doc-enviar, .woocommerce-account .cad__doc-ver,
    .woocommerce-account .conta__conteudo .woocommerce-Address-title .edit,
    .woocommerce-account .woocommerce-form-login button[type="submit"], .woocommerce-account .woocommerce-ResetPassword button[type="submit"]
):is(:hover, :focus-visible):not([disabled])::before { transform: scale(1.05); }
html body :is(.woocommerce-account .conta__botao:not(.conta__botao--forte), .woocommerce-account .cad__doc-ver, .woocommerce-account .conta__conteudo .woocommerce-Address-title .edit, .ains .ains__voltar, .woocommerce-account .conta__conteudo .button.cancel, .woocommerce-account .conta__conteudo .button.trocar_cartao):hover { color: #1f1e1a !important; }

/* A seta dos dropdowns, a do filtro do MindMarket: bolinha amarela de 30px com um
   chevron fino (10 × 6, traço 1,5). Gira 180° com mola ao abrir e no hover; aberto,
   o hover desvira. Vale para todos os dropdowns do site (cursos, transparência,
   inscrição, cadastro da conta, checkout). */
.amace-seta { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fcce45; color: #1f1e1a; transition: transform .4s cubic-bezier(.17, .67, .3, 1.33); }
.amace-seta svg { display: block; width: 10px; height: 6px; overflow: visible; }
:hover > .amace-seta, [aria-expanded="true"] > .amace-seta { transform: rotate(180deg); }
[aria-expanded="true"]:hover > .amace-seta { transform: rotate(0deg); }
[disabled] > .amace-seta, .is-travado > .amace-seta { background: #f3e6c0; transform: none !important; }
@media (hover: none) { :hover > .amace-seta { transform: none; } [aria-expanded="true"] > .amace-seta { transform: rotate(180deg); } }
@media (prefers-reduced-motion: reduce) { .amace-seta { transition: none; } }

/* As listas abertas dos dropdowns abrem como o menu da conta no header
   (.amace-atalho, amace-header-nova/assets/header.css): a caixa desce 8px com
   fade e as opções sobem 18px em sequência, com a mesma curva e os mesmos
   atrasos. Ao fechar, a caixa apaga subindo. Os scripts só trocam o [hidden];
   o @starting-style anima a entrada e o display com allow-discrete espera a
   saída terminar. Navegador antigo abre e fecha seco, como antes. */
:is(.atr-dd__lista, .acur-filtro__lista, .ains-sel__lista, .csel__lista, .amace-select-ui__lista) {
    --amace-dd-y: -8px;
    opacity: 1;
    transform: translateY(0);
    transition: transform .25s cubic-bezier(.5, 0, 0, 1), opacity .15s ease, display .25s allow-discrete;
}
/* o filtro de /cursos abre para cima: a caixa sobe em vez de descer */
.acur-filtro__lista { --amace-dd-y: 8px; }
:is(.atr-dd__lista, .acur-filtro__lista, .ains-sel__lista, .csel__lista, .amace-select-ui__lista)[hidden] { opacity: 0; transform: translateY(var(--amace-dd-y)); }
:is(.atr-dd__lista, .acur-filtro__lista, .ains-sel__lista, .csel__lista, .amace-select-ui__lista) > li { transition: transform .4s cubic-bezier(.5, 0, 0, 1), opacity .4s cubic-bezier(.5, 0, 0, 1); }
@starting-style {
    :is(.atr-dd__lista, .acur-filtro__lista, .ains-sel__lista, .csel__lista, .amace-select-ui__lista):not([hidden]) { opacity: 0; transform: translateY(var(--amace-dd-y)); }
    :is(.atr-dd__lista, .acur-filtro__lista, .ains-sel__lista, .csel__lista, .amace-select-ui__lista):not([hidden]) > li { opacity: 0; transform: translateY(18px); }
}
/* a sequência: 60ms na primeira e 35ms a mais em cada uma; da décima em diante
   entram juntas, para lista comprida (os estados do checkout) não demorar */
:is(.atr-dd__lista, .acur-filtro__lista, .ains-sel__lista, .csel__lista, .amace-select-ui__lista) > li:nth-child(1) { transition-delay: 60ms; }
:is(.atr-dd__lista, .acur-filtro__lista, .ains-sel__lista, .csel__lista, .amace-select-ui__lista) > li:nth-child(2) { transition-delay: 95ms; }
:is(.atr-dd__lista, .acur-filtro__lista, .ains-sel__lista, .csel__lista, .amace-select-ui__lista) > li:nth-child(3) { transition-delay: 130ms; }
:is(.atr-dd__lista, .acur-filtro__lista, .ains-sel__lista, .csel__lista, .amace-select-ui__lista) > li:nth-child(4) { transition-delay: 165ms; }
:is(.atr-dd__lista, .acur-filtro__lista, .ains-sel__lista, .csel__lista, .amace-select-ui__lista) > li:nth-child(5) { transition-delay: 200ms; }
:is(.atr-dd__lista, .acur-filtro__lista, .ains-sel__lista, .csel__lista, .amace-select-ui__lista) > li:nth-child(6) { transition-delay: 235ms; }
:is(.atr-dd__lista, .acur-filtro__lista, .ains-sel__lista, .csel__lista, .amace-select-ui__lista) > li:nth-child(7) { transition-delay: 270ms; }
:is(.atr-dd__lista, .acur-filtro__lista, .ains-sel__lista, .csel__lista, .amace-select-ui__lista) > li:nth-child(8) { transition-delay: 305ms; }
:is(.atr-dd__lista, .acur-filtro__lista, .ains-sel__lista, .csel__lista, .amace-select-ui__lista) > li:nth-child(9) { transition-delay: 340ms; }
:is(.atr-dd__lista, .acur-filtro__lista, .ains-sel__lista, .csel__lista, .amace-select-ui__lista) > li:nth-child(n+10) { transition-delay: 375ms; }
/* enquanto as opções sobem, elas passam 18px do pé da lista, e a lista que
   rola (max-height + overflow) mostrava a barra por um instante. A rolagem
   fica desligada só durante a entrada (a última opção termina em 775ms). */
:is(.atr-dd__lista, .acur-filtro__lista, .ains-sel__lista, .csel__lista, .amace-select-ui__lista):not([hidden]) { animation: amace-dd-sem-barra .8s; }
@keyframes amace-dd-sem-barra { 0%, 99% { overflow-y: hidden; } }
@media (prefers-reduced-motion: reduce) {
    :is(.atr-dd__lista, .acur-filtro__lista, .ains-sel__lista, .csel__lista, .amace-select-ui__lista), :is(.atr-dd__lista, .acur-filtro__lista, .ains-sel__lista, .csel__lista, .amace-select-ui__lista) > li { transition: none; }
}