/* Pagina de telefonia movel (/movel/) — layout de celular.
 *
 * Medidas do frame de 390px. Carrega depois do movel.css, entao seletores de
 * mesmo peso vencem por ordem — inclusive os das faixas intermediarias de
 * 1400px e 1130px, que precisam ser desfeitas aqui.
 */
@media (max-width: 700px) {
  /* -------------------------------------------------------------------------
     Halo
     Metade do desfoque do desktop, mesma decisao da telefonia fixa: la a foto
     ocupa 44% da largura e a franja fica discreta; aqui ela vai de borda a
     borda, e o mesmo desfoque sangrava pela tela inteira.
     ------------------------------------------------------------------------- */
  .sg-movel-hero__foto::before {
    filter: blur(18px);
  }

  .sg-movel-vantagens::before {
    filter: blur(20px);
  }

  /* -------------------------------------------------------------------------
     Topo
     ------------------------------------------------------------------------- */
  .sg-movel-hero__grid {
    width: min(calc(100% - 40px), var(--sg-container));
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .sg-movel-hero__copy {
    gap: 20px;
  }

  /* 42px e a medida do frame. O piso existe porque "conexao" e a palavra mais
     larga: em 320px, com 42 fixos, ela estouraria a coluna. */
  .sg-movel-hero h1 {
    font-size: clamp(32px, 10.77vw, 42px);
    line-height: .95;
  }

  .sg-movel-hero__copy p {
    max-width: none;
    font-size: 16px;
    line-height: 1.375;
    font-variation-settings: "wght" 400, "wdth" 100;
  }

  /* -------------------------------------------------------------------------
     Vantagens
     A composicao vira uma coluna: aparelho, titulo com as vantagens, e a grade
     de planos em duas colunas.
     ------------------------------------------------------------------------- */
  .sg-movel-vantagens {
    padding: 37px 0;
  }

  /* A faixa comeca 140px abaixo do topo da secao — o aparelho tem 194px e fica
     no comeco dela, entao sobra para fora so por cima, como no frame. Embaixo
     ela passa 24px da secao, que e o respiro do desenho antes do bloco branco.
     A borda branca esta no frame e separa o cinza do fundo da pagina. */
  .sg-movel-vantagens::before,
  .sg-movel-vantagens__faixa {
    top: 140px;
    bottom: -24px;
  }

  .sg-movel-vantagens__faixa {
    border: 2px solid var(--sg-white);
  }

  .sg-movel-vantagens__grid {
    width: min(calc(100% - 60px), var(--sg-container));
    flex-direction: column;
    align-items: stretch;
    /* Desfaz a quebra de linha das faixas intermediarias. */
    flex-wrap: nowrap;
    gap: 12px;
  }

  /* De volta a ordem do documento: aparelho, texto, planos. */
  .sg-movel-vantagens__aparelho,
  .sg-movel-vantagens__copy,
  .sg-movel-vantagens__planos {
    order: 0;
  }

  .sg-movel-vantagens__aparelho {
    width: 113px;
    align-self: center;
  }

  /* O frame gira o aparelho por outro eixo no celular: aqui ele fica de pe,
     inclinado para o outro lado. */
  .sg-movel-vantagens__aparelho img {
    width: 82px;
    transform: scaleY(-1) rotate(-170.02deg);
  }

  .sg-movel-vantagens__copy {
    width: 100%;
    gap: 35px;
  }

  .sg-movel-vantagens h2 {
    font-size: 38px;
    line-height: .95;
  }

  /* No celular o titulo e mais longo que o do desktop. */
  .sg-movel-vantagens__so-celular {
    display: inline;
  }

  .sg-movel-beneficios {
    max-width: none;
    padding: 0 15px;
    gap: 25px;
  }

  /* Icone e rotulo centralizados, com a meia caixa de borda a borda. No desktop
     eles ficam a esquerda, porque a coluna e estreita. */
  .sg-movel-beneficios li {
    justify-content: center;
  }

  .sg-movel-planos {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    /* 12 de gap da coluna mais 28 fecham os 40px entre o texto e a grade. */
    margin-top: 28px;
  }

  .sg-movel-plano {
    align-items: center;
  }

  .sg-movel-plano__dados {
    padding: 15px;
  }

  /* O preco encolhe: 66px do desktop nao cabe em meia largura de celular. */
  .sg-movel-plano__preco > span:first-child {
    font-size: 16px;
    line-height: 16px;
  }

  .sg-movel-plano__preco strong {
    font-size: 45px;
    line-height: 45px;
  }

  .sg-movel-plano__preco .sg-price__cents {
    width: auto;
    margin-left: 2px;
  }

  .sg-movel-plano__preco .sg-price__cents sup {
    font-size: 16px;
    line-height: 16px;
  }

  .sg-movel-plano__preco .sg-price__cents small {
    font-size: 12px;
    line-height: 12px;
  }

  /* -------------------------------------------------------------------------
     Converse com nossa equipe
     ------------------------------------------------------------------------- */
  .sg-movel-especialistas {
    padding: 40px 0 70px;
  }

  /* O cartao tem 370 dos 390 do frame, e o recheio de cima e zero: quem abre o
     espaco e o proprio mockup, que sobe 128px para fora com margem negativa.
     Assim o cartao continua crescendo com o texto, sem numero fixo de altura. */
  .sg-movel-especialistas__cartao {
    width: min(calc(100% - 20px), 370px);
    padding: 0 26px 72px;
    border-radius: 30px;
    margin-top: 128px;
  }

  .sg-movel-especialistas__conteudo {
    gap: 28px;
    text-align: left;
  }

  .sg-movel-especialistas__mockup {
    width: 210px;
    margin-top: -128px;
  }

  .sg-movel-especialistas__copy {
    align-items: flex-start;
    gap: 26px;
  }

  .sg-movel-especialistas h2 {
    font-size: 34px;
    line-height: .94;
  }

  .sg-movel-especialistas__copy p {
    font-size: 14px;
    line-height: 1.29;
  }
}