/* Página CRM e processo comercial (/crm-e-processo-comercial/). Só o que é desta página. A base vem do previa.css e do previa-servico.css. Prefixo crm-.
   Blocos novos: .crm-caso (o exemplo da ToLife: texto e, ao lado, dois funis ligados), .crm-apoio (exemplo curto, em cartão sobre o roxo)
   e os complementos das duas listas (.crm-papel, .crm-prova). Rótulos em Fira Sans. Ilustrações sem número e sem nome de pessoa ou de empresa. */

/* ---------- 1. topo ---------- */
/* atalhos "Nesta página" */
.crm-topo .ja-integramos .nomes a{text-decoration-thickness:1px;text-underline-offset:3px}
.crm-topo .ja-integramos .nomes a:hover{text-decoration-thickness:2px;text-decoration-color:var(--acento)}
/* tela da pré-venda (no topo e no exemplo da ToLife): cabeçalho escuro; as seis cores do previa.css já têm dono */
.crm-ui-pre header{background:var(--roxo-900)}
@media (min-width:621px) and (max-width:980px){
  /* cartões estreitos: quando rótulo e valor não cabem lado a lado, o valor desce para a linha de baixo (nada é cortado) */
  .crm-topo .hero-fluxo .ui .linha{flex-wrap:wrap;row-gap:3px}
  .crm-topo .hero-fluxo .ui .linha > b{text-align:left}
  /* a segunda ligação leva uma palavra mais comprida ("qualificado"): a coluna dela ganha largura */
  .crm-topo .hero-fluxo ol{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr) 96px minmax(0,1fr)}
}
@media (min-width:621px) and (max-width:767px){
  /* cartões ainda mais estreitos: nas três telas o valor fica embaixo do rótulo, como no celular (só em duas ele descia, e as telas ficavam com alturas diferentes).
     Só a primeira linha: a segunda continua escondida nesta faixa, como manda o previa-servico.css (com "display" em todas, ela voltava a aparecer) */
  .crm-topo .hero-fluxo .ui .linha:first-child{display:grid;justify-items:start;gap:4px}
}
@media (min-width:981px) and (max-width:1060px){
  /* o primeiro e o terceiro cartão saíam da moldura pontilhada */
  .crm-topo .hero-fluxo .ui:nth-child(1){transform:translateX(-8%)}
  .crm-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 */
  .crm-topo .ja-integramos > b{margin-bottom:0}
  .crm-topo .ja-integramos .nomes a{display:inline-block;padding-block:13px}
}
@media (max-width:359px){
  /* telas muito estreitas (320px): "do processo comercial" fica preso numa linha só e saía da tela no tamanho padrão do título */
  .crm-topo h1{font-size:1.85rem}
}

/* ---------- 3. na prática (#na-pratica): o exemplo da ToLife e dois apoios ---------- */
/* o título fica em meia coluna e precisa ser menor */
.crm-pratica .h2{font-size:clamp(1.8rem,2.6vw,2.5rem)}
/* a coluna do título ganha largura: a 1366, com a barra de rolagem, "do outro." caía sozinho na segunda linha */
@media (min-width:981px){.crm-pratica .pratica-top{grid-template-columns:1.3fr .7fr}}
/* entre 981 e 1180 a coluna do texto de apoio ficava estreita demais (cinco linhas, começando acima do sobretítulo); com 1.2fr o título ainda cabe numa linha */
@media (min-width:981px) and (max-width:1180px){.crm-pratica .pratica-top{grid-template-columns:1.2fr .8fr}}
/* o parágrafo do fecho é mais comprido que o das outras páginas: com os 62ch da base sobrava uma terceira linha curta */
.crm-pratica .fecho p{max-width:72ch}
.crm-caso{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,4vw,64px);align-items:center;margin-top:44px}
/* o logo do cliente numa plaquinha branca (no roxo ele sumiria) */
.crm-cliente{display:inline-flex;align-items:center;padding:6px 14px;border-radius:10px;background:#fff}
.crm-cliente img{display:block;width:auto;height:34px}
.crm-partes{margin-top:22px;border-top:1px solid var(--linha)}
.crm-parte{padding:20px 0;border-bottom:1px solid var(--linha)}
.crm-parte h3{font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.2;color:var(--titulo)}
/* parágrafos de duas ou três linhas: linhas de tamanho parecido, sem sobrar "para vender." sozinho no celular */
.crm-parte p{margin-top:8px;max-width:52ch;font-size:16.5px;line-height:1.5;color:var(--fg2);text-wrap:balance}

/* ilustração: dois funis ligados (pré-venda e vendas), numa placa clara com o pontilhado da casa.
   No roxo, o cabeçalho roxo da tela de vendas sumia; na placa clara as duas telas aparecem inteiras. As cores voltam a ser as de fundo claro */
.crm-funis{--acento:var(--roxo);--fg2:var(--tinta-2);--linha:#E3E1D6;padding:26px 22px 16px;border-radius:var(--raio);background:var(--papel) radial-gradient(circle,#D9D6C9 1.2px,transparent 1.7px) 0 0/20px 20px;box-shadow:var(--sombra)}
.crm-funis ol{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);align-items:center}
.crm-funis .ui{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;max-width:none;font-size:13px}
.crm-funis .ui header{padding:9px 12px;font-size:13.5px}
.crm-funis .ui header small{opacity:1}
.crm-funis .ui .corpo{padding:13px 13px 15px;gap:10px}
/* uma linha por etapa do funil; as negociações são fichas sem texto */
/* todas as linhas com a altura da linha "Venda" (a pílula tem 18px): os dois funis ficam com a mesma altura e as etapas na mesma linha */
.crm-funil > div{display:flex;align-items:center;gap:5px;min-height:18px;color:var(--tinta-2)}
.crm-funil span{flex:0 0 7.2em;white-space:nowrap}
.crm-funil i{flex:0 1 22px;min-width:8px;height:14px;border-radius:4px;background:repeating-linear-gradient(90deg,#E4E1D6 0 6px,#EEECE4 6px 12px)}
/* a ficha que passa de um funil para o outro */
.crm-funil i.crm-passa{background:var(--oliva)}
.crm-funil .crm-ganha{flex:none;display:grid;place-items:center;width:30px;height:18px;border-radius:999px;background:var(--oliva);color:var(--roxo-900)}
.crm-ganha svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* a ligação entre os dois funis: fio tracejado, ponta e o que passa */
.crm-ponte{position:relative;display:grid;place-items:center;min-height:44px}
.crm-ponte::before{content:"";position:absolute;left:0;right:6px;top:calc(50% - 1px);border-top:2px dashed var(--acento);opacity:.8}
.crm-ponte::after{content:"";position:absolute;right:0;top:calc(50% - 5px);border:5px solid transparent;border-left:7px solid var(--acento);border-right:0}
.crm-ponte span{position:relative;z-index:1;max-width:84px;padding:4px 9px;border:1px solid var(--linha);border-radius:11px;background:#fff;color:var(--roxo-900);font:600 12px/1.25 var(--fonte);text-align:center;box-shadow:0 6px 14px -10px rgba(42,8,40,.5)}
.crm-funis figcaption{margin-top:16px;text-align:center;font-size:13px;color:var(--fg2)}

/* dois apoios: cartões translúcidos sobre o roxo, com as linhas alinhadas entre si */
.crm-pratica .sub-t{margin-top:52px}
.crm-apoios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.crm-apoio{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:10px;align-content:start;padding:22px 24px 24px;border-radius:var(--raio);border:1px solid var(--linha);background:var(--chip)}
.crm-apoio .tag{font-size:13px;font-weight:600;line-height:1.4;color:var(--acento)}
.crm-apoio h4{margin:0;font-size:1.22rem;font-weight:800;line-height:1.22;letter-spacing:-.01em;color:var(--titulo);text-wrap:balance}
.crm-apoio > p:not(.tag){max-width:58ch;font-size:15.5px;line-height:1.5;color:var(--fg2)}
.crm-apoio .link-seta{justify-self:start;margin-top:4px;font-size:15px}

/* ---------- 4. sem CRM ou com CRM (#sem-ou-com-crm): as duas listas, com o papel no alto e a prova no pé ---------- */
.crm-caminhos .lista-caso{display:flex;flex-direction:column}
.crm-caminhos .lista-caso h3{font-size:1.35rem;margin-bottom:14px}
.crm-caminhos .lista-caso li:last-child{border-bottom:1px solid var(--linha)}
/* papel da Olivas em cada caso, em minúsculas. É a etiqueta da casa (texto roxo, sem pílula), igual à dos cartões "implantamos", "integramos"
   e "operamos" de WhatsApp e atendimento. Até a conferência da onda (08/10/2026) aqui era uma pílula, e as duas páginas irmãs mostravam o mesmo rótulo de dois jeitos */
.crm-papel{margin-bottom:4px;font-size:13px;font-weight:600;line-height:1.45;color:var(--roxo)}
/* a prova encosta na base do cartão, na mesma altura nos dois */
.crm-prova{margin-top:auto;padding-top:22px;font-size:14px;line-height:1.45;color:var(--fg2)}
.crm-logos,.crm-nomes{display:flex;flex-wrap:wrap;align-items:center;min-height:40px;margin-top:6px}
.crm-logos{gap:8px 24px}
.crm-logos img{display:block;width:auto;height:28px}
/* Embrapii: o arquivo tem a marca em cima e uma faixa vazia embaixo; o recorte deixa só a marca */
.crm-logos img[alt="Embrapii"]{width:100px;height:26px;object-fit:cover;object-position:left top}
.crm-logos img[alt="ToLife"]{height:36px;margin-inline:-4px}
/* Verbenna: marca só de letras, mais baixa para pesar igual às outras duas */
.crm-logos img[alt="Verbenna"]{height:21px}
.crm-nomes{font-size:17px;font-weight:700;line-height:1.3;color:var(--titulo)}
.crm-obs{margin-top:8px}

/* ---------- responsivo ---------- */
@media (min-width:981px) and (max-width:1180px){
  /* coluna do desenho mais estreita: os rótulos das etapas apertam para os dois funis caberem.
     A coluna da ligação fica mais larga que a etiqueta: com 92px o fio tracejado sumia atrás dela e só sobrava a ponta */
  .crm-funis{padding-inline:16px}
  .crm-funis ol{grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr)}
  .crm-funis .ui{font-size:12.5px}
  .crm-funis .ui .corpo{padding-inline:11px}
  .crm-funil span{flex-basis:6.4em}
  .crm-ponte span{max-width:76px;padding-inline:7px;font-size:11.5px}
}
@media (max-width:980px){
  /* o texto em cima, o desenho embaixo */
  .crm-caso{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:36px}
  .crm-funis{max-width:720px}
  .crm-parte p{max-width:62ch}
}
@media (min-width:621px) and (max-width:980px){
  .crm-apoio{padding:20px 20px 22px}
}
@media (max-width:620px){
  /* os dois funis um embaixo do outro, com a ligação descendo */
  .crm-funis{padding:22px 16px 14px}
  .crm-funis ol{grid-template-columns:minmax(0,1fr)}
  .crm-funil span{flex-basis:7.6em}
  .crm-funil i{flex-basis:26px}
  .crm-ponte{min-height:58px}
  .crm-ponte::before{left:calc(50% - 1px);right:auto;top:0;bottom:6px;border-top:0;border-left:2px dashed var(--acento)}
  .crm-ponte::after{right:auto;left:calc(50% - 5px);top:auto;bottom:0;border:5px solid transparent;border-top:7px solid var(--acento);border-bottom:0}
  .crm-ponte span{max-width:none}
  .crm-funis figcaption{font-size:14px}
  .crm-pratica .sub-t{margin-top:40px}
  /* os dois apoios viram o carrossel da casa: fora da grade, o link encosta na base do cartão */
  .crm-apoios.carrossel{display:flex}
  .crm-apoio{display:flex;flex-direction:column;gap:10px;min-width:0;padding:20px 20px 22px}
  .crm-apoio .link-seta{align-self:flex-start;margin-top:auto}
  .crm-caminhos .lista-caso h3{font-size:1.25rem}
  .crm-logos{gap:8px 18px}
  .crm-logos img{height:25px}
  .crm-logos img[alt="Embrapii"]{width:88px;height:23px}
  .crm-logos img[alt="ToLife"]{height:32px}
  .crm-logos img[alt="Verbenna"]{height:19px}
}