/* =========================================================
   POPPINS HOSPEDADA AQUI
   Bloco identico ao do ingresso.css, colado de proposito: cada
   variacao e' um arquivo CSS unico e independente, pra nao virar
   uma segunda requisicao bloqueante so' pra fonte.
   Para atualizar as duas: scripts/fontes.py
   ========================================================= */

@font-face{
  font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fontes/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fontes/poppins-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fontes/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fontes/poppins-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fontes/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fontes/poppins-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fontes/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fontes/poppins-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;
  src:url('assets/fontes/poppins-800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;
  src:url('assets/fontes/poppins-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =========================================================
   VARIACAO P1 — CONCEITO "OFICINA"
   Sistema visual proprio. NAO usa ingresso.css.

   Duas coisas mudam em relacao a index.html:

   1. COR — a pagina e' CLARA por padrao e o roxo escuro e' a
      excecao, reservado a uma unica dobra: a oferta. Na index e'
      o contrario (roxa por padrao, claro como excecao). Mesma
      paleta da marca, dominancia invertida.
   2. LAYOUT — nao tem ingresso destacavel. O hero e' assimetrico,
      com a foto sangrando ate' a borda direita da tela. O corpo e'
      uma coluna unica centrada (lista numerada), e a oferta e' um
      bloco escuro cheio no fim. Tres dobras, na ordem da copy.

   Regra de contraste da marca continua valendo: amarelo/dourado
   NUNCA vira texto sobre claro. Sobre claro o destaque e' roxo;
   sobre roxo o destaque e' amarelo.
   ========================================================= */

:root{
  --roxo:#57279E;
  --roxo-esc:#26064F;        /* so' na dobra da oferta */
  --roxo-tint:#EFE9F7;       /* superficie roxa clarissima */
  --roxo-linha:rgba(255,255,255,.16);

  --fundo:#FFFFFF;
  --fundo-alt:#F6F3FA;
  --linha:rgba(36,31,46,.13);
  --tinta:#241F2E;
  --tinta-soft:#635C71;      /* 5.9:1 no branco */

  --ouro:#E5B139;
  --ouro-ink:#2A1B00;
  --amarelo:#FFC41A;         /* so' sobre roxo */

  /* VERDE — so' no botao, e so' nesta variacao.
     Fora da paleta da marca de proposito: e' o teste de cor de CTA.
     O resto da pagina (tracinho do rotulo, fio do "mesmo que", os
     checks da oferta) continua dourado, senao o teste deixa de medir
     o botao e passa a medir a pagina inteira.
     Os dois tons foram escolhidos pelo contraste com o texto branco,
     que aqui e' 14px bold e por isso precisa de 4.5:1 (nao conta como
     texto grande): 5.44:1 no normal e 4.72:1 no hover. */
  --verde:#0C7A3B;
  --verde-hover:#0E8542;

  --branco:#FFFFFF;
  --branco-soft:rgba(255,255,255,.78);

  /* teto de imagem por papel na pagina (regra do repo: nenhuma
     foto passa de 60% da tela — por isso a foto do hero e' emoldurada
     dentro da coluna, e nao esticada na altura toda dela) */
  /* a banda do hero e' deitada agora; o teto e' menor porque texto
     e foto dividem a mesma tela */
  --img-capa:27vh;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fundo);
  color:var(--tinta);
  line-height:1.6;
  font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:80px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.center{text-align:center}

/* ---------- tipografia ---------- */
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.12}
h1{font-size:clamp(28px,3.2vw,44px);font-weight:600}
h2{font-size:clamp(25px,3.4vw,38px);font-weight:500}
h3{font-size:17.5px;font-weight:700;letter-spacing:-.02em}
p{margin:0 0 15px}
.lede{font-size:clamp(15px,1.7vw,17.5px);color:var(--tinta-soft);font-weight:400;line-height:1.72}
.destaque{color:var(--roxo)}

/* "Mesmo que voce esteja comecando do zero." — a linha que tira o
   medo. Ganha um fio dourado a esquerda pra nao passar batida. */
.mesmo-que{
  display:inline-block;font-size:15px;font-weight:600;color:var(--tinta);
  border-top:3px solid var(--ouro);padding-top:13px;margin:24px auto 0
}

/* rotulo de secao: o tracinho e' dourado (fundo, nao texto) e a
   palavra e' roxa — dourado como texto no claro nao passa AA */
.rotulo{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--roxo);margin:0 0 18px
}
.rotulo::before{content:"";width:26px;height:3px;background:var(--ouro);border-radius:2px}

section{padding:78px 0;position:relative}
.sec-alt{background:var(--fundo-alt)}

/* ---------- botao ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:var(--verde);color:#fff;
  font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  padding:20px 32px;border-radius:4px;border:0;cursor:pointer;
  transition:transform .12s ease,background .12s ease;
  text-align:center;line-height:1.25;
  box-shadow:0 8px 22px rgba(12,122,59,.32)
}
.btn::after{content:"\2192";font-size:17px;line-height:1}
.btn:hover{background:var(--verde-hover);transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--roxo);outline-offset:3px}
.btn-full{width:100%}
.btn-sub{font-size:12.5px;color:var(--tinta-soft);margin:13px 0 0}

/* ---------- topbar: roxa (na index ela e' dourada) ---------- */
.aviso{
  background:var(--roxo);color:var(--branco);
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 18px;text-align:center
}

/* =========================================================
   DOBRA 1 — PROMESSA
   Coluna unica centrada: olho, headline, subheadline, dados do
   evento, botao, e a banda de foto por baixo. O eixo vertical
   e' o mesmo do resto da pagina, entao a leitura desce reta.
   ========================================================= */
.capa{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:88vh;text-align:center;background:var(--fundo);
  padding:38px 0 44px;position:relative;overflow:hidden
}
.capa::before{
  /* respiro roxo atras do texto, bem de leve */
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 55% at 50% 6%,rgba(87,39,158,.09) 0%,rgba(87,39,158,0) 62%);
  pointer-events:none
}
.capa-texto{position:relative;z-index:1;width:100%;max-width:900px;padding:0 22px}
.marca{
  font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--roxo);margin:0 0 18px;line-height:1.5
}
.capa h1{margin:0 auto 16px;max-width:26ch}
.capa .lede{max-width:56ch;margin-left:auto;margin-right:auto}

/* chips com os dados do evento */
.chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:26px 0 28px;padding:0}
.chips li{
  background:var(--roxo-tint);color:var(--roxo);
  font-size:12.5px;font-weight:700;
  padding:9px 14px;border-radius:6px
}

/* A banda de foto, embaixo do botao. E' a hero.jpg — a mesma cena
   da dia3.jpg (maos guiando a calca pela maquina), regerada do
   negativo em 1400x600 porque a dia3 tem 560px de largura e ficava
   borrada esticada nessa banda. Para refazer: extrair CJM_1216 do
   zip do ensaio e cortar em 7:3. */
.capa-foto{
  position:relative;z-index:1;width:100%;max-width:1000px;
  padding:0 22px;margin-top:30px
}
.capa-foto img{
  width:100%;height:var(--img-capa);object-fit:cover;
  /* o enquadramento sobe: a agulha e o calcador ficam no alto da foto
     e sao eles que dizem "isso e' costura", nao o jeans sozinho */
  object-position:center 22%;
  border-radius:12px;box-shadow:0 20px 44px rgba(36,31,46,.16)
}
/* a etiqueta monta a cavalo na borda de baixo da banda, no eixo
   central da pagina */
.etiqueta{
  position:absolute;z-index:2;left:50%;bottom:0;
  transform:translate(-50%,42%);
  background:var(--roxo-esc);color:var(--branco);
  border-radius:8px;padding:13px 24px;box-shadow:0 18px 40px rgba(38,6,79,.34);
  text-align:center
}
.etiqueta .k{
  display:block;font-size:9.5px;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:var(--branco-soft);margin-bottom:5px
}
.etiqueta .v{
  display:block;font-size:34px;font-weight:700;letter-spacing:-.04em;
  line-height:1;color:var(--amarelo)
}

/* =========================================================
   DOBRA 2 — IDENTIFICACAO E CONTEUDO
   Coluna unica centrada. A lista e' numerada (01-05), com fio
   entre os itens — nada de card, pra nao repetir a grade da index.
   ========================================================= */
.pergunta{max-width:820px;margin:0 auto;text-align:center}
.pergunta h2{margin-bottom:16px}
.pergunta .rotulo{justify-content:center}

/* Os tres cards de programacao. Sao arte fechada (azul-marinho e
   dourado, formato story) e nao seguem a paleta da pagina — entao
   ficam soltos sobre o fundo, com sombra, como cartao apoiado na
   mesa. Enquadrar num card branco brigaria duas molduras. */
.dias{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;max-width:840px;margin:40px auto 0;padding:0
}
.dias img{
  /* Os cards sao formato story (0.57:1). Deixados a largura da coluna,
     passavam de 70% da altura da tela no celular e reprovavam a regra
     do repo (teto de 60%). Com a altura mandando, eles encolhem em
     largura e ficam centrados na coluna — continuam legiveis e sempre
     abaixo do teto. */
  max-width:100%;max-height:55vh;width:auto;height:auto;
  margin:0 auto;display:block;border-radius:12px;
  box-shadow:0 18px 40px rgba(36,31,46,.18)
}

/* faixa com os numeros do evento */
.faixa{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  max-width:760px;margin:44px auto 0;
  background:var(--linha);border-radius:8px;overflow:hidden
}
.faixa div{background:var(--roxo-tint);padding:26px 16px;text-align:center}
.faixa .n{font-size:clamp(26px,3.6vw,36px);font-weight:700;letter-spacing:-.04em;color:var(--roxo);line-height:1}
.faixa .l{font-size:12.5px;font-weight:600;color:var(--tinta-soft);margin-top:7px;line-height:1.4}


/* frase de virada */
.frase{
  max-width:720px;margin:52px auto 0;text-align:center;
  font-size:clamp(19px,2.6vw,26px);font-weight:500;letter-spacing:-.025em;
  line-height:1.4;color:var(--tinta)
}
.frase b{color:var(--roxo);font-weight:600}

/* =========================================================
   DOBRA 3 — OFERTA
   O unico bloco escuro da pagina. Aqui o destaque vira amarelo.
   ========================================================= */
.oferta{
  background:
    radial-gradient(110% 80% at 50% 0%,rgba(87,39,158,.72) 0%,rgba(38,6,79,0) 64%),
    var(--roxo-esc);
  color:var(--branco);padding:88px 0;text-align:center
}
.oferta .rotulo{color:var(--amarelo);justify-content:center}
.oferta .rotulo::before{background:var(--ouro)}
.oferta h2{max-width:21ch;margin:0 auto 14px}
.oferta .destaque{color:var(--amarelo)}
.oferta .lede{color:var(--branco-soft)}

.entrega{
  list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px;
  max-width:720px;margin:40px auto 0;padding:0;text-align:center
}
.entrega li{
  position:relative;padding:16px 18px 18px;
  background:rgba(255,255,255,.055);border:1px solid var(--roxo-linha);
  border-radius:8px;font-size:15px;font-weight:500;line-height:1.5
}
/* sao 5 itens em 2 colunas: o ultimo ficaria orfao na esquerda */
.entrega li:last-child{grid-column:1/-1}

/* Com 10 itens, o check em cima do texto (que a versao de 5 usa) faz a
   lista crescer demais e empurra o preco pra fora da tela. Aqui o check
   volta pro lado e o item ocupa uma linha so'. */
.entrega-longa li{padding:13px 16px 13px 46px;text-align:left;font-size:14.5px}
.entrega-longa li:last-child{grid-column:auto}
.entrega-longa li::before{
  position:absolute;left:17px;top:15px;display:block;margin:0;width:16px;height:16px
}
.entrega-longa li::after{left:22px;top:18px;margin-left:0}
/* com o texto centrado o check sobe pra cima dele, no eixo do card */
.entrega li::before{
  content:"";display:block;width:17px;height:17px;margin:0 auto 9px;
  border-radius:50%;background:var(--ouro)
}
.entrega li::after{
  content:"";position:absolute;left:50%;top:21.5px;width:5px;height:9px;
  margin-left:-6.5px;
  border:2px solid var(--ouro-ink);border-top:0;border-left:0;transform:rotate(42deg)
}

.preco-bloco{margin:44px auto 0;max-width:520px}
.preco-antes{
  font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--branco-soft);margin:0 0 10px
}
.preco{display:flex;align-items:baseline;justify-content:center;gap:7px;margin:0}
.preco .cifra{font-size:22px;font-weight:700;color:var(--branco-soft)}
.preco .num{font-size:clamp(64px,9vw,92px);font-weight:700;letter-spacing:-.055em;line-height:.95;color:var(--amarelo)}
/* os centavos entram menores que os reais: 27,90 lido de longe
   é 'vinte e sete', e o ,90 não pode roubar esse peso */
.preco .cent{font-size:.34em;font-weight:700;letter-spacing:-.03em;color:var(--amarelo)}
.preco-sub{font-size:13px;color:var(--branco-soft);margin:12px 0 0;font-weight:500}
.ressalva{
  max-width:560px;margin:34px auto 30px;font-size:15px;line-height:1.65;
  color:var(--branco-soft)
}
.ressalva b{color:var(--branco);font-weight:600}
.oferta .btn-sub{color:var(--branco-soft)}

/* =========================================================
   RODAPE + BARRA FIXA
   ========================================================= */
footer{
  padding:46px 0 40px;text-align:center;font-size:13px;
  color:var(--tinta-soft);background:var(--fundo-alt)
}
footer p{margin:0 0 8px}
footer a{text-decoration:underline}

.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--roxo-esc);border-top:1px solid var(--roxo-linha);
  padding:11px 16px;display:flex;gap:14px;align-items:center;justify-content:space-between;
  transform:translateY(105%);transition:transform .2s ease
}
.barra.on{transform:none}
.barra .p{font-size:12px;color:var(--branco-soft);line-height:1.25}
.barra .p b{display:block;font-size:19px;color:var(--amarelo);letter-spacing:-.02em}
.barra .btn{padding:14px 20px;font-size:12.5px;flex:0 1 auto;box-shadow:none}

/* =========================================================
   RESPONSIVO
   ========================================================= */
/* Notebook (800-880px de altura) e' onde o hero estourava os 101%
   do padrao: a headline da Pagina 1 tem 90 caracteres e quebrava em
   6 linhas. Aqui ela encolhe e os respiros fecham — o que sai da
   dobra e' folga, nunca copy. */
/* Com o hero centrado, texto e foto dividem a mesma tela — nao ha
   mais duas colunas pra diluir a altura. Por isso o bloco compacto
   entra ja' em 960px, e nao em 880 como antes. */
@media (max-height:960px){
  :root{--img-capa:23vh}
  .capa{padding:28px 0 34px}
  .capa-foto{margin-top:24px}
  .capa h1{font-size:clamp(26px,2.7vw,35px);max-width:28ch;margin-bottom:13px}
  .capa .lede{font-size:16px;line-height:1.62}
  .marca{margin-bottom:13px}
  .chips{margin:20px 0 24px}
  .chips li{padding:8px 12px;font-size:12px}
  .btn{padding:17px 28px}
  .mesmo-que{margin-top:18px;font-size:14.5px}
}
@media (max-width:900px){
  .capa{min-height:0;padding:34px 0 54px}
  .capa h1{max-width:none}
  .capa-texto{max-width:640px}
  .capa-foto img{height:min(var(--img-capa),240px)}
  .etiqueta{padding:11px 20px}
}
@media (max-width:760px){
  section{padding:60px 0}
  .oferta{padding:66px 0}
  .entrega{grid-template-columns:1fr;max-width:440px}
  .faixa{grid-template-columns:1fr;gap:1px}
  .faixa div{padding:20px 16px;display:flex;align-items:baseline;justify-content:center;gap:10px}
  .faixa .l{margin-top:0}
  .dias{grid-template-columns:1fr;max-width:320px;gap:16px}
}
@media (max-width:400px){
  .marca{font-size:10.5px;letter-spacing:.16em}
  .btn{padding:17px 18px;font-size:12.5px;letter-spacing:.07em}
  .preco .num{font-size:60px}
}
@media (max-height:700px){
  .btn-sub{display:none}
}
@media (prefers-reduced-motion:reduce){
  .btn,.barra{transition:none}
  .btn:hover{transform:none}
}


/* =========================================================
   A DIFERENCA ENTRE R$ 40 E R$ 144
   Dois pares de comparacao e a conta do ingresso. As fotos sao
   opcionais de proposito: as duas que faltam (a mesma calca antes
   e depois, e o acabamento mal feito) ainda nao existem, e o
   onerror remove o <img>. O cartao continua de pe' so' com a
   etiqueta e a legenda — o argumento e' o texto, a foto reforca.
   Por isso o grid alinha no topo: sem 'start', o cartao sem foto
   estica junto com o irmao e abre um vao vazio.
   ========================================================= */
.compara{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;
  max-width:860px;margin:36px auto 0
}
.compara .lado{
  margin:0;background:#fff;border:1px solid var(--linha);
  border-top:4px solid var(--tinta-soft);border-radius:10px;text-align:center;
  padding:20px 22px;display:flex;flex-direction:column;gap:14px
}
.compara .lado.ok{border-top-color:var(--roxo)}
.compara .lado.ruim{border-top-color:#B4442F}
.compara .tag{
  font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tinta-soft)
}
.compara .lado.ok .tag{color:var(--roxo)}
.compara .lado.ruim .tag{color:#B4442F}
.compara img{
  /* teto proprio, em vh: antes isto apontava pro --img-tira, o token
     da tira de fotos. Quando a tira saiu, o token foi junto e o
     max-height virou 'none' — as fotos do antes/depois passaram de
     60% da tela em notebook. Teto local nao depende de bloco vizinho. */
  width:100%;height:auto;max-height:30vh;
  object-fit:cover;border-radius:6px
}
.compara figcaption{
  margin:0;font-size:14.5px;line-height:1.55;color:var(--tinta-soft);text-align:center
}

/* a conta: tres linhas, e o salto de 40 pra 144 tem que saltar aos
   olhos — por isso o numero cresce junto com a importancia da linha */
.conta{
  max-width:620px;margin:44px auto 0;
  border:1px solid var(--linha);border-radius:10px;overflow:hidden;background:#fff
}
.conta .l{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:16px 22px;border-bottom:1px solid var(--linha)
}
.conta .l:last-child{border-bottom:0}
.conta .k{font-size:14.5px;font-weight:500;line-height:1.4}
.conta .v{
  font-size:24px;font-weight:700;letter-spacing:-.03em;color:var(--tinta-soft);
  flex:0 0 auto
}
.conta .forte{background:var(--roxo-tint)}
.conta .forte .k{font-weight:600}
.conta .forte .v{color:var(--roxo);font-size:30px}
.conta .l:last-child .v{font-size:38px}
.conta-nota{
  max-width:620px;margin:16px auto 0;text-align:center;
  font-size:12.5px;line-height:1.6;color:var(--tinta-soft)
}

@media (max-width:760px){
  .compara{grid-template-columns:1fr;max-width:440px;gap:14px}
  .compara img{max-height:none}
  .conta .l{padding:14px 18px}
  .conta .v{font-size:21px}
  .conta .forte .v{font-size:26px}
  .conta .l:last-child .v{font-size:32px}
}