/* Bloco "a tela" (.tela-case): opcional no modelo de case, da mesma família do bloco do vídeo (previa-bloco-video.css).
   Mostra UMA tela real do que foi construído, numa janela de navegador, com um título curto e uma frase.
   Carregado depois do previa.css e do previa-case.css. Sem script. Escrito do celular para cima: base 390, depois 621 e 1180.
   Cores só pelas variáveis de superfície (--fg2, --titulo, --acento): serve em claro e em papel.
   A janela repete o desenho da .pj-janela (previa-projeto.css) e da .setor-janela (previa-setor.css), que não carregam no case.

   EM USO: case Jabuticaba, seção #loja (claro), entre "O caminho do cliente" (roxo) e "Resultados" (papel). Desde 07/10/2026.

   MARCAÇÃO
   <section class="sec sec-tela" id="…" data-surf="claro" aria-labelledby="t-…"><div class="caixa"><div class="tela-case">
     <div class="tc-cab"><span class="sobre">Rótulo <span class="tc-papel">construímos</span></span>
       <h2 class="h2" id="t-…">Frase.<br><span class="marca">Destaque.</span></h2></div>
     <div class="tc-texto"><p>Um parágrafo de até 40 palavras.</p></div>
     <figure class="tc-midia" aria-labelledby="leg-…"><div class="tc-janela">
       <span class="tc-barra" aria-hidden="true"><i></i><i></i><i></i><span>endereço do site</span></span>
       <picture>
         <source media="(max-width:1179px)" type="image/webp" srcset="…-painel.webp" width="…" height="…">
         <source media="(max-width:1179px)" srcset="…-painel.png" width="…" height="…">
         <source type="image/webp" srcset="….webp" width="…" height="…">
         <img src="….png" width="…" height="…" loading="lazy" decoding="async" alt="O que a tela mostra">
       </picture></div>
       <figcaption class="sr" id="leg-…">Legenda só para leitor de tela.</figcaption></figure>
   </div></div></section>
   A pílula .tc-papel é opcional e leva o papel da Olivas em minúsculas ("construímos", "operamos", "integramos").

   IMAGENS: dois recortes do mesmo print, sem retoque e sem ampliar. O print não pode trazer dado pessoal.
   Largo (1180 para cima): a página com o painel que interessa. Painel (até 1179): só o painel, porque numa janela estreita
   o print largo ficaria com letra pequena demais. Nenhum texto ou campo pode ficar cortado na borda do recorte.
   Medidas da Jabuticaba: largo de 1087 × 446 e painel de 467 × 422, tirados do original de 1651 × 651
   (assets-marca/clientes/originais/jabuticaba-pagamento-2026.png). A opção "VA ou VR" tem letra de 16 px no original:
   aparece com cerca de 11 px a 1366, 14 px a 1024, 12,5 px a 768 e 12 px a 390.

   LARGURAS
   Até 620: título, frase e janela, um embaixo do outro. A janela para em 400 px de largura.
   De 621 a 767: o título na linha toda; embaixo, a frase à esquerda e a janela do painel à direita.
   De 768 a 1179: texto à esquerda (título e frase) e a janela do painel à direita (até 400 px).
   De 1180 para cima: texto à esquerda e a janela do print largo à direita.

   ALTURAS MEDIDAS da seção (07/10/2026): 449 px a 1366, 480 a 1024, 430 a 768 e 665 a 390. */

/* ---------- seção de apoio: mais baixa que as outras (mesma medida do .sec-video e do .sec-mais) ----------
   O H2 é menor que o do bloco do vídeo (para em 1,7rem, não em 2,1rem): a 1366 cada frase do título cabe numa linha da coluna
   de texto (332 px). Com 2,1rem o título partia em quatro linhas e a segunda frase deixava "Ao lado" sozinho.
   Título novo com frase de mais de 27 letras: conferir a 1366, a 1180 e a 768 se continua em duas linhas.
   O min(7.4vw, …) só age abaixo de 335 px: a 320 a segunda frase não cabia por 2 px e deixava "Ao lado" sozinho */
.pg-case .sec.sec-tela{padding-block:clamp(36px,4.5vw,56px)}
.sec-tela .h2{font-size:min(7.4vw,clamp(1.55rem,2vw,1.7rem))}

/* ---------- base (celular) ---------- */
.tela-case{display:grid;grid-template-columns:minmax(0,1fr);row-gap:16px;min-width:0}
.tc-cab,.tc-texto,.tc-midia{min-width:0;margin:0}
.tc-cab .sobre{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:10px}
/* pílula do papel: a mesma do "construímos" da loja nos dois motores (.mt-papel.nosso), em minúsculas */
.tc-papel{padding:2px 8px;border:1px solid var(--oliva);border-radius:999px;background:var(--oliva);color:var(--roxo-900);font:600 12px/1.3 var(--fonte);letter-spacing:0;text-transform:none}
.tc-texto p{font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.55;color:var(--fg2);max-width:58ch}

/* janela de navegador: barra de 26 px com três pontos e o endereço; a tela entra inteira, sem corte por CSS.
   Até 1179 a janela para em 400 px: o recorte do painel (467 px) nunca é ampliado e a janela não fica mais alta que o texto pede */
.tc-midia{position:relative;width:100%;max-width:400px}
.tc-janela{overflow:hidden;border:1px solid #E3E1D6;border-radius:12px;background:#fff;box-shadow:0 14px 32px -20px rgba(42,8,40,.4),0 2px 6px rgba(42,8,40,.06)}
.tc-barra{display:flex;align-items:center;gap:6px;height:26px;padding:0 12px;border-bottom:1px solid #E3E1D6;background:#F3F1EC}
.tc-barra i{width:8px;height:8px;flex:none;border-radius:50%;background:#D5D2C6}
.tc-barra span{min-width:0;margin-left:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 11.5px var(--fonte);color:#6E6C63}
.tc-janela picture{display:block}
.tc-janela img{display:block;width:100%;height:auto}

/* ---------- 621+: texto à esquerda (título em cima, frase embaixo, centrados na altura da janela) e a janela à direita ---------- */
@media (min-width:621px){
  .tela-case{grid-template-columns:minmax(0,1fr) minmax(0,min(52%,400px));column-gap:clamp(24px,4.5vw,56px);row-gap:0}
  .tc-cab{grid-column:1;grid-row:1;align-self:end}
  .tc-texto{grid-column:1;grid-row:2;align-self:start;margin-top:16px}
  .tc-midia{grid-column:2;grid-row:1 / span 2;align-self:center}
}

/* ---------- 621 a 767: a coluna de texto é estreita demais para o título (partia em três ou quatro linhas, com "Ao lado" sozinho).
   O título passa para a linha toda; embaixo ficam a frase, centrada na altura da janela, e a janela ---------- */
@media (min-width:621px) and (max-width:767px){
  .tela-case{row-gap:16px}
  .tc-cab{grid-column:1 / -1}
  .tc-texto{align-self:center;margin-top:0}
  .tc-midia{grid-row:2}
}

/* ---------- 1180+: entra o print largo; a janela fica com a maior parte da linha e nunca passa da largura do print (1087 px mais a borda) ---------- */
@media (min-width:1180px){
  .tela-case{grid-template-columns:minmax(0,.44fr) minmax(0,1fr)}
  .tc-midia{max-width:1089px}
}

@media print{.tc-janela{box-shadow:none}}