/* Página Sites (/desenvolvimento/sites/). Só o que é desta página. A base vem do previa.css e do previa-servico.css. Prefixo st-.
   O que é novo: o miolo do bloco "Na prática" (.st-sites: três cartões de site, com a imagem do projeto, no desenho do cartão de case
   das páginas de setor) e a fileira "Também fizemos" (.st-outros, sobre o .auto-lista do serviço).
   Os três cartões com ficha (#o-que-entregamos) e as cinco etapas (#processo) são os da casa, sem regra nova.
   Rótulos em Fira Sans. Desenho do topo sem número, sem nome de cliente e sem tempo de carregamento. */

/* ---------- 1. topo ---------- */
@media (min-width:621px) and (max-width:980px){
  /* cartões estreitos: o valor desce para baixo do rótulo nas três telas, como no celular.
     Só a primeira linha: a segunda continua escondida nesta faixa, como nas outras páginas do modelo.
     A altura mínima iguala as três telas: a pílula é 2px mais alta que o valor em negrito */
  .st-topo .hero-fluxo .ui .linha:first-child{display:grid;justify-items:start;align-content:start;gap:4px;min-height:40px}
  .st-topo .hero-fluxo .ui .linha > b{text-align:left}
}
@media (min-width:981px) and (max-width:1060px){
  /* o primeiro e o terceiro cartão saíam da moldura pontilhada */
  .st-topo .hero-fluxo .ui:nth-child(1){transform:translateX(-8%)}
  .st-topo .hero-fluxo .ui:nth-child(5){transform:translateX(8%)}
}

/* ---------- 3. na prática (#projetos) ---------- */
/* o título fica em meia coluna e precisa ser menor */
.st-pratica .h2{font-size:clamp(1.8rem,2.6vw,2.5rem)}
/* três sites: imagem do projeto, etiqueta, cliente, frase e link. O cartão inteiro é o link para a página do projeto.
   Até 620px é o carrossel da casa: por isso a grade só existe de 621px para cima */
.st-sites{margin-top:40px}
.st-site{display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:var(--raio);background:var(--card);color:var(--card-fg);text-decoration:none;box-shadow:var(--sombra);transition:transform .18s ease}
.st-site-img{display:grid;place-items:center;aspect-ratio:16/10;padding:16px 16px 0;background:var(--papel);overflow:hidden}
.st-site-img picture{display:contents}
.st-site-img img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;mix-blend-mode:multiply;transition:transform .25s ease}
.st-site-corpo{display:flex;flex-direction:column;flex:1;gap:8px;padding:18px 20px 20px}
.st-site-corpo .tag{font-family:var(--fonte);font-size:13px;font-weight:600;line-height:1.35;color:var(--roxo)}
.st-site-corpo h3{font-size:1.3rem;line-height:1.2;color:var(--roxo-900);transition:color .15s ease}
.st-site-corpo p{font-size:14.5px;line-height:1.5;color:var(--tinta-2)}
.st-site-link{margin-top:auto;padding-top:8px;font-size:14.5px;font-weight:700;color:var(--roxo)}
.st-site-link::after{content:"→";display:inline-block;margin-left:.3em;transition:transform .15s ease}
.st-site:hover{transform:translateY(-3px)}
.st-site:hover h3{color:var(--roxo)}
.st-site:hover .st-site-link::after{transform:translateX(4px)}
.st-site:hover .st-site-img img{transform:scale(1.03)}
.st-site:focus-visible{outline:3px solid var(--oliva);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.st-site:hover,.st-site:hover .st-site-img img,.st-site:hover .st-site-link::after{transform:none}}
@media (min-width:621px){
  .st-sites{display:grid;gap:18px}
}
@media (min-width:621px) and (max-width:980px){
  /* tablet: um site por linha, a imagem à esquerda e o texto à direita */
  .st-site{flex-direction:row}
  .st-site-img{flex:0 0 44%;aspect-ratio:auto;min-height:100%;padding:16px}
  /* de lado, a imagem fica no meio da altura do cartão (em pé, ela encosta na base) */
  .st-site-img img{object-position:50% 50%}
}
@media (min-width:981px){
  .st-sites{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
}
/* também fizemos: um cartão curto para cada cliente, sobre o roxo (o cartão é o .auto-lista do serviço, em colunas) */
.st-pratica .sub-t{margin-top:44px}
.st-outros{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}
.st-outros li{display:flex;flex-direction:column}
.st-outros h4{margin:4px 0 0;font-size:1.15rem;font-weight:800;line-height:1.2;letter-spacing:-.01em;color:var(--titulo)}
.st-outros .st-ver{margin-top:auto;padding-top:14px;font-size:14.5px}

/* ---------- responsivo ---------- */
@media (max-width:1100px){
  .st-outros{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .st-sites{margin-top:28px}
  /* os outros sites viram o carrossel da casa (o .auto-lista do serviço é grade: aqui volta a ser fileira) */
  .st-outros.carrossel{display:flex;gap:12px}
}