/* Página Sistemas sob medida (/desenvolvimento/sistemas-sob-medida/). Só o que é desta página.
   A base vem do previa.css e do previa-servico.css (topo, sinais, ficha do cliente, processo, perguntas, para continuar);
   os dois painéis de "mais sistemas" vêm do previa-dados.css (.dd-painel). Tudo o que é novo leva o prefixo ssm-.
   Blocos novos: .ssm-face (cartão com uma tela do Sales App, etiqueta, título e texto), .ssm-regras (quadro de regras dentro do .dd-painel)
   e .ssm-tambem (três linhas de outros sistemas). Rótulos em Fira Sans, sem fonte de código. Telas sem número e sem nome de pessoa. */

/* ---------- 1. topo ---------- */
/* atalhos "Nesta página" (o mínimo que a ficha do modelo pede para a folha da página) */
.ssm-topo .ja-integramos .nomes a{text-decoration-thickness:1px;text-underline-offset:3px}
.ssm-topo .ja-integramos .nomes a:hover{text-decoration-thickness:2px;text-decoration-color:var(--acento)}
@media (min-width:981px) and (max-width:1060px){
  /* o primeiro e o terceiro cartão saíam da moldura pontilhada */
  .ssm-topo .hero-fluxo .ui:nth-child(1){transform:translateX(-8%)}
  .ssm-topo .hero-fluxo .ui:nth-child(5){transform:translateX(8%)}
}
@media (max-width:980px){
  /* atalhos são navegação: 44px de altura para o dedo */
  .ssm-topo .ja-integramos > b{margin-bottom:0}
  .ssm-topo .ja-integramos .nomes a{display:inline-block;padding-block:13px}
}
@media (min-width:621px) and (max-width:719px){
  /* cartões estreitos: no cartão do meio, rótulo e valor não cabem lado a lado. O valor fica embaixo do rótulo nos três,
     para os três cartões terem a mesma altura (antes só o do meio quebrava e ficava mais alto que os vizinhos) */
  .ssm-topo .hero-fluxo .ui .linha{flex-direction:column;align-items:flex-start;gap:2px}
  .ssm-topo .hero-fluxo .ui .linha > b{text-align:left}
}

/* ---------- 3. na prática (#sales-app): o Sales App por dentro, em três cartões claros sobre o roxo ---------- */
/* o título fica em meia coluna e precisa ser menor (o mínimo da folha da página) */
.ssm-pratica .h2{font-size:clamp(1.8rem,2.6vw,2.5rem)}
.ssm-ico{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ssm-ilus{margin-top:44px;font-size:14px;color:var(--fg2)}
.ssm-faces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:14px}
/* dentro do cartão as cores voltam a ser as de fundo claro (na seção roxa o destaque é oliva, que não serve de texto no branco) */
.ssm-face{--acento:var(--roxo);--fg:var(--tinta);--fg2:var(--tinta-2);--titulo:var(--tinta);--linha:#ECEAE0;
  display:grid;grid-row:span 4;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);row-gap:8px;align-content:start;padding:14px 14px 24px;border-radius:var(--raio);background:var(--card);color:var(--card-fg);box-shadow:var(--sombra)}
.ssm-face > :not(.ssm-tela){margin-inline:8px}
.ssm-face .tag{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-family:var(--fonte);font-size:13px;font-weight:600;letter-spacing:0;color:var(--roxo)}
.ssm-face h3{font-size:1.25rem;line-height:1.22;letter-spacing:-.01em;color:var(--roxo-900)}
/* o título tem duas metades: cada uma fica inteira na sua linha, e só quebra por dentro se o cartão for mais estreito que ela */
.ssm-face h3 > span{display:inline-block}
.ssm-face > p:not(.tag){font-size:15px;line-height:1.5;color:var(--tinta-2)}

/* tela ilustrada: o cartão .ui da casa numa moldura de papel. As três telas têm a mesma altura (a da mais alta):
   os cabeçalhos ficam na mesma linha, e o que sobra em cada tela é repartido entre as linhas dela */
.ssm-tela{display:grid;align-items:stretch;min-height:196px;padding:16px;border-radius:10px;background:var(--papel)}
.ssm-tela .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)}
.ssm-tela .ui header{flex:none;background:var(--roxo-900)}
.ssm-tela .ui .corpo{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:7px}
/* tela 1: os dois fluxos e, embaixo, o que fica à vista no pedido. As quatro etapas ficam em duas linhas de duas, em qualquer largura
   (soltas, cabiam três numa linha e "Instalação" sobrava sozinha na de baixo) */
.ssm-trilha{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:3px;padding-top:9px;border-top:1px solid #ECEAE0}
.ssm-trilha li{position:relative;padding:2px 8px 2px 19px;border-radius:999px;background:var(--roxo-claro);font-size:11px;font-weight:600;line-height:1.5;color:var(--roxo-900);white-space:nowrap}
.ssm-trilha li::before{content:"";position:absolute;left:8px;top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:var(--roxo)}
/* tela 2: cada perfil vê uma parte (quadros cheios e vazios, sem dizer o quê) */
.ssm-perfis p{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;column-gap:8px;margin:0;color:var(--tinta)}
.ssm-perfis p + p{padding-top:7px;border-top:1px solid #ECEAE0}
.ssm-perfis .ssm-perfis-cab{grid-template-columns:minmax(0,1fr) auto;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;color:var(--tinta-2)}
.ssm-perfis b{font-weight:600}
.ssm-av{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--roxo-claro);color:var(--roxo)}
.ssm-av .ssm-ico{width:14px;height:14px}
.ssm-ve{display:flex;gap:4px}
.ssm-ve i{width:16px;height:11px;border-radius:3px;background:repeating-linear-gradient(90deg,#E4E1D6 0 4px,#EEECE4 4px 8px)}
.ssm-ve i.s{background:var(--roxo)}
/* tela 3: os seis sistemas em fichas e o BI numa linha, com barras sem valor */
.ssm-chips{display:flex;flex-wrap:wrap;gap:5px}
.ssm-chips li{padding:3px 8px;border:1px solid #E3E1D6;border-radius:7px;background:#fff;font-size:11.5px;font-weight:600;line-height:1.4;color:var(--tinta);white-space:nowrap}
/* a linha do BI ocupa o que sobra da tela: as barras crescem com ela, em vez de sobrar um vazio no meio */
.ssm-tela .ssm-bi{flex:1;min-height:34px;margin-top:3px;padding-top:9px;border-top:1px solid #ECEAE0;align-items:flex-end;font-weight:700;color:var(--tinta)}
.ssm-barras{display:flex;align-items:flex-end;align-self:stretch;gap:4px;width:58%;min-height:24px;border-bottom:1px solid #DFDCCF}
.ssm-barras i{flex:1;height:var(--h);border-radius:2px 2px 0 0;background:var(--roxo)}
.ssm-barras i:nth-child(3n){background:var(--oliva-esc)}
.ssm-pratica .tg-base{margin-top:18px}
/* a ficha sem a sobra embaixo: a lista trazia a margem padrão do navegador (14,5px), e o pé ficava com o dobro do respiro do alto.
   É o mesmo acerto da ficha de WhatsApp e atendimento (conferência da onda, 08/10/2026) */
.ssm-pratica .tg-ficha{padding-bottom:12px}
.ssm-pratica .tg-ficha .tg-dados{margin-bottom:0}
.ssm-pratica .fecho{margin-top:32px}

/* ---------- 4. mais sistemas (#exemplos): os dois painéis de previa-dados.css, com um quadro de regras no lugar da mini tela ---------- */
/* o quadro vai até a base do cartão, na linha do link: o que sobra de altura é repartido por igual entre as três regras */
.ssm-exemplos .dd-painel > .ssm-regras{align-self:stretch;display:flex;flex-direction:column}
.ssm-regras dl{flex:1;display:flex;flex-direction:column;margin:0;padding:2px 12px 6px}
.ssm-regras dl > div{flex:1 1 auto;padding:8px 0;border-top:1px solid #ECEAE0}
.ssm-regras dl > div:first-child{border-top:0}
.ssm-regras dt{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.3;color:var(--roxo)}
.ssm-regras dd{margin:2px 0 0;font-size:13px;font-weight:600;line-height:1.35;color:var(--tinta)}
/* três linhas de outros sistemas, sem cartão: nome do tipo em cima, uma frase embaixo */
.ssm-exemplos .sub-t{margin-top:44px}
.ssm-tambem{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:36px;margin-top:14px}
.ssm-tambem li{padding-top:14px;border-top:2px solid var(--oliva-esc)}
.ssm-tambem b{display:block;font-size:16px;line-height:1.3;color:var(--titulo)}
.ssm-tambem p{margin-top:5px;font-size:15px;line-height:1.5;color:var(--fg2)}
.ssm-exemplos .caminhos-pe{margin-top:30px}

/* ---------- responsivo ---------- */
@media (min-width:981px) and (max-width:1180px){
  /* nesta faixa os dois painéis ficam lado a lado com o quadro em cima e o texto embaixo (previa-dados.css). Os quadros têm alturas diferentes:
     as linhas são partilhadas entre os dois, para a etiqueta e o título começarem na mesma altura */
  .ssm-exemplos .dd-painel{grid-row:span 2;grid-template-rows:subgrid}
  /* o quadro de regras é texto, e não uma mini tela: ocupa a largura do cartão (com os 300px da mini tela sobrava um vazio à direita dele) */
  .ssm-exemplos .dd-painel > .ssm-regras{max-width:none}
}
@media (min-width:621px) and (max-width:980px){
  /* tablet: um cartão por linha, a tela à esquerda e o texto à direita */
  .ssm-faces{grid-template-columns:minmax(0,1fr);gap:14px}
  .ssm-face{grid-row:auto;grid-template-rows:auto auto 1fr;grid-template-columns:minmax(0,280px) minmax(0,1fr);column-gap:14px;padding:16px 16px 18px}
  .ssm-face > .ssm-tela{grid-column:1;grid-row:1 / span 3;align-self:start;min-height:176px}
  .ssm-face > :not(.ssm-tela){grid-column:2}
  .ssm-face .tag{margin-top:4px}
  /* a ficha tem três dados e, nesta faixa, duas colunas: o terceiro ocupa a linha toda, para não sobrar uma casa vazia */
  .ssm-pratica .tg-ficha .tg-dados > div:last-child{grid-column:1 / -1}
}
@media (max-width:980px){
  /* uma coluna: o fio de cima vai até a borda, como os painéis; só o texto tem largura de leitura */
  .ssm-tambem{grid-template-columns:minmax(0,1fr);row-gap:18px}
  .ssm-tambem p{max-width:66ch}
}
@media (max-width:620px){
  .ssm-ilus{margin-top:30px}
  /* os três cartões viram o carrossel da casa (um no centro e um pedaço dos vizinhos); o texto encosta no alto e os cartões têm a mesma altura */
  .ssm-faces.carrossel{display:flex}
  .ssm-faces.carrossel > .ssm-face{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px 12px 22px}
  .ssm-face > :not(.ssm-tela){margin-inline:6px}
  .ssm-face .tag{align-self:flex-start;margin-top:6px}
  /* a moldura tem a altura da tela mais alta (a dos perfis): nos três cartões o texto começa na mesma linha */
  .ssm-tela{min-height:210px;padding:12px}
  /* carrossel em seção clara: o cartão branco sobre o fundo branco sumia e não avisava que há outro ao lado (mesma borda dos outros carrosséis claros) */
  .ssm-exemplos .dd-paineis.carrossel > .dd-painel{border:1px solid #CFCBBD}
  .ssm-exemplos .dd-paineis.carrossel.js > *:not(.no-centro){opacity:.8}
  .ssm-exemplos .sub-t{margin-top:34px}
}
@media (max-width:339px){
  /* celular estreito: cada metade do título do cartão volta a caber numa linha */
  .ssm-face h3{font-size:1.1rem}
}