/* Case Nespresso Presente (2018): peças próprias, carregadas só por _paginas/case-nespresso.html, depois do previa-case.css.
   Escrito do celular para cima (390, 621, 981). Nenhuma regra daqui vale para outra página: tudo fica sob .tela-voucher,
   .nv-telas, .percurso.nv-percurso e .pc-legenda .l-fora.

   1. B1: o cadastro do voucher num tablet (ilustração em CSS, sem dados), no estilo do Sales App da Technogym.
      Reaproveita .tela-app, .tablet, .sa, .sa-cab, .sa-corpo, .sa-pill, .sa-fim, .sa-fechar e .oculto do previa-case.css.
   2. B3: as telas reais de 2018 (imagem do portfólio, dados pessoais ocultos) ao lado do cabeçalho do caminho.
   3. B3: um quarto papel no percurso, "fora da plataforma" (a compra na loja), com anel tracejado, e a etapa neutra
      (confirmação e resgate: o case não diz quem fazia), com anel fino e sem rótulo de papel.
      O caminho não tem fases: a linha das fases do subgrid fica sem altura. */

/* ---------- 1. B1: cadastro do voucher (ilustração) ---------- */
.tela-voucher .selo-cliente img{height:18px}
.tela-voucher .sa-cab span{white-space:nowrap}
.tela-voucher .sa-corpo{gap:12px}
/* os quatro passos do cadastro da plataforma (máquina, dados pessoais, resumo e confirmação): a tela é o resumo */
.nv-passos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-bottom:10px;border-bottom:1px solid #ECEAE0}
.nv-passos li{position:relative;display:grid;justify-items:center;gap:4px;font-size:10.5px;font-weight:600;line-height:1.2;text-align:center;color:var(--tinta-2)}
.nv-passos li + li::before{content:"";position:absolute;top:10px;left:calc(-50% + 14px);right:calc(50% + 14px);height:2px;background:#E4E1D6}
.nv-passos li.feito + li::before,.nv-passos li.feito + li.ativo::before{background:var(--roxo)}
.nv-n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid #D9D6CB;background:#fff;font:700 11.5px/1 var(--fonte);font-variant-numeric:tabular-nums;color:var(--tinta-2)}
.nv-n .ico{width:12px;height:12px;stroke-width:2.6}
.nv-passos li.feito .nv-n{border-color:var(--roxo);background:var(--roxo);color:#fff}
.nv-passos li.ativo{color:var(--tinta)}
.nv-passos li.ativo .nv-n{border-color:var(--roxo-900);background:var(--roxo-900);color:#fff}
/* o resumo: rótulo em cima, valor oculto embaixo e, à direita, o sistema para onde o dado segue */
.nv-resumo{display:grid;gap:9px}
.nv-resumo li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;column-gap:8px;row-gap:5px}
.nv-resumo .ico{grid-row:span 2;width:16px;height:16px;color:var(--roxo)}
.nv-rot{font-size:11.5px;font-weight:600;color:var(--tinta-2)}
.nv-resumo .oculto{grid-column:2}
.nv-resumo .sa-pill{grid-column:3;grid-row:1 / span 2;font-size:10.5px}
.nv-resumo .sa-pill.vazio{visibility:hidden}  /* reserva a coluna do sistema na linha sem destino (número de série) */
/* pé da tela: o aviso do e-mail e o botão */
.tela-voucher .sa-fim{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding-top:10px;border-top:1px solid #ECEAE0}
.nv-email{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--tinta-2)}
.nv-email .ico{width:15px;height:15px;color:var(--roxo)}
.tela-voucher .sa-fechar{margin-left:auto}
@media (min-width:621px){
  /* a tela tem 4:3: o resumo ocupa a sobra do meio, com as linhas distribuídas (sem faixa branca vazia acima do pé) */
  .tela-voucher .sa-corpo{grid-template-rows:auto 1fr auto;align-content:stretch;gap:14px;padding:14px 18px}
  .nv-resumo{align-content:space-evenly}
  .nv-passos li{font-size:11px}
  .nv-rot{font-size:12px}
  .tela-voucher .sa-fim{align-self:end}
  /* 4:3 vira altura mínima: de 981 a 1179 a coluna do visual fica estreita e o resumo passa da altura 4:3.
     A tela cresce com o conteúdo em vez de cortar o pé (e-mail e botão). Sem container query, a altura segue o conteúdo */
  .tela-voucher{container-type:inline-size}
  .tela-voucher .tablet{display:grid;aspect-ratio:auto;min-height:75cqw}
  .tela-voucher .sa{height:auto}
}

/* ---------- 2. B3: as telas de 2018, ao lado do cabeçalho (no celular, logo abaixo do texto de apoio) ---------- */
.nv-telas{width:100%;max-width:560px;justify-self:center}
.nv-telas picture{display:block}
.nv-telas img{width:100%;height:auto;border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.22),0 24px 48px -24px rgba(0,0,0,.65)}
.nv-telas figcaption{margin-top:12px;font-size:13.5px;line-height:1.45;color:var(--fg2)}

/* ---------- 3. B3: percurso sem fases e com o papel "fora da plataforma" ---------- */
/* sem fase em nenhuma etapa: a linha 1 do subgrid não ocupa altura; a 2ª faixa mantém o respiro de cima */
@media (min-width:621px){
  .nv-percurso .pc-fase,.nv-percurso .pc-fase:empty{min-height:0;margin-bottom:0}
}
/* fora da plataforma: anel tracejado, sem preenchimento (a compra na loja) */
.nv-percurso .pc-passo.fora .pc-ic{background:transparent;color:var(--fg);border:2px dashed rgba(255,255,255,.7)}
.nv-percurso .pc-passo.fora .pc-sis{color:var(--fg2)}
.pc-legenda i.l-fora{background:transparent;border:1.5px dashed rgba(255,255,255,.85)}
/* etapa neutra (sem papel declarado): anel fino e contínuo, sem preenchimento; não entra na legenda */
.nv-percurso .pc-passo.neutro .pc-ic{background:transparent;color:var(--fg);border:1.5px solid rgba(255,255,255,.55)}