/* Telas do aplicativo SeuNutricionista no site (14/10/2026): home, landings de tema e /acompanhamento-nutricional/.
   Os prints vêm da conta de demonstração (inquilino 990523), nunca de paciente real. */
.sn-app { padding: 72px 20px; background: #f6faf8; }
.sn-app--branco { background: #ffffff; }
.sn-app__in { max-width: 1200px; margin: 0 auto; }
.sn-app__topo { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.sn-app__selo {
  display: inline-block; margin-bottom: 14px; padding: 6px 14px; border-radius: 999px;
  background: #e3f2ec; color: #1d5c47; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.sn-app__titulo { margin: 0 0 12px; color: #123c30; font-size: clamp(26px, 14px + 2.2vw, 38px); line-height: 1.15; }
.sn-app__lead { margin: 0; color: #475569; font-size: 17px; line-height: 1.65; }
.sn-app__telas { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 24px; margin: 0; padding: 0; list-style: none; }
.sn-app__tela { flex: 0 1 200px; margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sn-app__fone {
  width: 100%; max-width: 210px; aspect-ratio: 1 / 2; overflow: hidden;
  border: 7px solid #123c30; border-radius: 30px; background: #123c30; box-shadow: 0 18px 40px rgba(12, 42, 33, .22);
}
.sn-app__fone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 23px; }
.sn-app__tela figcaption { max-width: 230px; margin-top: 16px; color: #334155; font-size: 15px; line-height: 1.55; }
.sn-app__tela figcaption strong { display: block; margin-bottom: 4px; color: #123c30; font-size: 16px; }
.sn-app__rodape { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
.sn-app__botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px;
  border: 1.5px solid #1d5c47; border-radius: 10px; background: #1d5c47; color: #ffffff; font-weight: 700; text-decoration: none;
  transition: background .2s, transform .2s;
}
.sn-app__botao:hover { background: #123c30; transform: translateY(-1px); }
.sn-app__botao--linha { background: #ffffff; color: #1d5c47; }
.sn-app__botao--linha:hover { background: #e9f5f1; }
.sn-app__botao:focus-visible { outline: 3px solid #87C9B7; outline-offset: 2px; }
.sn-app__nota { margin: 16px 0 0; color: #64748b; font-size: 13px; text-align: center; }

@media (max-width: 640px) {
  .sn-app { padding: 52px 16px; }
  .sn-app__topo { margin-bottom: 28px; text-align: left; }
  .sn-app__telas { flex-direction: column; gap: 18px; }
  .sn-app__tela { flex: none; display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; text-align: left; }
  .sn-app__fone { max-width: 112px; border-width: 5px; border-radius: 20px; }
  .sn-app__fone img { border-radius: 15px; }
  .sn-app__tela figcaption { max-width: none; margin-top: 0; }
  .sn-app__rodape { flex-direction: column; }
  .sn-app__botao { width: 100%; }
}