/* O laranja e o mesmo `#f60` do rodape, e nao um parecido: com dois laranjas
   diferentes encostados aparece uma emenda na altura do rodape. */
/* Um tamanho so para o corpo do bloco central. Existe como variavel porque a
   igualdade e intencional: sem ela, tres numeros iguais em regras diferentes
   se desencontram no primeiro ajuste. */
.sg-promo-pais { background: #f60; color: #1c1c28; --sg-promo-texto: clamp(.92rem, 1.35vw, 1.02rem); }
/* O hero ocupa a dobra inteira para o rodape nao aparecer de entrada — antes
   sobravam 176px dele visiveis. Os 101px descontados sao a altura do cabecalho
   do site; sem esse desconto o hero passa da dobra e empurra o problema para o
   outro lado. `svh` e nao `vh` porque no celular a barra de endereco entra na
   conta do `vh` e deixaria uma faixa vazia ao rolar.

   O `align-content: center` e o que atende ao pedido de centralizar: com a
   altura minima maior que o conteudo, o bloco fica no meio em vez de grudado
   no topo. O padding continua sendo o piso em janela baixa. */
.sg-promo-pais__hero { display: grid; align-content: center; min-height: calc(100svh - 101px); padding: 96px 0 88px; background: radial-gradient(circle at 78% 12%, rgba(255, 190, 120, .38), transparent 42%), #f60; color: #1c1c28; }

/* Figura, texto e cartao. A imagem encosta na base porque a pessoa esta de pe:
   centraliza-la deixaria o recorte flutuando acima da dobra. */
.sg-promo-pais__grid { display: grid; grid-template-columns: minmax(220px, .88fr) minmax(0, 1.02fr) minmax(320px, .92fr); grid-template-areas: "figura copy cartao"; align-items: center; gap: 44px; }
.sg-promo-pais__figura { grid-area: figura; align-self: end; width: 100%; max-width: 420px; height: auto; }

/* Entrada da figura: sobe e aparece, uma vez, no carregamento. Sobe de baixo
   porque a pessoa esta de pe — descer contrariaria o proprio recorte.
   `both` segura o estado inicial antes do primeiro quadro, senao a imagem
   pisca inteira antes de comecar.

   1,4s com um percurso maior que o inicial: em animacao lenta um deslocamento
   curto parece travamento, e nao suavidade. */
@keyframes sg-promo-pais-entrada {
  from { opacity: 0; transform: translateY(44px) scale(.96); }
  to { opacity: 1; transform: none; }
}
.sg-promo-pais__figura { animation: sg-promo-pais-entrada 1.4s cubic-bezier(.16, .68, .32, 1) both; }

/* Quem pediu menos movimento no sistema recebe tudo parado, e nao uma versao
   mais lenta. */
@media (prefers-reduced-motion: reduce) {
  .sg-promo-pais__figura,
  .sg-promo-pais__kits li { animation: none; }
  /* O brilho para de correr, mas continua aceso: e decoracao permanente, e nao
     uma entrada. Apaga-lo seria tirar um elemento da tela, nao so o movimento. */
  .sg-promo-pais__cartao-area::before { animation: none; }
}
.sg-promo-pais__copy { grid-area: copy; }
.sg-promo-pais__cartao-area { grid-area: cartao; position: relative; }

/* Texto escuro, e nao branco: branco sobre #f60 da 2,95 de contraste e reprova
   no AA. O tom abaixo da 5,7 e ainda e o mesmo do selo dentro da imagem. */
.sg-promo-pais__eyebrow, .sg-promo-pais__step { margin: 0 0 14px; color: #7a2e00; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; }
/* O CSS base do site aperta titulo em -.055em; aqui vai `normal`. Sem o aperto
   e com o peso 700 a mesma frase ocupa mais linha, entao o tamanho maximo cai
   junto — e o que mantem "Conexão de Pai" numa linha so na coluna do meio. */
/* `font-variation-settings` e obrigatorio aqui, e nao redundancia do
   `font-weight`: a Google Sans Flex e variavel e o CSS base do site trava o
   eixo em "wght" 440. Enquanto esse valor estiver la, `font-weight: 700` nao
   muda um pixel — foi por isso que o titulo continuava leve. A largura ("wdth"
   100) e repetida porque a propriedade substitui a declaracao inteira. */
.sg-promo-pais h1 { margin: 0; font-size: clamp(1.9rem, 3.6vw, 3.4rem); line-height: 1.04; letter-spacing: normal; text-transform: uppercase; font-weight: 700; font-variation-settings: "wght" 700, "wdth" 100; color: #1c1c28; }
.sg-promo-pais h1 span { color: #fff; }
/* Tres degraus abaixo do que era (1,28rem -> 1,18 -> 1,10 -> 1,02). */
.sg-promo-pais__lead { max-width: 560px; margin: 20px 0 14px; font-size: var(--sg-promo-texto); line-height: 1.5; color: #24242f; }

/* Os dois premios sao a informacao que a pessoa precisa levar embora, entao
   saem do texto corrido e viram bloco branco — o mesmo branco do cartao, para
   o olho ligar um ao outro. */
.sg-promo-pais__kits { display: grid; gap: 8px; max-width: 480px; margin: 0 0 16px; padding: 0; list-style: none; }
.sg-promo-pais__kits li { display: flex; align-items: center; gap: 11px; padding: 11px 16px; background: rgba(255,255,255,.94); border-radius: 11px; font-size: var(--sg-promo-texto); color: #1c1c28; }
.sg-promo-pais__kits li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 3px; background: #f60; }
.sg-promo-pais__kits strong { font-weight: 800; font-variation-settings: "wght" 800, "wdth" 100; }

/* Os dois premios entram deslizando da esquerda, um depois do outro, logo
   apos a figura — a leitura vai do titulo para eles, e o atraso reproduz essa
   ordem em vez de acender tudo junto. */
@keyframes sg-promo-pais-bloco {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: none; }
}
.sg-promo-pais__kits li { animation: sg-promo-pais-bloco .5s cubic-bezier(.22, .61, .36, 1) both; }
.sg-promo-pais__kits li:nth-child(1) { animation-delay: .7s; }
.sg-promo-pais__kits li:nth-child(2) { animation-delay: .88s; }

.sg-promo-pais__itens { max-width: 540px; margin: 0; font-size: var(--sg-promo-texto); line-height: 1.55; color: #2b2b38; }
.sg-promo-pais__card { position: relative; padding: 38px; background: #fff; border-radius: 24px; box-shadow: 0 24px 60px rgba(3, 38, 31, .28); color: #173c35; }

/* Halo do cartao, no mesmo sistema do carrossel da /camera/: degrade borrado
   numa camada atras da caixa, e nao um box-shadow colorido.

   O par padrao e laranja e verde, mas aqui o fundo ja e laranja e a metade
   quente sumiria — o proprio site tem esse caso resolvido no rodape, que sobre
   laranja troca o laranja por branco. Mesma troca aqui.

   Fica no invólucro, e nao no cartao: o CSS base do site da `z-index: 1` ao
   cartao, e com `position: relative` isso abre contexto de empilhamento, onde
   o `z-index: -1` deixa de significar "atras do fundo" e passa a significar
   "no fundo desta caixa" — o verde vazava para dentro. */
/* Fita de LED em volta do cartao: a luz corre pelo contorno, metade verde e
   metade branca.
 *
 * Aqui quem gira e o angulo do degrade, e nao o elemento. Rotacionar o elemento
 * — que e o jeito barato — giraria junto o proprio retangulo arredondado, e a
 * luz deixaria de acompanhar a borda: viraria uma mancha rodando atras, que foi
 * a primeira tentativa. Para a luz seguir o contorno, a forma precisa ficar
 * parada enquanto so as cores andam.
 *
 * Animar `--sg-halo-angulo` exige registrar a propriedade: sem o `@property`,
 * o navegador trata o valor como texto e a animacao pula de 0 a 360 sem passar
 * pelo meio. Onde `@property` nao existir, o angulo fica no valor inicial e a
 * fita aparece acesa e parada — que e uma degradacao aceitavel.
 *
 * Aqui ficou so o brilho que a fita joga na superficie — largo e suave. O tubo
 * aceso, estreito e nitido encostado na borda, saiu. */
@property --sg-halo-angulo {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes sg-promo-pais-halo-gira {
  to { --sg-halo-angulo: 360deg; }
}

/* Metade verde, metade branca, com 30deg de transicao em cada emenda para a
   troca nao aparecer como um corte seco girando.

   O raio acompanha o do cartao mais a sobra (24 + 14), senao o brilho corta os
   cantos arredondados em vez de contorna-los. */
.sg-promo-pais__cartao-area::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10px;
  border-radius: 34px;
  /* A transparencia vive em cada cor, e nao no `opacity` da camada. Com um
     `opacity` unico as duas metades andam juntas, e o verde ja esta no ponto:
     separado, cada metade tem a sua forca.

     Branco sobre laranja e o problema — a .55 dava #ffba8c, um salmao que lia
     como laranja mais claro, e nao como luz. Subir so o alfa resolve pouco,
     porque o desfoque dilui a camada mais do que o alfa recupera. Quem manda e
     a relacao entre a faixa de origem e o desfoque: faixa estreita com borrao
     largo joga a intensidade fora.

     Daqui saiu o ajuste: faixa de 10px com desfoque de 12px. O alcance da luz
     fica em 25px alem do cartao — antes, com 22px de faixa, ia a 41px e virava
     mancha em vez de brilho. A forca na borda quase nao muda (97 contra 118). */
  background: conic-gradient(
    from var(--sg-halo-angulo),
    rgb(176 255 58 / .55) 0deg 165deg,
    rgb(255 255 255 / 1) 195deg 345deg,
    rgb(176 255 58 / .55) 360deg
  );
  filter: blur(12px);
  animation: sg-promo-pais-halo-gira 12s linear infinite;
  pointer-events: none;
}
/* O `letter-spacing: normal` e explicito porque o CSS base do site aperta os
   titulos em -.045em, que nesta caixa colava as letras de "Digite seu CPF". */
.sg-promo-pais__card h2 { margin: 0 0 25px; font-size: 2rem; color: #155d50; font-weight: 700; font-variation-settings: "wght" 700, "wdth" 100; letter-spacing: normal; }
.sg-promo-pais__card form { display: grid; gap: 10px; }
.sg-promo-pais__card label { font-weight: 800; font-size: .92rem; }
.sg-promo-pais__card input { width: 100%; box-sizing: border-box; border: 1px solid #b7c9c3; border-radius: 10px; padding: 15px 16px; font: inherit; font-size: 1.15rem; letter-spacing: .06em; color: #173c35; background: #fff; }
.sg-promo-pais__card input:focus { outline: 3px solid rgba(246, 122, 39, .28); border-color: #f47b31; }
.sg-promo-pais__help { margin: 0 0 13px; color: #55716a; font-size: .84rem; line-height: 1.4; }
.sg-promo-pais__card button { width: 100%; justify-content: center; min-height: 52px; border: 0; cursor: pointer; }
.sg-promo-pais__card button[disabled] { cursor: wait; opacity: .68; }
.sg-promo-pais__result { margin-top: 22px; padding: 16px; border-radius: 10px; font-weight: 700; line-height: 1.45; }
.sg-promo-pais__result--active { background: #e6f4e9; color: #176135; }
.sg-promo-pais__result--inactive { background: #fff1e8; color: #9d431c; }
.sg-promo-pais__result--error { background: #f0f2f1; color: #35524b; }
/* Tres colunas so cabem em tela larga. Antes disso a figura e o texto dividem a
   linha de cima e o cartao ocupa a de baixo inteira. */
@media (max-width: 1180px) {
  .sg-promo-pais__grid { grid-template-columns: minmax(190px, .78fr) minmax(0, 1fr); grid-template-areas: "figura copy" "cartao cartao"; align-items: end; gap: 36px 40px; }
  .sg-promo-pais__figura { max-width: 340px; }
}
@media (max-width: 760px) {
  /* No celular o conteudo empilhado ja passa da dobra sozinho: prender o hero
     na altura da janela so criaria vao vazio entre o cartao e o rodape. */
  .sg-promo-pais__hero { min-height: 0; padding: 52px 0 96px; }
  /* No celular a figura abre: ela e o gancho da campanha e o selo ja diz do que
     se trata. No desktop ela fica na coluna da esquerda, ao lado do texto. */
  .sg-promo-pais__grid { grid-template-columns: 1fr; grid-template-areas: "figura" "copy" "cartao"; align-items: stretch; gap: 26px; }
  /* O titulo cresce ate quase encostar nas laterais. O 9.4vw nao e chute:
     "TEM CHURRASCO", a linha mais larga, mede 8.562 vezes o tamanho da fonte
     nesta familia e neste peso — dividindo a largura util por essa razao sai o
     tamanho que enche a linha. Se o texto do titulo mudar, o numero precisa ser
     recalculado.

     Calibrado em 360px, e nao numa largura confortavel: o container nao ocupa a
     mesma fracao da janela em toda faixa (82% em 360px contra 87% em 500px), e
     calibrar no meio faz o texto vazar na ponta estreita.

     O teto de 3.6rem segura o crescimento perto de 760px, onde a coluna unica
     ainda vale mas a janela ja e larga demais para 9.4vw. */
  .sg-promo-pais h1 { font-size: clamp(1.9rem, 9.4vw, 3.6rem); }
  .sg-promo-pais__figura { justify-self: center; max-width: 300px; }
  /* Empilhado, o cartao vem logo depois do texto. O `gap` da grade sozinho
     encosta um no outro; este respiro extra separa a leitura da acao. */
  .sg-promo-pais__copy { margin-bottom: 16px; }
  .sg-promo-pais__card { padding: 27px 22px; }
}

/* Abaixo de 340px o piso do clamp (1.9rem) passa a ser maior que o 9.4vw, e o
   titulo escapa do container — o `<br>` fixo impede que ele quebre sozinho para
   caber. Aqui o piso sai da frente. Faixa rara (iPhone SE de 2016), mas o custo
   de cobrir e uma linha. */
@media (max-width: 340px) {
  .sg-promo-pais h1 { font-size: 8.9vw; }
}