/* ============================================================
   SEÇÃO DO APLICATIVO — versão branca premium
   ============================================================
   Substitui a versão escura anterior. O resto da landing é branco; a faixa
   azul-marinho no meio da página cortava a leitura em duas e obrigava a
   inverter todas as cores de texto só nesta seção.

   Agora a seção é branca com um degradê radial quase imperceptível. O que
   dá profundidade não é mais o fundo escuro, e sim a sombra dos cartões, a
   luz azul atrás do aparelho e o espaço em branco.

   A imagem central (app-fone.webp) tem fundo branco chapado. Em vez de
   recortar o PNG — o que comeria a sombra suave embaixo da plataforma —,
   ela entra com `mix-blend-mode: multiply` sobre um foco branco. Branco
   multiplicado por qualquer cor devolve a cor: a moldura some sozinha e a
   sombra continua inteira.

   As animações respeitam `prefers-reduced-motion` no fim do arquivo.
   ============================================================ */

.sec.apx {
  /* Paleta local. Não puxa das variáveis da landing de propósito: esta
     seção tem um azul próprio (#2F6BFF), mais frio que o --azul do resto
     do site, e misturar os dois deixaria o degradê do título sujo. */
  --apx-azul:   #2F6BFF;
  --apx-azul-c: #6FA9FF;
  --apx-azul-f: #EFF4FF;
  --apx-txt:    #0F172A;
  --apx-txt2:   #475569;
  --apx-txt3:   #64748B;
  --apx-linha:  #E6EDF9;
  --apx-sombra:   0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px -16px rgba(15, 23, 42, .16);
  --apx-sombra-h: 0 2px 4px rgba(15, 23, 42, .05), 0 24px 44px -22px rgba(47, 107, 255, .38);

  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(64px, 7vw, 108px) 0 clamp(52px, 5.5vw, 84px);
  /* O cabeçalho é fixo: sem esta folga, o link "Baixar" do menu para com o
     título embaixo da barra. */
  scroll-margin-top: var(--h-topo, 84px);
  background: radial-gradient(circle at 50% 42%,
              #FFFFFF 0%, #F8FBFF 45%, #EDF4FF 100%);
  color: var(--apx-txt);
}
.sec.apx[hidden] { display: none; }

/* Fio de separação em cima e embaixo. Sem ele a seção encosta no branco da
   seção vizinha e o degradê parece um defeito de renderização. */
.sec.apx::before,
.sec.apx::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(47, 107, 255, .16), transparent);
}
.sec.apx::before { top: 0; }
.sec.apx::after  { bottom: 0; }

/* ---------------- atmosfera ---------------- */
/* Órbitas e poeira luminosa em CSS puro: nenhuma imagem, acompanha
   qualquer resolução e pesa zero byte a mais. */
.apx__ceu { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.apx__anel {
  position: absolute; left: 50%; top: 47%;
  border-radius: 50%;
  border: 1px solid rgba(47, 107, 255, .13);
  transform: translate(-50%, -50%);
}
.apx__anel--1 { width: 430px; height: 430px; animation: apxGira 30s linear infinite; }
.apx__anel--2 {
  width: 640px; height: 640px; border-color: rgba(47, 107, 255, .10);
  animation: apxGira 46s linear infinite reverse;
}
.apx__anel--3 {
  width: 900px; height: 900px; border-color: rgba(47, 107, 255, .06);
  animation: apxGira 68s linear infinite;
}
/* O ponto de luz que orbita anda pendurado no próprio anel, via ::after —
   um elemento a menos no DOM para o mesmo efeito. */
.apx__anel--1::after,
.apx__anel--2::after {
  content: ''; position: absolute; top: -3px; left: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--apx-azul-c);
  box-shadow: 0 0 12px 3px rgba(47, 107, 255, .45);
}
@keyframes apxGira { to { transform: translate(-50%, -50%) rotate(360deg); } }

.apx__brilho {
  position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%);
  width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 107, 255, .16) 0%, transparent 68%);
  filter: blur(30px);
  animation: apxPulsa 7s ease-in-out infinite;
}
@keyframes apxPulsa {
  0%, 100% { opacity: .6; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;  transform: translate(-50%, -50%) scale(1.06); }
}

/* Oito partículas num elemento só, desenhadas como sombras de fundo. */
.apx__po {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 14% 26%, rgba(47, 107, 255, .30), transparent),
    radial-gradient(1.4px 1.4px at 76% 18%, rgba(47, 107, 255, .24), transparent),
    radial-gradient(1.8px 1.8px at 63% 74%, rgba(47, 107, 255, .20), transparent),
    radial-gradient(1.3px 1.3px at 30% 80%, rgba(47, 107, 255, .26), transparent),
    radial-gradient(1.5px 1.5px at 87% 60%, rgba(47, 107, 255, .18), transparent),
    radial-gradient(1.2px 1.2px at 41% 36%, rgba(47, 107, 255, .22), transparent);
  animation: apxFlutua 16s ease-in-out infinite alternate;
}
@keyframes apxFlutua { to { transform: translateY(-14px); } }

/* ---------------- grade ---------------- */
/* Mais larga que o resto da página (1200px). São três colunas com um
   aparelho no meio; no wrap normal os cartões de benefício ficariam com
   140px de largura e o texto quebraria em três linhas.

   Os 1340px também são o que permite o celular a 400px sem comer a coluna
   da esquerda: os cartões continuam com ~170px, que é onde "Avisos e
   prazos" ainda cabe em duas linhas. */
.apx__wrap {
  position: relative; z-index: 1;
  max-width: 1340px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px) minmax(0, 286px);
  gap: clamp(24px, 2.6vw, 44px);
  align-items: center;
}

/* ---------------- coluna esquerda ---------------- */
.apx__badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px 8px 12px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--apx-azul);
  background: #FFFFFF;
  border: 1px solid #D6E4FF;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.apx__badge svg { width: 15px; height: 15px; }

.apx__h {
  margin: 22px 0 18px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* O teto é 3.1rem (~50px) e não os 72px do estudo: no wrap de 1300px um
     título de 72px empurraria "aplicativo." para uma terceira linha e
     ficaria maior que o H1 do hero, invertendo a hierarquia da página. */
  font-size: clamp(2.15rem, 3.6vw, 3.1rem);
  line-height: 1.06; letter-spacing: -.042em; font-weight: 800;
  color: var(--apx-txt);
}
/* `background-clip: text` exige texto transparente — e a cor sólida antes
   dele é o que o navegador sem suporte mostra, em vez de nada. */
.apx__h em {
  display: block; font-style: normal;
  color: var(--apx-azul);
  background: linear-gradient(180deg, #2F6BFF 0%, #6FA9FF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.apx__p {
  margin: 0 0 26px; max-width: 44ch;
  font-size: clamp(.98rem, 1.1vw, 1.06rem); line-height: 1.72;
  color: var(--apx-txt2);
}
.apx__p b { color: var(--apx-txt); font-weight: 650; }

/* ---- benefícios: dois por três ---- */
.apx__ben {
  list-style: none; margin: 0 0 30px; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.apx__ben li {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 15px; border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid var(--apx-linha);
  box-shadow: var(--apx-sombra);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1),
              box-shadow .3s, border-color .3s;
}
.apx__ben li:hover {
  transform: translateY(-6px);
  border-color: #CFE0FF;
  box-shadow: var(--apx-sombra-h);
}
.apx__ben-ic { flex: none; display: grid; place-items: center; color: var(--apx-azul); }
.apx__ben-ic svg { width: 21px; height: 21px; transition: transform .3s; }
.apx__ben li:hover .apx__ben-ic svg { transform: scale(1.1) rotate(-4deg); }
.apx__ben b {
  display: block; font-size: .86rem; font-weight: 700;
  letter-spacing: -.015em; color: var(--apx-txt); line-height: 1.3;
}
.apx__ben span {
  display: block; margin-top: 2px; font-size: .76rem; line-height: 1.35;
  color: var(--apx-txt3);
}

/* ---- ação ---- */
.apx__acao { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.apx__bt {
  /* `min-width: min-content` porque o `overflow: hidden` logo abaixo — que
     é o que segura o brilho atravessando o botão — desliga o tamanho mínimo
     automático dos itens de flex. Sem o piso, num celular estreito este
     botão encolheria abaixo do próprio texto e cortaria "Instalar
     aplicativo" no meio, em vez de quebrar a linha. Foi exatamente o que
     aconteceu com o botão do hero. */
  position: relative; overflow: hidden; min-width: min-content;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  min-height: 56px; padding: 0 30px;
  border: 0; border-radius: 14px; cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  color: #FFFFFF;
  background: linear-gradient(180deg, #2F6BFF 0%, #4E8DFF 100%);
  box-shadow: 0 12px 30px -12px rgba(47, 107, 255, .65),
              0 0 0 1px rgba(255, 255, 255, .14) inset;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s;
}
.apx__bt:hover {
  transform: scale(1.02);
  box-shadow: 0 18px 40px -14px rgba(47, 107, 255, .75),
              0 0 0 1px rgba(255, 255, 255, .22) inset;
}
.apx__bt:active { transform: scale(1); }
.apx__bt svg { width: 19px; height: 19px; }
/* O brilho atravessa uma vez por hover, não em laço. Repetição sozinha na
   tela vira distração. */
.apx__bt::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .38) 50%, transparent 64%);
  transform: translateX(-130%);
  transition: transform .85s cubic-bezier(.22, 1, .36, 1);
}
.apx__bt:hover::after { transform: translateX(130%); }

.apx__nota {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .9rem; font-weight: 500; color: var(--apx-txt2);
}
.apx__seta { width: 17px; height: 17px; color: var(--apx-azul); animation: apxSeta 2s ease-in-out infinite; }
@keyframes apxSeta { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

/* Aviso curto abaixo do botão: só aparece quando o JavaScript descobre que
   o navegador não instala PWA. Nasce com `hidden` no HTML. */
.apx__aviso {
  margin: 16px 0 0; max-width: 46ch;
  padding: 12px 15px; border-radius: 12px;
  font-size: .84rem; line-height: 1.6; color: var(--apx-txt2);
  background: #FFFFFF; border: 1px solid var(--apx-linha);
  box-shadow: var(--apx-sombra);
}
.apx__aviso[hidden] { display: none; }
.apx__aviso b { color: var(--apx-txt); font-weight: 650; }

/* ---------------- centro: o aparelho ---------------- */
.apx__meio { position: relative; display: grid; place-items: center; }

/* O FOCO BRANCO ATRÁS DA FOTO.
   A imagem tem fundo branco chapado e não foi recortada de propósito: o
   recorte comeria a sombra suave embaixo da plataforma de vidro, que é o
   que faz o aparelho parecer apoiado em alguma coisa.

   Em vez disso, o fundo da foto some por baixo — este halo branco cobre
   toda a área da imagem e só depois se dissolve no degradê da seção. Onde a
   moldura branca terminaria, o fundo já é branco também, e a emenda não
   aparece. Também é ele que impede o brilho azul de vazar por dentro da
   plataforma.

   Foi tentado com `mix-blend-mode: multiply`, que resolveria sozinho — mas
   `.apx__wrap` tem z-index e cria contexto de empilhamento, e blend não
   atravessa contexto: o branco voltaria a ser branco opaco. O halo funciona
   em qualquer navegador, sem depender disso. */
/* ERAM DOIS PROBLEMAS, E SÓ UM ERA O DESENHO DO HALO.

   1. ORDEM DE PINTURA — o que realmente sujava os cartões.
      `.apx__esq` vem antes de `.apx__meio` no HTML, então o halo, que é
      filho do meio, era pintado DEPOIS dos cartões de benefício e passava
      por cima deles. `z-index: -1` resolve de vez: como `.apx__meio` não
      cria contexto de empilhamento próprio, o -1 joga o halo para trás de
      todo o conteúdo de `.apx__wrap` — os três blocos de cartões, venham
      na ordem que vierem. Continua na frente dos anéis, que estão fora do
      wrap, e é isso que mantém as órbitas escondidas atrás do aparelho.

   2. A ELIPSE MAIOR QUE A CAIXA — o que fazia as linhas retas.
      Raio de 60% contra uma caixa que só vai a 50% do centro à borda: o
      degradê ainda tinha metade da opacidade quando o retângulo acabava, e
      o corte virava duas retas. Agora a caixa é folgada o bastante para o
      branco morrer antes da borda, em todas as direções.

   3. E A FOLGA CURTA — o que ainda deixava a linha vertical aparecendo.
      Não basta o branco chapado ALCANÇAR a borda da foto: ele precisa
      passar bem longe dela. Com folga de 5px, dentro da foto o branco era
      chapado e um passo depois já começava a cair — e essa quebra de
      inclinação, perfeitamente reta e vertical, o olho pega na hora.
      Agora o chapado vai 69px além da foto, e só então começa a névoa.

   Resultado: névoa branca larga saindo do aparelho para os dois lados,
   morrendo antes de qualquer borda. É ela que dissolve a moldura branca da
   imagem no degradê da seção. */
.apx__meio::before {
  content: ''; position: absolute; z-index: -1;
  inset: -75%;
  background: radial-gradient(ellipse 48% 48% at 50% 50%,
              #FFFFFF 0%, #FFFFFF 56%, rgba(255, 255, 255, 0) 100%);
}

/* O <picture> precisa virar bloco com largura própria: como item de grade
   ele assume largura de conteúdo, e aí o `width:100%` da imagem ficaria sem
   referência para calcular. */
.apx__meio picture {
  position: relative; z-index: 1;
  display: block; width: 100%; max-width: 400px; margin: 0 auto;
}
.apx__fone {
  display: block; width: 100%; height: auto;
  animation: apxBoia 7s ease-in-out infinite;
}
@keyframes apxBoia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------------- coluna direita ---------------- */
.apx__dir { display: grid; gap: 14px; }
.apx__card {
  padding: 22px 22px; border-radius: 18px;
  background: #FFFFFF;
  border: 1px solid var(--apx-linha);
  box-shadow: var(--apx-sombra);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), box-shadow .32s, border-color .32s;
}
.apx__card:hover {
  transform: translateY(-6px);
  border-color: #CFE0FF;
  box-shadow: var(--apx-sombra-h);
}
.apx__card-ic {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 13px; margin-bottom: 14px;
  color: var(--apx-azul); background: var(--apx-azul-f);
  transition: transform .32s;
}
.apx__card:hover .apx__card-ic { transform: scale(1.06); }
.apx__card-ic svg { width: 21px; height: 21px; }
.apx__card b {
  display: block; margin-bottom: 6px;
  font-size: 1rem; font-weight: 700; letter-spacing: -.02em; color: var(--apx-txt);
}
.apx__card p { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--apx-txt3); }

/* ---------------- barra do rodapé ---------------- */
/* A barra acompanha a mesma largura da grade acima. Se ficasse no wrap
   padrão de 1200px, ela sairia mais estreita que os cartões e o desalinho
   apareceria justo na borda, que é onde o olho mede. */
.apx__base { max-width: 1340px; }

.apx__barra {
  position: relative; z-index: 1;
  margin: clamp(38px, 4vw, 60px) 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 22px 10px; border-radius: 22px;
  background: #FFFFFF;
  border: 1px solid var(--apx-linha);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 50px -30px rgba(15, 23, 42, .28);
}
.apx__barra > div {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 4px 26px;
  border-right: 1px solid var(--apx-linha);
}
.apx__barra > div:last-child { border-right: 0; }
.apx__barra-ic {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 14px;
  color: var(--apx-azul); background: var(--apx-azul-f);
}
.apx__barra-ic svg { width: 22px; height: 22px; }
/* O texto vive num <div> dentro do item; o seletor precisa descer até ele.
   `.apx__barra span` pegaria também o <span> do ícone e o quebraria. */
.apx__barra > div > div b {
  display: block; font-size: .95rem; font-weight: 700;
  letter-spacing: -.015em; color: var(--apx-txt);
}
.apx__barra > div > div span {
  display: block; margin-top: 3px;
  font-size: .86rem; line-height: 1.45; color: var(--apx-txt3);
}

/* O passo a passo (modal) vive em mw-instalar.css: ele é usado também pelo
   botão do menu lateral do painel, e duplicar as regras aqui faria as duas
   cópias divergirem na primeira alteração. */

/* ---------------- responsivo ---------------- */
@media (max-width: 1180px) {
  .apx__wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
  /* Os três cartões da direita descem e viram uma fileira embaixo. */
  .apx__dir { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .apx__barra > div { padding: 4px 18px; }
}
@media (max-width: 900px) {
  .apx__wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .apx__esq { justify-self: stretch; }
  .apx__meio { order: -1; }
  .apx__meio picture { max-width: 330px; }
  /* A coluna aqui é a largura da tela inteira, e -75% dela passaria da
     borda do celular com o branco ainda chapado — a névoa cobriria a seção
     toda. Estes valores mantêm a mesma proporção de folga. */
  .apx__meio::before {
    inset: -45% -32%;
    background: radial-gradient(ellipse 48% 48% at 50% 50%,
                #FFFFFF 0%, #FFFFFF 68%, rgba(255, 255, 255, 0) 100%);
  }
  .apx__p { margin-left: auto; margin-right: auto; }
  .apx__acao { justify-content: center; }
  .apx__aviso { margin-left: auto; margin-right: auto; }
  .apx__dir { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; }
  .apx__barra { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; }
  .apx__barra > div:nth-child(2n) { border-right: 0; }
}
@media (max-width: 680px) {
  .apx__ben { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; }
  .apx__dir { grid-template-columns: 1fr; }
  .apx__barra { grid-template-columns: 1fr; }
  .apx__barra > div { border-right: 0; padding: 4px 20px; }
}
@media (max-width: 460px) {
  .apx__ben { grid-template-columns: 1fr; }
  .apx__acao { flex-direction: column; align-items: stretch; }
  .apx__bt { width: 100%; }
  .apx__nota { justify-content: center; }
}

/* ---------------- movimento reduzido ---------------- */
/* Quem pediu menos movimento no sistema operacional recebe a seção parada.
   O visual continua inteiro — só o que se mexe sozinho some. */
@media (prefers-reduced-motion: reduce) {
  .apx__anel, .apx__brilho, .apx__po, .apx__fone, .apx__seta { animation: none; }
  .apx__bt::after { transition: none; }
  .apx__ben li:hover, .apx__card:hover { transform: none; }
}