/* Cards do /blog: o mesmo desenho dos cards do carrossel da Home
   (amace-hero-extras/assets/hero.css, bloco 9). Se mudar lá, mudar aqui. */
.amb__grade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}
.amb .hx-card {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    color: #1f1e1a !important;
    text-decoration: none !important;
    animation: amb-entra .5s cubic-bezier(.16, 1, .3, 1) backwards;
}
.amb .hx-card:focus-visible { outline: 3px solid rgba(205, 33, 42, .35); outline-offset: 3px; }
.amb .hx-card__foto { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #f3e6e4; }
.amb .hx-card__foto img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}
.amb .hx-card:hover .hx-card__foto img { transform: scale(1.05); }
/* categoria, título e data numa coluna; a seta na coluna da direita, no pé */
.amb .hx-card__corpo {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr;
    gap: 10px 16px;
    padding: 18px 10px 8px;
    font-family: Quicksand, sans-serif;
}
.amb .hx-card__corpo > :not(.hx-card__seta) { grid-column: 1; }
.amb .hx-card__cat { font-size: 13px; font-weight: 700; line-height: 1.5; }
.amb .hx-cat--vermelho { color: #cd212a; }
.amb .hx-cat--verde { color: #00b102; }
.amb .hx-cat--azul { color: #0045c0; }
.amb .hx-cat--amarelo { color: #c99300; }
.amb .hx-card__cat-sep { color: #b5aeaa; }
/* a categoria vira tag, como a do post: pílula rosada; com o mouse em cima dela uma pílula
   nasce do centro, com a mola do "Voltar para o blog", e o texto fica branco */
.amb .hx-card__cat { cursor: pointer; justify-self: start; position: relative; isolation: isolate; padding: 3px 11px; border-radius: 999px; background: #f7eeec; transition: color .25s ease; }
.amb .hx-card__cat::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #cd212a; transform: scale(0); transition: transform .4s cubic-bezier(.17, .67, .3, 1.33); }
.amb .hx-card__cat .hx-cat { transition: color .25s ease; }
@media (hover: hover) {
    .amb .hx-card__cat:hover::before { transform: scale(1); }
    html body .amb .hx-card__cat:hover .hx-cat { color: #fff !important; }
}
.amb .hx-card:focus-visible .hx-card__cat::before { transform: scale(1); }
/* a pílula na cor da categoria */
.amb .hx-card__cat:has(.hx-cat--vermelho)::before { background: #cd212a; }
.amb .hx-card__cat:has(.hx-cat--verde)::before { background: #00b102; }
.amb .hx-card__cat:has(.hx-cat--azul)::before { background: #0045c0; }
.amb .hx-card__cat:has(.hx-cat--amarelo)::before { background: #fcce45; }
html body .amb .hx-card:focus-visible .hx-card__cat .hx-cat { color: #fff !important; }
/* título em até 2 linhas (passou, "…") e sempre com a altura de 2 linhas */
.amb .hx-card__titulo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: calc(2 * 1.2em);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
}
.amb .hx-card__data { align-self: start; margin-top: -4px; font-size: 13px; font-weight: 600; line-height: 1.5; color: #767676; }
.amb .hx-card__seta {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: end;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #cd2121;
    color: #fff;
    /* escondida; no hover surge com a mola do botão padrão e gira para cima */
    transform: scale(0);
    transition: transform .4s cubic-bezier(.17, .67, .3, 1.33);
}
.amb .hx-card:hover .hx-card__seta, .amb .hx-card:focus-visible .hx-card__seta { transform: scale(1) rotate(-45deg); }
@media (hover: none) { .amb .hx-card__seta { transform: none; } }
@keyframes amb-entra { from { opacity: 0; transform: translateY(16px); } }

/* "Carregar mais postagens" no desenho do botão padrão do site (.hx-btn da Home) */
.amb__mais { display: flex; justify-content: center; margin-top: 48px; }
.amb .hx-btn {
    --hx-btn-icone: 40px;
    --hx-btn-pad: 10px;
    --hx-btn-gap: 8px;
    --hx-btn-fundo: #f9f0f0;
    --hx-btn-bola: #30ae16;
    --hx-btn-seta: #fff;
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 60px;
    min-height: 0;
    margin: 0;
    padding: var(--hx-btn-pad);
    padding-left: calc(var(--hx-btn-pad) + 6px);
    border: 0;
    background: none !important;
    color: #1f1e1a !important;
    font-family: Quicksand, sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    box-shadow: none;
    cursor: pointer;
    isolation: isolate;
}
.amb .hx-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 10px;
    background: var(--hx-btn-fundo);
    transition: transform .4s cubic-bezier(.17, .67, .3, 1.33);
}
.amb .hx-btn__texto { padding: 0 var(--hx-btn-pad); transition: transform .4s cubic-bezier(.17, .67, .3, 1.33); }
.amb .hx-btn__icone {
    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 cubic-bezier(.17, .67, .3, 1.33);
}
.amb .hx-btn__icone--padrao { margin-left: var(--hx-btn-gap); }
.amb .hx-btn__icone--hover { position: absolute; top: 50%; left: var(--hx-btn-pad); transform: translateY(-50%) scale(0); }
.amb .hx-btn:hover::before, .amb .hx-btn:focus-visible::before { transform: scale(1.05); }
.amb .hx-btn:hover .hx-btn__texto, .amb .hx-btn:focus-visible .hx-btn__texto { transform: translateX(calc(var(--hx-btn-icone) + var(--hx-btn-gap) - 6px)); }
.amb .hx-btn:hover .hx-btn__icone--padrao, .amb .hx-btn:focus-visible .hx-btn__icone--padrao { transform: scale(0); }
.amb .hx-btn:hover .hx-btn__icone--hover, .amb .hx-btn:focus-visible .hx-btn__icone--hover { transform: translateY(-50%) scale(1); }
.amb .hx-btn:focus-visible { outline: 3px solid rgba(205, 33, 42, .35); outline-offset: 3px; border-radius: 10px; }
.amb .hx-btn[disabled] { opacity: .6; cursor: wait; }

@media (max-width: 1024px) { .amb__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .amb__grade { grid-template-columns: 1fr; gap: 20px; }
    .amb .hx-card__titulo { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .amb .hx-card, .amb .hx-card__foto img, .amb .hx-card__seta, .amb .hx-card__cat::before, .amb .hx-btn *, .amb .hx-btn::before { animation: none; transition: none; }
}


/* loader do carregamento automático: o spinner do checkout */
.amb__carregando { display: flex; justify-content: center; align-items: center; min-height: 80px; margin-top: 32px; }
.amb__spinner { display: grid; place-items: center; }
.amb__spinner svg { width: 34px; transform-origin: center; animation: amb-gira 2s linear infinite; }
.amb__spinner circle { fill: none; stroke: #cd212a; stroke-width: 2; stroke-dasharray: 1, 200; stroke-dashoffset: 0; stroke-linecap: round; animation: amb-traco 1.5s ease-in-out infinite; }
@keyframes amb-gira { 100% { transform: rotate(360deg); } }
@keyframes amb-traco { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 200; stroke-dashoffset: -35px; } 100% { stroke-dashoffset: -125px; } }
.amb__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* faixa "Bem-vindo(a) ao nosso Blog" (41b0705) sobe por trás do header, como o
   hero da Home: puxa os 102px do espaço do header e devolve em padding, então
   o texto e o fim da faixa (onde os cards sobem) ficam no mesmo lugar */
body.mh-ativo .elementor-6612 .elementor-element-41b0705 { margin-top: -102px !important; padding-top: 102px !important; }
@media (max-width: 520px) {
    body.mh-ativo .elementor-6612 .elementor-element-41b0705 { margin-top: -80px !important; padding-top: 80px !important; }
}
@media (max-width: 767px) {
    .amb .hx-btn { --hx-btn-icone: 32px; --hx-btn-pad: 8px; height: 48px; font-size: 15px; }
    .amb .hx-card__titulo { font-size: 17px; }
}

/* "Bem-vindo(a) ao nosso Blog" (9a30d25): tudo preto, e "Blog" com o risco à mão
   no vermelho (o mesmo desenho de Bazar e Cursos) */
.elementor-6612 .elementor-element-9a30d25 .elementor-heading-title { color: #1f1e1a !important; }
.amb-marca { position: relative; display: inline-block; z-index: 0; color: inherit !important; white-space: nowrap; }
.amb-risco { position: absolute; left: 50%; top: 50%; z-index: -1; width: calc(100% + 20px); height: calc(100% + 20px); overflow: visible; transform: translate(-50%, -50%); fill: none; stroke: #cd212a; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1500; animation: amb-risca 1.2s .4s cubic-bezier(.5, 0, .2, 1) backwards; }
@keyframes amb-risca { from { stroke-dashoffset: 1500; } }
@media (prefers-reduced-motion: reduce) { .amb-risco { animation: none; } }
/* a letra que troca em "Bem-vind[o|a|e]" */
.amb-troca { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; margin-bottom: -.06em; }
.amb-troca > span { display: inline-block; }

/* a faixa do topo termina na mesma curva de /cursos (acur-onda), na cor do fundo da página */
.elementor-6612 .elementor-element-41b0705 { position: relative; }
.elementor-6612 .elementor-element-41b0705::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; height: 64px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill='%23faf4f3' d='M0,100V78C220,40 520,4 760,6C870,7 950,18 1000,28V100Z'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}
@media (max-width: 767px) { .elementor-6612 .elementor-element-41b0705::after { height: 28px; } }
/* os cards passam por cima da curva, como em /cursos */
.elementor-6612 .amb { position: relative; z-index: 3; }

/* o fundo do /blog num rosado bem claro (#faf4f3), com os cards brancos por cima
   (pedido do Caio, 28/09/2026); a curva do fim da faixa vai na mesma cor */
body.page-id-6612 { background: #faf4f3 !important; } /* !important: as configurações da página no Elementor pintam o body de branco */

/* acabou a lista (ou a categoria não tem mais): o spinner some */
.amb__carregando[hidden] { display: none; }
/* trocando de categoria: a grade apaga enquanto os cards novos chegam */
.amb__grade { transition: opacity .2s ease; }
.amb.is-trocando .amb__grade { opacity: .35; pointer-events: none; }

/* O filtro por categoria: o mesmo dropdown flutuante de /cursos (curso.css,
   .acur-filtro), fixo no canto de baixo e abrindo para cima. A animação de
   abrir e fechar vem do botao.css, que já cuida de toda .acur-filtro__lista. */
.amb-filtro { position: fixed; left: 24px; bottom: 24px; z-index: 99980; display: flex; width: max-content; max-width: calc(100vw - 110px); font-family: Quicksand, sans-serif; text-align: left; }
.amb-filtro .acur-filtro__botao { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; width: max-content; max-width: 100%; height: 48px; min-height: 0; padding: 0 16px 0 20px; border: 0; border-radius: 10px; background: #fff; color: #1f1e1a; font: 700 15px Quicksand, sans-serif; text-transform: none; letter-spacing: normal; box-shadow: 0 10px 30px rgba(31, 30, 26, .14) !important; cursor: pointer; }
.amb-filtro .acur-filtro__botao:hover, .amb-filtro .acur-filtro__botao:focus { background: #fff; color: #1f1e1a; }
.amb-filtro .acur-filtro__botao:focus-visible { outline: 3px solid rgba(205, 33, 42, .35); outline-offset: 2px; }
.amb-filtro .acur-filtro__rotulo { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.amb-filtro .acur-filtro__rotulo b, .amb-filtro .acur-filtro__lista b { min-width: 22px; padding: 2px 7px; border-radius: 999px; background: #f9f0f0; font-size: 12px; text-align: center; }
.amb-filtro .acur-filtro__lista { position: absolute; bottom: calc(100% + 8px); left: 0; width: max-content; min-width: 100%; max-height: calc(100vh - 140px); overflow-y: auto; margin: 0; padding: 6px; border-radius: 10px; background: #fff; box-shadow: 0 18px 44px rgba(31, 30, 26, .14); list-style: none; text-align: left; }
.amb-filtro .acur-filtro__lista[hidden] { display: none; }
.amb-filtro .acur-filtro__lista li { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; padding: 11px 12px; border-radius: 8px; color: #1f1e1a; font-size: 15px; font-weight: 700; cursor: pointer; outline: 0; }
.amb-filtro .acur-filtro__lista li span { display: inline-flex; align-items: center; gap: 8px; }
.amb-filtro .acur-filtro__lista li:hover, .amb-filtro .acur-filtro__lista li:focus-visible { background: #f9f0f0; }
.amb-filtro .acur-filtro__lista li[aria-selected=true] { color: #cd212a; }
/* a bolinha na cor da categoria, a mesma do nome no card */
.amb-filtro .acur-filtro__bola { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #cd2121; }
.amb-filtro .acur-filtro__bola[hidden] { display: none; }
.amb-filtro .amb-bola--vermelho { background: #cd212a; }
.amb-filtro .amb-bola--verde { background: #00b102; }
.amb-filtro .amb-bola--azul { background: #0045c0; }
.amb-filtro .amb-bola--amarelo { background: #fcce45; }
@media (max-width: 600px) { .amb-filtro { left: 14px; bottom: 14px; } }

/* filtro aberto: o botão fica por cima da lista, para a sombra dela não cair sobre ele */
.amb-filtro .acur-filtro__botao { position: relative; z-index: 2; }
.amb-filtro .acur-filtro__lista { z-index: 1; }

/* tag amarela: no hover a pílula enche de #FCCE45 (Press kit) e o texto fica grafite, para dar leitura */
@media (hover: hover) { html body .amb .hx-card__cat:hover .hx-cat--amarelo { color: #191813 !important; } }