/* AMACE · /sobre ("Conheça a AMACE"), no desenho das outras páginas do site:
   o topo rosado de Cursos, seções brancas alternando com faixas rosadas
   separadas pela onda da Hero, títulos e textos na escala do amace-tipografia
   (--t-topo, --t-secao, --t-card, --t-texto), texto de apoio no cinza de
   Cursos (#6b6560) e cards de canto 10px. Cores do Press kit. */
.asob {
    --vermelho: #cd212a;
    --amarelo: #fcce45;
    --azul: #0045c0;
    --verde: #00b102;
    --tinta: #1f1e1a;
    --suave: #6b6560;
    --rosa: #f9f0f0;
    --linha: #ead9d7;
    --mola: cubic-bezier(.17, .67, .3, 1.33);
    --sai: cubic-bezier(.16, 1, .3, 1);
    overflow-x: clip;
    font-family: Quicksand, sans-serif;
    color: var(--tinta);
}
/* !important: as configurações da página no Elementor pintam o body */
body.asob-pagina { background: #fff !important; }
.asob :is(h1, h2, h3, p, ul, figure) { margin: 0; font-family: Quicksand, sans-serif; }
.asob :is(h1, h2, h3) { color: var(--tinta); letter-spacing: -.02em; }
/* as mesmas bordas do header e dos cards de Cursos: 1208px de conteúdo (116 a 1324 numa tela de 1440), 10px no celular */
.asob-caixa { box-sizing: border-box; max-width: 1248px; margin: 0 auto; padding: 0 20px; }
@media (max-width: 767px) { .asob-caixa { padding: 0 10px; } }

/* ---------- peças de sempre ---------- */
/* o titulozinho com o coração desenhado à mão (o mesmo da Home) */
.asob-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px !important; font-size: var(--t-mini, 14px); font-weight: 700; line-height: 1.5; color: var(--tinta); }
.asob .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; }
html:not(.asob-js) .asob .hx-eb-coracao, .asob .hx-eb-coracao.nasceu { stroke-dashoffset: 0; }
.asob .hx-eb-coracao.nasceu { animation: asob-coracao 1.1s cubic-bezier(.5, 0, .2, 1) backwards; }
@keyframes asob-coracao { from { stroke-dashoffset: 90; } }
html body .asob .asob-h2 { font-size: var(--t-secao, 40px); font-weight: 700; line-height: 1.15; }
.asob-texto { font-size: var(--t-texto, 16px); line-height: 1.7; color: var(--suave); }
.asob-texto p + p { margin-top: 14px !important; }
.asob-h2 + .asob-texto { margin-top: 14px !important; }
/* cabeça de seção centralizada, como em "Como funciona" de Cursos */
.asob-cabeca { max-width: 720px; margin: 0 auto 44px; text-align: center; }
/* a palavra riscada à mão em azul */
.asob-marca { position: relative; display: inline-block; z-index: 0; }
.asob-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: var(--azul); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1500; animation: asob-risca 1.2s .4s cubic-bezier(.5, 0, .2, 1) backwards; }
@keyframes asob-risca { from { stroke-dashoffset: 1500; } }
@keyframes asob-sobe { from { opacity: 0; translate: 0 34px; } }

/* ---------- seções e faixas ----------
   seção branca, ou faixa rosada com a onda da Hero em cima e embaixo (a mesma de Cursos) */
.asob-secao { position: relative; padding: 90px 0; background: #fff; }
.asob-faixa { position: relative; padding: 130px 0; background: var(--rosa); }
.asob-onda { position: absolute; left: 0; bottom: -1px; width: 100%; height: 64px; fill: #fff; pointer-events: none; }
.asob-onda--cima { top: -1px; bottom: auto; height: 48px; transform: rotate(180deg); }

/* ---------- topo: a faixa de Cursos (.acur-topo--lista) ---------- */
.asob-hero { position: relative; display: flex; align-items: center; box-sizing: border-box; min-height: 780px; margin-top: -102px; padding: 132px 0 110px; background: var(--rosa); text-align: center; }
/* a foto em preto e branco tingida pelo rosa da faixa, bem clarinha (o filtro do fundo de Cursos) */
.asob-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--fundo) center 55% / cover no-repeat; filter: grayscale(1) contrast(.7) brightness(1.15); mix-blend-mode: multiply; opacity: .07; pointer-events: none; }
.asob-hero__miolo { position: relative; z-index: 1; width: 100%; }
html body .asob .asob-hero__titulo { font-size: clamp(40px, 5vw, 60px); font-weight: 700; line-height: 1.05; animation: asob-sobe 1s var(--sai) backwards; }
.asob-hero__lead { max-width: 620px; margin: 14px auto 0 !important; font-size: 17px; line-height: 1.6; color: var(--suave); animation: asob-sobe 1s .12s var(--sai) backwards; }
.asob-hero__botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; animation: asob-sobe 1s .22s var(--sai) backwards; }

/* ---------- Nossa história: a foto de ponta a ponta ----------
   a altura da tela (entre 560 e 980px); a foto é em pé, então o recorte fica no rosto e na
   camiseta do Xulipa. Em cima e embaixo a foto é recortada no formato da onda (a mesma da Hero,
   48px em cima e 64 embaixo) e sobe por baixo do topo e da faixa dos números, sem emenda. */
.asob-foto-cheia { --onda-cima: 48px; --onda-baixo: 64px; position: relative; z-index: 1; height: clamp(560px, 100vh, 980px); margin: calc(var(--onda-cima) * -1) 0 calc(var(--onda-baixo) * -1);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath transform='rotate(180 500 50)' d='M0,0V78C220,40 520,4 760,6C870,7 950,18 1000,28V0Z'/%3E%3C/svg%3E") top / 100% var(--onda-cima) no-repeat, linear-gradient(#000, #000) 0 calc(var(--onda-cima) - 1px) / 100% calc(100% - var(--onda-cima) - var(--onda-baixo) + 2px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0V78C220,40 520,4 760,6C870,7 950,18 1000,28V0Z'/%3E%3C/svg%3E") bottom / 100% var(--onda-baixo) no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath transform='rotate(180 500 50)' d='M0,0V78C220,40 520,4 760,6C870,7 950,18 1000,28V0Z'/%3E%3C/svg%3E") top / 100% var(--onda-cima) no-repeat, linear-gradient(#000, #000) 0 calc(var(--onda-cima) - 1px) / 100% calc(100% - var(--onda-cima) - var(--onda-baixo) + 2px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0V78C220,40 520,4 760,6C870,7 950,18 1000,28V0Z'/%3E%3C/svg%3E") bottom / 100% var(--onda-baixo) no-repeat; }
/* parallax: a foto é 30% mais alta que a faixa e o sobre.js move ela mais devagar que a rolagem */
.asob-foto-cheia img { position: absolute; left: 0; top: -15%; display: block; width: 100%; height: 130%; object-fit: cover; object-position: 50% 30%; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .asob-foto-cheia img { top: 0; height: 100%; } }
/* o topo e os números ganham o espaço que a foto ocupa por cima deles */
.asob-hero { padding-bottom: 108px; }
.asob-numeros { padding-top: 210px; }

/* ---------- Nascida de um sonho: abaixo da foto, antes dos números ---------- */
.asob-sonho { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px 64px; align-items: start; margin-bottom: 170px; }
.asob-sonho .asob-texto p + p { margin-top: 14px !important; }
/* no lugar do título, uma frase em duas linhas (quebra depois de "palhaço"), no alto, na altura da primeira linha do texto */
html body .asob .asob-sonho__frase { margin-top: -6px; font-size: clamp(28px, 2.8vw, 40px); white-space: nowrap; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--tinta); }
@media (max-width: 1024px) { .asob-sonho { grid-template-columns: 1fr; margin-bottom: 72px; } html body .asob .asob-sonho__frase { white-space: normal; } .asob-sonho__quebra { display: none; } }

/* ---------- números: a pilha de cards ----------
   à esquerda o texto, preso enquanto a pilha passa; à direita os cards presos abaixo do header,
   cada um um degrau mais baixo (--i no top, não num transform, para o último não passar do fim da
   lista), entrando tortos (±8°) e 20% mais baixos e endireitando conforme --progresso vai de 0 a 1. */
/* o body do tema vem com overflow-x: hidden, que vira caixa de rolagem e desliga o sticky */
html body.asob-pagina { overflow-x: clip !important; overflow-y: visible !important; }
.asob-numeros { --pilha-topo: 150px; }
.asob-pilha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 64px; }
.asob-pilha__fixo { position: sticky; top: var(--pilha-topo); }
.asob-pilha__fixo .asob-texto { max-width: 420px; margin-top: 14px !important; }
.asob-pilha__lista { display: flex; flex-direction: column; gap: 12vh; margin: 0; padding: 0; list-style: none; }
.asob-pilha__lista::after { content: ""; flex: 0 0 8vh; }
.asob-pilha__item { position: sticky; top: calc(var(--pilha-topo) + var(--i) * 36px); }
.asob-pilha__card { --fundo-card: #cd2121; --cor-card: #fff; --t: clamp(0, var(--progresso, 1), 1); --rot: -8deg; display: flex; flex-direction: column; min-height: 400px; padding: 28px; border-radius: 10px; background: var(--fundo-card); color: var(--cor-card); transform: translateY(calc(20% * (1 - var(--t)))) rotate(calc(var(--rot) * (1 - var(--t)))); will-change: transform; }
.asob-pilha__item:nth-child(2n) .asob-pilha__card { --rot: 8deg; }
.asob-pilha__card--azul { --fundo-card: #0045c0; }
.asob-pilha__card--verde { --fundo-card: #00b102; }
.asob-pilha__card--amarelo { --fundo-card: #fcce45; --cor-card: #191813; }
.asob-pilha__icone { align-self: flex-end; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #fff; color: var(--fundo-card); }
.asob-pilha__card--amarelo .asob-pilha__icone { color: #191813; }
html body .asob .asob-pilha__numero { margin-top: -54px; font-size: clamp(64px, 7vw, 104px); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; }
html body .asob .asob-pilha__frase { margin-top: auto; padding-top: 24px; max-width: 360px; font-size: 19px; font-weight: 600; line-height: 1.35; color: inherit; }
@media (max-width: 999px) {
    .asob-pilha { grid-template-columns: 1fr; gap: 40px; }
    .asob-pilha__fixo { position: static; }
    .asob-pilha__lista { gap: 28px; }
    .asob-pilha__lista::after { flex-basis: 0; }
    .asob-pilha__item { top: calc(96px + var(--i) * 14px); }
    .asob-pilha__card { --t: 1; min-height: 300px; padding: 24px; }
    html body .asob .asob-pilha__numero { font-size: 64px; }
    html body .asob .asob-pilha__frase { font-size: 17px; }
    .asob-pilha__icone { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .asob-pilha__card { --t: 1; } }

/* ---------- pilares: a seção da Home (hero.css, "8. Nossos 3 pilares"), com as mesmas medidas ---------- */
.asob-pilares { padding: 96px 0 104px; }
.asob-pilares__cabeca { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 24px; }
html body .asob .asob-pilares__titulo { font-size: 40px; font-weight: 800; line-height: 46px; letter-spacing: normal; color: #1f1e1a; }
.asob-pilares__cabeca .asob-eyebrow { color: #333; }
.asob-pilares__desc { font-size: 16px; font-weight: 500; line-height: 1.55; color: #5c5854; }
.asob-pilares__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.asob-pilar { display: block; padding: 32px 32px 36px; border-radius: 10px; color: #fff; text-align: left; transition: transform .45s cubic-bezier(.17, .67, .3, 1.33), box-shadow .45s ease; }
.asob-pilar--vermelho { background: #cd2121; }
.asob-pilar--verde { background: #30ae16; }
.asob-pilar--azul { background: #2446b9; }
.asob-pilar:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -18px rgba(31, 30, 26, .35); }
/* o ícone numa bolha branca que se deforma devagar (a animação hx-mancha da Home) */
.asob-pilar__icone { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 36px; background: #fff; border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; animation: asob-mancha-bolha 10s linear infinite alternate; transition: transform .45s cubic-bezier(.17, .67, .3, 1.33); }
.asob-pilar--verde .asob-pilar__icone { animation-delay: -3.3s; }
.asob-pilar--azul .asob-pilar__icone { animation-delay: -6.6s; }
.asob-pilar:hover .asob-pilar__icone { transform: rotate(-8deg) scale(1.06); }
.asob-pilar__icone img { width: 30px !important; height: 30px !important; }
html body .asob .asob-pilar h3 { margin: 0 0 12px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: #fff; }
.asob-pilar p { font-size: 16px; font-weight: 500; line-height: 1.55; color: rgba(255, 255, 255, .92); }
.asob-pilar p span { display: block; }
.asob-pilar p span + span { margin-top: 12px; }
@keyframes asob-mancha-bolha {
    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 (max-width: 1024px) {
    .asob-pilares__cabeca { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .asob-foto-cheia { --onda-cima: 22px; --onda-baixo: 28px; height: 560px; }
    .asob-numeros { padding-top: 92px; }
    .asob-pilares { padding: 64px 0 72px; }
    html body .asob .asob-pilares__titulo { font-size: var(--t-secao, 25px); line-height: 1.2; }
    .asob-pilares__grade { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
    .asob-pilar { padding: 26px 24px 30px; }
    .asob-pilar__icone { margin-bottom: 26px; }
}
@media (prefers-reduced-motion: reduce) { .asob-pilar__icone { animation: none; } }

/* ---------- como funciona: a jornada do aluno ---------- */
/* o título numa linha só no desktop (a cabeça padrão tem 720px e "trabalho" caía sozinho) */
.asob-cabeca { max-width: 1000px; }
@media (min-width: 1100px) { .asob-cabeca .asob-texto { white-space: nowrap; } } /* nas cabeças de seção, título e texto numa linha só no desktop */
.asob-jornada__passos { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding: 0; list-style: none; }
/* a linha tracejada que liga as bolinhas, por trás delas */
.asob-jornada__passos::before { content: ""; position: absolute; left: 12%; right: 12%; top: 32px; border-top: 2px dashed #e3cfcc; }
.asob-jornada__passo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.asob-jornada__passo--vermelho { --c: var(--vermelho); }
.asob-jornada__passo--azul { --c: var(--azul); }
.asob-jornada__passo--verde { --c: var(--verde); }
.asob-jornada__passo--amarelo { --c: #fcce45; }
.asob-jornada__icone { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 8px; border-radius: 50%; background: var(--c); color: #fff; box-shadow: 0 0 0 8px var(--rosa); }
.asob-jornada__passo--amarelo .asob-jornada__icone { color: #191813; }
/* cada desenho tem um peso diferente (o capelo e a maleta são largos, a chave é fina e na diagonal): a escala equilibra o tamanho que eles parecem ter */
.asob-jornada__icone svg { transform: scale(var(--escala, 1)); }
.asob-jornada__icone b { position: absolute; right: -6px; top: -6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--tinta); font-size: 12px; font-weight: 700; }
html body .asob .asob-jornada__passo h3 { font-size: var(--t-card, 22px); font-weight: 700; line-height: 1.2; }
.asob-jornada__passo p { max-width: 240px; font-size: 15px; line-height: 1.6; color: var(--suave); }
.asob-jornada__botao { display: flex; justify-content: center; margin-top: 44px; }
@media (max-width: 1024px) { .asob-jornada__passos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; } .asob-jornada__passos::before { display: none; } }
@media (max-width: 767px) { .asob-jornada__passos { grid-template-columns: 1fr; } }

/* ---------- projetos e cursos: pílulas com a fotinho ---------- */
.asob-pilulas { display: grid; gap: 40px; }
html body .asob .asob-pilulas__grupo h3 { margin-bottom: 18px; font-size: 14px; font-weight: 700; color: var(--vermelho); text-align: center; }
.asob-pilulas__nuvem { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
html body .asob-pilula { display: inline-flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 999px; background: var(--rosa); color: var(--tinta); font-size: 19px; font-weight: 700; text-decoration: none; transform: rotate(var(--g)); transition: transform .4s var(--mola), background-color .25s, color .25s; }
.asob-pilula--vermelho { --c: #cd2121; }
.asob-pilula--azul { --c: #2446b9; }
@media (hover: hover) { html body .asob-pilula:hover { transform: rotate(0) scale(1.05); background: var(--c); color: #fff; } }
html body .asob-pilula:focus-visible { outline: 3px solid rgba(205, 33, 42, .35); outline-offset: 3px; }
.asob-pilula__foto { width: 52px; height: 52px; overflow: hidden; border-radius: 50%; background: #efe5e2; }
.asob-pilula__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.asob-pilula__ir { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--tinta); }
.asob-pilula__ir svg { width: 14px; height: 14px; }
@media (max-width: 767px) { html body .asob-pilula { font-size: 16px; } .asob-pilula__foto { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { html body .asob-pilula { transition: none; } }

/* ---------- faça parte: o convite do fim da /doar (card rosado, dois botões, uma nota) ---------- */
.asob-convite { padding-top: 0; } /* vem logo depois de outra seção branca (Projetos e cursos) */
.asob-convite__card { max-width: 860px; margin: 0 auto; padding: 60px 32px; border-radius: 10px; background: var(--rosa); text-align: center; }
.asob-convite__card .asob-texto { max-width: 560px; margin: 12px auto 0 !important; }
.asob-convite__botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.asob-convite__nota { margin-top: 22px !important; font-size: 13px; color: var(--suave); }
html body .asob-convite__nota a { color: var(--suave); text-decoration: underline; text-underline-offset: 3px; }
html body .asob-convite__nota a:hover { color: var(--vermelho); }

/* ---------- entrada ao rolar ---------- */
/* sem efeito de entrada nos cards (29/09): tudo já aparece no lugar; o .asob-revela só dispara a contagem dos números e o coração */

@media (max-width: 1024px) {
}
@media (max-width: 767px) {
    .asob-foto-cheia { --onda-cima: 22px; --onda-baixo: 28px; height: 560px; }
    .asob-numeros { padding-top: 92px; }
    .asob-hero { min-height: 560px; margin-top: -80px; padding: 110px 0 90px; }
    .asob-hero__lead { font-size: 15px; }
    .asob-hero__botoes { margin-top: 26px; }
    .asob-secao { padding: 64px 0; }
    .asob-faixa { padding: 84px 0; }
    .asob-onda { height: 28px; }
    .asob-onda--cima { height: 22px; }
    .asob-cabeca { margin-bottom: 30px; }
    .asob-convite__card { padding: 44px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .asob .hx-eb-coracao { stroke-dashoffset: 0; animation: none; }
    .asob-risco, html body .asob .asob-hero__titulo, .asob-hero__lead, .asob-hero__botoes { animation: none; }
}

/* Projetos e cursos com mais respiro: a seção mais alta, mais espaço entre a cabeça, os grupos e as linhas de pílulas */
.asob-fazemos { padding: 140px 0 150px; }
.asob-fazemos .asob-cabeca { margin-bottom: 64px; }
.asob-pilulas { gap: 64px; }
html body .asob .asob-pilulas__grupo h3 { margin-bottom: 26px; }
.asob-pilulas__nuvem { gap: 22px 16px; }
@media (max-width: 767px) { .asob-fazemos { padding: 84px 0 90px; } .asob-fazemos .asob-cabeca { margin-bottom: 40px; } .asob-pilulas { gap: 44px; } .asob-pilulas__nuvem { gap: 14px; } }
@media (max-width: 999px) { html body .asob .asob-pilha__numero { margin-top: -40px; } }
/* o título dos números no tamanho do título do topo das páginas (o de Cursos e do topo da /sobre) */
html body .asob .asob-h2.asob-pilha__titulo { font-size: clamp(40px, 5vw, 60px); line-height: 1.05; }
/* a descrição dos pilares encostada na direita, com o texto alinhado à esquerda */
.asob-pilares__desc { justify-self: end; }
@media (max-width: 1024px) { .asob-pilares__desc { justify-self: start; } }

/* ---------- celular (29/09): tudo na escala de celular do amace-tipografia (34 / 25 / 18 / 14) ---------- */
@media (max-width: 767px) {
    html body .asob .asob-hero__titulo, html body .asob .asob-h2.asob-pilha__titulo { font-size: var(--t-topo, 34px); line-height: 1.1; }
    .asob-hero__lead { font-size: var(--t-texto, 14px); }
    .asob-hero { min-height: 480px; }
    .asob-foto-cheia { height: 440px; }
    html body .asob .asob-sonho__frase { font-size: 22px; line-height: 1.25; }
    .asob-sonho { margin-bottom: 64px; }
    .asob-numeros { padding-top: 72px; }
    .asob-pilha__card { min-height: 240px; padding: 20px; }
    .asob-pilha__icone { width: 44px; height: 44px; }
    .asob-pilha__icone svg { width: 22px; height: 22px; }
    html body .asob .asob-pilha__numero { margin-top: -30px; font-size: 48px; }
    html body .asob .asob-pilha__frase { max-width: none; padding-top: 16px; font-size: 15px; }
    .asob-pilares__desc { font-size: var(--t-texto, 14px); }
    html body .asob .asob-pilar h3 { font-size: var(--t-card, 18px); }
    .asob-pilar p { font-size: var(--t-texto, 14px); }
    .asob-pilar__icone { width: 52px; height: 52px; margin-bottom: 20px; }
    .asob-pilar__icone img { width: 24px !important; height: 24px !important; }
    .asob-jornada__icone { width: 54px; height: 54px; }
    .asob-jornada__passo p { font-size: var(--t-texto, 14px); }
    .asob-jornada__botao { margin-top: 32px; }
    .asob-fazemos { padding: 64px 0 72px; }
    .asob-fazemos .asob-cabeca { margin-bottom: 32px; }
    .asob-pilulas { gap: 36px; }
    html body .asob .asob-pilulas__grupo h3 { margin-bottom: 16px; }
    .asob-pilulas__nuvem { gap: 10px; }
    html body .asob-pilula { gap: 10px; padding: 6px 8px 6px 6px; font-size: 14px; }
    .asob-pilula__foto { width: 36px; height: 36px; }
    .asob-pilula__ir { width: 28px; height: 28px; }
    .asob-convite__card { padding: 40px 18px; }
}
/* quebras de linha só no desktop (asob-so-desk) ou só no celular (asob-so-cel) */
.asob-so-cel { display: none; }
@media (max-width: 767px) { .asob-so-desk { display: none; } .asob-so-cel { display: inline; } }
/* o rótulo "Cursos gratuitos" das pílulas em azul, como o hover das pílulas de curso */
html body .asob .asob-pilulas__grupo:nth-child(2) h3 { color: #2446b9; }

/* ---------- respiro entre as seções (29/09): um pouco mais no desktop, bem mais no celular ---------- */
.asob-secao { padding: 110px 0; }
.asob-faixa { padding: 150px 0; }
.asob-pilares { padding: 116px 0 124px; }
.asob-fazemos { padding: 160px 0 170px; }
.asob-convite { padding: 0 0 120px; }
.asob-numeros { padding-top: 230px; }
@media (max-width: 767px) {
    .asob-secao { padding: 96px 0; }
    .asob-faixa { padding: 120px 0; }
    .asob-pilares { padding: 100px 0 108px; }
    .asob-fazemos { padding: 100px 0 108px; }
    .asob-convite { padding: 0 0 96px; }
    .asob-numeros { padding-top: 108px; }
    .asob-sonho { margin-bottom: 88px; }
    .asob-jornada__botao { margin-top: 40px; }
    .asob-cabeca { margin-bottom: 40px; }
}