/* ============================================================================
   A EXPERIÊNCIA DE ROLAGEM.

   POR QUE ESTE ARQUIVO EXISTE.

   Em 07/09/2026 eu entreguei a abertura e ela respondeu: "UÉ? NADA MUDOU. TODOS OS
   FATORES UAU DOS 3 SITES QUE ENVIEI SE TORNARAM NADA?"

   Ela estava certa e eu tinha errado o alvo. O UAU dos três sites que ela mandou não é a
   abertura, é O QUE ACONTECE ENQUANTO A PESSOA ROLA:

     unitedcarriers.com   a seção home-service tem 9.803px de altura e a home-why tem
                          5.442px. Elas grudam na tela e a rolagem roda uma animação em
                          vez de mover a página. A página inteira tem 23.549px e só oito
                          seções. É filme, não documento.

     huyml.co             a página tem 720px de altura e a experiência toda mora dentro de
                          um canvas: uma revista 3D de capas que gira, com som a cada capa
                          que passa pelo centro.

     offforum.com         nenhum 3D. Tipografia enorme, movimento contido, e rolagem com
                          inércia. Prova de que dá pra ter UAU sem WebGL nenhum.

   Os três têm uma coisa em comum que a página dela não tinha: NADA aparece do nada. Tudo
   entra, sobe, revela. E a rolagem desliza em vez de pular.

   O QUE ESTE ARQUIVO FAZ, em ordem do que mais se sente:

     1. rolagem com inércia, escrita à mão, sem biblioteca de fora
     2. tudo entra em cena quando chega a vez, em cascata
     3. os números sobem contando em vez de já estarem lá
     4. os quatro passos viram uma cena que gruda na tela
     5. a biblioteca vira uma parede 3D de cards que gira com a rolagem
     6. o preço acontece no claro, e é o único bloco claro da página inteira

   NADA AQUI PODE SEGURAR UMA VENDA. Todo movimento é enfeite por cima de conteúdo que já
   está no HTML: com JavaScript desligado, sem rede, ou com "reduzir movimento" ligado no
   aparelho, a página continua inteira, legível e comprável.
   ============================================================================ */

/* ---- 1. TUDO ENTRA EM CENA -------------------------------------------------
   Estado de partida escrito só quando o script confirma que vai animar (classe .anima no
   html). Sem isso, um erro de JavaScript deixaria a página inteira invisível, que é a
   forma mais cara de quebrar uma página de vendas. */
html.anima .revela {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .95s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--atraso, 0ms);
}
/* SEM will-change AQUI, de proposito.
   A pagina tem 70 elementos que revelam. Com will-change em todos, o navegador promove os
   70 a camada propria do compositor e nunca solta, porque a propriedade fica no CSS pra
   sempre. Em celular fraco isso e' memoria de video jogada fora, que e' exatamente o
   publico que compra aqui. A animacao e' de opacity e transform, que o compositor ja
   trata bem sem aviso nenhum. */
html.anima .revela.dentro { opacity: 1; transform: none; }

/* a manchete de seção entra de baixo com máscara, que é o gesto do offforum */
html.anima .revela-titulo {
  opacity: 0;
  clip-path: inset(0 0 110% 0);
  transform: translateY(14px);
  transition: opacity .7s ease, clip-path 1.05s cubic-bezier(.16,1,.3,1), transform 1.05s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--atraso, 0ms);
}
html.anima .revela-titulo.dentro { opacity: 1; clip-path: inset(0 0 -20% 0); transform: none; }

/* imagem e vídeo entram com um leve zoom saindo, que dá sensação de câmera */
html.anima .revela-midia { overflow: hidden; }
html.anima .revela-midia > img,
html.anima .revela-midia > video {
  transform: scale(1.12);
  transition: transform 1.4s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--atraso, 0ms);
}
html.anima .revela-midia.dentro > img,
html.anima .revela-midia.dentro > video { transform: none; }

/* ---- 2. O CABEÇALHO DE SEÇÃO NUMERADO -------------------------------------
   Direto da prancha 06 do brandbook: sobrelinha micro, numeral em laranja, título, linha
   de apoio. Existia desenhado desde julho e a página não usava.

   Resolve também a queixa central do diagnóstico: as dez seções abriam todas com a mesma
   fórmula (eyebrow laranja + título em caixa baixa com uma palavra colorida), então nada
   sinalizava que uma seção nova tinha começado. O olho aprendia o ritmo e passava a rolar
   sem ler. O numeral dá lugar na jornada. */
.eyebrow { position: relative; }
.sec-num {
  display: block;
  font-family: var(--fonte-titulo, 'Sora'), sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 5.5vw, 62px);
  line-height: .9;
  letter-spacing: -.04em;
  color: rgba(234,85,42,.26);
  margin: 0 0 -.16em;
  pointer-events: none;
  user-select: none;
}
.sec-num i { font-style: normal; color: rgba(255,106,43,.85); }

/* filete com faísca, que passa a ser o divisor entre seções */
.sec-filete {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 22px; max-width: 340px;
}
.sec-filete::before {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(255,106,43,.55), rgba(255,106,43,0));
}
.sec-filete span { color: rgba(255,106,43,.9); font-size: 11px; line-height: 1; }

/* ---- 3. OS NÚMEROS SOBEM ---------------------------------------------------- */
.conta { font-variant-numeric: tabular-nums; }

/* ---- 4. A CENA QUE GRUDA NA TELA -------------------------------------------
   O movimento do unitedcarriers, feito com position:sticky puro, sem biblioteca.

   A seção fica alta de propósito (o script mede e define a altura). Dentro dela, o palco
   gruda no topo e ocupa a tela inteira. Enquanto a pessoa rola os quatro passos, a página
   parece parada e o conteúdo é que anda. É o gesto que faz a página parecer filme. */
.cena-presa { position: relative; }
.cena-presa .cena-palco {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}
/* ALTURA DE VERDADE, NAO ZERO.
   Todos os passos sao position:absolute, entao esta caixa ficava com altura 0 e o
   "inset: 0" deles colapsava junto: os quatro passos viravam quatro linhas sem caixa,
   posicionadas por acidente. Medido: os quatro davam "1051..1051". */
.cena-presa .cena-dentro { width: 100%; height: 100%; position: relative; }

/* a barra de progresso da cena, que diz quanto falta */
.cena-barra {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(255,106,43,.14);
}
.cena-barra i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #EA552A, #FF6A2B);
  transition: width .12s linear;
}

/* cada passo ocupa a tela toda e só um fica aceso por vez */
.passo-cena {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  opacity: 0; transform: translateY(28px) scale(.985);
  transition: opacity .55s ease, transform .7s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.passo-cena.aceso { opacity: 1; transform: none; pointer-events: auto; }
.passo-cena .passo-num {
  font-family: var(--fonte-titulo, 'Sora'), sans-serif;
  font-weight: 800; font-size: clamp(64px, 13vw, 190px); line-height: .82;
  letter-spacing: -.05em; color: rgba(255,106,43,.16);
  position: absolute; left: 0; top: -.2em; z-index: 0;
}

/* ---- 5. A PAREDE DE CARDS QUE GIRA -----------------------------------------
   O gesto do huyml.co, feito com transform de CSS em vez de WebGL, pela mesma razão de
   sempre: o público dela compra pelo celular. */
.parede { position: relative; padding: clamp(80px,12vh,140px) 0 clamp(50px,7vh,90px); overflow: hidden; }

/* O TEXTO FICA POR CIMA, SEMPRE.
   Ela em 07/09: "achei o leyout lindo pena q ta embolado". O que embolava era geometria:
   num anel 3D, o card que esta na frente projeta MAIOR que o tamanho declarado dele, e
   quanto mais perto da camera, maior. Com perspectiva de 1500px e raio de 720, o card da
   frente saia quase o DOBRO do tamanho e transbordava por cima da linha de apoio.

   Duas correcoes, e as duas atacam a causa em vez de empurrar o texto pra longe:
   perspectiva mais distante (2600px) achata a diferenca entre o card da frente e o de
   tras, e o texto ganha camada propria acima do palco. */
.parede .wrap { position: relative; z-index: 3; }
.parede .section-lead { margin-bottom: 0; }

.parede-palco {
  perspective: 2600px; perspective-origin: 50% 50%;
  margin-top: clamp(44px, 7vh, 96px);
}
/* CARDS MAIORES, ANEL MAIS CHEIO.
   Saiu a legenda "role para girar o acervo", que contava a surpresa, e o espaco dela
   virou vazio. Em vez de encolher a secao, os cards crescem e ocupam: e' a biblioteca
   dela, e quanto maior a foto, melhor o argumento. */
.parede-anel {
  position: relative; height: clamp(380px, 52vh, 560px);
  transform-style: preserve-3d;
  transform: rotateY(var(--giro, 0deg));
}
.parede-anel .pc {
  position: absolute; left: 50%; top: 50%;
  width: clamp(150px,17vw,224px); height: clamp(200px,22.6vw,298px);
  margin: clamp(-149px,-11.3vw,-100px) 0 0 clamp(-112px,-8.5vw,-75px);
  border-radius: 12px; overflow: hidden; background: #131843;
  border: 1px solid rgba(255,106,43,.24);
  box-shadow: 0 22px 56px rgba(0,0,0,.64);
}
.parede-anel .pc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.parede-veu {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--bg,#02031B) 0, transparent 18%, transparent 82%, var(--bg,#02031B) 100%);
}
.parede-dica {
  text-align: center; margin: 26px 0 0;
  font-family: var(--fonte-corpo,'Manrope'), sans-serif; font-size: 12.5px;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(243,236,222,.45);
}

/* ---- 6. A VIRADA PRO CLARO --------------------------------------------------
   O brandbook manda exatamente UM bloco claro chapado na página inteira, reservado para o
   ponto de maior peso. O ponto de maior peso desta página é o preço.

   É também o corte que o unitedcarriers usa e funciona: o escuro impressiona, o claro
   converte. Depois de nove seções no escuro, a tela abrir no creme é um evento. */
#oferta.claro {
  background: #F3ECDE !important;
  color: #14131A;
  position: relative;
}
#oferta.claro::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 90px;
  background: linear-gradient(180deg, var(--bg,#02031B), rgba(243,236,222,0));
  pointer-events: none; opacity: .5;
}
#oferta.claro .section-title,
#oferta.claro h3,
#oferta.claro .preco-num { color: #14131A !important; }
#oferta.claro .section-lead,
#oferta.claro p,
#oferta.claro li { color: #43414F !important; }
#oferta.claro .eyebrow,
#oferta.claro .sec-num i,
#oferta.claro .orange { color: #C62A08 !important; }
#oferta.claro .sec-num { color: rgba(198,42,8,.2) !important; }
#oferta.claro .offer-card,
#oferta.claro .card,
#oferta.claro .oferta-box {
  background: #FFFDF8 !important;
  border-color: rgba(20,19,26,.12) !important;
  box-shadow: 0 18px 48px rgba(20,19,26,.09) !important;
}
#oferta.claro .offer-list li { border-bottom-color: rgba(20,19,26,.09) !important; }
#oferta.claro .offer-list .ic::before { color: #C62A08 !important; }
#oferta.claro .sec-filete::before { background: linear-gradient(90deg, rgba(198,42,8,.5), rgba(198,42,8,0)); }
#oferta.claro .sec-filete span { color: #C62A08; }

/* ---- QUEM PEDIU MENOS MOVIMENTO NÃO LEVA NADA DISSO ------------------------ */
/* QUEM DECIDE E A CLASSE, NAO A CONSULTA DE MIDIA.
   O JavaScript ja perguntou ao aparelho e escreveu a resposta em html.sem-movimento.
   Perguntar de novo aqui criava duas fontes de verdade que discordavam: em 07/09 o CSS
   desligou a cena presa dos quatro passos enquanto o JavaScript continuava esticando o
   trilho para 2.700px, e sobraram 2.100px de vazio no meio da pagina.

   Escrito com o prefixo repetido em cada linha de proposito, e nao aninhado: aninhamento
   em CSS so funciona em navegador recente, e boa parte do publico dela compra de celular
   velho. */
html.sem-movimento .revela,
html.sem-movimento .revela-titulo,
html.sem-movimento .revela-midia > img,
html.sem-movimento .revela-midia > video {
  opacity: 1 !important; transform: none !important; clip-path: none !important;
  transition: none !important;
}
html.sem-movimento .passo-cena {
  position: relative; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 40px;
}
html.sem-movimento .cena-presa .cena-palco { position: static; height: auto; }
/* o trilho tambem perde a altura, senao sobra o vazio que a altura reservava */
html.sem-movimento .cena-trilho { height: auto !important; }
html.sem-movimento .parede-anel { transform: none; }

/* ============================================================================
   A FAÍ GUIA. Ela acompanha a leitura da página inteira.

   Isto responde ao que ela pediu desde o começo e eu tinha entregue como botão de canto:
   "Como uma guia do usuario" e "o surgimento da FAI apresentando".

   Em cada seção a raposa troca de expressão, troca de lado da tela e diz uma frase sobre
   o que está ali. As seis expressões que ela gerou finalmente têm uso.

   Fica FORA do fluxo, presa na tela, e nunca em cima de conteúdo clicável: por isso o
   pointer-events é none no bloco inteiro e ela mora rente à borda de baixo.
   ============================================================================ */
#faiGuia {
  position: fixed; bottom: 0; z-index: 60;
  display: flex; align-items: flex-end; gap: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
#faiGuia.esq { left: 14px; transform: translateY(30px) translateX(-14px); flex-direction: row; }
#faiGuia.dir { right: 14px; transform: translateY(30px) translateX(14px); flex-direction: row-reverse; }
#faiGuia.on  { opacity: 1; transform: translateY(0) translateX(0); }

/* o botao de canto do fai.js some enquanto a guia esta falando: e a mesma personagem, e
   os dois pousam no mesmo canto de baixo */
body.guia-falando #fai-canto { opacity: 0; pointer-events: none; transition: opacity .35s ease; }

#faiGuia .fg-img {
  width: clamp(96px, 11vw, 150px);
  display: block;
  filter: drop-shadow(0 14px 34px rgba(0,0,0,.62)) drop-shadow(0 0 22px rgba(255,106,43,.2));
}

#faiGuia .fg-balao {
  max-width: min(300px, 38vw);
  margin-bottom: clamp(28px, 5vw, 62px);
  background: linear-gradient(158deg, rgba(10,12,45,.97), rgba(2,3,27,.99));
  border: 1px solid rgba(255,106,43,.36);
  border-radius: 16px;
  padding: 13px 16px;
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
  position: relative;
}
#faiGuia .fg-balao p {
  margin: 0;
  font-family: var(--fonte-corpo, 'Manrope'), sans-serif;
  font-size: 13.5px; line-height: 1.5; color: #F3ECDE;
}
/* o rabinho do balão, apontando pra raposa */
#faiGuia .fg-balao::after {
  content: ""; position: absolute; bottom: 16px; width: 10px; height: 10px;
  background: rgba(2,3,27,.99);
  border-right: 1px solid rgba(255,106,43,.36);
  border-bottom: 1px solid rgba(255,106,43,.36);
  transform: rotate(-45deg);
}
#faiGuia.esq .fg-balao::after { right: -6px; }
#faiGuia.dir .fg-balao::after { left: -6px; transform: rotate(135deg); }

/* No celular a raposa inteira mais o balão comeriam metade da tela. Ela encolhe, encosta
   na borda e o balão vira uma faixa fina em cima dela. */
@media (max-width: 760px) {
  #faiGuia .fg-img { width: 84px; }
  #faiGuia .fg-balao { max-width: 54vw; font-size: 12.5px; margin-bottom: 14px; padding: 10px 13px; }
  #faiGuia .fg-balao p { font-size: 12.5px; }
  #faiGuia.esq { left: 6px; } #faiGuia.dir { right: 6px; }
}
/* enquanto a abertura roda, a guia não existe */
body.cena-travada #faiGuia { display: none; }

/* ---- os quatro passos dentro da cena presa -------------------------------- */
.passo-cena .passo-corpo {
  position: relative;
  padding: 0 clamp(20px,6vw,86px);
  max-width: 1240px; margin: 0 auto; width: 100%;
}
.passo-cena .passo-texto { position: relative; z-index: 1; padding-left: clamp(0px,3vw,40px); }
.passo-cena h3 {
  font-family: var(--fonte-titulo,'Sora'), sans-serif;
  font-weight: 700; font-size: clamp(30px,5.6vw,68px); line-height: 1;
  letter-spacing: -.03em; margin: 0 0 16px; color: #F3ECDE;
}
.passo-cena p {
  font-family: var(--fonte-corpo,'Manrope'), sans-serif;
  font-size: clamp(15px,1.7vw,20px); line-height: 1.6;
  color: rgba(243,236,222,.78); max-width: 46ch; margin: 0;
}

/* ============================================================================
   O CHECKOUT NO CLARO.

   Isto conserta um estrago que EU causei ao virar a seção de preço para o creme.

   Todos os campos do checkout têm estilo escrito na própria tag:
   background rgba(255,255,255,.06), color #fff, borda rgba(255,255,255,.15).
   Isso foi desenhado para fundo escuro. Sobre o creme vira campo invisível com
   LETRA BRANCA EM FUNDO CLARO: a pessoa digita e não vê o que digitou.

   Ela em 07/09: "sinto q as caixas a serem preenchidas precisam ter uma cor forte de
   contraste. estao da cor do fundo e isso da a sensação q a pessoa nao tem q preencher
   nada". E sobre os botões: "veja o caso da cor em pix e cartao. eu sei q aceita cartao
   mas e quem n sabe clica a onde?"

   Precisa de !important porque o estilo original está inline na tag, e inline ganha de
   qualquer seletor sem !important. Reescrever as vinte tags à mão seria mais frágil:
   qualquer campo novo nasceria invisível de novo. Aqui a regra vale para todos, inclusive
   os que ainda não existem.
   ============================================================================ */
#oferta.claro input,
#oferta.claro textarea,
#oferta.claro select {
  background: #FFFFFF !important;
  color: #14131A !important;
  border: 1.5px solid rgba(20,19,26,.22) !important;
  box-shadow: inset 0 1px 2px rgba(20,19,26,.06) !important;
}
#oferta.claro input::placeholder,
#oferta.claro textarea::placeholder { color: #6B6875 !important; opacity: 1; }

/* o campo em que a pessoa está agora precisa gritar onde ela está */
#oferta.claro input:focus,
#oferta.claro textarea:focus,
#oferta.claro select:focus {
  outline: none !important;
  border-color: #C62A08 !important;
  box-shadow: 0 0 0 3px rgba(198,42,8,.16) !important;
}

/* ---- PIX OU CARTÃO: as duas precisam parecer clicáveis --------------------
   Antes, a escolhida era laranja sólida e a outra era branco a 6%, que sobre o creme
   simplesmente sumia. Quem não sabia que aceita cartão não tinha onde clicar, porque não
   havia nada visível ali.

   Agora a não escolhida é um botão de contorno de verdade, com texto escuro e borda
   nítida, e a escolhida continua sólida. As duas se leem; só uma está ligada. */
#oferta.claro #btnMetodoCartao,
#oferta.claro #btnMetodoPix {
  background: #FFFFFF !important;
  color: #14131A !important;
  border: 1.5px solid rgba(20,19,26,.24) !important;
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}
#oferta.claro #btnMetodoCartao:hover,
#oferta.claro #btnMetodoPix:hover { border-color: rgba(198,42,8,.55) !important; }

/* a escolhida: o próprio site já pinta de laranja por JavaScript, então o seletor abaixo
   pega pela cor que ele escreve, e devolve o contraste certo por cima */
#oferta.claro #btnMetodoCartao[style*="var(--orange)"],
#oferta.claro #btnMetodoPix[style*="var(--orange)"],
#oferta.claro #btnMetodoCartao.escolhido,
#oferta.claro #btnMetodoPix.escolhido {
  background: linear-gradient(90deg,#FA480D,#C62A08) !important;
  color: #FFFFFF !important;
  border-color: #C62A08 !important;
  box-shadow: 0 6px 18px rgba(198,42,8,.28) !important;
}

/* a caixa de "veio por indicação" e a de teste grátis também eram desenhadas para o
   escuro; no creme elas precisam de borda que se veja */
#oferta.claro #caixaQuemIndicou {
  background: rgba(198,42,8,.05) !important;
  border-color: rgba(198,42,8,.3) !important;
}
#oferta.claro #caixaQuemIndicou p,
#oferta.claro #caixaQuemIndicou div { color: #43414F !important; }
#oferta.claro #caixaQuemIndicou b { color: #14131A !important; }

/* ============================================================================
   O CHECKOUT EM DUAS COLUNAS.

   Esquerda: o que ela leva, curto, mais o preço. Direita: o checkout, só ele.

   Em uma coluna só, o formulário nascia depois de dezessete linhas de lista e o preço
   ficava a meia tela do botão de pagar. Formulário longe do argumento é formulário
   abandonado.

   Empilha no celular, e o resumo vem primeiro: no telefone a ordem de leitura é a ordem
   da decisão, então ela lê o que leva, vê o preço, e só então encontra os campos.
   ============================================================================ */
/* O .offer envolve o cartao e tem max-width: 560px vindo do estilo.css, feito para o
   checkout de UMA coluna. Sem soltar ele, as duas colunas ficavam com 192px cada e o
   formulario virava uma tira. Solto so aqui dentro, e so na largura em que duas colunas
   fazem sentido. */
@media (min-width: 901px) {
  #oferta .offer { max-width: 1120px !important; }
}

#oferta .offer-card {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  max-width: 1120px;
  margin-inline: auto;
  text-align: left;
}
#oferta .oferta-resumo { position: sticky; top: 90px; }
#oferta .oferta-form { min-width: 0; }

/* o título da coluna da direita diz que ali começa o preenchimento. Sem ele, a pessoa
   caía num campo de texto sem saber que tinha entrado no formulário. */
.oferta-form-tit {
  font-family: var(--fonte-titulo, 'Sora'), sans-serif;
  font-weight: 600; font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  margin: 0 0 4px; color: #C62A08;
}

/* a lista encurtou, então cada linha pode respirar */
#oferta .offer-list li { padding: 9px 0; }

/* o preço para de ser mais um parágrafo e vira o bloco que ele é */
/* O PRECO CENTRALIZADO NO RETANGULO DELE.
   Eu tinha posto text-align:left no cartao inteiro pra alinhar a lista, e o preco herdou
   isso: o "R$ 97" ficava encostado na borda esquerda de uma caixa larga.
   Ela em 07/09: "o 97 ta no canto, queria algo mais centralizado correspondente ao tamanho
   do retangulo". O preco e o unico bloco da coluna que pede centro, porque ele nao e
   leitura, e o ponto de parada do olho. */
#oferta .offer-price {
  margin-top: 18px; padding: 22px 20px 20px;
  background: #FFFFFF; border: 1.5px solid rgba(198,42,8,.28); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(20,19,26,.07);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center;
}
#oferta .offer-price .from { font-size: 15px; }
#oferta .offer-price .now  { line-height: 1; }
#oferta .offer-price .offer-save { margin-top: 12px; }

@media (max-width: 900px) {
  #oferta .offer-card { grid-template-columns: 1fr; gap: 26px; }
  #oferta .oferta-resumo { position: static; }
}

/* ============================================================================
   AJUSTES DE TAMANHO NO CHECKOUT E NA GUIA.

   Ela em 07/09, depois de aprovar o resto: "ve que precisa de ajustes de redimensão mas
   tirando isso ta TUDO MUITO MARAVILHOSO".

   Três coisas na imagem dela:
   1. a FAÍ guia cobria o preço. Ela tinha 11vw, e num monitor de 1920 isso vira 211px:
      a raposa crescia com a tela em vez de ficar do tamanho de uma guia.
   2. a lista da esquerda estava com corpo de texto de leitura, não de resumo.
   3. sobraram dois azuis no creme, herdados do tema escuro: a faixa dos agentes e o
      selo "economize 67%". Azul não está na paleta oficial fora de cor de estado.
   ============================================================================ */

/* ---- 1. a guia para de crescer com a tela --------------------------------- */
#faiGuia .fg-img { width: clamp(84px, 7.5vw, 124px); }
#faiGuia .fg-balao { max-width: min(268px, 30vw); }
#faiGuia .fg-balao p { font-size: 13px; }

/* e no bloco do preço ela some de vez: é o momento em que a pessoa está decidindo, e
   nada pode ficar por cima do valor */
body.guia-no-preco #faiGuia { opacity: 0 !important; pointer-events: none; }

/* ---- 2. o resumo tem corpo de resumo -------------------------------------- */
#oferta .offer-list li { font-size: 14.5px; padding: 8px 0; line-height: 1.45; gap: 10px; }
#oferta .offer-incluso { max-width: none; font-size: 11.5px; }
/* O SELO OCUPA A LARGURA DA COLUNA.
   Ela em 07/09: "acho que aqui em acesso completo em laranja poderia ocupar um espaco
   maior, ve quanto espaco vago temos". Era uma pilula pequena num canto de uma coluna
   larga. Vira faixa: passa a ser o cabecalho do bloco, que e o papel que ele ja tinha. */
#oferta .offer-badge {
  display: block; width: 100%; box-sizing: border-box;
  text-align: center; font-size: 13px; letter-spacing: .22em;
  padding: 14px 18px; border-radius: 14px; margin-bottom: 20px;
}
#oferta .offer-perdiem { font-size: 13px; line-height: 1.55; }

/* ---- 3. os dois azuis que sobraram --------------------------------------- */
#oferta.claro .offer-list li:has(.ic.bonus) {
  background: rgba(198,42,8,.07) !important;
  border: 1px solid rgba(198,42,8,.18) !important;
}
#oferta.claro .offer-save {
  background: rgba(198,42,8,.1) !important;
  border-color: rgba(198,42,8,.35) !important;
  color: #C62A08 !important;
}
#oferta.claro .offer-incluso { color: #C62A08 !important; }
#oferta.claro .offer-badge  { background: linear-gradient(90deg,#FA480D,#C62A08) !important; color: #fff !important; }
#oferta.claro .offer-price .from { color: #7A7684 !important; }
#oferta.claro .offer-price .now  { color: #C62A08 !important; }