/* Pagina /telefonia-fixa/ — layout de celular.
 *
 * Medidas do frame de 390px. Carrega depois do fixo.css, entao seletores de
 * mesmo peso vencem por ordem.
 */
@media (max-width: 700px) {
  .sg-fixo-page {
    padding: 40px 0;
  }

  /* -------------------------------------------------------------------------
     Halo
     Metade do desfoque do desktop nos dois lugares. 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-fixo-hero__photo::before {
    filter: blur(18px);
  }

  .sg-fixo-plans::before {
    filter: blur(20px);
  }

  /* -------------------------------------------------------------------------
     Topo
     ------------------------------------------------------------------------- */
  .sg-fixo-hero__grid {
    gap: 30px;
  }

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

  .sg-fixo-hero h1 {
    /* 42px e a medida do frame. O piso existe porque "importa" e "quem" ficam
       na mesma linha: em 320px, com 42 fixos, a linha estouraria a coluna. */
    font-size: clamp(32px, 10.77vw, 42px);
    line-height: .95;
  }

  /* O frame de celular escreve "Fale com quem importa com o Fixo SG", sem o
     "sempre" do desktop. */
  .sg-fixo-hero__wide-only {
    display: none;
  }

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

  /* -------------------------------------------------------------------------
     Escolha como quer falar
     ------------------------------------------------------------------------- */
  .sg-fixo-plans {
    margin: 50px 0;
  }

  .sg-fixo-plans__grid {
    align-items: stretch;
    gap: 30px;
  }

  .sg-fixo-plans h2 {
    font-size: 36px;
    text-align: left;
  }

  .sg-fixo-plans__column {
    align-items: stretch;
    width: 100%;
  }

  /* Empilhados e em largura cheia. No desktop sao tres colunas de 240px. */
  .sg-fixo-plans__list {
    flex-direction: column;
    gap: 20px;
  }

  .sg-fixo-card {
    width: auto;
  }

  .sg-fixo-plans__note {
    max-width: none;
  }

  /* As duas vantagens ficam na mesma linha no celular. */
  .sg-fixo-card__perks {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
  }

  /* -------------------------------------------------------------------------
     Portabilidade
     ------------------------------------------------------------------------- */
  .sg-fixo-port__grid {
    padding: 50px 0;
    gap: 24px;
  }

  .sg-fixo-port__photo {
    max-width: none;
  }

  .sg-fixo-port h2 {
    font-size: 36px;
    line-height: 1;
  }

  .sg-fixo-port__submit {
    align-self: stretch;
  }
}