/* ============================================================
   FLASH — Limpeza: fundador e reconhecimento

   As remoções foram feitas no window.allomniLanding, que é a fonte de
   verdade. Só que o componente tem PADRÕES EMBUTIDOS no bundle: com a
   lista vazia ele desenha os dele. Este arquivo (com o flash-limpeza.js
   ao lado) trata o que sobra desses padrões.

   Escopo: #fundador, #conquistas e o mockup de celular de #implementacao.
   Nada aqui toca hero, iceberg, programa, cases, blog, CTA final ou footer.
   ============================================================ */

/* ------------------- fundador: mosaico sem foto ----------------- */
/* As 5 fotos da agencia anterior sairam e as do Roney ainda nao chegaram. As
   celulas continuam sendo desenhadas pelo bundle, mas vazias -- viram um
   bloco de 376px de nada ao lado do texto.

   A regra some com o mosaico ENQUANTO nao houver <img> dentro dele, e
   devolve a coluna inteira ao texto. Quando as fotos entrarem, o :has()
   volta a ser falso sozinho e o mosaico reaparece, sem mexer em codigo. */
/* A condição é a EXISTÊNCIA do mosaico, não a de um <img> dentro dele:
   o componente põe a foto como background-image, então testar por img
   dava falso mesmo com foto — e o texto ficava em coluna única com o
   retrato empilhado em cima. Quando não há foto nenhuma, o JS remove o
   mosaico inteiro, e aí a regra volta a valer. */
#allomni-root #fundador .founder-grid-v2:not(:has(.founder-mosaic)) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 820px; margin-inline: auto;
}

/* quando as fotos chegarem: recorte correto, sem deformar */
#allomni-root #fundador .founder-mosaic img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Com UMA foto só, a grade de cinco células vira um item solto num
   canto. O JS marca quantas sobraram; aqui o mosaico deixa de ser
   mosaico e passa a ser um retrato só, com a proporção da imagem. */
#allomni-root #fundador .founder-mosaic[data-fotos="1"] {
  display: block; aspect-ratio: 1 / 1;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(140, 170, 220, .16);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .4);
}
#allomni-root #fundador .founder-mosaic[data-fotos="1"] .founder-mosaic__cell {
  position: static; width: 100%; height: 100%; inset: auto;
  grid-area: auto; margin: 0; border-radius: 0;
}
/* o rótulo era legenda de mosaico; num retrato único vira ruído */
#allomni-root #fundador .founder-mosaic[data-fotos="1"] .founder-mosaic__label,
#allomni-root #fundador .founder-mosaic[data-fotos="1"] .founder-mosaic__icon { display: none; }

/* ------------------- fundador: pilares -------------------------- */
/* Os badges eram premios ("🏆 Premio E-commerce Brasil"). Agora sao
   frentes de atuacao, e nao podem parecer medalha: sem emoji, sem
   pilula dourada -- caixa fina, titulo e apoio em duas linhas. */
#allomni-root #fundador .founder-badges-v2 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
#allomni-root #fundador .founder-badges-v2 > * {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 13px 14px;
  background: rgba(120, 160, 220, .05);
  border: 1px solid rgba(140, 170, 220, .16);
  border-radius: 12px;
}
#allomni-root #fundador .pilar-t {
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #4D8FFF;
}
#allomni-root #fundador .pilar-d {
  font-size: 12px; line-height: 1.45; color: #C2CCDA; opacity: .85;
}

/* ---------------- fundador: linha de atuacao -------------------- */
#allomni-root #fundador .founder-brands__label {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(150, 172, 205, .6);
}

/* ------------------ reconhecimento sem a 2a fileira ------------- */
/* O JS tira a fileira de baixo inteira. O que sobra e uma unica
   .bento__row -- o gap do .bento so tem efeito entre irmaos, entao nao
   fica margem sobrando; esta regra existe so para garantir que a linha
   restante nao herde um espaco reservado para a que saiu. */
#allomni-root #conquistas .bento > .bento__row:last-child { margin-bottom: 0; }
#allomni-root #conquistas .bento:has(> .bento__row:only-child) { gap: 0; }

@media (max-width: 900px) {
  #allomni-root #fundador .founder-badges-v2 { grid-template-columns: 1fr; }
}


/* ============================================================
   Implementação: o celular

   Duas correções, as duas pedidas.

   1. O nome da loja era escrito POR CIMA do print, em branco com sombra,
      no meio da tela do celular. Cobria justamente a parte da loja que o
      print existe para mostrar. Sai da vista, mas fica no HTML: continua
      valendo para leitor de tela e para quando a imagem não carrega.

   2. A fatia da tela era 237x532 (2.245:1), a proporção de um print
      tirado no próprio celular -- que era como a agência anterior tinha
      capturado os dela. Os prints novos vieram de janela de navegador,
      mais largos (~1.77:1). Encaixá-los naquela fatia obrigava a cortar
      11% de cada lado, e isso comia palavra no meio ("Tecnologia laser
      par", "omprar por categoria").

      Com a fatia em 1.94:1 -- a proporção do print mais alto -- o corte
      cai para ~5%, que pega só a borda. Uso aspect-ratio em vez de
      altura fixa para a moldura acompanhar sozinha em qualquer largura,
      inclusive nos dois breakpoints que o CSS do tema já define.

   Para voltar ao original: apague este bloco. */
#allomni-root #implementacao .impl__slide-label { display: none !important; }

#allomni-root #implementacao .impl__phone { height: auto !important; }
#allomni-root #implementacao .impl__phone-screen {
  height: auto !important;
  aspect-ratio: 1 / 1.94;
}