/* Página Aplicativos (/desenvolvimento/aplicativo-para-ios-e-android/). Só o que é desta página. A base vem do previa.css e do previa-servico.css. Prefixo ap-.
   O que é novo: o vídeo ao lado da lista no bloco "Na prática" (.ap-guia, .ap-video), a ficha com três dados (.ap-ficha)
   os três cartões de "Mais aplicativos" (.ap-apps, .ap-app, .ap-mini) e os dois trabalhos anteriores (.ap-antes).
   Rótulos em Fira Sans. Ilustrações sem número, sem nome de pessoa e sem logo. */

/* ---------- 1. topo ---------- */
/* duas telas reais do Motul Expert, lado a lado; a segunda desce um pouco. A legenda fica visível, como nas telas dos setores */
.ap-telas{margin:0;min-width:0;width:100%;max-width:470px;justify-self:center}
.ap-telas-par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,20px);align-items:start}
.ap-telas-par picture{display:block}
.ap-telas-par picture + picture{margin-top:12%}
.ap-telas-par img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 22px 40px -22px rgba(42,8,40,.55),0 2px 8px rgba(42,8,40,.12)}
.ap-telas figcaption{margin-top:12px;font-size:14px;line-height:1.45;color:var(--fg2)}
@media (min-width:981px){.ap-telas{justify-self:end}}
@media (max-width:980px){.ap-telas{max-width:400px;justify-self:start}}

/* ---------- 3. na prática (#motul-expert) ---------- */
/* o título fica em meia coluna e precisa ser menor */
.ap-pratica .h2{font-size:clamp(1.8rem,2.6vw,2.5rem)}
/* o vídeo à esquerda e a lista à direita. As colunas e o vão são os do cabeçalho do bloco (.pratica-top: 1.1fr, .9fr e 40px),
   para a lista começar na mesma linha vertical do texto de apoio */
.ap-guia{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;margin-top:44px}
/* o vídeo do Motul Expert: o cartão de vídeo da casa (previa-bloco-video.css, versão compacta, a mesma do setor de indústria).
   Lá ele mora dentro de um cartão de case, que dá o canto arredondado; aqui a moldura é desta página */
.ap-video{align-self:center;border-radius:var(--raio);overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.18),var(--sombra)}
/* ficha da Motul: três dados curtos. Sem a sobra embaixo (a lista trazia a margem padrão do navegador) */
.ap-ficha.ficha{padding-bottom:12px}
.ap-ficha .tg-dados{margin-bottom:0}

/* ---------- 4. mais aplicativos (#exemplos): três cartões em fundo papel sobre a seção clara ---------- */
.ap-apps{margin-top:44px}
/* a grade só vale fora do celular: até 620px a fileira é o carrossel da casa (.carrossel, em flex), e esta folha vem depois do previa.css */
@media (min-width:621px){
  .ap-apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
}
/* os cartões partilham as cinco linhas (tela, etiqueta, título, texto e link), para os títulos e os links ficarem alinhados */
.ap-app{display:grid;grid-row:span 5;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);row-gap:10px;align-content:start;padding:14px 14px 24px;border-radius:var(--raio);border:1px solid var(--linha);background:var(--chip)}
.ap-app > :not(.ap-mini){margin-inline:8px}
.ap-app .tag{margin-top:8px;font-family:var(--fonte);font-size:13px;font-weight:600;letter-spacing:0;color:var(--acento)}
.ap-app h3{font-size:1.25rem;line-height:1.22;letter-spacing:-.01em;color:var(--titulo)}
.ap-app > p{font-size:15px;line-height:1.5;color:var(--fg2)}
.ap-app .link-seta{justify-self:start;align-self:end;margin-top:4px;font-size:15px}
/* tela ilustrada: o cartão .ui da casa numa moldura branca. As três telas têm a mesma altura (a da mais alta) */
.ap-mini{display:grid;align-items:stretch;padding:16px;border-radius:10px;background:var(--branco)}
.ap-mini .ui{position:relative;left:auto;right:auto;top:auto;bottom:auto;display:flex;flex-direction:column;width:100%;max-width:none;font-size:12.5px;box-shadow:0 12px 26px -16px rgba(42,8,40,.45),0 1px 3px rgba(42,8,40,.08)}
.ap-mini .ui header{flex:none}
.ap-mini .ui .corpo{flex:1;align-content:space-between;gap:8px}
/* tela real (Rede Vida): o celular aparece pela metade, de cima para baixo, sem mudar a altura da moldura (quem dá a altura são as outras duas telas) */
.ap-mini.ap-foto{position:relative;overflow:hidden;min-height:168px;padding:0}
.ap-mini.ap-foto img{position:absolute;left:50%;top:16px;width:min(52%,172px);height:auto;transform:translateX(-50%)}
/* trabalhos anteriores: dois textos lado a lado, sem imagem, com o fio oliva das listas "também" da casa */
.ap-antes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;margin-top:14px}
.ap-antes li{padding-top:14px;border-top:2px solid var(--oliva-esc)}
.ap-antes b{display:block;font-size:16px;line-height:1.3;color:var(--titulo)}
.ap-antes p{margin-top:5px;font-size:15px;line-height:1.5;color:var(--fg2)}

/* ---------- responsivo ---------- */
@media (max-width:980px){
  .ap-guia{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; aqui são três dados curtos, que cabem numa linha só */
  .ap-ficha .tg-dados{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px}
  /* os três cartões empilham; em cada um, a tela fica à esquerda e o texto à direita */
  .ap-apps{grid-template-columns:minmax(0,1fr)}
  .ap-app{grid-row:auto;grid-template-rows:auto auto auto 1fr;grid-template-columns:minmax(0,250px) minmax(0,1fr);column-gap:14px;row-gap:8px;padding:14px 20px 14px 14px}
  .ap-app > .ap-mini{grid-column:1;grid-row:1 / span 4}
  .ap-app > :not(.ap-mini){grid-column:2;margin-inline:0}
  .ap-app .link-seta{align-self:start;margin-bottom:10px}
}
@media (max-width:620px){
  .ap-antes{grid-template-columns:minmax(0,1fr);row-gap:18px}
  /* no carrossel os cartões saem da grade: a tela fica no alto e o link encosta no pé */
  .ap-app{grid-template-rows:auto auto auto 1fr auto}
}