/* Post do blog, layout Editorial */
.apost { --rosa: #f9f0f0; --bege: #f3e6e4; --texto: #1f1e1a; --suave: #6b6560; font-family: Quicksand, sans-serif; color: var(--texto); }
.apost :is(h1, h2, h3, p, a, button, time, span, li) { font-family: Quicksand, sans-serif; }
.apost__caixa { max-width: 1208px; margin: 0 auto; padding: 0 20px; }

/* a faixa do topo sobe por trás do header, como no /blog */
.apost__topo { position: relative; margin-top: -102px; padding: 150px 0 270px; background: var(--rosa); }
/* a onda da Hero na borda de baixo da faixa (e na de cima de "Outras postagens") */
.apost__onda { position: absolute; left: 0; width: 100%; height: 64px; fill: #fff; pointer-events: none; }
.apost__onda--baixo { bottom: -1px; }
.apost__onda--cima { top: -1px; height: 48px; transform: rotate(180deg); }
.apost__topo h1 { max-width: 920px; margin: 0; font-size: var(--t-secao, 40px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: var(--texto); }

/* "Voltar para o blog": a setinha numa bolinha branca à esquerda. No hover, como no
   botão do site: a bolinha some da esquerda e nasce à direita do texto, que anda
   junto; a seta em si não se mexe. */
.apost__voltar { --bola: 32px; --vao: 10px; --mola: cubic-bezier(.17, .67, .3, 1.33); --anda: calc(-1 * (var(--bola) + var(--vao))); position: relative; display: inline-flex; align-items: center; gap: var(--vao); margin-bottom: 26px; color: var(--texto); font-size: 15px; font-weight: 700; text-decoration: none; }
.apost__voltar-bola { display: grid; place-items: center; flex: 0 0 auto; width: var(--bola); height: var(--bola); border-radius: 50%; background: #fff; color: var(--texto); transition: transform .4s var(--mola); }
.apost__voltar-bola--hover { position:absolute;top:50%;left:0;background:#cd212a;color:#fff;transform:translateY(-50%) scale(0);transition:transform .4s cubic-bezier(.17,.67,.3,1.33); } /* a bolinha vermelha do hover do MindMarket: nasce do centro por cima da de sempre, no mesmo lugar */
.apost__voltar-texto { transition: transform .4s var(--mola); }
.apost__voltar:hover, .apost__voltar:focus-visible { color: var(--texto); }
.apost__voltar:is(:hover, :focus-visible) > .apost__voltar-bola:first-child { transform: scale(0); }
.apost__voltar:is(:hover, :focus-visible) .apost__voltar-bola--hover { transform:translateY(-50%) scale(1) }
.apost__voltar:focus-visible { outline: 3px solid rgba(205, 33, 42, .35); outline-offset: 4px; border-radius: 999px; }

.apost__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; color: var(--suave); font-size: 14px; font-weight: 600; }
.apost__meta > time::before, .apost__meta > span::before { content: "·"; margin-right: 14px; color: #c9bdb9; }
.apost__meta > time:first-child::before { content: none; }
.apost__cat { padding: 5px 12px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; text-decoration: none; }
.apost__cat--vermelho { color: #cd212a; } .apost__cat--verde { color: #00b102; } .apost__cat--azul { color: #0045c0; } .apost__cat--amarelo { color: #c99300; }
/* hover igual ao da bolinha do "Voltar para o blog": uma pílula vermelha nasce do centro,
   com a mesma mola, por cima da branca, e o texto fica branco */
.apost__cat { position: relative; isolation: isolate; transition: color .25s ease; }
.apost__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); }
@media (hover: hover) { html body .apost__cat:hover { color: #fff !important; } .apost__cat:hover::before { transform: scale(1); } }
html body .apost__cat:focus-visible { color: #fff !important; outline: 3px solid rgba(205, 33, 42, .35); outline-offset: 3px; }
.apost__cat:focus-visible::before { transform: scale(1); }
.apost__cat--vermelho::before { background: #cd212a; } .apost__cat--verde::before { background: #00b102; } .apost__cat--azul::before { background: #0045c0; } .apost__cat--amarelo::before { background: #fcce45; }
/* o texto da tag na cor da categoria, como nos cards do blog (html body: a regra de link do tema, .elementor-kit a, pintava de preto) */
html body .apost__cat--vermelho { color: #cd212a; } html body .apost__cat--verde { color: #00b102; }
html body .apost__cat--azul { color: #0045c0; } html body .apost__cat--amarelo { color: #c99300; }
@media (max-width: 767px) {
    /* no celular, a tag um pouco maior */
    html body .apost__cat { padding: 4px 12px; background: #fff; } /* branca: o fundo do post já é rosado */
}
@media (prefers-reduced-motion: reduce) { .apost__cat::before { transition: none; } }

.apost button { padding: 0; border: 0; background: none; box-shadow: none; }
.apost__capa { position: relative; z-index: 1; display: block; width: 100%; margin-top: -200px; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--bege); cursor: zoom-in; }
.apost__capa img, .apost__grade img { display: block; width: 100%; height: 100%; object-fit: cover; }

.apost__texto { max-width: 760px; margin-top: 36px; font-size: var(--t-texto, 16px); line-height: 1.75; color: #45413b; }
.apost__texto > * + * { margin-top: 1em; }
.apost__texto a { color: #cd212a; }
.apost__texto :is(iframe, video, figure, img) { max-width: 100%; border-radius: 12px; }
.apost__texto .wp-block-embed__wrapper iframe, .apost__texto iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }

.apost .apost__sub { margin: 60px 0 22px; font-size: 26px; font-weight: 700 !important; letter-spacing: -.01em; color: var(--texto); }
.apost__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.apost__grade button { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--bege); cursor: zoom-in; }
.apost__grade img { transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.apost__grade button:hover img { transform: scale(1.04); }
.apost__grade button:focus-visible, .apost__capa:focus-visible { outline: 3px solid rgba(205, 33, 42, .35); outline-offset: 3px; }

.apost__outras { position: relative; margin-top: 80px; padding: 70px 0 84px; background: var(--rosa); }

/* tela cheia: fundo bege, botões brancos que ficam vermelhos no hover */
.apost-luz { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; background: rgba(249, 240, 240, .97); font-family: Quicksand, sans-serif; }
.apost-luz[hidden] { display: none; }
.apost-luz__foto { margin: 0; }
.apost-luz__foto img { display: block; max-width: min(88vw, 1400px); max-height: 84vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(31, 30, 26, .18); }
.apost-luz .apost-luz__botao,
.apost-luz .apost-luz__botao:hover,
.apost-luz .apost-luz__botao:focus { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--texto, #1f1e1a); box-shadow: none; line-height: 0; cursor: pointer; isolation: isolate; transition: color .2s; }
/* hover da bolinha do "Voltar para o blog": uma vermelha nasce do centro, com a mola */
.apost-luz .apost-luz__botao::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: #cd212a; transform: scale(0); transition: transform .4s cubic-bezier(.17, .67, .3, 1.33); }
@media (hover: hover) { .apost-luz .apost-luz__botao:hover { color: #fff; } .apost-luz .apost-luz__botao:hover::before { transform: scale(1); } }
.apost-luz .apost-luz__botao:focus-visible { color: #fff; }
.apost-luz .apost-luz__botao:focus-visible::before { transform: scale(1); }
.apost-luz .apost-luz__botao svg { display: block; }
.apost-luz__x { top: 22px; right: 22px; }
.apost-luz__seta { top: 50%; translate: 0 -50%; }
.apost-luz__seta--esq { left: 24px; }
.apost-luz__seta--dir { right: 24px; }
.apost-luz__seta--dir svg { transform: scaleX(-1); }
.apost-luz__conta { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; padding: 6px 14px; border-radius: 999px; background: #fff; color: #1f1e1a; font-size: 13px; font-weight: 700; }
html.apost-luz-aberta { overflow: hidden; }

@media (prefers-reduced-motion: reduce) { .apost__grade img, .apost__voltar-bola, .apost__voltar-texto { transition: none; } }

@media (max-width: 767px) {
    .apost__caixa { padding: 0 16px; }
    .apost__topo { margin-top: -80px; padding: 110px 0 140px; }
    .apost__onda { height: 28px; }
    .apost__onda--cima { height: 22px; }
    .apost__voltar { margin-bottom: 20px; font-size: 14px; }
    .apost__capa { margin-top: -96px; aspect-ratio: 4 / 3; border-radius: 12px; }
    .apost__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .apost__grade button { border-radius: 10px; }
    .apost .apost__sub { margin-top: 44px; font-size: 22px; }
    .apost__outras { margin-top: 56px; padding: 40px 0 60px; }
    .apost-luz__foto img { max-width: 94vw; max-height: 74vh; }
    .apost-luz .apost-luz__botao { width: 44px; height: 44px; }
    .apost-luz__seta { top: auto; bottom: 16px; translate: none; }
    .apost-luz__seta--esq { left: 16px; } .apost-luz__seta--dir { right: 16px; }
    .apost-luz__x { top: 14px; right: 14px; }
    .apost-luz__conta { bottom: 24px; }
}

/* vídeo: no topo, na largura toda. O player é o do painel da No Sense (mesma
   disposição, ícones e interações), com o vermelho da AMACE no lugar do amarelo. */
.apost__videos { position: relative; z-index: 1; display: grid; gap: 20px; margin-top: -200px; }
.apost-player { --destaque: #cd212a; position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #050504; color: #f4f4ef; outline: none; user-select: none; -webkit-user-select: none; }
.apost-player video, .apost-player img, .apost-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.apost-player video { object-fit: contain; background: #050504; cursor: pointer; transform: scale(1.012); } /* o zoom de 1% some com a borda preta que alguns vídeos (gravações do WhatsApp) trazem na beirada */
.apost-player img { object-fit: cover; }
.apost-player.is-escondido, .apost-player.is-escondido video { cursor: none; }
.apost-player:focus-visible { box-shadow: inset 0 0 0 2px var(--destaque); }
.apost-player.is-cheia { border-radius: 0; }
.apost .apost-player button { font: inherit; box-shadow: none; }
.apost-player__controles { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: 36px 12px 8px; background: linear-gradient(to top, #000000d9, #00000080 45%, #0000); transition: opacity .2s ease; }
.apost-player.is-escondido .apost-player__controles, .apost-player:not(.is-comecou) .apost-player__controles { opacity: 0; pointer-events: none; }
.apost-player__linha { display: flex; align-items: center; gap: 6px; }
.apost .apost-player__botao { display: grid; place-items: center; width: 34px; height: 34px; min-height: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #f4f4ef; cursor: pointer; transition: background .15s, color .15s; }
.apost .apost-player__botao:hover { background: #ffffff1f; color: #ff5a62; }
.apost .apost-player__botao:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--destaque); }
.apost .apost-player__botao:focus:not(:focus-visible), .apost .apost-player__centro:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.apost-player__botao svg { flex-shrink: 0; }
.apost-player__tempo { margin-left: 4px; font: 500 12px Quicksand, sans-serif; color: #f4f4ef; font-variant-numeric: tabular-nums; white-space: nowrap; }
.apost-player__total { color: #a9a894; }
.apost-player__espaco { flex: 1; }
.apost-player__volume { display: flex; align-items: center; gap: 2px; }
.apost-player__volume-barra { display: flex; align-items: center; width: 0; height: 16px; opacity: 0; cursor: pointer; touch-action: none; transition: width .2s ease, opacity .2s ease, margin .2s ease; }
.apost-player__volume:hover .apost-player__volume-barra, .apost-player__volume:focus-within .apost-player__volume-barra, .apost-player__volume-barra.is-mexendo { width: 72px; margin-right: 8px; opacity: 1; }
.apost-player__volume-barra:hover .apost-player__trilho, .apost-player__volume-barra.is-mexendo .apost-player__trilho { height: 6px; }
.apost-player__barra { position: relative; display: flex; align-items: center; height: 16px; margin: 0 4px; cursor: pointer; touch-action: none; }
.apost-player__trilho { position: relative; width: 100%; height: 4px; border-radius: 4px; background: #ffffff33; overflow: hidden; transition: height .15s ease; }
.apost-player__barra:hover .apost-player__trilho, .apost-player__barra.is-arrastando .apost-player__trilho { height: 6px; }
.apost-player__carregado { position: absolute; inset: 0 auto 0 0; width: 0; background: #ffffff40; }
.apost-player__assistido { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--destaque); }
.apost-player__bolinha { position: absolute; top: 50%; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--destaque); box-shadow: 0 0 0 3px #00000066; transform: translate(-50%, -50%) scale(0); transition: transform .15s ease; pointer-events: none; }
.apost-player__barra:hover .apost-player__bolinha, .apost-player__barra.is-arrastando .apost-player__bolinha { transform: translate(-50%, -50%) scale(1); }
.apost .apost-player__centro { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; place-items: center; width: 64px; height: 64px; min-height: 0; padding: 0 0 0 4px; border: 0; border-radius: 50%; background: var(--destaque); color: #fff; transform: translate(-50%, -50%); cursor: pointer; transition: transform .15s ease; }
.apost .apost-player__centro:hover { background: var(--destaque); color: #fff; transform: translate(-50%, -50%) scale(1.07); }
.apost-player.is-comecou .apost-player__centro { display: none; }
.apost-player__girando { position: absolute; top: 50%; left: 50%; display: none; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid #ffffff2e; border-top-color: var(--destaque); border-radius: 50%; animation: apost-girando .8s linear infinite; pointer-events: none; }
.apost-player.is-comecou.is-esperando .apost-player__girando { display: block; }
@keyframes apost-girando { to { transform: rotate(360deg); } }
.apost-player.is-cheia .apost-player__controles { padding: 60px 22px 16px; }
.apost .apost-player.is-cheia .apost-player__botao { width: 42px; height: 42px; }
.apost-player.is-cheia .apost-player__tempo { font-size: 14px; }
.apost-player .apost-player__i-pausa, .apost-player.is-tocando .apost-player__i-play,
.apost-player .apost-player__i-mudo, .apost-player.is-mudo .apost-player__i-som,
.apost-player .apost-player__i-sair, .apost-player.is-cheia .apost-player__i-cheia { display: none; }
.apost-player.is-tocando .apost-player__i-pausa, .apost-player.is-mudo .apost-player__i-mudo, .apost-player.is-cheia .apost-player__i-sair { display: block; }
.apost-player--yt::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .12); pointer-events: none; }
@media (max-width: 767px) {
    .apost__videos { margin-top: -96px; gap: 12px; }
    .apost-player { border-radius: 12px; }
    .apost-player__controles { padding: 28px 6px 4px; }
    .apost-player__volume-barra { display: none; }
    .apost .apost-player__centro { width: 56px; height: 56px; }
}

/* a mesma largura do header (min(1208px, 100% - 32px); 10px de cada lado até 520px) */
.apost__caixa { max-width: 1240px; padding-left: 16px; padding-right: 16px; }
@media (max-width: 520px) { .apost__caixa { padding-left: 10px; padding-right: 10px; } }

/* fotos clicáveis das galerias (post e "Como é uma aula" do curso): o botão do tema
   (reset.css do Elementor) pinta o fundo de rosa #c36 no hover e no foco, e isso aparecia
   enquanto a foto ainda carregava. O fundo fica o bege de espera em qualquer estado. */
html body button[data-apost-foto],
html body button[data-apost-foto]:is(:hover, :focus, :active) { background-color: var(--bege, #f3e6e4) !important; color: inherit !important; }

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