/* Pagina /telefonia-fixa/ — layout de desktop.
 *
 * As medidas vem do frame de 1920px do Figma. Onde o desenho fixa largura em
 * pixel, aqui vira fracao: o container do site tem 1580px, e nao 1920, entao
 * numero fixo desalinharia a composicao inteira.
 *
 * A folha convertida declara `.sg-container { display: inline;
 * padding: 16px 10px }`. Toda caixa que usa a classe precisa declarar o
 * proprio display e zerar o recheio, senao a largura nem se aplica.
 */

.sg-fixo-page {
  padding: 70px 0;
  background: var(--sg-white);
}

/* ---------------------------------------------------------------------------
   Topo
   --------------------------------------------------------------------------- */
.sg-fixo-hero__grid {
  display: grid;
  /* 885 e 748 sao as duas colunas do frame, escritas como fracao. */
  grid-template-columns: minmax(0, 885fr) minmax(0, 748fr);
  align-items: center;
  gap: clamp(32px, 3.4vw, 50px);
  padding: 0;
}

.sg-fixo-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(24px, 2.8vw, 40px);
}

.sg-fixo-hero h1 {
  margin: 0;
  color: var(--sg-black);
  font-size: clamp(40px, 3.9vw, 75px);
  line-height: 1;
  letter-spacing: -.01em;
  font-variation-settings: "wght" 700, "wdth" 100;
}

.sg-fixo-hero__copy p {
  max-width: 507px;
  margin: 0;
  color: var(--sg-black);
  font-size: clamp(18px, 1.3vw, 25px);
  line-height: 1;
  font-variation-settings: "wght" 500, "wdth" 100;
}

.sg-fixo-hero__photo {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 748 / 446;
  border-radius: 30px;
}

/* Mesma tecnica de halo da faixa de planos e do bloco de operadora movel da
   Home: a camada borrada ocupa exatamente a caixa da foto, e a foto opaca por
   cima cobre o miolo. So a franja escapa pela borda. Fazer a camada maior que a
   foto deixaria um pedaco do degrade a mostra, e viraria moldura solida em vez
   de brilho.

   O degrade e o mesmo da faixa verde logo abaixo, para a pagina ter uma
   linguagem so de halo. */
.sg-fixo-hero__photo::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to left, #f60 24.435%, #25d366 62.788%);
  content: "";
  filter: blur(35px);
  pointer-events: none;
}

/* A foto e mais larga que o quadro e fica ancorada a esquerda, como no frame:
   o recorte tira o lado direito, nao os dois lados. */
.sg-fixo-hero__photo img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: left center;
}

/* ---------------------------------------------------------------------------
   Escolha como quer falar
   A faixa verde sangra de ponta a ponta, com um brilho colorido escapando por
   cima e por baixo dela.
   --------------------------------------------------------------------------- */
.sg-fixo-plans {
  position: relative;
  isolation: isolate;
  margin: 80px 0;
}

/* Mesma tecnica do bloco de operadora movel da Home: a camada borrada ocupa
   exatamente a caixa da superficie, e a superficie opaca por cima cobre o
   miolo. O que se ve e so a franja que escapa pela borda.

   Fazer esta camada maior que a faixa — que foi a primeira tentativa — deixa
   um pedaco do degrade sem nada por cima, e ele aparece como uma listra
   solida, nao como brilho. */
.sg-fixo-plans::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(to left, #f60 24.435%, #25d366 62.788%);
  content: "";
  filter: blur(40px);
  pointer-events: none;
}

.sg-fixo-plans__band {
  position: relative;
  z-index: 1;
  padding: 50px 0;
  background: #24cc00;
}

.sg-fixo-plans__grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 5.2vw, 100px);
  padding: 0;
}

.sg-fixo-plans h2 {
  margin: 0;
  flex: 0 0 auto;
  color: var(--sg-black);
  font-size: clamp(38px, 3.44vw, 66px);
  line-height: 1;
  letter-spacing: -.01em;
  font-variation-settings: "wght" 700, "wdth" 100;
}

.sg-fixo-plans__column {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.sg-fixo-plans__list {
  display: flex;
  align-items: stretch;
  gap: 30px;
}

/* Uma linha so. O max-width de 640px que existia aqui era o que forcava a
   quebra: a coluna dos cartoes tem folga de sobra para o texto inteiro. */
.sg-fixo-plans__note {
  margin: 0;
  color: var(--sg-black);
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Cartoes de plano
   --------------------------------------------------------------------------- */
.sg-fixo-card {
  display: flex;
  width: 240px;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 25px 30px;
  /* Mesmo laranja dos selos do proprio cartao, e nao o --sg-orange do rodape:
     dentro do cartao os dois ficam lado a lado e qualquer diferenca aparece. */
  border: 2px solid #f60;
  border-radius: 30px;
  background: var(--sg-white);
}

.sg-fixo-card__badge,
.sg-fixo-card__tag {
  align-self: flex-start;
  margin: 0;
  padding: 5px 10px;
  border-radius: 20px;
  color: var(--sg-black);
  font-size: 14px;
  line-height: 1;
  font-variation-settings: "wght" 400;
}

.sg-fixo-card__tag {
  background: #f60;
}

.sg-fixo-card__badge {
  background: var(--sg-green);
}

/* Os dois selos do cartao destacado ficam colados, com 5px entre eles. O gap
   de 20px do cartao separaria demais. */
.sg-fixo-card--featured .sg-fixo-card__badge {
  margin-bottom: -15px;
}

.sg-fixo-card h3 {
  margin: 0;
  color: var(--sg-black);
  font-size: 30px;
  line-height: 1;
  font-variation-settings: "wght" 700, "wdth" 100;
}

.sg-fixo-card__detail {
  margin: 0;
  color: var(--sg-black);
  font-size: 16px;
  line-height: 1.2;
  font-variation-settings: "wght" 600;
}

/* A lista vira marcadores de ponto, como no desenho, mas continua sendo <ul>:
   sao itens de fato, e o leitor de tela anuncia a contagem. */
.sg-fixo-card__perks {
  margin: 0;
  padding: 0;
  color: var(--sg-black);
  font-size: 16px;
  line-height: 1.35;
  list-style: none;
}

.sg-fixo-card__perks li::before {
  content: ". ";
}

/* Empurra o preco para a base para que os tres cartoes alinhem por baixo,
   mesmo com quantidades diferentes de texto. */
.sg-fixo-card__price {
  margin-top: auto;
}

.sg-fixo-card__price .sg-price__cents sup {
  font-size: 22px;
}

/* ---------------------------------------------------------------------------
   Portabilidade
   --------------------------------------------------------------------------- */
.sg-fixo-port__grid {
  display: grid;
  grid-template-columns: minmax(0, 406fr) minmax(0, 410fr) minmax(0, 466fr);
  align-items: center;
  gap: clamp(32px, 4.3vw, 62px);
  padding: 50px 0;
}

.sg-fixo-port__photo {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.sg-fixo-port h2 {
  margin: 0;
  color: #f60;
  font-size: clamp(34px, 2.9vw, 56px);
  line-height: 1.07;
  font-variation-settings: "wght" 700, "wdth" 100;
}

.sg-fixo-port__form {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.sg-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.sg-field label {
  color: var(--sg-black);
  font-size: 16px;
  line-height: 1;
  font-variation-settings: "wght" 700, "wdth" 100;
}

/* O cinza e o do desenho. O contorno no foco nao esta la, mas sem ele o campo
   ativo fica indistinguivel dos outros para quem navega por teclado. */
.sg-field input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #d9d9d9;
  color: var(--sg-black);
  font-family: inherit;
  font-size: 16px;
}

.sg-field input:focus-visible {
  border-color: var(--sg-black);
  outline: 2px solid var(--sg-orange);
  outline-offset: 1px;
}

/* Fora da tela em vez de display: none — alguns robos ignoram campo com
   display: none, e este precisa parecer preenchivel para eles. */
.sg-fixo-port__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.sg-fixo-port__submit {
  margin-top: 7px;
  align-self: flex-start;
}

.sg-fixo-port__message {
  min-height: 20px;
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
}

.sg-fixo-port__message[data-estado="erro"] {
  color: #b42318;
}

.sg-fixo-port__message[data-estado="ok"] {
  color: #087443;
}

/* ---------------------------------------------------------------------------
   Tablet
   As tres colunas da portabilidade nao cabem antes de ~1100px, e a linha de
   cartoes com o titulo ao lado aperta antes disso.
   --------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .sg-fixo-plans__grid {
    flex-direction: column;
    align-items: center;
  }

  .sg-fixo-plans h2 {
    text-align: center;
  }

  .sg-fixo-plans__column {
    align-items: center;
  }
}

@media (max-width: 1020px) {
  .sg-fixo-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sg-fixo-hero__photo {
    aspect-ratio: 674 / 402;
  }

  /* A foto sobe para o topo, como no layout de celular. */
  .sg-fixo-port__grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 24px;
  }

  .sg-fixo-port__photo {
    max-width: 406px;
  }

  .sg-fixo-port__form {
    width: 100%;
  }

  .sg-fixo-plans__list {
    flex-wrap: wrap;
    justify-content: center;
  }
}