/* ------------------------------------------------------------------
   NEUTRALIZACAO DO PAINEL DO AVADA
   O tema envolve o conteudo em #main > .fusion-row, que no legado tem
   background #f9f9f9, border-radius 30px, padding 80px 79px e margin-top -75px
   (o gesto da marca, secao 3 do DESIGN-SYSTEM). Ele existe para conteudo de
   coluna; esta pagina tem faixas de ponta a ponta, entao o painel e desfeito SO
   aqui, ancorado na classe .upl-page que o template poe no body. Mesmo caminho
   do template-uau-docs-avada.php, que e o precedente da casa.
   O !important e necessario: as regras do Avada e do site-custom.css tambem sao.
   ------------------------------------------------------------------ */
.upl-page #main{background:none!important;padding:0!important;border-top:0!important}
.upl-page #main .fusion-row{max-width:100%!important;width:100%!important;margin:0!important;padding:0!important;background:none!important;border-radius:0!important;box-shadow:none!important}
.upl-page #wrapper{background:none!important}
/* O body do site carrega #f9f9f9 + bgtop16b.jpg; a pagina tem fundo proprio. */
body.upl-page{background:var(--bg)!important}
/* Rede de seguranca: se o meta pyre_page_title nao pegar, a barra some. O
   template desliga pelo meta JUSTAMENTE para o H1 nao existir no HTML, entao
   isto e o segundo cinto, nao o primeiro. */
.upl-page .fusion-page-title-bar{display:none!important}

/* O HEADER DO SITE E TRANSPARENTE COM TEXTO BRANCO.
   Medido no browser, e vale para o site inteiro: `.fusion-header` tem
   `background-color: rgba(0,0,0,0)` e os links do menu sao `rgb(255,255,255)`.
   Ele so fica legivel porque o site-custom.css pinta um gradiente atras dele nas
   paginas que casam com `.home .fusion-header` e `.parent-homenova .fusion-header`.
   Esta pagina nao casa com nenhuma das duas e tem fundo claro, entao o menu saia
   BRANCO SOBRE BRANCO: logo e navegacao invisiveis. Achado no primeiro print.

   O gradiente e o `to right, #91556a, #525f72` LEGADO, e nao o `--grad-brand`
   canonico (`100deg, #8a4f66, #4f5a75`), de proposito: e o mesmo header que a
   pessoa acabou de ver na home e vai ver na proxima pagina, e trocar o tom so
   aqui criaria mais uma variacao de vinho justamente na faixa que atravessa o
   site inteiro. O DESIGN-SYSTEM ja conta 6 vinhos; este nao vira o setimo. */
.upl-page .fusion-header{background:linear-gradient(to right,#91556a,#525f72)!important}

/* Os dois marcadores da lista de features, como MASCARA e nao como imagem: o
   desenho vem do data-uri e a COR vem do token (--ok / --gold), entao trocar
   o token troca o icone junto. */
.upl{--upl-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.6 14.3 3.3 10l1.4-1.4 2.9 2.9 7.7-7.7L16.7 5z'/%3E%3C/svg%3E");--upl-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5l2.6 5.3 5.9.9-4.3 4.2 1 5.8-5.2-2.7-5.2 2.7 1-5.8L1.5 7.7l5.9-.9z'/%3E%3C/svg%3E")}
.upl *,.upl *::before,.upl *::after{box-sizing:border-box}
.upl{background:var(--bg);color:var(--body);font-family:var(--font-body);font-size:var(--fs-body);line-height:1.65;margin:0}
/* O !important aqui NAO e preguica. O site-custom.css declara
   `body, h1, h2, h3, h4, h5, h6 { font-family:'Poppins'!important }`, uma regra
   de ELEMENTO PURO que vale no site inteiro. Enquanto a pagina montava o proprio
   <head> ela nao carregava aquela folha e a heranca bastava; com get_header() a
   folha entra, e `!important` bate especificidade: sem isto os titulos sairiam em
   Poppins, contra a Montserrat que o DESIGN-SYSTEM define para display. Como a
   nossa tem especificidade maior (classe + elemento contra elemento), o
   !important dos dois lados resolve a favor desta.
   O CORPO nao precisa do mesmo: a fonte de corpo do sistema JA e a Poppins. */
.upl h1,.upl h2,.upl h3{font-family:var(--font-display)!important;color:var(--ink);line-height:1.12;letter-spacing:-.02em;margin:0 0 var(--sp-4)}
/* Mesma razao, nos pontos em que a Montserrat e a identidade do componente. */
.upl .upl-plan__preco,.upl .upl-btn,.upl .upl-tab,.upl .upl-eyebrow,
.upl .upl-compare thead th,.upl .upl-compare strong,.upl .upl-plan__off,
.upl .upl-item__nome,.upl .upl-item__tag,
.upl .upl-item__feats strong{font-family:var(--font-display)!important}
.upl .serif,.upl h1 .serif,.upl h2 .serif{font-family:var(--font-serif)!important}
.upl h1{font-size:var(--fs-h1)}
.upl h2{font-size:var(--fs-h2)}
.upl h3{font-size:var(--fs-h3)}
.upl .serif{font-family:var(--font-serif);font-style:italic;font-weight:500}
.upl a{color:var(--brand-slate);text-decoration:none}
.upl a:hover{color:var(--brand-wine)}
.upl-wrap{max-width:var(--container,1180px);margin-inline:auto;padding-inline:var(--gutter,24px)}
.upl-sec{padding:var(--sp-8) 0}
/* A primeira secao encosta no hero: o padding cheio ali so servia para
   empurrar o primeiro cartao para fora da primeira tela. */
#planos.upl-sec{padding-top:var(--sp-6)}
.upl-sec--curta{padding:var(--sp-7) 0}
.upl-centro{text-align:center}
.upl-lead{font-size:var(--fs-lead);max-width:62ch}
/* `.upl-centro .upl-lead` sozinho e um seletor de DESCENDENTE, e todo lead
   centrado desta pagina escreve as duas classes no MESMO elemento
   (`class="upl-lead upl-centro"`). O resultado media no browser era o texto
   alinhado ao centro DENTRO de uma caixa de 62ch encostada a esquerda, ou seja
   um paragrafo visivelmente fora do eixo do H2 logo acima. A segunda metade do
   seletor e o que faltava. */
.upl-centro .upl-lead,.upl-lead.upl-centro{margin-inline:auto}
.upl-eyebrow{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-wine);margin:0 0 var(--sp-3)}

/* Botoes */
/* TODA REGRA DE BOTAO E PREFIXADA POR `.upl`, e isso nao e enfeite: os botoes
   sao <a>, e a regra de link desta mesma folha (`.upl a`, especificidade 0,1,1)
   vencia `.upl-btn--primario` (0,1,0). O efeito media no browser era o texto do
   botao primario saindo em `rgb(79,90,117)` (--brand-slate) sobre o gradiente
   vinho, ou seja praticamente ilegivel. Com o prefixo, `.upl .upl-btn--primario`
   (0,2,0) passa na frente. */
.upl .upl-btn{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:var(--fs-sm);border-radius:var(--r-pill);padding:13px 28px;border:1px solid transparent;cursor:pointer;text-align:center;transition:.2s ease}
.upl .upl-btn--primario{background:var(--grad-brand);color:var(--ink-invert);box-shadow:var(--sh-brand)}
.upl .upl-btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.upl .upl-btn--bloco{display:block;width:100%}
.upl .upl-btn:hover{transform:translateY(-2px)}
.upl .upl-btn--primario:hover{color:var(--ink-invert)}
.upl .upl-btn--ghost:hover{color:var(--ink);border-color:var(--brand-wine)}

/* ------------------------------------------------------------------
   HERO. TRES DESENHOS, UM POR VERSAO.
   O pedido do Marcus em 17/09 foi literal: "faca 3 versoes totalmente
   diferentes entre si, inclusive o hero". Antes as tres dividiam este bloco e
   so trocavam a ordem das secoes abaixo dele.

   O QUE OS TRES HERANCAM DA HOME E DA /sobre-nos/, e por que: os valores foram
   LIDOS com getComputedStyle naquelas duas paginas, nao estimados de print.

     fundo     linear-gradient(to right, #91556a, #525f72)  (o MESMO do
               header, entao a faixa desce sem emenda)
     titulo    Poppins / peso 700 / letter-spacing -3px / branco
     destaque  #ffa19a, peso 900
     apoio     Poppins 25px / peso 300 / line-height 35,25px
     btn 1     linear-gradient(to right,#ffada8,#ca635c), raio 56px,
               altura 56, padding 0 42px, 17px/600,
               sombra rgba(240,114,106,.75) 0 13px 20px -10px
     btn 2     fundo rgba(255,255,255,.1), borda 2px rgba(255,255,255,.7)
     mobile    botao cai para 15px / padding 0 30px / altura 50

   POR QUE POPPINS E NAO MONTSERRAT NO TITULO DO HERO. O DESIGN-SYSTEM define
   Montserrat para display, e o resto desta pagina (cartoes, tabela) segue isso.
   O hero nao: ele e a emenda com a home, e a home inteira e Poppins por causa do
   `body, h1..h6 { font-family:Poppins!important }` do site-custom.css. Copiar o
   gesto da home com outra fonte deixaria a costura visivel em quem navega
   home -> planos. Decisao registrada, nao descuido.
   ------------------------------------------------------------------ */
.upl-hero{padding:clamp(var(--sp-5),3vw,var(--sp-7)) 0 clamp(var(--sp-6),3.4vw,var(--sp-7))}
.upl-hero--grad{background:linear-gradient(to right,#91556a,#525f72)}
/* Selo "ate X% OFF": e o "hasta 73% OFF" da /oferta/, invertido para o fundo
   escuro do hero. Enche o espaco que sobrava acima do titulo com algo que
   VENDE, em vez de com ar. */
.upl .upl-hero__selo{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;font-family:var(--font-display);font-weight:800;font-size:var(--fs-xs);letter-spacing:.075em;text-transform:uppercase;padding:6px 16px;border-radius:var(--r-pill);margin-bottom:var(--sp-4)}
/* `.upl .upl-hero__titulo` E NAO `.upl-hero__titulo`. A regra generica de titulo
   desta mesma folha (`.upl h1, .upl h2, .upl h3`, especificidade 0,1,1) vence
   `.upl-hero__titulo` (0,1,0) e chumba 48px, Montserrat e cor escura. MEDIDO na
   primeira tentativa: `fs=48px ff=Montserrat cor=rgb(28,32,48)`, ou seja titulo
   pequeno e ESCURO sobre o gradiente. E a mesma armadilha do botao primario, na
   mesma folha, pela mesma razao. O `!important` na fonte e para bater o
   `!important` que aquela regra ja carrega. */
.upl .upl-hero__titulo{font-family:var(--font-body)!important;font-size:clamp(2rem,1rem + 4.6vw,5.5rem)!important;font-weight:700;line-height:1.06!important;letter-spacing:-3px;color:#fff;margin:0 0 var(--sp-5);text-transform:none}
.upl .upl-hero__destaque{color:#ffa19a;font-weight:900}
.upl .upl-hero__lead{font-family:var(--font-body)!important;font-size:clamp(1.05rem,.9rem + .7vw,1.5625rem);font-weight:300;line-height:1.41;color:#fff;max-width:52ch;margin:0 auto}
.upl-hero .upl-ctas{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-6)}
/* Os dois botoes do hero sao os da home, medidos la. Prefixo `.upl` pela
   mesma razao das outras regras de botao: `.upl a` venceria sem ele. */
.upl .upl-btn--coral{background:linear-gradient(to right,#ffada8,#ca635c);color:#fff;border:0;border-radius:56px;padding:0 42px;line-height:56px;font-size:17px;font-weight:600;font-family:var(--font-body);box-shadow:rgba(240,114,106,.75) 0 13px 20px -10px}
.upl .upl-btn--vidro{background:rgba(255,255,255,.1);color:#fff;border:2px solid rgba(255,255,255,.7);border-radius:56px;padding:0 42px;line-height:52px;font-size:17px;font-weight:600;font-family:var(--font-body)}
.upl .upl-btn--coral:hover,.upl .upl-btn--vidro:hover{color:#fff;transform:translateY(-2px)}
.upl .upl-btn--vidro:hover{background:rgba(255,255,255,.18);border-color:#fff}

/* ---- HERO A: duas colunas, com o plano ancora JA PRECIFICADO ao lado ----
   O titulo sai do centro e vai para a esquerda, e a direita entra o cartao do
   plano de 1 ano. A primeira tela deixa de ser so promessa: ela ja tem nome,
   preco, o que entrega e o botao. O cartao e o MESMO up_pl_cartao() do corpo,
   nao uma copia: ele so perde a borda de destaque, que sobre o gradiente vinho
   nao se distinguiria do fundo. */
/* AS PROVAS EM LINHA, e nao em coluna: com o cartao fora do hero (20/09) ele
   voltou a ter uma coluna so, e uma lista empilhada e centralizada deixaria os
   marcadores em posicoes diferentes um do outro. Lado a lado, cada item carrega
   o proprio marcador e a linha fica simetrica. No telefone elas empilham, e ai
   o bloco inteiro ganha largura maxima e volta a alinhar a esquerda. */
.upl-hero__provas{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px var(--sp-5);justify-content:center}
.upl-hero__provas li{position:relative;padding-left:26px;color:#fff;font-size:var(--fs-sm);opacity:.93;text-align:left}
.upl-hero__provas li::before{content:"";position:absolute;left:0;top:.3em;width:16px;height:16px;background:#ffa19a;-webkit-mask:var(--upl-check) center/contain no-repeat;mask:var(--upl-check) center/contain no-repeat}

/* ---- HERO B: claro, com o preco de ENTRADA das tres linhas ----
   Nada de gradiente: fundo --surface-2 e titulo escuro. A faixa vinho do header
   fica por cima, e a emenda entre as duas e reta de proposito, porque aqui ela
   separa o cromo do site do conteudo da pagina em vez de continuar o cromo.
   A direita respondem os tres precos de entrada, lidos da faixa de 1 mes de
   cada linha. Nenhum deles e escrito: se a tabela mudar, o hero muda. */

/* ---- HERO C: escuro, e a matriz sobe por cima dele ----
   O bloco escuro que existia no FIM da pagina saiu (o Marcus: "ficou sem
   sentido e sem combinar com o footer"). Onde escuro funciona e no ALTO, com
   conteudo claro subindo por cima: e o gesto de painel, e faz a matriz comecar
   acima da dobra em vez de depois de um hero inteiro. */

/* ------------------------------------------------------------------
   ALTERNADOR NO GESTO DA /oferta/ (pedido do Marcus, 17/09)
   Valores lidos de `.plans__switch` / `.plans__tab` em
   plugins/ultrapack-promocoes/templates/landing-es.php: trilho --surface-3,
   pilula unica, botao sem borda, e o ativo virando chip branco com --sh-sm.
   `width:max-content` + `margin-inline:auto` centra a pilula sem esticar o
   trilho pela largura toda, que e o que um flex normal faria; o `max-width`
   e o `flex-wrap` sao o acrescimo desta pagina, porque aqui o alternador chega
   a ter quatro abas (os quatro prazos) e a 320px elas nao cabem em uma linha.
   ------------------------------------------------------------------ */
.upl-switch{display:flex;width:max-content;max-width:100%;gap:4px;margin:var(--sp-5) auto var(--sp-4);padding:4px;background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-pill);flex-wrap:wrap;justify-content:center}
.upl .upl-tab{font-family:var(--font-display);font-weight:700;font-size:var(--fs-sm);color:var(--body);background:transparent;border:0;padding:9px 26px;border-radius:var(--r-pill);cursor:pointer;transition:.2s ease}
.upl .upl-tab[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm)}
.upl .upl-tab:hover{color:var(--ink)}
.upl .upl-tab:focus-visible{outline:2px solid var(--brand-wine);outline-offset:2px}
/* Nota dentro da aba ativa: e o argumento que faz a pessoa escolher o plano
   ancora, e dito no ponto da escolha. */
.upl .upl-tab__nota{font-weight:600;opacity:.7;font-size:.9em}
.upl .upl-tab[aria-selected="false"] .upl-tab__nota{display:none}
.upl-linha-desc{text-align:center;color:var(--muted);font-size:var(--fs-sm);max-width:62ch;margin:0 auto var(--sp-5);line-height:1.5}

/* ------------------------------------------------------------------
   CARTOES NO GESTO DA /oferta/es (medido la com getComputedStyle)
     .plan            raio 28px, padding 48px 32px, borda 1px #e7e9f1
     .plan--featured  borda 2px #8a4f66, sombra 0 24px 60px -20px
     .plan__name      19,2px / 800
     .plan__who       pilula 12,48px/700, #4f5a75 sobre #eef1f7, pad 3px 9px
     .plan__price     40px / 800, margem 16px 0 2px
     .plan__off       pilula 12,48px/800, #8a4f66 sobre #f7eff3, pad 4px 10px
     .plan__feats     grid, gap 11px, 14,4px

   O QUE ENCOLHEU O CARTAO, e era o pedido: o periodo virou pilula na linha do
   nome, e o desconto e o equivalente mensal passaram a dividir UMA linha. Eram
   seis linhas antes do botao; agora sao tres. A nota "comparado a assinar mes a
   mes" subiu para a introducao da secao, onde vale para os doze de uma vez.
   ------------------------------------------------------------------ */
/* O atributo `hidden` vale como `display:none` na folha do NAVEGADOR, e
   qualquer `display` do autor passa por cima. Sem esta linha os grupos sairiam
   EMPILHADOS e o alternador pareceria nao funcionar. MEDIDO na v1.86.0:
   `dev: hidden=true display=grid altura=512`. */
/* CARTAO CENTRALIZADO (pedido do Marcus, 20/09): nome, periodo, preco e a
   linha do desconto no eixo. A LISTA DE FEATURES CONTINUA A ESQUERDA, e isso
   nao e meio-termo: cada item tem um marcador a esquerda do texto, e centrar a
   lista deixaria os marcadores em colunas diferentes e o olho sem margem por
   onde descer. E a mesma divisao que a /oferta/ faz. */

.upl-plan__per{justify-content:center}
/* A pilula do periodo, na MESMA linha do nome. */
.upl .upl-plan__periodo{display:inline-block;background:var(--surface-3);color:var(--brand-slate);font-family:var(--font-display);font-weight:700;font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:var(--r-pill);margin-left:6px;vertical-align:middle;white-space:nowrap}
.upl-plan__preco{font-family:var(--font-display);font-size:2.5rem;font-weight:800;color:var(--ink);line-height:1.1;margin:var(--sp-4) 0 2px}
.upl-plan__preco s{font-size:.95rem;font-weight:500;color:var(--muted);margin-right:7px}
/* CENTAVOS MENORES E SUSPENSOS (pedido do Marcus, 20/09). Em `em`, entao eles
   acompanham o corpo do preco em cada lugar onde ele aparece: cartao (2.5rem),
   linha larga (2.1rem), celula da matriz (1.15rem) e tabela. O `vertical-align`
   em `em` sobe junto pela mesma razao. */
.upl .upl-cent{font-size:.5em;font-weight:700;letter-spacing:0;vertical-align:.62em;margin-left:1px}
/* min-height: a faixa de 1 mes nao tem desconto, entao esta linha fica so com
   "por mes" enquanto as outras tres levam o badge. Sem uma altura comum, o
   divisor e a lista de features saiam em alturas diferentes na mesma grade. */
.upl-plan__per{font-size:var(--fs-sm);color:var(--body);margin-bottom:var(--sp-5);line-height:1.6;min-height:1.6em;display:flex;align-items:center;flex-wrap:wrap;gap:0}
.upl .upl-plan__off{display:inline-block;background:#f7eff3;color:var(--brand-wine);font-family:var(--font-display);font-weight:800;font-size:var(--fs-xs);padding:4px 10px;border-radius:var(--r-pill);margin-right:8px;flex:0 0 auto}
/* FEATURES COM MARCADOR, como na /oferta/: certo verde no que e padrao, estrela
   dourada no que e DIFERENCIAL daquele plano (Envato, ativacoes). Os dois saem
   de token (--ok e --gold); nenhum hex novo. */
/* O botao encosta no fim do cartao: as colunas tem alturas diferentes (a Revenda
   tem duas features a mais que o VIP) e sem isto os botoes ficavam em alturas
   diferentes na mesma grade. */
.upl-nota-base{opacity:.8}

/* FEATURES: marcador proprio, certo verde no que e padrao e estrela dourada no
   que e DIFERENCIAL daquele plano (Envato, ativacoes). Os dois saem de token
   (--ok e --gold) e sao MASCARA, entao trocar o token troca o icone junto.
   Esta regra era compartilhada com o cartao vertical ate 20/09; com o cartao
   removido ela passou a ser so da linha larga. */
.upl-item__feats{list-style:none;margin:0;padding:0;font-size:var(--fs-sm);display:grid;gap:11px;line-height:1.45}
.upl-item__feats li{position:relative;padding-left:24px}
.upl-item__feats li::before{content:"";position:absolute;left:0;top:.28em;width:15px;height:15px;background:var(--ok);-webkit-mask:var(--upl-check) center/contain no-repeat;mask:var(--upl-check) center/contain no-repeat}
.upl-item__feats li.is-forte::before{background:var(--gold);-webkit-mask:var(--upl-star) center/contain no-repeat;mask:var(--upl-star) center/contain no-repeat}
.upl-item__feats strong{color:var(--ink)}

/* ------------------------------------------------------------------
   LINHA LARGA: o unico desenho de plano desde 20/09
   Os mesmos dados do cartao, deitados: identificacao a esquerda, o que entrega
   no meio em duas colunas, preco e botao a direita. Cabe a descricao da linha
   INTEIRA dentro de cada plano, entao a versao b nao precisa da frase generica
   que a versao a poe acima dos quatro cartoes.
   ------------------------------------------------------------------ */
/* O atributo `hidden` NAO basta sozinho: ele vale como `display:none` na folha
   do navegador, e o `display:grid` logo abaixo, que e do autor, ganha dele. Sem
   esta linha as tres linhas de plano saem empilhadas e o alternador parece nao
   funcionar. Ja foi achado uma vez na v1.83.2 e voltou em 20/09, quando o corte
   do CSS do cartao levou junto a metade viva de
   `.upl-plans[hidden],.upl-lista[hidden]`. */
.upl-lista[hidden]{display:none}
/* As tres linhas no prazo escolhido, uma embaixo da outra. */
.upl-lista{display:grid;gap:var(--sp-4)}
.upl-item{position:relative;display:grid;grid-template-columns:minmax(210px,1fr) minmax(300px,1.5fr) minmax(200px,230px);gap:var(--sp-5);align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--sp-5) var(--sp-6);box-shadow:var(--sh-sm);transition:.2s ease}
.upl-item:hover{box-shadow:var(--sh-md)}
.upl-item--destaque{border:2px solid var(--brand-wine);box-shadow:var(--sh-lg)}
.upl-item__tag{display:inline-block;background:var(--grad-brand);color:var(--ink-invert);font-family:var(--font-display);font-weight:700;font-size:var(--fs-xs);letter-spacing:.04em;padding:5px 14px;border-radius:var(--r-pill);margin-bottom:9px}
.upl .upl-item__nome{font-size:1.3rem;font-weight:800;color:var(--ink);margin:0 0 6px;line-height:1.25}
.upl-item__desc{font-size:var(--fs-sm);color:var(--muted);margin:0;line-height:1.5}
/* Duas colunas de feature: com uma so, a Revenda (seis linhas) deixava o item
   duas vezes mais alto que o VIP na mesma lista. */
.upl-item__feats{grid-template-columns:repeat(2,1fr);gap:10px var(--sp-4);border-top:0;border-left:1px solid var(--line-soft);padding:0 0 0 var(--sp-5);margin:0}
.upl-item__buy{text-align:right}
.upl-item__buy .upl-plan__preco{margin:0;font-size:2.1rem}
.upl-item__buy .upl-plan__per{justify-content:flex-end;margin-bottom:var(--sp-4)}
/* O item do avulso nao e um plano: nao tem prazo nem faixa, e por isso nao
   entra na grade de tres colunas. Ele fecha a lista como alternativa, mais
   discreto de proposito. */

/* O item do avulso nao e um plano: nao tem prazo nem faixa. Ele fecha a lista
   como alternativa, mais discreto de proposito. */
.upl-item--avulso{background:var(--surface-2)}
.upl-item--avulso .upl-item__feats{border-left-color:var(--line)}

/* ------------------------------------------------------------------
   MATRIZ (versao c)
   Os quatro prazos contra as tres linhas. A celula e um link para o checkout
   daquele plano, e o que ela MOSTRA depende do criterio escolhido no
   alternador: os tres valores saem no HTML e o CSS mostra um, pelo mesmo
   motivo que os tres precos de moeda saem juntos. Trocar criterio nao volta
   ao servidor, e a pagina continua cacheavel.
   ------------------------------------------------------------------ */
/* #fdf7f9 nao e hex inventado: e o tint que o DESIGN-SYSTEM ja declara para
   .up-plan--featured e para a coluna destacada de .up-compare. */
/* A linha do avulso atravessa as tres colunas: ele nao tem prazo nem linha, e
   fingir que tem o poria numa grade a que nao pertence. Sem ela, porem, a
   versao c perderia a quarta forma de comprar, que e metade do que esta pagina
   existe para comparar. */

/* Tabela comparativa (versao a): a coisa que nao existia */
.upl-tabela-rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch}
.upl-compare{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;font-size:var(--fs-sm);min-width:660px}
.upl-compare th,.upl-compare td{padding:var(--sp-4) var(--sp-3);text-align:center;border-bottom:1px solid var(--line-soft)}
.upl-compare thead th{font-family:var(--font-display);font-weight:800;color:var(--ink);background:var(--surface-2);font-size:var(--fs-body);border-bottom:1px solid var(--line)}
.upl-compare tbody th{text-align:left;font-weight:500;color:var(--body);font-family:var(--font-body)}
.upl-compare tr:last-child td,.upl-compare tr:last-child th{border-bottom:0}
.upl-compare .upl-col-destaque{background:#fdf7f9}
.upl-compare thead .upl-col-destaque{background:#fdf7f9;color:var(--brand-wine)}
.upl-compare strong{color:var(--ink);font-family:var(--font-display)}
/* Os links de categoria da linha "Acesso ao catalogo" precisam PARECER
   link. A cor de link desta folha (--brand-slate) fica perto demais do
   texto da celula, e numa tabela ninguem passa o mouse por cima para
   descobrir: o sublinhado e o unico sinal que funciona parado. */
.upl .upl-compare td a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--line)}
.upl .upl-compare td a:hover{text-decoration-color:currentColor}
.upl-nao{color:var(--muted)}
/* A dica de ajuda. Balao no hover E no foco: sem o foco ela nao existiria no
   teclado nem no toque, que e onde metade da audiencia esta. */
.upl .upl-dica{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-left:5px;border:1px solid var(--line);border-radius:50%;background:var(--surface-3);color:var(--muted);font-family:var(--font-body);font-size:10px;font-weight:700;line-height:1;cursor:help;position:relative;vertical-align:.1em}
.upl .upl-dica:focus-visible{outline:2px solid var(--brand-wine);outline-offset:2px}
.upl .upl-dica::after{content:attr(data-dica);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:6;padding:6px 10px;border-radius:var(--r-sm,8px);background:var(--ink);color:var(--ink-invert);font-size:var(--fs-xs);font-weight:600;line-height:1.35;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .15s ease;pointer-events:none;box-shadow:var(--sh-md)}
.upl .upl-dica:hover::after,.upl .upl-dica:focus::after{opacity:1;visibility:visible}
@media(max-width:560px){.upl .upl-dica::after{white-space:normal;width:150px;text-align:center}}
.upl-compare__precos td{padding-top:var(--sp-5);padding-bottom:var(--sp-5)}
.upl-compare__cta td{padding-top:0}
.upl-nota{color:var(--muted);font-size:var(--fs-sm);margin-top:var(--sp-4);text-align:center}

/* Avulso */
.upl-avulso{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--sp-7);box-shadow:var(--sh-sm)}

/* Barra de versao: discreta, no rodape, e so existe antes de publicar. */

/* FAQ: reusa o .up-acc da landing quando ele existir, e tem estilo proprio para
   o caso de a pagina ser servida sem aquele bloco. */
.upl-faq{max-width:820px;margin-inline:auto}
.upl-faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-3)}
.upl-faq summary{font-family:var(--font-display);font-weight:700;color:var(--ink);cursor:pointer;list-style:none}
.upl-faq summary::-webkit-details-marker{display:none}

/* Breakpoints da landing, para as duas superficies quebrarem no mesmo lugar. */
@media(max-width:1080px){
  /* A linha larga perde a coluna do meio antes de perder a de compra: o preco
     e o botao sao o que a pessoa veio ver. */
  .upl-item{grid-template-columns:1fr minmax(180px,210px)}
  /* A linha larga perde a coluna do meio antes de perder a de compra: o preco
     e o botao sao o que a pessoa veio ver. */
  .upl-item{grid-template-columns:1fr minmax(180px,210px)}
  .upl-item__feats{grid-column:1 / -1;border-left:0;border-top:1px solid var(--line-soft);padding:var(--sp-4) 0 0}
}
@media(max-width:980px){
  .upl-hero__provas{max-width:420px;margin-inline:auto;text-align:left;display:grid;justify-content:start}
}
@media(max-width:720px){
  .upl-sec{padding:var(--sp-7) 0}
  .upl-avulso{padding:var(--sp-5)}
  .upl-ctas .upl-btn{width:100%}
  /* A home encolhe o botao do hero no telefone: 15px, padding 0 30px,
     altura 50. Medido la, repetido aqui. */
  .upl .upl-btn--coral,.upl .upl-btn--vidro{font-size:15px;padding:0 30px;line-height:50px}
  .upl .upl-btn--vidro{line-height:46px}
  /* O corpo cai, e o entrelinha TEM de acompanhar: com o valor do desktop as
     duas linhas do titulo se sobrepunham no telefone. */
  .upl .upl-hero__titulo{letter-spacing:-1.2px;line-height:1.1!important}
  .upl .upl-tab{padding:9px 16px}
  .upl-item{grid-template-columns:1fr;padding:var(--sp-5)}
  .upl-item{grid-template-columns:1fr;padding:var(--sp-5)}
  .upl-item__buy{text-align:left}
  .upl-item__buy .upl-plan__per{justify-content:flex-start}
  /* A MATRIZ TEM DE CABER NO TELEFONE, e nao rolar.
     O titulo da versao c promete "todos os precos numa tela so"; com o
     min-width de 640px ela caia na rolagem lateral de .upl-tabela-rolagem e o
     visitante via "Prazo | VIP | Desen..." cortado, ou seja o oposto do que a
     pagina acabara de prometer. MEDIDO a 390px antes desta regra.
     Em 390px sobram ~318px depois do gutter e do padding da caixa: a coluna do
     prazo encolhe para o rotulo curto e as tres de plano dividem o resto. */
  /* O avulso deixa de disputar a linha com o botao: um embaixo do outro. */
}
@media(max-width:380px){
  /* Ultimo aperto da matriz, medido a 320px: a tabela pedia 252px numa caixa de
     246. Os 6px que faltavam vinham de "Desenvolvedor" (102px de largura minima
     numa coluna de 62) e de "R$1.499" (68px). O nome curto resolve o primeiro e
     a fonte menor o segundo. Em 390px a palavra inteira AINDA cabe (MEDIDO:
     tabela de 316px numa caixa de 316), entao o corte e em 380 e nao antes. */
}
@media(max-width:560px){
  .upl-item__feats{grid-template-columns:1fr}
}