/* Vitrine das corridas virtuais.
 *
 * Complementa `paginas.css` em vez de repetir: as cores, a fonte e o `.wrap`
 * vêm de lá. Aqui mora só o que é de loja — a grade de produtos, o preço, o
 * selo de urgência e a barra de compra que acompanha a rolagem.
 *
 * A referência é loja mesmo, e não folheto: quem chega nesta página está
 * decidindo se compra. Preço visível sem rolar, o que leva escrito ao lado do
 * preço, e um botão que não some da tela.
 */

/* ---------------------------------------------------------------- grade */

.vitrine{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:26px;
  margin:34px 0 56px;
}

.produto{
  display:flex;
  flex-direction:column;
  border:1px solid var(--linha);
  border-radius:16px;
  overflow:hidden;
  background:var(--bg);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.produto:hover{
  border-color:#D4D4D8;
  box-shadow:0 10px 30px rgba(0,0,0,.07);
  transform:translateY(-2px);
}

/* A capa. Sem foto, um fundo da marca com a distância bem grande — melhor que
   um retângulo cinza escrito "sem imagem", e a distância é o que a pessoa
   procura mesmo. */
.produto-capa{
  position:relative;
  aspect-ratio:16/10;
  background:linear-gradient(135deg,var(--brand-tint) 0%,#FFE2CC 100%);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.produto-capa img{width:100%;height:100%;object-fit:cover;display:block}
.produto-capa-km{
  font-family:"Inter Tight",Inter,sans-serif;
  font-weight:800;
  font-size:52px;
  line-height:1;
  color:var(--brand-deep);
  letter-spacing:-.02em;
}
.produto-capa-km span{display:block;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* Selos sobre a capa. */
.selos{position:absolute;top:12px;left:12px;display:flex;gap:6px;flex-wrap:wrap}
.selo-loja{
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 9px;border-radius:999px;background:var(--grafite);color:#fff;
}
.selo-loja.urgente{background:#B91C1C}
.selo-loja.novo{background:var(--brand-deep)}
.selo-loja.encerrado{background:#71717A}

.produto-corpo{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.produto-nome{
  font-family:"Inter Tight",Inter,sans-serif;
  font-size:20px;font-weight:800;line-height:1.25;color:var(--grafite);
  margin:0;letter-spacing:-.01em;
}
.produto-nome a{color:inherit;text-decoration:none}
.produto-nome a:hover{color:var(--brand-deep)}

.produto-linha{display:flex;flex-wrap:wrap;gap:6px}
.atributo{
  font-size:12.5px;font-weight:600;color:var(--texto);
  background:var(--bg-alt);border:1px solid var(--linha);
  padding:4px 9px;border-radius:999px;
}
.produto-desc{font-size:14px;color:var(--suave);margin:0;line-height:1.55}

.produto-premio{
  display:flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:600;color:var(--brand-ink);
  background:var(--brand-tint);border-radius:10px;padding:9px 12px;
}

.produto-rodape{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--linha);
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
}
.preco{display:flex;flex-direction:column;line-height:1.15}
.preco-rotulo{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
.preco-valor{
  font-family:"Inter Tight",Inter,sans-serif;
  font-size:26px;font-weight:800;color:var(--grafite);letter-spacing:-.02em;
}
.preco-valor.gratis{color:#15803D}

/* -------------------------------------------------------- página do item */

.produto-topo{
  display:grid;grid-template-columns:1.15fr 1fr;gap:44px;
  align-items:start;margin:36px 0 12px;
}
.produto-galeria{
  position:relative;
  border-radius:18px;overflow:hidden;border:1px solid var(--linha);
  aspect-ratio:4/3;background:linear-gradient(135deg,var(--brand-tint) 0%,#FFE2CC 100%);
  display:flex;align-items:center;justify-content:center;
}
.produto-galeria img{width:100%;height:100%;object-fit:cover;display:block}
.produto-galeria .produto-capa-km{font-size:76px}

.compra{position:sticky;top:24px}
.compra h1{font-size:clamp(28px,3.4vw,40px);margin:8px 0 12px}
.compra-preco{
  display:flex;align-items:baseline;gap:10px;
  margin:18px 0 6px;
}
.compra-preco .preco-valor{font-size:38px}
.compra-parcela{font-size:13.5px;color:var(--suave);margin:0 0 18px}

.inclui{list-style:none;padding:0;margin:20px 0}
.inclui li{
  display:flex;gap:10px;align-items:flex-start;
  padding:9px 0;font-size:14.5px;color:var(--texto);
  border-bottom:1px solid var(--linha);
}
.inclui li:last-child{border-bottom:0}
.inclui svg{flex:none;margin-top:3px}

.contagem{
  display:flex;gap:18px;margin:18px 0;
  padding:14px 16px;border-radius:12px;background:var(--bg-alt);
  border:1px solid var(--linha);
}
.contagem div{flex:1}
.contagem .n{
  font-family:"Inter Tight",Inter,sans-serif;
  font-size:22px;font-weight:800;color:var(--grafite);display:block;line-height:1.1;
}
.contagem .r{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--suave)}

/* Barra de compra que segue a rolagem no celular, onde o botão sairia da
   tela justamente enquanto a pessoa lê a regra e decide. */
.barra-compra{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:rgba(255,255,255,.97);
  backdrop-filter:saturate(180%) blur(8px);
  border-top:1px solid var(--linha);
  padding:12px 16px;
  display:none;align-items:center;gap:14px;
}
.barra-compra .preco-valor{font-size:22px}
.barra-compra .btn{flex:1;justify-content:center;margin:0}

@media (max-width:900px){
  .produto-topo{grid-template-columns:1fr;gap:26px}
  .compra{position:static}
  .barra-compra{display:flex}
  body{padding-bottom:78px}
}

@media (max-width:640px){
  .vitrine{grid-template-columns:1fr;gap:20px}
  .produto-capa-km{font-size:44px}
}

/* ------------------------------------------------------------ certificado */

.certificado{
  border:2px solid var(--brand);
  border-radius:18px;
  padding:56px 40px;
  text-align:center;
  margin:40px 0;
  background:linear-gradient(180deg,#fff 0%,var(--brand-tint) 100%);
}
.cert-rotulo{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-ink);margin:0 0 18px;
}
.cert-nome{
  font-family:"Inter Tight",Inter,sans-serif;
  font-size:clamp(28px,5vw,44px);font-weight:800;color:var(--grafite);
  margin:0 0 14px;letter-spacing:-.02em;line-height:1.15;
}
.cert-texto{font-size:17px;color:var(--texto);max-width:520px;margin:0 auto;line-height:1.7}
.cert-linha{
  display:flex;justify-content:center;gap:40px;flex-wrap:wrap;
  margin:34px 0 26px;padding:22px 0;
  border-top:1px solid var(--brand);border-bottom:1px solid var(--brand);
}
.cert-linha .n{
  display:block;font-family:"Inter Tight",Inter,sans-serif;
  font-size:22px;font-weight:800;color:var(--grafite);line-height:1.2;
}
.cert-linha .r{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
.cert-pe{font-size:12.5px;color:var(--suave);margin:0;line-height:1.7}
.cert-pe code{font-size:12px;background:#fff;padding:2px 6px;border-radius:5px;border:1px solid var(--linha)}

@media print{
  .topo,.rodape,.btn-linha,.barra-compra{display:none!important}
  .certificado{border-color:#999;background:#fff;margin:0}
}

/* ------------------------------------------------------------- checkout */

.checkout{
  display:grid;grid-template-columns:1.35fr 1fr;gap:44px;
  align-items:start;margin:32px 0 60px;
}

/* Os passos. Mostrar os três desde o começo é o que diz à pessoa que a compra
   é curta — a dúvida "quanto falta disso?" é o que faz abandonar carrinho. */
.passos{display:flex;gap:0;margin:0 0 28px;list-style:none;padding:0}
.passos li{
  flex:1;font-size:12.5px;font-weight:600;color:var(--suave);
  padding:10px 0 12px;border-bottom:3px solid var(--linha);text-align:center;
}
.passos li.ativo{color:var(--brand-deep);border-bottom-color:var(--brand-deep)}
.passos li.feito{color:var(--grafite);border-bottom-color:var(--brand)}

.caixa{
  border:1px solid var(--linha);border-radius:14px;padding:24px;margin-bottom:20px;
}
.caixa h2{font-size:19px;margin:0 0 6px}
.caixa .sub{font-size:14px;color:var(--suave);margin:0 0 18px}

.campo-loja{margin-bottom:16px}
.campo-loja label{
  display:block;font-size:13px;font-weight:600;color:var(--grafite);margin-bottom:6px;
}
.campo-loja input,.campo-loja select{
  width:100%;padding:11px 13px;font:inherit;font-size:15px;
  border:1px solid var(--linha);border-radius:10px;background:#fff;color:var(--grafite);
}
.campo-loja input:focus,.campo-loja select:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,138,61,.18);
}
.campo-loja .dica{font-size:12.5px;color:var(--suave);margin:6px 0 0}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Escolha em cartão, para modalidade. Rádio pequeno é ruim de tocar no
   celular, e é a decisão mais importante da compra. */
.opcoes{display:grid;gap:12px}
.opcao{
  display:flex;gap:12px;align-items:flex-start;
  border:2px solid var(--linha);border-radius:12px;padding:14px 16px;cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
}
.opcao:hover{border-color:#D4D4D8}
.opcao.marcada{border-color:var(--brand-deep);background:var(--brand-tint)}
.opcao input{margin-top:3px;accent-color:var(--brand-deep);flex:none}
.opcao .t{font-weight:700;color:var(--grafite);font-size:15px;display:block}
.opcao .d{font-size:13px;color:var(--suave);display:block;margin-top:3px;line-height:1.5}

/* O resumo do pedido, fixo ao lado — o que a pessoa confere antes de pagar. */
.resumo{
  position:sticky;top:24px;border:1px solid var(--linha);
  border-radius:14px;padding:22px;background:var(--bg-alt);
}
.resumo h3{font-size:15px;margin:0 0 16px;color:var(--grafite)}
.resumo-item{display:flex;justify-content:space-between;gap:14px;font-size:14px;padding:7px 0}
.resumo-item span:first-child{color:var(--suave)}
.resumo-item span:last-child{color:var(--grafite);font-weight:600;text-align:right}
.resumo-total{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--linha);
}
.resumo-total .preco-valor{font-size:28px}

/* Pix */
.pix-caixa{text-align:center;padding:8px 0}
.pix-qr{width:220px;height:220px;margin:0 auto 16px;display:block;border-radius:12px}
.pix-codigo{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  word-break:break-all;background:#fff;border:1px solid var(--linha);
  border-radius:10px;padding:12px;color:var(--texto);line-height:1.55;text-align:left;
}
.pix-espera{
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:13.5px;color:var(--suave);margin-top:16px;
}
.girando{
  width:15px;height:15px;border:2px solid var(--linha);border-top-color:var(--brand-deep);
  border-radius:50%;animation:gira .8s linear infinite;flex:none;
}
@keyframes gira{to{transform:rotate(360deg)}}

.pronto{text-align:center;padding:36px 20px}
.pronto-icone{
  width:64px;height:64px;border-radius:50%;background:#DCFCE7;
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
}
.pronto h2{font-size:26px;margin:0 0 10px}
.pronto .numero{
  font-family:"Inter Tight",Inter,sans-serif;font-size:40px;font-weight:800;
  color:var(--brand-deep);letter-spacing:-.02em;margin:18px 0 4px;
}

.aviso-loja{
  border-radius:10px;padding:12px 14px;font-size:14px;margin-bottom:16px;line-height:1.55;
}
.aviso-loja.erro{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B}
.aviso-loja.ok{background:#F0FDF4;border:1px solid #BBF7D0;color:#166534}
.aviso-loja.info{background:var(--brand-tint);border:1px solid var(--brand);color:var(--brand-ink)}

@media (max-width:900px){
  .checkout{grid-template-columns:1fr;gap:24px}
  .resumo{position:static;order:-1}
  .dupla{grid-template-columns:1fr}
}

/* ------------------------------------------------------- painel do atleta */

.numeros{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:16px;margin:22px 0 44px;
}
.numero-caixa{
  border:1px solid var(--linha);border-radius:14px;padding:20px;
}
.numero-caixa .v{
  font-family:"Inter Tight",Inter,sans-serif;
  font-size:32px;font-weight:800;color:var(--grafite);letter-spacing:-.02em;
  line-height:1.1;display:block;
}
.numero-caixa .v small{font-size:15px;font-weight:700;color:var(--suave);margin-left:3px}
.numero-caixa .r{
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--suave);display:block;margin-top:6px;
}
.numero-caixa .d{font-size:13px;color:var(--suave);margin-top:8px;display:block}

/* Gráfico de barras em CSS puro. Doze barras não pedem uma biblioteca de
   300 KB, e uma dependência a menos é uma coisa a menos para quebrar. */
.grafico{
  display:flex;align-items:flex-end;gap:6px;height:170px;
  margin:22px 0 44px;padding:0 2px;
}
.barra-mes{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:6px}
.barra-mes .b{
  background:var(--brand);border-radius:5px 5px 0 0;min-height:3px;
  transition:background .15s ease;
}
.barra-mes:hover .b{background:var(--brand-deep)}
.barra-mes .l{font-size:10.5px;color:var(--suave);text-align:center;white-space:nowrap}
.barra-mes .n{font-size:10.5px;font-weight:700;color:var(--grafite);text-align:center}

.desafio-linha{
  display:flex;gap:16px;align-items:center;
  border:1px solid var(--linha);border-radius:14px;padding:16px 18px;margin-bottom:12px;
}
.desafio-linha img{width:64px;height:48px;border-radius:8px;object-fit:cover;flex:none}
.desafio-linha .corpo{flex:1;min-width:0}
.desafio-linha .t{font-weight:700;color:var(--grafite);font-size:15.5px}
.desafio-linha .m{font-size:13px;color:var(--suave);margin-top:3px}
.trilho{height:7px;border-radius:4px;background:var(--linha);overflow:hidden;margin-top:9px}
.trilho i{display:block;height:100%;background:var(--brand);border-radius:4px}

/* ==========================================================================
   PÁGINA DE VENDA DIRETA
   ==========================================================================
   Para quem chega de anúncio. A pessoa clicou porque viu a medalha e o preço;
   a página tem de responder "quanto, o que vem, como compro" antes de ela
   precisar rolar. Tudo o mais vem depois.

   Feita para o celular primeiro, porque é de lá que o anúncio traz. */

/* Só o padding de baixo. O atalho `padding:0 0 40px` apagaria também o
   respiro lateral que vem de `.wrap`, e o texto encostava — e vazava — na
   borda esquerda da tela do celular. */
.venda{padding-bottom:40px}

.venda-grade{display:grid;grid-template-columns:1fr;gap:0}

.venda-foto{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  background:linear-gradient(135deg,var(--brand-tint) 0%,#FFE2CC 100%);
  display:flex;align-items:center;justify-content:center;
  margin:0 -24px;
}
.venda-foto img{width:100%;height:100%;object-fit:cover;display:block}
.venda-foto .produto-capa-km{font-size:76px}

.venda-caixa{padding:22px 0 0}

.venda-titulo{
  font-family:"Inter Tight",Inter,sans-serif;
  font-size:clamp(26px,6.4vw,38px);font-weight:800;color:var(--grafite);
  letter-spacing:-.025em;line-height:1.12;margin:0 0 12px;
}

/* O preço, do tamanho que a decisão tem. */
.venda-preco{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 4px}
.venda-preco .cifra{
  font-family:"Inter Tight",Inter,sans-serif;font-weight:800;
  font-size:20px;color:var(--grafite);
}
.venda-preco .valor{
  font-family:"Inter Tight",Inter,sans-serif;font-weight:800;
  font-size:clamp(42px,11vw,60px);color:var(--grafite);
  letter-spacing:-.035em;line-height:1;
}
.venda-preco .centavos{
  font-family:"Inter Tight",Inter,sans-serif;font-weight:800;
  font-size:24px;color:var(--grafite);align-self:flex-start;margin-top:6px;
}
.venda-preco .no-pix{
  font-size:15px;font-weight:700;color:#15803D;
  background:#F0FDF4;border:1px solid #BBF7D0;border-radius:999px;padding:5px 12px;
}
.venda-gratis .valor{color:#15803D}

.venda-selos{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 22px}
.venda-selo{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:700;letter-spacing:.01em;
  border-radius:999px;padding:6px 12px;border:1px solid;
}
.venda-selo.frete{color:#15803D;background:#F0FDF4;border-color:#BBF7D0}
.venda-selo.prazo{color:var(--brand-ink);background:var(--brand-tint);border-color:var(--brand)}
.venda-selo.urgencia{color:#991B1B;background:#FEF2F2;border-color:#FECACA}

/* A escolha, em chips grandes. Rádio de 16 px é onde o dedo erra. */
.venda-rotulo{
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--suave);margin:0 0 10px;
}
.chips-km{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.chip-km{
  flex:1 1 auto;min-width:104px;
  border:2px solid var(--linha);border-radius:12px;padding:12px 14px;
  background:#fff;cursor:pointer;text-align:center;
  transition:border-color .15s ease,background .15s ease;
}
.chip-km:hover{border-color:#D4D4D8}
.chip-km.marcado{border-color:var(--brand-deep);background:var(--brand-tint)}
.chip-km input{position:absolute;opacity:0;pointer-events:none}
.chip-km .km{
  display:block;font-family:"Inter Tight",Inter,sans-serif;
  font-weight:800;font-size:20px;color:var(--grafite);line-height:1.1;
}
.chip-km .mod{display:block;font-size:12.5px;color:var(--suave);margin-top:2px}
.chip-regra{
  font-size:13.5px;color:var(--texto);line-height:1.55;
  background:var(--bg-alt);border-radius:10px;padding:12px 14px;margin:0 0 20px;
}

.btn-comprar{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:17px 20px;border:0;border-radius:12px;
  background:var(--brand-deep);color:#fff;cursor:pointer;
  font-family:Inter,sans-serif;font-size:17px;font-weight:700;letter-spacing:.01em;
  text-decoration:none;transition:background .15s ease,transform .1s ease;
}
.btn-comprar:hover{background:#C9540F}
.btn-comprar:active{transform:translateY(1px)}
.btn-comprar.esgotado{background:#71717A}

.venda-seguro{
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:12.5px;color:var(--suave);margin:12px 0 0;
}

/* Benefícios, no formato que a referência usa: ícone, título curto, uma linha */
.beneficios{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:34px 0;
}
.beneficio{
  border:1px solid var(--linha);border-radius:14px;padding:18px 16px;text-align:center;
}
.beneficio svg{margin:0 auto 10px;display:block}
.beneficio .t{font-weight:700;font-size:14.5px;color:var(--grafite);display:block;line-height:1.3}
.beneficio .d{font-size:13px;color:var(--suave);display:block;margin-top:5px;line-height:1.5}

/* Passos numerados */
.passos-venda{list-style:none;padding:0;margin:22px 0 34px;counter-reset:p}
.passos-venda li{
  display:flex;gap:14px;align-items:flex-start;padding:14px 0;
  border-bottom:1px solid var(--linha);
}
.passos-venda li:last-child{border-bottom:0}
.passos-venda li::before{
  counter-increment:p;content:counter(p);
  flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--brand-deep);color:#fff;
  font-family:"Inter Tight",Inter,sans-serif;font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.passos-venda strong{color:var(--grafite);display:block;margin-bottom:2px}
.passos-venda span{font-size:14.5px;color:var(--texto);line-height:1.55}

/* Sanfona para regulamento e detalhes: não empurram o botão para baixo. */
.sanfona{border-top:1px solid var(--linha)}
.sanfona summary{
  padding:16px 0;font-weight:700;color:var(--grafite);cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.sanfona summary::-webkit-details-marker{display:none}
.sanfona summary::after{content:'+';font-size:20px;color:var(--suave);font-weight:400}
.sanfona[open] summary::after{content:'−'}
.sanfona .conteudo-sanfona{padding:0 0 18px;font-size:14.5px;color:var(--texto);line-height:1.65;white-space:pre-line}

/* Barra fixa: o botão nunca sai da tela no celular. */
.barra-venda{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(255,255,255,.97);backdrop-filter:saturate(180%) blur(10px);
  border-top:1px solid var(--linha);padding:10px 16px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 -4px 18px rgba(0,0,0,.06);
}
.barra-venda .p{display:flex;flex-direction:column;line-height:1.1;flex:none}
.barra-venda .p b{font-family:"Inter Tight",Inter,sans-serif;font-size:20px;color:var(--grafite)}
.barra-venda .p small{font-size:11px;color:var(--suave)}
.barra-venda .btn-comprar{width:auto;flex:1;padding:14px 18px;font-size:15.5px}

@media (min-width:900px){
  .venda-grade{grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-top:28px}
  .venda-foto{margin:0;border-radius:18px;border:1px solid var(--linha);aspect-ratio:1/1}
  .venda-caixa{padding:0;position:sticky;top:24px}
  .beneficios{grid-template-columns:repeat(4,1fr)}
  .barra-venda{display:none}
  .venda{padding-bottom:0}
}
@media (max-width:899px){
  body.tem-barra{padding-bottom:76px}
}

/* Foto enviada por quem organiza mantém a própria proporção.
   A arte da medalha é uma peça composta; recortá-la para um quadrado corta
   metade do que ela dizia. A proporção fixa fica para a capa que nós geramos. */
.venda-foto.com-foto,
.produto-galeria.com-foto{aspect-ratio:auto}
.venda-foto.com-foto img,
.produto-galeria.com-foto img{height:auto;object-fit:contain}
.produto-capa.com-foto{aspect-ratio:16/10}

/* -------------------------------------------------------- frete na página */

.frete-caixa{
  border:1px solid var(--linha);border-radius:12px;
  padding:16px;margin-top:20px;background:var(--bg-alt);
}
.frete-linha{display:flex;gap:10px}
.frete-linha input{
  flex:1;min-width:0;padding:11px 13px;font:inherit;font-size:15px;
  border:1px solid var(--linha);border-radius:10px;background:#fff;color:var(--grafite);
}
.frete-linha input:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,138,61,.18);
}
.frete-linha button{
  flex:none;padding:11px 18px;border:1px solid var(--linha);border-radius:10px;
  background:#fff;color:var(--grafite);font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
}
.frete-linha button:hover{border-color:#D4D4D8;background:#FAFAFA}

.frete-resultado{
  display:flex;gap:24px;margin:14px 0 4px;padding:12px 0;
  border-top:1px solid var(--linha);
}
.frete-resultado .v{
  display:block;font-family:"Inter Tight",Inter,sans-serif;
  font-weight:800;font-size:19px;color:var(--grafite);line-height:1.15;
}
.frete-resultado .r{font-size:11.5px;color:var(--suave);display:block;margin-top:3px}

.frete-nota{font-size:12px;color:var(--suave);margin:10px 0 0;line-height:1.5}
.frete-erro{font-size:13px;color:#991B1B;margin:12px 0 0}