/* Plano de design (30/09/2026)
   Assunto: utilitário Windows que tira o fundo de fotos de produto em lote, para quem vende em
   marketplace e brechó e fotografa dezenas de peças por semana. Trabalho da página: convencer a
   instalar pela Store e ser honesta sobre créditos e privacidade.
   Cor: verde-floresta da marca (#1F6F4A) como único acento; chão cinza-esverdeado frio (#F4F4F2);
   o xadrez da transparência (#FFF/#E3E6E3) é o material da marca; "mesa" e "parede" (#B9A58A,
   #D9D2C5) só existem para serem removidos.
   Tipo: uma família, Familjen Grotesk; título em 700 apertado, corpo em 400, sem versaletes.
   Layout: coluna única alinhada à esquerda (720 px) para texto; o hero rompe a coluna com a
   fileira de fotos em largura total. Sem cartões: divisões por espaço e uma regra fina onde a
   seção muda. Preço em duas colunas separadas por uma regra, não em cartões.
   Movimento: um momento só, no carregamento: os fundos das fotos da fileira caem um a um
   (explicação do produto). CSS puro, opacity+transform, ease-out forte, escalonado. Reduced
   motion mostra o estado final. FAQ em details/summary, sem animação de altura. */

.hero{padding:36px 0 8px}
.hero p.sub{max-width:34em}
.lote{
  margin:34px calc(50% - 50vw) 0;padding:26px 16px 22px;
  background:var(--fundo-2);border-top:1px solid var(--borda);border-bottom:1px solid var(--borda);
}
.lote-inner{max-width:1040px;margin:0 auto}
.lote-barra{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-size:.95rem;color:var(--suave);margin:0 0 14px;font-variant-numeric:tabular-nums;
}
.lote-barra strong{color:var(--texto);font-weight:600}
.trilho{height:4px;background:var(--borda);border-radius:2px;overflow:hidden;margin:0 0 18px}
.trilho i{display:block;height:100%;width:100%;background:var(--acento);transform:scaleX(0);transform-origin:left;
  animation:progresso 2.6s var(--ease-out) .45s forwards}
.fotos{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.foto{
  position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;border:1px solid var(--borda);
  background-color:var(--xadrez-1);
  background-image:linear-gradient(45deg,var(--xadrez-2) 25%,transparent 25%),
    linear-gradient(-45deg,var(--xadrez-2) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,var(--xadrez-2) 75%),
    linear-gradient(-45deg,transparent 75%,var(--xadrez-2) 75%);
  background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0;
}
.foto .fundo{position:absolute;inset:0;animation:cai .6s var(--ease-out) forwards;opacity:1}
.foto:nth-child(1) .fundo{background:linear-gradient(160deg,var(--parede) 0%,var(--mesa) 70%);animation-delay:.6s}
.foto:nth-child(2) .fundo{background:linear-gradient(200deg,var(--mesa) 0%,var(--sombra-foto) 100%);animation-delay:.95s}
.foto:nth-child(3) .fundo{background:linear-gradient(120deg,var(--parede) 20%,#C9BDA9 100%);animation-delay:1.3s}
.foto:nth-child(4) .fundo{background:radial-gradient(circle at 30% 20%,var(--parede),var(--mesa) 80%);animation-delay:1.65s}
.foto:nth-child(5) .fundo{background:linear-gradient(180deg,#CFC6B5 0%,var(--sombra-foto) 100%);animation-delay:2.0s}
.foto:nth-child(6) .fundo{background:linear-gradient(140deg,var(--mesa),var(--parede));animation-delay:2.35s}
.foto svg{position:absolute;inset:0;width:100%;height:100%}
.foto .peca{fill:var(--acento)}
.foto .peca-2{fill:#165337}
.foto .peca-3{fill:#34C784}
@keyframes cai{to{opacity:0;transform:scale(.96)}}
@keyframes progresso{to{transform:scaleX(1)}}
.lote-rodape{margin:14px 0 0;font-size:.92rem;color:var(--suave)}
@media (prefers-reduced-motion:reduce){
  .foto .fundo{animation:none;opacity:0}
  .trilho i{animation:none;transform:scaleX(1)}
}
@media (max-width:560px){
  .fotos{grid-template-columns:repeat(3,1fr)}
  .lote{padding:20px 16px}
}

.passos{margin:0;padding:0;list-style:none;counter-reset:passo;max-width:36em}
.passos li{position:relative;padding:0 0 14px 44px;counter-increment:passo}
.passos li::before{
  content:counter(passo);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;
  background:var(--acento);color:#fff;font-weight:600;display:flex;align-items:center;justify-content:center;font-size:.92rem;
}
.publico{margin:0;padding:0;list-style:none;max-width:38em}
.publico li{padding:10px 0;border-top:1px solid var(--borda)}
.publico li:last-child{border-bottom:1px solid var(--borda)}
.rede{max-width:38em}
.rede dl{margin:16px 0 0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px}
.rede dt{font-weight:600;white-space:nowrap}
.rede dd{margin:0;color:var(--suave)}
.precos{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:20px 0 10px;border-top:1px solid var(--borda);border-bottom:1px solid var(--borda)}
.preco{padding:22px 22px 22px 0}
.preco + .preco{border-left:1px solid var(--borda);padding-left:22px;padding-right:0}
.preco h3{margin:0 0 4px;font-size:1.05rem}
.preco .valor{display:block;font-size:2.2rem;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:0 0 2px;font-variant-numeric:tabular-nums}
.preco .cond{margin:0 0 12px;color:var(--suave)}
.preco ul{margin:0;padding-left:18px;font-size:.96rem}
.preco ul li{margin:0 0 6px}
.faq details{border-top:1px solid var(--borda);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--borda)}
.faq summary{cursor:pointer;padding:12px 28px 12px 0;font-weight:600;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:8px;font-size:1.4rem;font-weight:400;color:var(--acento);transition:transform 200ms var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 14px;max-width:38em}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}
@media (max-width:560px){
  .precos{grid-template-columns:1fr}
  .preco{padding:18px 0}
  .preco + .preco{border-left:0;border-top:1px solid var(--borda);padding-left:0}
}