/* Case padrão: o nível mais simples do modelo de case (_docs/case-modelo.md, 2.2), para os cases antigos que entram pelo WordPress.
   Carregada depois do previa.css e do previa-case.css. Amostra: _paginas/case-padrao.html (Embrapii). Ficha: _docs/paginas/case-padrao-fatos.md.
   Só classes novas, com o prefixo cp-. Nenhuma regra daqui alcança case.html, case-jabuticaba.html nem os outros cases:
   todas dependem de uma classe cp-, que só a página do case padrão usa. As peças são as do previa-case.css (topo, resumo, ficha,
   frentes, pílulas de "Outros cases" e o cartão do botão); aqui fica só o que o nível padrão pede a mais. */

/* ---------- B1: imagem de portfólio que ainda não foi recortada ----------
   O recorte é feito na tela: a moldura (picture.cp-recorte) tem a proporção do trecho que fica à vista e a imagem, maior que ela,
   é deslocada. As quatro medidas vão no style do <picture>: --cp-prop (largura/altura do trecho), --cp-w (largura da imagem em %
   da moldura), --cp-x e --cp-y (deslocamento em % da moldura). Na publicação, o arquivo sobe já recortado e esta classe sai. */
.vitrine-real > picture.cp-recorte{position:relative;overflow:hidden;aspect-ratio:var(--cp-prop,16/10)}
.vitrine-real > picture.cp-recorte > img{position:absolute;left:var(--cp-x,0);top:var(--cp-y,0);width:var(--cp-w,100%);max-width:none;height:auto}
/* logo com faixa vazia embaixo (embrapii.png: a marca ocupa os 48 px de cima de um arquivo de 71): no selo, só a parte de cima.
   Na publicação, o logo sobe sem a sobra e esta classe sai. */
.selo-cliente.cp-selo-corta img{width:84px;height:23px;object-fit:cover;object-position:50% 0}

/* ---------- B1 sem imagem, com logo (visual "logo", a reserva do modelo): o logo no meio do cartão ----------
   O .visual-logo do previa-case.css alinha o logo à esquerda, porque previa uma legenda embaixo; no nível padrão não há legenda. */
.visual-logo.cp-logo{justify-items:center;padding-block:40px}
.visual-logo.cp-logo img{height:auto;max-height:64px;max-width:min(100%,240px)}

/* ---------- B1 sem imagem e sem logo: o texto ocupa a largura toda, numa coluna ---------- */
@media (min-width:981px){
  .case-topo.cp-so-texto .caixa{grid-template-columns:minmax(0,1fr)}
  .case-topo.cp-so-texto .case-texto{max-width:54rem}
}

/* ---------- B2: linha do resumo com mais de um parágrafo (o texto antigo vem em parágrafos) ---------- */
.cp-resumo dd > p + p{margin-top:.6em}

/* ---------- B3 "frentes": três cartões entre 621 e 980 px ----------
   Nessa faixa a grade tem duas colunas: o cartão que sobra sozinho na última linha ocupa a linha inteira. */
@media (min-width:621px) and (max-width:980px){
  .cp-frentes > .frente:last-child:nth-child(odd){grid-column:1 / -1}
}
/* um cartão só: não estica na largura toda do computador */
@media (min-width:981px){.cp-frentes > .frente:only-child{max-width:44rem}}

/* ---------- B8 sem perguntas: "Outros cases" à esquerda e o cartão do botão à direita ----------
   As pílulas vêm logo depois do título (sem o rótulo "Outros cases", que o título já diz) e sem o fio de cima do .faq-leia,
   que só separa as pílulas das perguntas. */
.cp-fim .cp-outros .chips-case{margin-top:24px}
/* bloco curto: título menor que o das outras seções, como já era no bloco curto "Mais do cliente" (.sec-mais) */
.cp-fim .h2{font-size:clamp(1.55rem,2.4vw,2.1rem)}

/* campo opcional "Hoje": uma frase sobre o que a Olivas faz hoje para o cliente, só em case antigo de cliente atual */
.cp-hoje{margin-top:14px;padding-left:12px;border-left:3px solid var(--oliva-esc);font-size:1rem;line-height:1.5;color:var(--titulo);max-width:56ch}