/* Home no celular.
 *
 * Carregado depois de home.css e sempre vence por ordem. Segue o mesmo
 * padrao de planos.css/planos-mobile.css: o desktop fica intocado e o mobile
 * mora num arquivo proprio.
 *
 * Tres decisoes guiam o arquivo:
 *
 * 1. Uma coluna unica com goteira de 18px, igual ao resto do site.
 * 2. Tres momentos sangram de ponta a ponta e quebram essa goteira de
 *    proposito: a foto do banner principal, as duas esteiras de logos e o
 *    carrossel de planos. Sao os momentos que fazem a pagina parecer feita
 *    para o celular, em vez de espremida do desktop.
 * 3. Fora esses tres, tudo se comporta e fica dentro da coluna.
 */

@media (max-width: 700px) {
  /* A sangria e calculada a partir da goteira do container, e nao com 100vw,
     porque vw ignora a barra de rolagem e sobra alguns pixels. */
  main#conteudo {
    --sg-m-gutter: 18px;
  }

  /* ---------------------------------------------------------------------
     Banner principal
     A foto deixa de sangrar de ponta a ponta e volta para dentro da goteira,
     como cartao arredondado alinhado com o texto — e o que o layout de
     celular pede.
     --------------------------------------------------------------------- */
  .sg-hero {
    /* O frame reserva 100px no topo para o cabecalho. Como o nosso ja ocupa
       101px no fluxo, aqui sobra so o respiro entre a borda dele e o olho. */
    padding: 28px 0 40px;
  }

  .sg-hero__grid {
    gap: 25px;
  }

  .sg-eyebrow {
    width: 100%;
    height: auto;
    font-size: 16px;
    line-height: 1.0625;
  }

  /* Duas linhas no celular. No desktop os dois trechos seguem na mesma linha,
     separados pelo espaco que existe entre eles no HTML. */
  .sg-eyebrow span {
    display: block;
  }

  /* 42px e a medida do frame, e vale a partir de 390px de tela. O piso existe
     porque "entretenimento" e a palavra mais larga do titulo: em 320px, com
     42px fixos, ela estouraria a coluna. */
  .sg-hero__copy h1 {
    font-size: clamp(32px, 10.77vw, 42px);
    line-height: .95;
    letter-spacing: -.01em;
  }

  /* Abraca o texto em vez de esticar pela coluna inteira. O .sg-hero__cta
     declara min-height e recheio proprios com clamp, entao precisam ser
     desfeitos aqui, e nao so o width. */
  .sg-hero__copy .sg-button {
    width: auto;
    align-self: flex-start;
    min-height: 0;
    margin-top: 0;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
  }

  .sg-hero__media {
    width: 100%;
    margin-inline: 0;
    /* 350 por 190 sao as medidas do frame numa tela de 390. Em proporcao, e
       nao em altura fixa, para acompanhar telas mais estreitas. */
    aspect-ratio: 350 / 190;
    border-radius: 20px;
    overflow: hidden;
  }

  /* ---------------------------------------------------------------------
     Dois passos
     Aqui estava o defeito visivel: .sg-steps__heading h2 mantinha
     width: 543px da regra base, o track 1fr nao encolhe abaixo do
     min-content e o justify-content: center derramava o bloco para os dois
     lados. O titulo aparecia cortado como "nte sua eriencia em nas 2
     passos". minmax(0, 1fr) libera o encolhimento e a largura volta a 100%.
     --------------------------------------------------------------------- */
  .sg-steps {
    padding: 56px 0 64px;
  }

  .sg-steps__grid {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: 40px;
    padding: 0;
  }

  .sg-steps__heading {
    min-height: 0;
  }

  .sg-steps__heading h2 {
    width: 100%;
    max-width: none;
    font-size: clamp(34px, 9.4vw, 46px);
    line-height: 1.02;
  }

  /* O brilho alaranjado e so atmosfera. Centralizado e suave ele mantem o
     calor da marca sem empurrar layout. */
  /* Medidas do frame, em porcentagem da secao. O brilho cobre so a metade de
     cima: o nucleo laranja fica atras do titulo e ja esta apagando quando
     chega no "Segundo". Antes ele tinha a altura inteira da secao e o nucleo
     caia sobre as fichas de velocidade, deixando o titulo no branco.
     A sangria lateral e vertical e recortada pelo overflow do .sg-steps, que
     e o mesmo recorte que o frame usa. */
  .sg-steps__glow {
    top: -5.96%;
    left: -18.85%;
    width: 137.61%;
    height: 57.02%;
    translate: none;
    opacity: .5;
  }

  /* .sg-steps__content e .sg-step sao flex com largura fixa de desktop
     (580px e 450px). No celular precisam acompanhar a coluna. */
  .sg-steps__content {
    width: 100%;
    gap: 44px;
  }

  .sg-step {
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  /* O escalonamento do segundo passo e um efeito de desktop; no celular ele
     so empurrava a coluna para fora da tela. */
  .sg-step--second {
    margin-left: 0;
  }

  .sg-step__number {
    margin-bottom: 6px;
    font-size: 26px;
  }

  .sg-step__description {
    font-size: 16px;
    line-height: 1.35;
  }

  /* As esteiras sangram de ponta a ponta: viram duas faixas de movimento e
     deixam claro que a lista continua alem da tela. */
  .sg-marquee {
    width: 100vw;
    height: 108px;
    margin-inline: calc(50% - 50vw);
    margin-top: 18px;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }

  .sg-marquee__set {
    gap: 14px;
    padding-right: 14px;
  }

  .sg-marquee__set img,
  .sg-speed-chip {
    width: 84px;
    height: 84px;
  }

  /* ---------------------------------------------------------------------
     Planos
     Carrossel com encaixe. Os cartoes ocupam pouco menos que a largura util
     para que o proximo apareca pela borda: e o que sinaliza que da para
     arrastar, sem precisar de seta nem texto explicando.
     --------------------------------------------------------------------- */
  .sg-plans {
    padding: 64px 0 72px;
  }

  /* O home.css declara a largura do container com :where(), que nao soma
     especificidade, entao o .sg-container do CSS canonico das paginas
     convertidas vence e a secao fica sem goteira. Aqui a largura e repetida
     com um seletor que ganha. */
  .sg-plans > .sg-container {
    /* display: block e obrigatorio: o CSS canonico deixa .sg-container como
       inline, e elemento inline ignora width. As outras secoes escapam
       porque suas classes proprias ja declaram grid ou flex. */
    display: block;
    width: min(calc(100% - var(--sg-m-gutter) * 2), var(--sg-container));
    margin-inline: auto;
  }

  /* .sg-plans .sg-section-heading centraliza com especificidade maior que a
     regra generica de mobile, entao o alinhamento precisa ser repetido. */
  .sg-plans .sg-section-heading,
  .sg-plans .sg-section-heading h2,
  .sg-plans .sg-plans__city-note {
    text-align: left;
  }

  .sg-plans .sg-section-heading h2 {
    font-size: clamp(34px, 9.4vw, 46px);
    line-height: 1.02;
  }

  /* Desfaz o carrossel que o bloco de 1240px monta. Ele continua valendo no
     tablet, onde a largura ainda comporta dois ou tres cartoes lado a lado;
     em 390px cabia um so, e o proximo aparecia cortado pela borda. */
  .sg-plans__scroll {
    width: auto;
    margin-inline: 0;
    padding-inline: 0;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  /* O width: max-content e o align-items: flex-end vem das regras de carrossel
     e precisam ser desfeitos, senao a coluna encolhe para o cartao mais largo
     e os cartoes deixam de acompanhar a largura da tela. */
  .sg-plans__grid {
    width: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    padding: 14px 0 0;
  }

  /* As larguras fixas de --featured, --gamer e --ultra sao do desenho de
     desktop; aqui todos ocupam a linha inteira. Esta folha carrega depois do
     home.css, entao um seletor de peso igual basta para vencer. */
  .sg-plan-card {
    width: auto;
    height: auto;
    min-height: 0;
    padding: 25px 30px;
    scroll-snap-align: none;
  }

  /* Numero e unidade lado a lado. Empilhados sao a solucao do desktop, onde o
     cartao tem 243px; num cartao de largura cheia sobra espaco de sobra. */
  .sg-plan-card__speed {
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 16px;
  }

  .sg-plan-card__speed strong {
    font-size: 60px;
    line-height: 40px;
  }

  /* Os tres logos voltam para uma linha. A coluna de 60px por 80px de altura
     tambem e do cartao estreito: aqui ela deixava o lado direito vazio e, no
     plano Light, que tem so dois logos, ainda sobrava um vao de 30px antes do
     preco. */
  .sg-plan-card__logos--stacked {
    width: 100%;
    height: 20px;
    flex-direction: row;
    align-items: center;
    margin-bottom: 18px;
  }

  .sg-plan-card__logos--stacked img {
    width: 55px;
  }

  /* ---------------------------------------------------------------------
     Operadora movel
     No desktop a copy, o mapa e a modelo sao camadas absolutas sobre um bloco
     de proporcao fixa. No celular a composicao e outra: o mapa abre o cartao,
     o texto vem centralizado abaixo dele e o botao fecha.
     --------------------------------------------------------------------- */
  /* Sem overflow aqui: um recorte neste nivel corta o halo do botao. */
  .sg-mobile-banner__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    aspect-ratio: auto;
    gap: 8px;
    padding: 38px 26px 40px;
  }

  .sg-mobile-banner__copy {
    position: static;
    width: 100%;
    max-width: none;
    text-align: center;
  }

  .sg-mobile-banner h2 {
    font-size: 34px;
    line-height: 1;
  }

  .sg-mobile-banner__copy > p {
    max-width: none;
    margin: 23px 0 22px;
    font-size: 15px;
    line-height: 1.2;
  }

  .sg-mobile-banner .sg-button {
    font-size: 14px;
  }

  /* O mapa sobe para o topo. Ele vem depois da copy no HTML porque no desktop
     e uma camada absoluta sobre o bloco inteiro; aqui o order inverte sem
     duplicar markup. A proporcao e a do proprio SVG, 575 por 569. */
  .sg-mobile-banner__visual {
    position: relative;
    order: -1;
    display: block;
    inset: auto;
    width: 200px;
    height: auto;
    min-height: 0;
    margin-inline: 0;
    aspect-ratio: 575 / 569;
  }

  .sg-mobile-banner__map {
    position: static;
    /* O breakpoint de 1020px aplica translate(-50%, -50%) para centralizar o
       mapa enquanto ele e absoluto. Aqui isso desloca meia caixa. */
    transform: none;
    width: 100%;
    height: 100%;
    /* O SVG traz overflow="visible" e preserveAspectRatio="none": sem este
       overflow o desenho vaza para fora da propria caixa. */
    overflow: hidden;
  }

  /* O desenho de celular tem so o mapa. Com a modelo junto, o cartao passava
     de mil pixels de altura e o botao caia bem abaixo da dobra. */
  .sg-mobile-banner__person {
    display: none;
  }

  /* ---------------------------------------------------------------------
     Solucoes
     No desktop sao cartoes verticais com a foto do produto acima. Empilhados
     no celular davam quase mil pixels de rolagem para quatro itens. Viram
     linhas: imagem a esquerda, texto a direita, o dobro de itens por tela.
     --------------------------------------------------------------------- */
  .sg-solutions {
    padding: 64px 0 72px;
  }

  .sg-solutions__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  /* A regra do home.css usa !important, entao so um seletor mais especifico
     e tambem com !important consegue substituir. */
  .sg-solutions__grid .sg-solution-card {
    width: 100% !important;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 2px solid var(--sg-green);
    border-radius: 24px;
    background: var(--sg-white);
  }

  /* Cada cartao tem tamanho proprio por :nth-child no desktop, com
     especificidade maior. Na linha do celular o quadro precisa ser igual
     para todos, senao os titulos desalinham. As rotacoes de cada imagem sao
     preservadas de proposito: sao um detalhe da marca. */
  .sg-solutions__grid .sg-solution-card .sg-solution-card__image {
    width: 84px;
    height: 84px;
    flex: 0 0 84px;
  }

  .sg-solutions__grid .sg-solution-card .sg-solution-card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* A borda passa para o cartao inteiro, entao o corpo fica limpo. */
  .sg-solution-card__body {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
  }

  .sg-solution-card__body strong {
    font-size: 19px;
    line-height: 1.1;
  }

  .sg-solution-card__description {
    font-size: 14px;
    line-height: 1.3;
  }

  /* ---------------------------------------------------------------------
     Conexao proxima
     --------------------------------------------------------------------- */
  .sg-near {
    padding: 64px 0 72px;
  }

  .sg-near__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 30px 18px;
  }

  .sg-near #titulo-proximidade {
    font-size: clamp(30px, 8.4vw, 38px);
    line-height: 1;
  }

  .sg-near__content .sg-section-heading p {
    font-size: 15px;
    line-height: 1.2;
  }

  .sg-near__features {
    gap: 14px;
  }

  .sg-feature-card {
    grid-template-columns: 64px 1fr;
    padding: 14px 16px;
  }

  .sg-feature-card img {
    width: 64px;
    height: 64px;
  }

  /* A foto abre a secao no celular. Ela e o ultimo elemento no HTML porque no
     desktop ocupa a coluna da direita; aqui o order a traz para cima sem
     duplicar markup. */
  .sg-near__photo {
    order: -1;
    min-height: 0;
    aspect-ratio: 16 / 10;
    border-radius: 20px;
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .sg-marquee {
    mask-image: none;
  }
}