/* AMACE · Extras da hero (Home, seção 0df65df do Elementor) */

.elementor-11621 .elementor-element-0df65df { position: relative; }

/* ---------- 1. Bordão vivo ---------- */
.hx-on-bordao .elementor-11621 .elementor-element.elementor-element-dd1c44e .elementor-heading-title.hx-titulo {
    margin: 0;
    font-size: clamp(40px, 4.6vw, 70px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.03em;
    color: #1f1e1a;
}
.hx-linha { display: block; }
.hx-titulo .text { color: #cd212a; }
.hx-pronome {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: .06em;
    margin-bottom: -.06em;
}
.hx-pronome > span { display: inline-block; white-space: nowrap; }
.hx-sublinhado { position: relative; display: inline-block; white-space: nowrap; }
.hx-sublinhado svg {
    position: absolute;
    left: -3%;
    bottom: -.14em;
    width: 106%;
    height: .36em;
    overflow: visible;
    pointer-events: none;
}
.hx-sublinhado path {
    fill: none;
    stroke: #30ae16;
    stroke-width: 12;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
    animation: hx-desenha 1.4s .8s cubic-bezier(.65, 0, .35, 1) forwards;
}
@keyframes hx-desenha { to { stroke-dashoffset: 0; } }

/* ---------- 2. Selo girando ---------- */
.hx-on-selo .elementor-element-6985cb5 { position: relative; }
.hx-selo {
    position: absolute;
    z-index: 3;
    left: -4%;
    top: 42%;
    width: clamp(104px, 9vw, 140px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 14px 30px rgba(31, 30, 26, .12);
    pointer-events: none;
}
.hx-selo > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: hx-gira 22s linear infinite;
}
.hx-selo text {
    fill: #1f1e1a;
    font-family: Quicksand, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.hx-selo__coracao {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #cd212a;
}
.hx-selo__coracao svg { width: 30%; height: 30%; animation: hx-bate 1.6s ease-in-out infinite; }
@keyframes hx-gira { to { transform: rotate(360deg); } }
@keyframes hx-bate { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.15); } 40% { transform: scale(.96); } }

/* ---------- 3. Movimento ---------- */
/* o Xulipa sobe na primeira carga */
.hx-on-movimento .elementor-element-6985cb5 img.wp-image-14330 {
    animation: hx-entra 1.2s .15s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes hx-entra { from { opacity: 0; transform: translateY(60px) scale(.96); } }
/* os corações flutuam, cada um no seu tempo */
.hx-on-movimento .elementor-element-c4ba46a img { animation: hx-flutua 4.2s ease-in-out infinite; }
.hx-on-movimento .elementor-element-298a6e9 img { animation: hx-flutua 5.4s -1.8s ease-in-out infinite; }
@keyframes hx-flutua {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-14px) rotate(8deg); }
}
/* parallax leve com o mouse (o JS define --mx e --my entre -1 e 1) */
.hx-on-movimento .elementor-element-6985cb5 > .elementor-widget-container {
    transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -8px), 0);
    transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.hx-on-movimento .elementor-element-c4ba46a,
.hx-on-movimento .elementor-element-298a6e9 {
    translate: calc(var(--mx, 0) * 22px) calc(var(--my, 0) * 18px);
    transition: translate .8s cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 4. Apoiado por ---------- */
.hx-apoio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid rgba(31, 30, 26, .1);
    max-width: 520px;
}
.hx-apoio__rotulo { font-family: Quicksand, sans-serif; font-size: 13px; font-weight: 600; color: #767676; }
.hx-apoio__logos { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hx-apoio__logos img {
    height: 30px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .55;
    transition: filter .3s ease, opacity .3s ease;
}
.hx-apoio__logos img:hover { filter: none; opacity: 1; }

/* ---------- 5. Indicador de rolagem ---------- */
.hx-rolar {
    position: absolute;
    z-index: 4;
    /* alinhado com o texto (container de 1200px do Elementor) */
    left: max(20px, calc((100% - 1200px) / 2));
    bottom: 110px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Quicksand, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #6b6560;
    text-decoration: none;
    transition: color .2s ease;
}
.hx-rolar:hover { color: #1f1e1a; }
.hx-rolar__mouse {
    position: relative;
    width: 22px;
    height: 34px;
    border: 2px solid currentColor;
    border-radius: 999px;
}
.hx-rolar__mouse::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 6px;
    width: 3px;
    height: 7px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: currentColor;
    animation: hx-roda 1.8s ease-in-out infinite;
}
@keyframes hx-roda { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- celular ---------- */
@media (max-width: 767px) {
    .hx-apoio { justify-content: center; margin-left: auto; margin-right: auto; }
    .hx-apoio__logos { justify-content: center; gap: 18px; }
    .hx-apoio__logos img { height: 24px; }
    .hx-selo { width: 92px; left: 2%; top: auto; bottom: 8%; }
    .hx-rolar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hx-sublinhado path { animation: none; stroke-dashoffset: 0; }
    .hx-selo > svg, .hx-selo__coracao svg, .hx-rolar__mouse::after,
    .hx-on-movimento .elementor-element-6985cb5 img.wp-image-14330,
    .hx-on-movimento .elementor-element-c4ba46a img,
    .hx-on-movimento .elementor-element-298a6e9 img { animation: none; }
}

/* ---------- 6. Xulipa novo: mancha parada, ele se mexe dentro dela ----------
   Caixa de referência: largura W, altura 1.22 W.
   - a mancha ocupa a parte de baixo (92% da largura, quadrada);
   - camada "topo": mostra a foto só acima da linha de corte (58% da altura),
     e pode sair da caixa pelos lados e por cima (claves e braços);
   - camada "dentro": mostra a foto só onde há mancha (máscara com o PNG);
   - a foto é maior que a caixa e desce além dela: os pés ficam fora da
     mancha e somem, sem o Xulipa "flutuar".
   As duas camadas usam a mesma foto e a mesma animação, então andam juntas;
   as máscaras não se mexem, e o recorte fica sempre no mesmo lugar. */
.hx-on-xulipa .elementor-element-6985cb5 > .elementor-widget-container {
    display: flex;
    justify-content: center;
    transform: none !important;
}
.hx-xulipa {
    /* mancha: largura e deslocamento à esquerda (em % da caixa). Os números
       sem % são os mesmos valores, para as contas da janela; mudar um é mudar
       o outro. --prop é a altura da caixa sobre a largura (1 / 1.22). */
    --mancha-l: 76%;
    --mancha-x: 33%;
    --ml: .76;
    --mx: .33;
    --prop: 1.22;
    --corte: 34%;
    position: relative;
    height: min(calc(90dvh - 190px), 660px);
    aspect-ratio: 1 / 1.22;
    max-width: 100%;
}
/* a mancha e a janela: o mesmo quadrado (a imagem da mancha é 920x919). As
   duas balançam juntas, só com rotação e escala (liso, sem repintar); a janela
   é recortada pela própria imagem da mancha, então a forma é a original */
.hx-xulipa__mancha,
.hx-xulipa__janela {
    position: absolute;
    left: var(--mancha-x);
    bottom: 0;
    width: var(--mancha-l) !important;
    aspect-ratio: 920 / 919;
    transform-origin: 50% 50%;
    animation: hx-mancha-balanca 9s ease-in-out infinite alternate;
    will-change: transform;
}
.hx-xulipa__mancha { height: auto !important; max-width: none !important; }
.hx-xulipa__janela {
    pointer-events: none;
    -webkit-mask: var(--mancha) center / 100% 100% no-repeat;
    mask: var(--mancha) center / 100% 100% no-repeat;
}
@keyframes hx-mancha-balanca {
    0% { transform: rotate(0deg) scale(1, 1); }
    35% { transform: rotate(3deg) scale(1.035, .975); }
    70% { transform: rotate(-2deg) scale(.98, 1.03); }
    100% { transform: rotate(1.5deg) scale(1.02, .99); }
}
/* a camada de dentro desfaz o balanço da janela (o mesmo movimento ao contrário,
   em volta do centro da janela), então a foto fica parada e só o recorte mexe */
@keyframes hx-mancha-desfaz {
    0% { transform: scale(1, 1) rotate(0deg); }
    35% { transform: scale(calc(1 / 1.035), calc(1 / .975)) rotate(-3deg); }
    70% { transform: scale(calc(1 / .98), calc(1 / 1.03)) rotate(2deg); }
    100% { transform: scale(calc(1 / 1.02), calc(1 / .99)) rotate(-1.5deg); }
}
.hx-xulipa__janela > .hx-xulipa__camada--dentro {
    transform-origin: calc((var(--mx) + var(--ml) / 2) * 100%) calc((var(--prop) - var(--ml) / 2) / var(--prop) * 100%);
    animation: hx-mancha-desfaz 9s ease-in-out infinite alternate;
}
/* bolha que se deforma (a do fundo dos ícones dos valores, "clip-1" do
   Exclusive Addons, copiada para não depender do plugin): usada nos pilares */
@keyframes hx-mancha {
    0%, 100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; }
    14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; }
    28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; }
    42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; }
    56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; }
    70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; }
    84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; }
}
@media (prefers-reduced-motion: reduce) {
    .hx-xulipa__mancha, .hx-xulipa__janela, .hx-xulipa__janela > .hx-xulipa__camada--dentro { animation: none; }
}
.hx-xulipa__camada {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hx-xulipa__camada--topo {
    clip-path: inset(-60% -60% var(--corte) -60%);
}
/* dentro da janela, a camada volta a ter o tamanho e a posição da caixa toda
   (as contas desfazem o deslocamento e a escala da janela), então a foto fica
   exatamente onde estava; a janela só recorta */
.hx-xulipa__janela > .hx-xulipa__camada--dentro {
    inset: auto;
    left: calc(-100% * var(--mx) / var(--ml));
    top: calc(-100% * (var(--prop) - var(--ml)) / var(--ml));
    width: calc(100% / var(--ml));
    height: calc(100% * var(--prop) / var(--ml));
}
.hx-xulipa__boneco {
    position: absolute;
    /* o corpo do Xulipa (não a imagem) no centro da mancha: por causa das
       claves abertas, o corpo fica a 64% da largura da foto (125% x 0,64 = 80%) */
    left: calc(var(--mancha-x) + var(--mancha-l) / 2 - 80%);
    /* -27%: afundado mais 10% dentro da mancha (antes -17%) */
    bottom: -27%;
    width: 125%;
    aspect-ratio: 1000 / 1190;
    translate: calc(var(--mx, 0) * -14px) calc(var(--my, 0) * -10px);
    transition: translate .7s cubic-bezier(.16, 1, .3, 1);
    will-change: transform, translate;
    /* +10% de saturação (foto e braço do puppet juntos) */
    filter: saturate(1.1);
}
.hx-xulipa__boneco img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
}
/* o braço com a clave roxa gira como um boneco, a partir do punho da manga */
.hx-xulipa__clave {
    transform-origin: 33.9% 34.7%;
}
/* o movimento do braço agora é o puppet em WebGL (hero.js); a imagem fica
   parada e escondida por baixo do canvas */
.hx-xulipa__boneco canvas.hx-xulipa__puppet {
    position: absolute;
    /* posição e tamanho vêm do JS (área maior que a foto) */
    pointer-events: none;
}
@keyframes hx-clave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-8deg); }
    55% { transform: rotate(5deg); }
    75% { transform: rotate(-2deg); }
}
.hx-on-movimento .hx-xulipa__boneco {
    animation: hx-xulipa-entra 1.3s .15s cubic-bezier(.16, 1, .3, 1) both,
               hx-xulipa-flutua 5.5s 1.6s ease-in-out infinite;
}
@keyframes hx-xulipa-entra { from { transform: translateY(18%); } }
@keyframes hx-xulipa-flutua {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-3.5%) rotate(-1.2deg); }
}
@media (max-width: 767px) {
    .hx-xulipa { height: auto; width: min(86vw, 420px); }
}
@media (prefers-reduced-motion: reduce) {
    .hx-on-movimento .hx-xulipa__boneco, .hx-on-movimento .hx-xulipa__clave { animation: none; }
    .hx-xulipa__boneco { translate: none; }
}

/* Corações da hero: um pouco menores, e o azul fora de cima do Xulipa
   (ia parar na clave laranja): vai para o rosa à direita da mancha. */
.elementor-11621 .elementor-element.elementor-element-c4ba46a,
.elementor-11621 .elementor-element.elementor-element-298a6e9 { width: 58px !important; max-width: 58px !important; }
.elementor-11621 .elementor-element.elementor-element-c4ba46a img,
.elementor-11621 .elementor-element.elementor-element-298a6e9 img { width: 100% !important; height: auto !important; }
.elementor-11621 .elementor-element.elementor-element-298a6e9 {
    left: auto !important;
    right: -8% !important;
    top: 66% !important;
}
@media (max-width: 767px) {
    .elementor-11621 .elementor-element.elementor-element-c4ba46a,
    .elementor-11621 .elementor-element.elementor-element-298a6e9 { width: 44px !important; max-width: 44px !important; }
}

/* Linhas do fundo da hero: a arte nova, mais refinada, com as mesmas specs
   da antiga (o ::before do Elementor: à direita, centrada, contain, mesma
   opacidade). Só a imagem muda. */
.elementor-11621 .elementor-element.elementor-element-0df65df::before {
    background-image: url("img/linhas.webp") !important;
    opacity: .2 !important;
}

/* o botão padrão (.hx-btn) mora em botao.css, carregado em todas as páginas */
/* "Saiba mais" do Como surgiu, embaixo do texto */
.hx-saiba-mais { margin-top: 28px; }
/* a coluna do botão dos posts (6954699) tinha largura fixa menor que o botão, que vazava da margem */
.elementor-element-6954699 { width: auto !important; max-width: none !important; flex: 0 0 auto !important; }
/* os botões do Elementor ficavam lado a lado com 10px; os novos pedem mais ar */
.elementor-11621 .elementor-element-e2b08e2 { gap: 12px !important; }
/* o widget do "Quero doar" fica vazio: some também o espaço dele */
.elementor-11621 .elementor-element-c7aed56 { display: none !important; }

/* respiro da hero: 28px do sublinhado do título até a descrição, 36px da
   descrição até o botão (o Elementor dava 20px entre tudo) */
.elementor-11621 .elementor-element.elementor-element-6971f7d { margin-top: 17px !important; }
.elementor-11621 .elementor-element.elementor-element-e2b08e2 { margin-top: 16px !important; }

/* ---------- 7. Cards dos posts (desenho dos "Featured Articles" do MindMarket) ---------- */
.hx-posts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}
.hx-post {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #1f1e1a !important;
    text-decoration: none !important;
}
.hx-post__foto {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    background: #f3e6e4;
    isolation: isolate;
}
.hx-post__foto img,
.hx-post__sem-foto {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}
.hx-post__sem-foto { background: linear-gradient(135deg, #fbe3e1, #fcce45); }
.hx-post:hover .hx-post__foto img,
.hx-post:hover .hx-post__sem-foto { transform: scale(1.05); }
.hx-post__tags {
    position: absolute;
    top: 13px;
    left: 13px;
    right: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.hx-post__tags span {
    padding: 6px 11px;
    border-radius: 999px;
    background: #fff;
    color: #1f1e1a;
    font-family: Quicksand, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
}
.hx-post__corpo { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.hx-post__titulo {
    font-family: Quicksand, sans-serif;
    font-size: clamp(17px, 1.4vw, 20px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
}
.hx-post__titulo { transition: color .3s ease; }
.hx-post:hover .hx-post__titulo { color: #cd2121; }
.hx-post:focus-visible { outline: 3px solid rgba(205, 33, 42, .35); outline-offset: 6px; border-radius: 20px; }
@media (max-width: 1024px) {
    .hx-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .hx-posts { grid-template-columns: 1fr; gap: 36px; }
}
@media (prefers-reduced-motion: reduce) {
    .hx-post__foto img, .hx-post__sem-foto { transition: none; }
}

/* ================= 9. Blog da Home em carrossel (widget 02c18a2) =================
   Uma faixa que rola na horizontal, sem barra. O hero.js estica a faixa até
   as duas bordas da tela (--hx-sangria-esq e --hx-sangria): parado, o primeiro
   cartão começa na margem do conteúdo, e ao arrastar os cartões saem pela
   borda da tela, sem corte seco na margem. Os cartões são o K do mockup:
   branco com borda fina, a foto 4:3 por dentro com canto próprio, categoria,
   título, a data pequena logo embaixo e um botão redondo de seta ao lado,
   que gira no hover. */
/* ================= 10. Logos dos parceiros em faixas contínuas (widget 24f6b82) =================
   Duas faixas de borda a borda da tela, uma indo e outra voltando, sem
   parar. Fundo rosa claro e cada logo numa
   pílula branca. A
   faixa usa 100vw; o clip na seção (e5ec349) corta a sobra da barra de
   rolagem, sem criar rolagem para o lado. */
.elementor-11621 .elementor-element-e5ec349 { overflow-x: clip; }
/* a seção das faixas e a da frase embaixo (4d9ddf5) no rosa claro */
.elementor-11621 .elementor-element-e5ec349,
.elementor-11621 .elementor-element-4d9ddf5 { background-color: #f9f0f0 !important; }
.hx-logos {
    display: grid;
    gap: 16px;
    width: 100vw;
    margin: 24px 0 24px calc(50% - 50vw);
}
.hx-logos__faixa { overflow: hidden; }
.hx-logos__trilho {
    display: flex;
    width: max-content;
    animation: hx-logos calc(var(--itens, 6) * 6s) linear infinite;
}
.hx-logos__faixa--volta .hx-logos__trilho { animation-direction: reverse; }
.hx-logos__grupo { display: flex; gap: 16px; padding-right: 16px; }
@keyframes hx-logos { to { transform: translateX(-25%); } }
.hx-logos__pilula {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 230px;
    height: 110px;
    padding: 0 40px;
    border-radius: 999px;
    background: #fff;
}
.hx-logos__pilula img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 150px !important;
    max-height: 66px !important;
    /* o scale de cada logo vem do widget; limitado para não vazar da pílula */
    transform: scale(min(var(--escala, 1), 2));
    user-select: none;
    -webkit-user-drag: none;
}
@media (max-width: 767px) {
    .hx-logos { gap: 12px; }
    .hx-logos__grupo { gap: 12px; padding-right: 12px; }
    .hx-logos__pilula { min-width: 160px; height: 80px; padding: 0 26px; }
    .hx-logos__pilula img { max-width: 108px !important; max-height: 48px !important; }
    /* no celular, na metade da velocidade (antes do script assumir e sem ele) */
    .hx-logos__trilho { animation-duration: calc(var(--itens, 6) * 12s); }
}
@media (prefers-reduced-motion: reduce) {
    .hx-logos__trilho { animation: none; }
    .hx-logos__faixa { overflow-x: auto; scrollbar-width: none; }
}

/* a seção do blog (f59bfa4) ganha o rosa claro do "Quem somos?"; as linhas
   em cima e embaixo (seções 8c40c16 e 4c5531d, só com um divisor) saem, e o
   botão "Ver todas as publicações" fica branco sobre o rosa */
.elementor-11621 .elementor-element-8c40c16,
.elementor-11621 .elementor-element-4c5531d { display: none !important; }
.elementor-11621 .elementor-element-f59bfa4 { background-color: #f9f0f0 !important; }
/* com o fundo, o respiro fica dentro da seção: o título encostava no topo */
.elementor-11621 .elementor-element-f59bfa4 { padding-top: 104px !important; padding-bottom: 112px !important; }
/* e as sobras de baixo (100px no widget, 60px no container, -80px na seção,
   que puxava a seção seguinte para cima do rosa) saem */
.elementor-11621 .elementor-element-f59bfa4 { margin-bottom: 0 !important; }
.elementor-11621 .elementor-element-396f7a8,
.elementor-11621 .elementor-element-02c18a2 > .elementor-widget-container { margin-bottom: 0 !important; }
@media (max-width: 767px) {
    .elementor-11621 .elementor-element-f59bfa4 { padding-top: 64px !important; padding-bottom: 72px !important; }
}
.elementor-11621 .elementor-element-74a2916 .hx-btn { --hx-btn-fundo: #fff; }
.hx-carrossel { position: relative; }
.hx-carrossel__trilho {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(270px, 29vw, 380px);
    gap: 28px;
    margin: 0 calc(var(--hx-sangria, 0px) * -1) 0 calc(var(--hx-sangria-esq, 0px) * -1);
    padding: 2px var(--hx-sangria, 0px) 2px calc(var(--hx-sangria-esq, 0px) + 2px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: calc(var(--hx-sangria-esq, 0px) + 2px);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.hx-carrossel__trilho::-webkit-scrollbar { display: none; }
/* 2 cards e meio à vista: o espaço vai da margem esquerda do site (a sangria da esquerda)
   até a borda da tela (100vw), menos os 2 vãos entre os cards */
/* 3 cards e meio na tela (3 vãos de 28px); antes 2 e meio (pedido do Caio em 29/09/2026) */
.hx-carrossel__trilho { grid-auto-columns: max(260px, calc((100vw - var(--hx-sangria-esq, 24px) - 84px) / 3.5)); }
/* e no fim também 2 e meio: o fim espelha o começo (último cartão na margem direita,
   os outros saindo pela borda esquerda). O !important vence o padding extra que o
   hero.js punha para o fim cair no começo de um cartão (sobrava 1 e meio). */
.hx-carrossel__trilho { padding-right: var(--hx-sangria, 0px) !important; }
/* arrastando com o mouse, o encaixe fica desligado para não brigar com a mão */
.hx-carrossel.arrastando .hx-carrossel__trilho { scroll-snap-type: none; }
.hx-carrossel.arrastando .hx-card { pointer-events: none; }
.hx-card {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 0; /* sem contorno, parado e no hover */
    border-radius: 10px; /* padrão do site (header, painéis, botões) */
    overflow: hidden;
    background: #fff;
    color: #1f1e1a !important;
    text-decoration: none !important;
    user-select: none;
    -webkit-user-drag: none;
    transition: border-color .3s ease;
}
.hx-card:focus-visible { outline: 3px solid rgba(205, 33, 42, .35); outline-offset: 3px; }
.hx-card__foto { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #f3e6e4; }
.hx-card__foto img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    pointer-events: none;
    transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}
.hx-card:hover .hx-card__foto img { transform: scale(1.05); }
/* categoria, título e data numa coluna; a seta ocupa a coluna da direita, no pé */
.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;
}
.hx-card__corpo > :not(.hx-card__seta) { grid-column: 1; }
.hx-card__cat { font-size: 13px; font-weight: 700; line-height: 1.5; color: #cd2121; }
.hx-card__titulo { font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
/* título em no máximo 2 linhas (passou, vira "…") e sempre com a altura de 2 linhas, para os cards ficarem iguais */
.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); }
.hx-card__data { align-self: start; margin-top: -4px; font-size: 13px; font-weight: 600; line-height: 1.5; color: #767676; }
.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 mesma mola da bolinha do botão padrão (.hx-btn) */
    transform: scale(0);
    transition: transform .4s cubic-bezier(.17, .67, .3, 1.33);
}
.hx-card:hover .hx-card__seta, .hx-card:focus-visible .hx-card__seta { transform: scale(1) rotate(-45deg); } /* surge e gira para cima, como antes */
/* no toque não há hover: a seta fica sempre à mostra */
@media (hover: none) { .hx-card__seta { transform: none; } }

/* selo "Arraste": segue o mouse sobre o carrossel no lugar da seta do
   cursor (só em quem tem mouse; no toque o dedo já sabe o que fazer) */
.hx-carrossel__arraste {
    /* pílula azul da marca; para verde, troque por #30ae16 */
    --hx-arraste: #2f4bbd;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-radius: 999px;
    background: var(--hx-arraste);
    color: #fff;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.4);
    transition: opacity .2s ease, transform .35s cubic-bezier(.17, .67, .3, 1.33);
}
.hx-carrossel__arraste svg { width: 18px; height: 18px; }
.hx-carrossel__arraste b {
    font-family: Quicksand, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #fff;
}
@media (hover: hover) and (pointer: fine) {
    .hx-carrossel.com-mouse .hx-carrossel__trilho { cursor: none; }
    .hx-carrossel.com-mouse.dentro .hx-carrossel__arraste { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .hx-carrossel.com-mouse.dentro.arrastando .hx-carrossel__arraste { transform: translate(-50%, -50%) scale(.85); }
}
@media (max-width: 640px) {
    .hx-carrossel__trilho { grid-auto-columns: 80vw; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .hx-card__foto img, .hx-card__seta, .hx-carrossel__arraste { transition: none; }
}

/* ================= 8. Nossos 3 pilares (seção 79d5a63): refino ================= */
/* fundo rosado bem claro (pedido do Caio, 28/09/2026); as ondas que encostam
   nela (a de baixo do "Quem somos?" e a de cima do Blog) vão na mesma cor */
.elementor-11621 .elementor-element-79d5a63 { background-color: #f9f4f3 !important; }
/* mesma estrutura e cores de hoje; só acabamento: cantos de 24px como os
   cards dos posts, ícone num círculo branco dentro do card (sem o recorte
   torto que vazava pra cima), tipografia mais firme e um leve hover */
body.hx-on-pilares .elementor-element-c5aab85 .elementor-heading-title { color: #333 !important; } /* igual aos outros titulozinhos */
body.hx-on-pilares .elementor-element-6a9fee3 .elementor-heading-title { font-size: 16px !important; line-height: 1.55 !important; color: #5c5854 !important; }
/* respiro: acima (depois da hero), entre título e cards, e embaixo */
body.hx-on-pilares .elementor-element-79d5a63 { padding-top: 96px !important; padding-bottom: 104px !important; }
body.hx-on-pilares .elementor-element-82f689d { margin-top: 48px !important; }
/* cards encostados nas mesmas margens do título e da linha: sem o padding
   de 10px das colunas, e o espaço entre eles vira gap */
body.hx-on-pilares .elementor-element-82f689d > .elementor-container { gap: 24px !important; }
body.hx-on-pilares .elementor-element-82f689d > .elementor-container > .elementor-column { width: calc((100% - 48px) / 3) !important; }
body.hx-on-pilares .elementor-element-82f689d > .elementor-container > .elementor-column > .elementor-widget-wrap { padding: 0 !important; }
@media (max-width: 767px) {
    body.hx-on-pilares .elementor-element-79d5a63 { padding-top: 64px !important; padding-bottom: 72px !important; }
    body.hx-on-pilares .elementor-element-82f689d { margin-top: 32px !important; }
    body.hx-on-pilares .elementor-element-82f689d > .elementor-container { gap: 16px !important; }
    body.hx-on-pilares .elementor-element-82f689d > .elementor-container > .elementor-column { width: 100% !important; }
}
/* cards dos pilares: widget "Caixa de imagem" nativo do Elementor (antes era o
   Infobox do Exclusive Addons), com a classe hx-pilarcard (hx-pilar é do acordeão, desligado) e a cor no modificador.
   O ícone fica numa bolha branca que se deforma devagar (a mesma animação da
   mancha do Xulipa, hx-mancha). */
body.hx-on-pilares .elementor-element-82f689d .hx-pilarcard,
body.hx-on-pilares .elementor-element-82f689d .hx-pilarcard > .elementor-widget-container { height: 100% !important; }
body.hx-on-pilares .elementor-element-82f689d .hx-pilarcard .elementor-image-box-wrapper {
    height: 100%; padding: 32px 32px 36px; border-radius: 10px; /* padrão do site */
    color: #fff; text-align: left;
    transition: transform .45s cubic-bezier(.17, .67, .3, 1.33), box-shadow .45s ease;
}
body.hx-on-pilares .elementor-element-82f689d .hx-pilarcard--vermelho .elementor-image-box-wrapper { background: #cd2121; }
body.hx-on-pilares .elementor-element-82f689d .hx-pilarcard--verde .elementor-image-box-wrapper { background: #30ae16; }
body.hx-on-pilares .elementor-element-82f689d .hx-pilarcard--azul .elementor-image-box-wrapper { background: #2446b9; }
body.hx-on-pilares .elementor-element-82f689d .hx-pilarcard .elementor-image-box-wrapper:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -18px rgba(31, 30, 26, .35); }
body.hx-on-pilares .elementor-element-82f689d .hx-pilarcard .elementor-image-box-img {
    display: grid !important; place-items: center; width: 64px !important; height: 64px; margin: 0 0 36px !important;
    background: #fff;
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    animation: hx-mancha 10s linear infinite alternate;
    transition: transform .45s cubic-bezier(.17, .67, .3, 1.33);
}
/* cada ícone começa num ponto diferente da animação, como antes */
body.hx-on-pilares .elementor-element-82f689d .hx-pilarcard--verde .elementor-image-box-img { animation-delay: -3.3s; }
body.hx-on-pilares .elementor-element-82f689d .hx-pilarcard--azul .elementor-image-box-img { animation-delay: -6.6s; }
body.hx-on-pilares .elementor-element-82f689d .hx-pilarcard .elementor-image-box-wrapper:hover .elementor-image-box-img { transform: rotate(-8deg) scale(1.06); }
body.hx-on-pilares .elementor-element-82f689d .hx-pilarcard .elementor-image-box-img img { width: 30px !important; height: 30px !important; }
body.hx-on-pilares .elementor-element-82f689d .hx-pilarcard .elementor-image-box-title { margin: 0 0 12px !important; font-family: Quicksand, sans-serif; font-size: 22px !important; font-weight: 700 !important; letter-spacing: -.01em !important; line-height: 1.2 !important; color: #fff !important; }
body.hx-on-pilares .elementor-element-82f689d .hx-pilarcard .elementor-image-box-description { margin: 0; font-family: Quicksand, sans-serif; font-size: 16px !important; font-weight: 500 !important; line-height: 1.55 !important; color: rgba(255, 255, 255, .92) !important; }
/* os dois parágrafos de cada texto */
body.hx-on-pilares .elementor-element-82f689d .hx-pilarcard__par { display: block; }
body.hx-on-pilares .elementor-element-82f689d .hx-pilarcard__par + .hx-pilarcard__par { margin-top: 12px; }
@media (max-width: 767px) {
    body.hx-on-pilares .elementor-element-82f689d .hx-pilarcard .elementor-image-box-wrapper { padding: 26px 24px 30px; }
    body.hx-on-pilares .elementor-element-82f689d .hx-pilarcard .elementor-image-box-img { margin-bottom: 26px !important; }
}
@media (prefers-reduced-motion: reduce) {
    body.hx-on-pilares .elementor-element-82f689d .hx-pilarcard .elementor-image-box-img { animation: none; }
}

/* ---------- 8b. Nossos 3 pilares em acordeão (no lugar dos 3 cards) ---------- */
body.hx-on-pilares-acordeao .elementor-element-82f689d .elementor-element-bfd93f3,
body.hx-on-pilares-acordeao .elementor-element-82f689d .elementor-element-0e9ec40 { display: none !important; }
body.hx-on-pilares-acordeao .elementor-element-82f689d > .elementor-container > .elementor-element-7cd93f2 { width: 100% !important; }
.hx-pilares { display: flex; align-items: center; gap: 6px; height: 506px; }
.hx-pilar { position: relative; flex: 0 0 88px; height: 400px; overflow: hidden; padding: 24px; border-radius: 44px; color: #fff; }
.hx-pilar.on { flex-basis: calc(100% - 188px); height: 506px; border-radius: 20px; }
.hx-pilar:not(.on) { cursor: pointer; }
.hx-pilar:focus-visible { outline: 3px solid rgba(31, 30, 26, .35); outline-offset: 3px; }
.hx-pilar--vermelho { background: #cd2121; }
.hx-pilar--verde { background: #30ae16; }
.hx-pilar--azul { background: #2446b9; }
.hx-pilar__conteudo { width: var(--hx-pilar-w, 964px); height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.hx-pilar__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.hx-pilar__titulo { margin: 0 !important; font-family: Quicksand, sans-serif; font-size: clamp(52px, 6vw, 86px); font-weight: 700; line-height: .9; letter-spacing: -.055em; color: #fff; }
.hx-pilar__icone { display: grid; place-items: center; flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; background: #fff; }
.hx-pilar__icone img { width: 30px; height: 30px; }
.hx-pilar__baixo { display: flex; align-items: flex-end; gap: 36px; }
.hx-pilar__baixo p { margin: 0 !important; max-width: 660px; font-family: Quicksand, sans-serif; font-size: 17px; font-weight: 500; line-height: 1.6; color: rgba(255, 255, 255, .95); }
.hx-pilar__texto { display: grid; gap: 14px; }
.hx-pilar__vertical { position: absolute; bottom: 0; left: 100%; display: flex; justify-content: center; width: 400px; padding: 32px; transform: rotate(-90deg); transform-origin: 0 100%; }
.hx-pilar__vertical p { margin: 0 !important; font-family: Quicksand, sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; color: #fff; }
@media (max-width: 991px) {
    .hx-pilares { flex-direction: column; height: auto; }
    .hx-pilar, .hx-pilar.on { width: 100%; height: auto; flex: 0 0 74px; border-radius: 37px; }
    .hx-pilar.on { flex-basis: auto; border-radius: 20px; }
    .hx-pilar__conteudo { width: 100%; height: auto; gap: 28px; }
    .hx-pilar__baixo { flex-direction: column; align-items: stretch; gap: 20px; }
    .hx-pilar__vertical { width: 100%; left: 0; top: 0; bottom: auto; transform: none; padding: 22px 28px; justify-content: flex-start; }
    .hx-pilar__vertical p { font-size: 22px; }
}
@media (max-width: 767px) {
    .hx-pilar__titulo { font-size: 44px; }
    .hx-pilar__icone { width: 52px; height: 52px; }
}


/* "Quem somos?": fundo da seção (0eec6fe) */
.elementor-11621 .elementor-element-0eec6fe { background-color: #f9f0f0 !important; }
/* ilustração do "Quem somos?" maior. A imagem está espelhada no Elementor, então
   origem 100% prende a borda esquerda visual e ela cresce para a direita; o que
   passar da coluna (as linhas clarinhas do fundo) é cortado antes do texto */
.elementor-11621 .elementor-element-16f9d21 img { transform: scale(1.3); transform-origin: 100% 50%; transition: none; }
.elementor-11621 .elementor-element-16f9d21 > .elementor-widget-container { clip-path: inset(-60% -100% -60% 0); } /* container espelhado: o "0" da esquerda corta a borda direita visual */
/* corações flutuando em volta da menina do "Quem somos?". O container é espelhado
   (rotateY 180), então "right" aqui é a esquerda visual */
.elementor-11621 .elementor-element-16f9d21 > .elementor-widget-container { position: relative; }
.hx-qs-coracao { position: absolute; z-index: 2; width: 44px !important; height: auto !important; transform: none; animation: hx-flutua 4.2s ease-in-out infinite; }
.hx-qs-coracao--verde { right: 7%; top: 5%; scale: -1 1; }   /* acima do cabelo, espelhado */
.hx-qs-coracao--amarelo { right: 66%; top: 80%; width: 38px !important; animation-duration: 5.4s; animation-delay: -1.8s; }   /* mais embaixo, na mecha branca */
@media (prefers-reduced-motion: reduce) { .hx-qs-coracao { animation: none; } }

/* ---------- coração desenhado à mão antes dos titulozinhos (eyebrows) da Home ----------
   Formato irregular, cada um torto de um jeito; nasce (se desenha) quando aparece na tela
   (só uma vez, sem hover). O SVG entra pelo filtro do PHP. */
.elementor-11621 :is(.elementor-element-8bb7922, .elementor-element-b9cae2b, .elementor-element-41acc51, .elementor-element-c5aab85) .elementor-heading-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.hx-eb-coracao {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    overflow: visible;
    fill: none;
    stroke: var(--hx-eb, #cd2121);
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 90;
    stroke-dashoffset: 90;
}
/* sem JS (ou com "reduzir movimento") ele já aparece desenhado */
html:not(.hx-eb-js) .hx-eb-coracao, .hx-eb-coracao.nasceu { stroke-dashoffset: 0; }
.hx-eb-coracao.nasceu { animation: hx-eb-nasce 1.1s cubic-bezier(.5, 0, .2, 1) backwards; }
@keyframes hx-eb-nasce { from { stroke-dashoffset: 90; } }
.elementor-11621 .elementor-element-8bb7922 { --hx-eb: #cd2121; } /* Bem-vindo(a) a AMACE RJ */
.elementor-11621 .elementor-element-b9cae2b { --hx-eb: #30ae16; } /* Nascida de um sonho */
.elementor-11621 .elementor-element-41acc51 { --hx-eb: #2446b9; } /* Quem somos? */
.elementor-11621 .elementor-element-c5aab85 { --hx-eb: #e8b21a; } /* A base de tudo */
.elementor-11621 .elementor-element-8bb7922 .hx-eb-coracao { rotate: -9deg; scale: 1.05 .95; }
.elementor-11621 .elementor-element-b9cae2b .hx-eb-coracao { rotate: 7deg; scale: .95 1.05; }
.elementor-11621 .elementor-element-41acc51 .hx-eb-coracao { rotate: -3deg; scale: 1.08 1; }
.elementor-11621 .elementor-element-c5aab85 .hx-eb-coracao { rotate: 11deg; scale: 1 .92; }
@media (prefers-reduced-motion: reduce) { .hx-eb-coracao { stroke-dashoffset: 0 !important; animation: none !important; } }

/* descrição embaixo de "Últimas postagens do Blog", no tom do texto da direita dos pilares */
.hx-blog-desc { margin: 14px 0 0 !important; max-width: none; font-family: Quicksand, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.55; color: #5c5854; }

/* texto ao lado do título dos pilares (6a9fee3): alinhado à esquerda; o bloco
   continua encostado na margem direita do site */
body.hx-on-pilares .elementor-element-6a9fee3 .elementor-heading-title { text-align: left !important; }
body.hx-on-pilares .elementor-element-6a9fee3 > .elementor-widget-container { width: fit-content; margin-left: auto; }
/* e o texto desce para a base do título (colunas da mesma altura, conteúdo da direita no pé) */
body.hx-on-pilares .elementor-element-d645721 > .elementor-container { align-items: stretch !important; }
body.hx-on-pilares .elementor-element-0053d36 > .elementor-widget-wrap { align-content: flex-end !important; align-items: flex-end !important; }
/* ajuste fino: as caixas terminam juntas, mas a linha de base do texto pequeno ficava ~3px abaixo da do título */
body.hx-on-pilares .elementor-element-6a9fee3 { transform: translateY(-3px); }
@media (max-width: 767px) { body.hx-on-pilares .elementor-element-6a9fee3 { transform: none; } }

/* ---------- Escala de texto da Home (fora a hero) ----------
   titulozinho 14px/700 · título de seção 40px/800 · descrição e texto corrido
   16px/500/1,55 · título de card 22px/700/1,2 (pilares e blog) · texto pequeno
   (categoria, data, legenda) 13px/1,5. A faixa "Circo • Cultura…" e os botões
   ficam de fora: são decoração e ação, não texto.

   Títulos e descrições das seções: um tamanho só
   (fora a hero). Os títulos seguem o que já era a maioria (40px, peso 800);
   as descrições seguem a dos pilares e a do blog (16px, entrelinha 1,55,
   cinza #5c5854). As de "Como surgiu" e "Quem somos" estavam em 15px com a
   linha apertada (18px). */
.elementor-11621 :is(.elementor-element-d505ba1, .elementor-element-e4d47a7) .elementor-headline,
.elementor-11621 :is(.elementor-element-d505ba1, .elementor-element-e4d47a7) .elementor-headline *,
.elementor-11621 :is(.elementor-element-771c451, .elementor-element-73b03fa) .elementor-heading-title {
    font-family: Quicksand, sans-serif !important;
    font-size: clamp(30px, 2.2vw + 12px, 40px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: normal !important;
}
.elementor-11621 :is(.elementor-element-7c6a7c2, .elementor-element-9e2eb72, .elementor-element-e9a0344, .elementor-element-bf398a5, .elementor-element-6a9fee3) .elementor-heading-title,
.elementor-11621 .hx-blog-desc {
    font-family: Quicksand, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    letter-spacing: normal !important;
    color: #5c5854 !important;
}

/* texto pequeno (legendas): 13px, entrelinha 1,5, destaque em 700 */
.elementor-11621 .elementor-element-3433faa .elementor-heading-title { font-size: 13px !important; font-weight: 500 !important; line-height: 1.5 !important; color: #767676 !important; }
.elementor-11621 .elementor-element-3433faa .elementor-heading-title :is(b, strong, .ttext) { font-weight: 700 !important; }

/* rabisco embaixo de "AMACE?" no "Como surgiu" (d505ba1): vermelho da marca */
.elementor-11621 .elementor-element-d505ba1 .elementor-headline-dynamic-wrapper svg path { stroke: #cd212a !important; }

/* "Quem somos?" (0eec6fe): a forma de baixo deixa de ser a mesma de cima (uma
   linha inclinada suave) e vira uma onda orgânica, assimétrica, na cor da
   seção seguinte (os pilares, #f9f4f3) */
.elementor-11621 .elementor-element-0eec6fe .elementor-shape-bottom {
    transform: none !important;
    bottom: -1px !important;
    height: clamp(60px, 7vw, 110px) !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23f9f4f3' d='M0 100V52C150 86 330 100 540 72S880 6 1090 20C1250 30 1350 66 1440 58V100Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat !important;
}
.elementor-11621 .elementor-element-0eec6fe .elementor-shape-bottom svg { display: none !important; }

/* Blog (f59bfa4): no topo, uma onda desenhada vindo da cor da seção de cima (#f9f4f3)
   (outra curva, para não repetir a do "Quem somos?") */
.elementor-11621 .elementor-element-f59bfa4::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -1px;
    left: 0;
    right: 0;
    height: clamp(56px, 6.5vw, 100px);
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23f9f4f3' d='M0 0H1440V40C1330 66 1190 34 1020 48S710 98 470 72C300 54 150 30 0 60Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat !important;
}
/* mais respiro entre a onda do topo e o título do Blog (era 104px) */
.elementor-11621 .elementor-element-f59bfa4 { padding-top: calc(clamp(56px, 6.5vw, 100px) + 80px) !important; }
@media (max-width: 767px) { .elementor-11621 .elementor-element-f59bfa4 { padding-top: calc(clamp(56px, 6.5vw, 100px) + 40px) !important; } }
/* titulozinho "Novidades" do Blog: igual aos outros (12px, 700, #333, coração que nasce) */
.hx-eb-extra { display: flex; align-items: center; gap: 8px; margin: 0 0 14px !important; font-family: Quicksand, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.5; color: #333; --hx-eb: #cd2121; }
.hx-eb-extra .hx-eb-coracao { rotate: 6deg; scale: 1 .94; }
/* categorias dos cards do blog, cada uma numa cor da AMACE (definida pelo ID no PHP).
   O amarelo puro some no branco: no texto vai um amarelo mais fechado */
.hx-card__cat .hx-cat--vermelho { color: #cd212a; }
.hx-card__cat .hx-cat--verde { color: #00b102; }
.hx-card__cat .hx-cat--azul { color: #0045c0; }
.hx-card__cat .hx-cat--amarelo { color: #c99300; }
.hx-card__cat-sep { color: #b5aeaa; }
/* a categoria vira tag, como nos cards do /blog (amace-blog-nova/assets/blog.css): pílula
   rosada; com o mouse em cima dela, uma pílula na cor da categoria nasce do centro, com a
   mola do botão, e o texto fica branco. Clicar leva ao /blog filtrado (hero.js) */
.hx-carrossel .hx-card__cat { cursor: pointer; justify-self: start; position: relative; isolation: isolate; padding: 3px 11px; border-radius: 999px; background: #f7eeec; transition: color .25s ease; }
.hx-carrossel .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); }
.hx-carrossel .hx-card__cat .hx-cat { transition: color .25s ease; }
@media (hover: hover) {
    .hx-carrossel .hx-card__cat:hover::before { transform: scale(1); }
    html body .hx-carrossel .hx-card__cat:hover .hx-cat { color: #fff !important; }
}
.hx-carrossel .hx-card__cat:has(.hx-cat--vermelho)::before { background: #cd212a; }
.hx-carrossel .hx-card__cat:has(.hx-cat--verde)::before { background: #00b102; }
.hx-carrossel .hx-card__cat:has(.hx-cat--azul)::before { background: #0045c0; }
.hx-carrossel .hx-card__cat:has(.hx-cat--amarelo)::before { background: #fcce45; }
@media (prefers-reduced-motion: reduce) { .hx-carrossel .hx-card__cat::before { transition: none; } }
/* "Ver todas as publicações": a bolinha da seta em verde */
.elementor-11621 .elementor-element-74a2916 .hx-btn { --hx-btn-bola: #30ae16; --hx-btn-seta: #fff; }

/* Blog da Home: sai o bloco de cima (titulozinho, título, descrição e o botão
   ao lado); o botão agora fica embaixo dos cards, alinhado à direita da coluna */
.elementor-11621 .elementor-element-b9d03c2 { display: none !important; }
.hx-blog-rodape { display: flex; justify-content: flex-end; align-items: center; gap: 20px; margin-top: 40px; }
/* contador 1/6 ao lado do botão, num círculo branco da altura dele: o número de agora escuro, o total apagado; ao trocar, o número sobe */
.hx-contador { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--hx-contador, 60px); height: var(--hx-contador, 60px); border-radius: 50%; background: #fff; font-family: Quicksand, sans-serif; font-variant-numeric: tabular-nums; line-height: 1; color: #8a847f; font-size: 16px; font-weight: 600; overflow: hidden; }
.hx-contador__atual { display: inline-block; color: #161616; font-size: inherit; font-weight: 700; }
.hx-contador__total { margin-left: 2px; }
.hx-contador__atual.troca { animation: hx-contador-sobe .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes hx-contador-sobe { from { transform: translateY(70%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hx-contador__atual.troca { animation: none; } }
.hx-btn--blog { --hx-btn-fundo: #fff; --hx-btn-bola: #30ae16; --hx-btn-seta: #fff; }
@media (max-width: 640px) { .hx-blog-rodape { margin-top: 28px; } } /* à direita também no celular, como no desktop */
/* sem o bloco de título, o respiro de cima do Blog encolhe: a onda + 24px */
.elementor-11621 .elementor-element-f59bfa4 { padding-top: calc(clamp(56px, 6.5vw, 100px) + 24px) !important; }
@media (max-width: 767px) { .elementor-11621 .elementor-element-f59bfa4 { padding-top: calc(clamp(56px, 6.5vw, 100px) + 16px) !important; } }
.elementor-11621 .elementor-element-396f7a8 { margin-top: 0 !important; } /* era o espaço entre o título (que saiu) e os cards */
/* só um respiro mínimo entre a onda e os cards */
.elementor-11621 .elementor-element-f59bfa4 { padding-top: calc(clamp(56px, 6.5vw, 100px) + 8px) !important; }
@media (max-width: 767px) { .elementor-11621 .elementor-element-f59bfa4 { padding-top: calc(clamp(56px, 6.5vw, 100px) + 8px) !important; } }
/* respiro acima dos cards do Blog: a onda + 60px (24 ficou apertado; 80 + a margem antiga era demais) */
.elementor-11621 .elementor-element-f59bfa4 { padding-top: calc(clamp(56px, 6.5vw, 100px) + 60px) !important; }
@media (max-width: 767px) { .elementor-11621 .elementor-element-f59bfa4 { padding-top: calc(clamp(56px, 6.5vw, 100px) + 36px) !important; } }

/* ================= celular: botões, fundo, Xulipa e fontes ================= */
@media (max-width: 767px) {
    /* todos os botões no desenho do site ficam menores */
    .hx-contador { --hx-contador: 48px; font-size: 15px; }
    /* linhas do fundo da hero mais apagadas */
    .elementor-11621 .elementor-element.elementor-element-0df65df::before { opacity: .1 !important; }
    /* Xulipa centralizado pelo corpo (na foto ele fica à direita do meio);
       o braço da clave roxa pode sair pela borda */
    .hx-xulipa { translate: -19% 0; }
    /* fontes menores ao longo da Home */
    .elementor-11621 .hx-titulo { font-size: 32px !important; line-height: 1.08 !important; }
    .elementor-11621 .elementor-headline,
    .elementor-11621 .elementor-headline .elementor-headline-plain-text,
    .elementor-11621 .elementor-headline .elementor-headline-dynamic-text,
    .elementor-11621 .elementor-element-771c451 .elementor-heading-title { font-size: 25px !important; line-height: 1.15 !important; }
    .elementor-11621 :is(.elementor-element-7c6a7c2, .elementor-element-9e2eb72, .elementor-element-e9a0344, .elementor-element-bf398a5, .elementor-element-6a9fee3) .elementor-heading-title,
    .elementor-11621 .elementor-image-box-description,
    .elementor-11621 .exad-infobox-content-description { font-size: 14.5px !important; line-height: 1.6 !important; }
    .elementor-11621 .elementor-image-box-title,
    .elementor-11621 .exad-infobox-content-title { font-size: 22px !important; }
    .hx-card__titulo { font-size: 18px; }
}

/* "Quem somos?" no celular: ilustração na largura da tela e centralizada (no
   computador ela é ampliada e presa por um lado), corações menores e espaço
   embaixo para a onda não cobrir o fim do texto */
@media (max-width: 767px) {
    .hx-qs-coracao--verde { width: 30px !important; }
    .hx-qs-coracao--amarelo { width: 26px !important; }
    .elementor-11621 .elementor-element-0eec6fe { padding-bottom: calc(clamp(60px, 7vw, 110px) + 28px) !important; }
}

/* pilares no celular: texto do topo centralizado e o texto dos cards no tamanho padrão dos textos */
@media (max-width: 767px) {
    body.hx-on-pilares .elementor-element-6a9fee3 .elementor-heading-title { text-align: center !important; }
    body.hx-on-pilares .elementor-element-6a9fee3 > .elementor-widget-container { width: auto !important; margin-left: 0 !important; transform: none; }
    .elementor-11621 .hx-pilarcard__par { font-size: 14.5px !important; line-height: 1.6 !important; }
}

/* "Quem somos?" no celular: o arquivo da ilustração (1600x900) tem o desenho
   só entre 30,5% e 83,4% da largura e 17,1% e 90,7% da altura; o resto é
   transparente e sobrava como espaço em branco. Aqui a caixa fica do tamanho
   do desenho e a imagem é ampliada e deslocada para encaixar nela:
   largura 100/52,9 = 189%; esquerda -30,5/52,9 = -57,7%; em cima, 17,1% da
   altura da imagem (1,063 x a largura da caixa) = -18,2%; e a caixa tem a
   altura do desenho (73,6% x 1,063 = 0,782 da largura). O container é
   espelhado (rotateY), mas o recorte é feito nas coordenadas da imagem, então
   continua certo. No desktop nada muda.
   A seção também perde a altura mínima de uma tela inteira, que empurrava o
   texto para longe da ilustração. */
@media (max-width: 767px) {
    .elementor-11621 .elementor-element-0eec6fe { min-height: 0 !important; padding-top: 56px !important; padding-bottom: 72px !important; }
    .elementor-11621 .elementor-element-16f9d21 > .elementor-widget-container {
        width: 78%; margin: 0 auto; aspect-ratio: 1 / .782;
        overflow: clip; overflow-clip-margin: 40px; clip-path: none;
    }
    .elementor-11621 .elementor-element-16f9d21 img:not(.hx-qs-coracao) {
        width: 189% !important; max-width: none !important; height: auto !important;
        margin: -18.2% 0 0 -57.7% !important; transform: none !important;
    }
    .elementor-11621 .elementor-element-0eec6fe .elementor-element-717a983 { margin-top: 0 !important; }
}

/* celular: corações da hero e do "Quem somos" com tamanhos parecidos, longe das
   bordas; o amarelo do "Quem somos" vai para a direita da ilustração; e o texto
   do "Quem somos" alinhado à esquerda */
@media (max-width: 767px) {
    .elementor-11621 .elementor-element.elementor-element-c4ba46a,
    .elementor-11621 .elementor-element.elementor-element-298a6e9 { width: 40px !important; max-width: 40px !important; }
    .elementor-11621 .elementor-element.elementor-element-c4ba46a { left: 16px !important; right: auto !important; }
    .elementor-11621 .elementor-element.elementor-element-298a6e9 { right: 16px !important; left: auto !important; }
    .hx-qs-coracao--verde { width: 40px !important; }
    /* o container da ilustração é espelhado: "right" aqui é a distância visual até a borda esquerda */
    .hx-qs-coracao--amarelo { width: 36px !important; right: auto !important; left: 4% !important; top: 58% !important; }
    .elementor-11621 :is(.elementor-element-41acc51, .elementor-element-e4d47a7, .elementor-element-e9a0344, .elementor-element-bf398a5),
    .elementor-11621 :is(.elementor-element-41acc51, .elementor-element-e4d47a7, .elementor-element-e9a0344, .elementor-element-bf398a5) .elementor-heading-title,
    .elementor-11621 .elementor-element-e4d47a7 .elementor-headline { text-align: left !important; justify-content: flex-start !important; }
    .elementor-11621 .elementor-element-41acc51 .elementor-widget-container { display: flex; justify-content: flex-start; }
}
@media (max-width: 767px) {
    /* a caixa recortada da ilustração (regra acima) ficava com altura 0 e deslocada
       por uma margem negativa do Elementor: força a altura pela proporção e centraliza */
    .elementor-11621 .elementor-element-16f9d21 > .elementor-widget-container { height: auto !important; margin: 0 auto !important; }
}
@media (max-width: 767px) {
    /* corações do "Quem somos" menores no celular */
    .hx-qs-coracao--verde { width: 28px !important; }
    .hx-qs-coracao--amarelo { width: 26px !important; }
}
@media (max-width: 767px) {
    /* verde mais para a esquerda e amarelo mais para a direita. O container é
       espelhado: +x aqui anda para a esquerda na tela, -x para a direita */
    .hx-qs-coracao--verde { translate: 18px 0; }
    .hx-qs-coracao--amarelo { translate: -22px 0; }
}
@media (max-width: 767px) {
    /* ilustração do "Quem somos" ~15% maior no celular (a caixa recortada ia a 78% da coluna) */
    .elementor-11621 .elementor-element-16f9d21 > .elementor-widget-container { width: 90% !important; }
}
@media (max-width: 767px) {
    /* ilustração um pouco mais para baixo, só visualmente (o texto e o resto não se mexem) */
    .elementor-11621 .elementor-element-16f9d21 > .elementor-widget-container { translate: 0 22px; }
}
@media (max-width: 767px) {
    /* corações da hero maiores no celular: a imagem ocupava só 45% da caixa (limite do Elementor) */
    .elementor-11621 .elementor-element.elementor-element-c4ba46a,
    .elementor-11621 .elementor-element.elementor-element-298a6e9 { width: 46px !important; max-width: 46px !important; }
    .elementor-11621 .elementor-element-c4ba46a img,
    .elementor-11621 .elementor-element-298a6e9 img { width: 44px !important; max-width: none !important; height: auto !important; }
    /* o azul mais para a direita, longe da mancha amarela */
    .elementor-11621 .elementor-element.elementor-element-298a6e9 { right: 8px !important; }
}

/* mobile: corações da hero com tamanho fixo (a regra de 100% da largura vencia por especificidade) */
@media (max-width: 767px) {
    .elementor-11621 .elementor-element.elementor-element-c4ba46a > .elementor-widget-container,
    .elementor-11621 .elementor-element.elementor-element-298a6e9 > .elementor-widget-container { width: 40px !important; }
    .elementor-11621 .elementor-element.elementor-element-c4ba46a img,
    .elementor-11621 .elementor-element.elementor-element-298a6e9 img { width: 40px !important; max-width: 40px !important; height: auto !important; }
    .elementor-11621 .elementor-element.elementor-element-c4ba46a,
    .elementor-11621 .elementor-element.elementor-element-298a6e9 { width: 40px !important; max-width: 40px !important; }
    /* o azul mais perto da borda direita */
    .elementor-11621 .elementor-element.elementor-element-298a6e9 { translate: 20px 0; }
}

/* mobile: textos que fugiam da escala (corpo 14.5px) */
@media (max-width: 767px) {
    .elementor-11621 .elementor-element.elementor-element-6a9fee3 .elementor-heading-title { font-size: 14.5px !important; line-height: 1.6 !important; }
    .elementor-11621 .elementor-element.elementor-element-6971f7d .elementor-heading-title { font-size: 14px !important; line-height: 1.55 !important; }
    .elementor-11621 .elementor-element-02c18a2 .hx-card__titulo { font-size: 16px !important; }
}

/* mobile: os dois corações do Quem somos dentro da moldura da ilustração
   (a moldura corta o que passa da borda; o verde saía pela esquerda e o
   amarelo pela direita). Lembrando: a moldura é espelhada, então +x anda
   para a esquerda na tela. */
@media (max-width: 767px) {
    /* 7px mais baixo: no alto da flutuação (sobe 14px e gira) ele passava da borda de cima */
    .elementor-11621 .hx-qs-coracao--verde { translate: -9px 7px !important; }
    .elementor-11621 .hx-qs-coracao--amarelo { translate: -10px 0 !important; }
}

/* mobile: o contador "1/6" encosta na margem esquerda, alinhado aos cards;
   o botão continua na direita */
@media (max-width: 767px) {
    .elementor-11621 .hx-blog-rodape { justify-content: space-between !important; }
}

/* Fora do Chromium não há puppet em WebGL (hero.js, amacePuppetOk): a foto e o
   braço ficam como imagens normais, sempre visíveis, e o braço com a clave
   balança em CSS a partir do punho. */
html:not(.hx-puppet) .hx-xulipa__foto,
html:not(.hx-puppet) .hx-xulipa__clave { visibility: visible !important; }
html:not(.hx-puppet) .hx-on-movimento .hx-xulipa__clave { animation: hx-clave 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    html:not(.hx-puppet) .hx-on-movimento .hx-xulipa__clave { animation: none; }
}

/* Quem somos: a caixa da ilustração não existe no desktop (display:contents);
   no celular é ela que recorta a ilustração ampliada, e a moldura em volta
   deixa de cortar, então os corações podem sair um pouco da borda */
.hx-qs-recorte { display: contents; }
@media (max-width: 767px) {
    .elementor-11621 .elementor-element-16f9d21 .elementor-widget-container { overflow: visible !important; }
    .elementor-11621 .hx-qs-recorte { display: block; width: 100%; height: auto; overflow: clip; }
    /* o verde mais para cima e para a esquerda, agora podendo passar da borda
       (a moldura é espelhada: +x anda para a esquerda na tela) */
    .elementor-11621 .hx-qs-coracao--verde { translate: 12px -10px !important; }
}

/* faixa animada "CURSOS • CULTURA • ESPORTE..." (538f03f) de ponta a ponta
   da tela: os dois containers em volta tinham 10px de respiro nas laterais,
   e a faixa era cortada 20px antes de cada borda */
.elementor-11621 .elementor-element.elementor-element-83a1668,
.elementor-11621 .elementor-element.elementor-element-68a64ee { padding-left: 0 !important; padding-right: 0 !important; }

/* ---------- Xulipa animado só com CSS (28/09) ----------
   O WebGL saiu de vez: em vários celulares o canvas ficava preto.
   A cabeça é a própria foto recortada numa elipse (a mesma do puppet antigo:
   centro 635,95 e raio 110x100 na imagem de 1000x1190, com 20% de degradê na
   borda), e a foto de baixo ganha um buraco igual, com o degradê invertido:
   paradas, as duas somam a foto inteira; a cabeça balança 4° em volta do
   queixo (628,200). O braço com a clave gira a partir do punho. */
/* sem máscara: a cabeça é uma imagem própria (xulipa-cabeca.webp), atrás do corpo (xulipa-corpo.webp) */
.hx-xulipa__boneco img.hx-xulipa__cabeca { transform-origin: 62.8% 16.8%; pointer-events: none; }
.hx-on-movimento .hx-xulipa__boneco img.hx-xulipa__cabeca { animation: hx-cabeca 3.4s ease-in-out infinite; }
@keyframes hx-cabeca {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(4deg); }
    75% { transform: rotate(-4deg); }
}
/* o braço: o mesmo balanço de malabarista do puppet (sobe, desce e um tremor) */
html:not(.hx-puppet) .hx-on-movimento .hx-xulipa__clave { animation: hx-braco 2.6s ease-in-out infinite; }
@keyframes hx-braco {
    0%, 100% { transform: rotate(0deg); }
    22% { transform: rotate(-7deg); }
    48% { transform: rotate(1.5deg); }
    72% { transform: rotate(5deg); }
    86% { transform: rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
    .hx-on-movimento .hx-xulipa__boneco img.hx-xulipa__cabeca,
    html:not(.hx-puppet) .hx-on-movimento .hx-xulipa__clave { animation: none; }
}

/* o mouse não mexe mais no Xulipa (nem na mancha): só os corações seguem o parallax */
.hx-on-movimento .elementor-element-6985cb5 > .elementor-widget-container { transform: none !important; }
.hx-xulipa__boneco { translate: none !important; }

/* Pilares com fundo #f9f4f3: os 80px de margem acima do Blog (do Elementor, acima
   de 767px) mostravam o branco da página entre as duas seções; o espaço vira
   padding dos pilares, na cor deles */
@media (min-width: 768px) {
    .elementor-11621 .elementor-element-f59bfa4 { margin-top: 0 !important; }
    body.hx-on-pilares .elementor-element-79d5a63 { padding-bottom: 184px !important; }
}

/* Linhas do fundo da hero, em SVG e ondulando (hero.js). A caixa é a mesma da
   imagem de antes (contain, encostada à direita, centrada na altura); com o
   SVG no lugar, a imagem do ::before sai. */
.elementor-11621 .elementor-element.elementor-element-0df65df.hx-linhas-vivas::before { background-image: none !important; }
.hx-linhas { position: absolute; top: 0; right: 0; height: 100%; width: auto; aspect-ratio: 1603 / 2000; max-width: 100%; overflow: hidden; pointer-events: none; }
.hx-linhas path { fill: none; stroke: rgba(31, 30, 26, .05); stroke-width: 2.5; stroke-dasharray: 1; /* 2,5 unidades do desenho: ~1px na hero do computador; bem clarinhas, como a arte de antes */ animation: hx-linhas-entra 1.4s cubic-bezier(.5, 0, .2, 1) backwards; } /* era 2,4s */
@keyframes hx-linhas-entra { from { stroke-dashoffset: 1; } }
@media (max-width: 767px) { .hx-linhas path { stroke: rgba(31, 30, 26, .03); } }
@media (prefers-reduced-motion: reduce) { .hx-linhas path { animation: none; } }

/* "Bem-vind[o|a|e] a AMACE" (8bb7922): a letra que gira, igual ao /blog */
.hx-troca { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; margin-bottom: -.06em; }
.hx-troca > span { display: inline-block; }

/* "Quem somos?" no computador: a ilustração ficava colada na onda de baixo. O
   espaço de baixo passa a ser a altura da onda (a mesma conta do celular) mais 60px */
@media (min-width: 768px) {
        .elementor-11621 .elementor-element-0eec6fe { min-height: 0 !important; padding-top: calc(35px + 80px) !important; padding-bottom: calc(clamp(60px, 7vw, 110px) + 80px) !important; }
}

/* a foto dos cards de post dentro do <picture> (a versão leve do celular,
   amace_hero_foto_celular): o <picture> some do layout e a <img> fica
   como antes, direto na caixa da foto */
.hx-foto { display: contents; }

/* 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 .hx-carrossel .hx-card__cat:hover .hx-cat--amarelo { color: #191813 !important; } }
/* a descrição dos pilares (6a9fee3) encostada na direita da coluna, com o texto alinhado à esquerda (29/09) */
@media (min-width: 768px) {
    body.hx-on-pilares .elementor-element-0053d36 > .elementor-widget-wrap { justify-content: flex-end; }
    body.hx-on-pilares .elementor-element-6a9fee3 { width: auto !important; max-width: 100%; margin-left: auto; }
    body.hx-on-pilares .elementor-element-6a9fee3 .elementor-heading-title { width: fit-content; margin-left: auto; white-space: pre-line; text-align: left !important; }
}