/* Página E-commerce, a construção da loja (/desenvolvimento/e-commerce/). Só o que é desta página. A base vem do previa.css e do previa-servico.css. Prefixo ec-.
   O que é novo: o miolo do bloco "Na prática" (.ec-caso: o mockup da loja ao lado da tela de pagamento e, embaixo, o que mudou no pagamento;
   a janela da tela é a do case Jabuticaba, de previa-bloco-tela.css),
   os dois cartões de loja construída (.ec-lojas) e o depoimento em fundo papel (.ec-depo).
   Rótulos em Fira Sans. Desenho sem número, sem nome de pessoa e sem selo. Nenhum valor em reais. */

/* ---------- 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 */
  .ec-topo .hero-fluxo .ui .linha:first-child{display:grid;justify-items:start;align-content:start;gap:4px;min-height:40px}
  .ec-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 */
  .ec-topo .hero-fluxo .ui:nth-child(1){transform:translateX(-8%)}
  .ec-topo .hero-fluxo .ui:nth-child(5){transform:translateX(8%)}
}

/* ---------- 3. na prática (#na-pratica) ---------- */
/* o título fica em meia coluna e precisa ser menor */
.ec-pratica .h2{font-size:clamp(1.8rem,2.6vw,2.5rem)}
/* o mockup à esquerda, a tela de pagamento à direita e, embaixo, o que mudou.
   As colunas e o vão são os do cabeçalho do bloco (.pratica-top: 1.1fr, .9fr e 40px), para a tela começar na mesma linha vertical do texto de apoio */
.ec-caso{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;margin-top:44px}
/* o mockup tem fundo transparente e sombra embutida: fica num painel claro, como no cartão do case da página de setor */
.ec-vitrine{margin:0;padding:18px 18px 6px;border-radius:var(--raio);background:var(--papel);overflow:hidden}
.ec-vitrine picture{display:block}
.ec-vitrine img{display:block;width:100%;height:auto}
.ec-caso h3{font-size:1.2rem;color:var(--titulo)}
.ec-feito{margin-top:14px;border-top:1px solid var(--linha)}
.ec-feito li{padding:14px 0;border-bottom:1px solid var(--linha);color:var(--fg2);font-size:15.5px;line-height:1.5}
.ec-feito b{display:block;color:var(--titulo)}
/* a tela de pagamento, na janela de navegador do case (previa-bloco-tela.css). Aquela folha põe a janela na coluna 2, em duas linhas da grade do case,
   e limita a largura a 400px. Aqui ela fica na sua casa da grade, centrada, e nunca passa da largura do recorte (467px mais a borda): a tela não é ampliada */
.ec-caso .tc-midia{grid-column:auto;grid-row:auto;justify-self:center;align-self:center;max-width:469px}
/* o que mudou: abaixo das duas imagens, na linha toda */
.ec-mudou{grid-column:1 / -1}
@media (min-width:761px){
  /* três fatos lado a lado, cada um com o seu fio em cima (como os dados da ficha logo abaixo) */
  .ec-feito{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px;border-top:0}
  .ec-feito li{padding:14px 0 0;border-top:1px solid var(--linha);border-bottom:0}
}
/* a ficha tem uma linha só de dados: sem a sobra embaixo (a lista trazia a margem padrão do navegador) */
.ec-pratica .ficha{padding-bottom:12px}
.ec-pratica .tg-dados{margin-bottom:0}

/* ---------- 5. outras lojas (#lojas) ---------- */
/* dois cartões iguais: a tela em cima, o texto embaixo e o link no pé */
.ec-lojas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:34px}
.ec-loja{display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:var(--raio);border:1px solid var(--linha);background:var(--branco)}
/* o quadro da tela tem a proporção do mockup (16 por 10). A imagem é presa ao quadro para caber inteira, encostada na base:
   com altura em porcentagem dentro da grade ela saía maior que o quadro e o celular do mockup ficava cortado */
.ec-loja-img{position:relative;aspect-ratio:16/10;border-bottom:1px solid var(--linha);background:var(--papel);overflow:hidden}
.ec-loja-img picture{display:contents}
.ec-loja-img img{position:absolute;left:12px;top:12px;width:calc(100% - 24px);height:calc(100% - 12px);object-fit:contain;object-position:50% 100%}
/* cartão sem imagem pública: uma tela desenhada. O cartão .ui nasce solto (posição absoluta e 37% de largura): aqui ele fica no centro do quadro */
.ec-loja-desenho{display:grid;place-items:center;padding:16px}
.ec-loja-desenho .ui{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:min(78%,300px);max-width:none;font-size:14px}
.ec-loja-desenho .ui header{padding:10px 14px;font-size:14px}
.ec-loja-desenho .ui .corpo{padding:12px 14px 14px;gap:8px}
.ec-loja-corpo{display:flex;flex-direction:column;flex:1;gap:8px;padding:20px 22px 24px}
.ec-loja .tag{font-size:13px;font-weight:600;color:var(--acento)}
.ec-loja h3{font-size:1.3rem;line-height:1.2;color:var(--titulo)}
.ec-loja p{font-size:15px;color:var(--fg2)}
.ec-loja .link-seta{align-self:flex-start;margin-top:auto}
.ec-loja-corpo > p{margin-bottom:10px}
/* depoimento do case: a foto à esquerda, a fala e o nome à direita (o cartão da casa, .depo-assume, põe os três em fila).
   No papel, o cartão ficava da cor do fundo */
.ec-depo{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;align-items:start;margin-top:18px;background:var(--branco)}
.ec-depo img{grid-row:1 / span 2}
.ec-depo blockquote,.ec-depo figcaption{grid-column:2}

/* ---------- responsivo ---------- */
@media (max-width:980px){
  .ec-caso{grid-template-columns:minmax(0,1fr);gap:28px}
}
@media (min-width:621px) and (max-width:980px){
  /* a ficha da casa cai para duas colunas no tablet: com três dados, o último ocupa a linha inteira */
  .ec-pratica .tg-ficha .tg-dados > div:last-child{grid-column:1 / -1}
}
@media (max-width:760px){
  .ec-lojas{grid-template-columns:minmax(0,1fr);gap:12px}
}
@media (max-width:620px){
  .ec-vitrine{padding:12px 12px 4px}
  .ec-loja-corpo{padding:18px 18px 22px}
  .ec-depo{grid-template-columns:48px minmax(0,1fr);column-gap:12px}
  .ec-depo img{width:48px;height:48px}
}