/* Canais oficiais (alerta de golpe): /golpe/
   Só o que é desta página (body.pg-golpe), com o prefixo gp-. A página liga também o previa-contato.css e reusa dele
   a lista conferida (.ct-oficiais), as linhas de rota (.ct-rotas), os passos numerados (.ct-etapas) e o selo "ilustração". */

/* ---------- 1. topo: texto à esquerda e o cartão de identidade à direita ---------- */
/* alinhado em cima, como nos topos de serviço e da Sobre: o cartão é alto e, centralizado (regra de .pg-ct), deixava um vazio sob a migalha */
.pg-golpe .pg-topo .caixa{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
.pg-golpe .resposta a{font-weight:600}
/* as três afirmações do que a Olivas não faz (06/10/2026): o sujeito numa linha ("A Olivas Digital") e três finais de frase,
   cada um com o ícone no laranja do aviso (as cores de .gp-etq-nao) */
.gp-nunca{margin-top:24px;max-width:44rem;font-size:clamp(1.02rem,1.3vw,1.1rem);line-height:1.4;color:var(--tinta)}
.gp-nunca > p{font-weight:700;color:var(--titulo)}
.gp-nunca ul{display:grid;gap:8px;margin-top:10px}
.gp-nunca li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;font-weight:600}
.gp-nunca .ct-ico{width:24px;height:24px;padding:4px;border-radius:50%;background:#FBF1E4;color:#9A4A12;stroke-width:2.6}

/* cartão "Canais oficiais": a lista conferida de /contato/ com o cabeçalho da ficha oficial da Sobre (símbolo, nome e pílula)
   e, embaixo, a parte "Empresa" (CNPJ e sede fiscal), como os campos de um documento */
.gp-cartao{scroll-margin-top:110px;color:var(--tinta)}
.gp-cartao-cab{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid #ECEAE0}
.gp-cartao-cab img{height:26px;width:auto;flex:none}
.gp-cartao-cab b{font-size:15.5px;color:var(--roxo-900)}
.gp-cartao-cab h2{margin:0 0 0 auto;padding:4px 10px;border-radius:999px;background:var(--papel);font-family:var(--fonte);font-size:12px;font-weight:700;letter-spacing:.08em;line-height:1.2;text-transform:uppercase;color:var(--tinta-2);white-space:nowrap}
/* linha "E-mail": o valor é uma regra, não um link; mesmo peso, cor e alinhamento dos valores com link (.ct-oficiais li a) */
.gp-cartao li b,.gp-cartao li b span{color:var(--tinta)}
.gp-cartao li b{justify-self:end;text-align:right;font-weight:600}
/* nesta linha o rótulo guarda a largura dele e é o valor que quebra ("termina em" / "@olivasdigital.com.br") quando a tela é estreita;
   na grade das outras linhas o valor ficaria inteiro e passaria por cima do rótulo */
.gp-cartao li.gp-regra{grid-template-columns:22px auto minmax(0,1fr)}
.gp-empresa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border-top:1px solid #E3E1D6;background:var(--papel)}
.gp-empresa > div{padding:14px 20px 16px}
.gp-empresa > div + div{border-left:1px solid #E3E1D6}
.gp-empresa dt{font-size:12px;font-weight:700;letter-spacing:.08em;line-height:1.3;text-transform:uppercase;color:var(--tinta-2)}
.gp-empresa dd{margin:3px 0 0;font-size:16px;font-weight:700;line-height:1.3;color:var(--tinta)}
.gp-num{font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:980px){
  /* uma coluna: menos respiro entre a resposta e o cartão, para ele aparecer logo */
  .pg-golpe .pg-topo .caixa{grid-template-columns:1fr;row-gap:24px}
  .gp-cartao{max-width:560px}
}
@media (max-width:620px){
  /* o CNPJ não quebra: a primeira célula tem a largura dele e a segunda fica com o resto */
  .gp-empresa{grid-template-columns:auto minmax(0,1fr)}
  .gp-empresa > div{padding-inline:20px 16px}
  .gp-empresa > div + div{padding-inline:16px 12px}
}
@media (max-width:380px){
  .gp-cartao-cab,.gp-cartao li{padding-inline:16px}
  .gp-cartao li{gap:10px}
  .gp-empresa > div{padding-inline:16px 14px}
  .gp-empresa > div + div{padding-inline:14px 10px}
  .gp-empresa dd{font-size:15px}
}
@media (max-width:340px){
  /* telas muito estreitas: o valor desce para baixo do rótulo, sem encostar nele */
  .gp-cartao li,.gp-cartao li.gp-regra{grid-template-columns:22px minmax(0,1fr)}
  .gp-cartao li a,.gp-cartao li b{grid-column:2;justify-self:start;text-align:left}
  .gp-cartao-cab h2{letter-spacing:.04em}
}

/* ---------- 2. como conferir: título e lista à esquerda, a ilustração "mensagem falsa × canal oficial" à direita ---------- */
.gp-conferir{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"tit fig" "lista fig" "nota fig";column-gap:clamp(28px,5vw,72px);align-items:start}
.gp-conferir-tit{grid-area:tit}
.gp-lista{grid-area:lista}
/* a frase sobre o contato comercial (06/10/2026): discreta, sob as três conferências */
.gp-nota{grid-area:nota;margin-top:18px;font-size:14.5px;line-height:1.5;color:var(--fg2);text-wrap:pretty}
.gp-compara{grid-area:fig;align-self:center;display:grid;gap:14px;justify-items:start;width:100%;max-width:460px;margin-inline:auto}

/* as três conferências: as linhas de rota de /contato/, numa coluna só; aqui são itens de conferência, não atalhos (sem seta) */
.pg-golpe .gp-lista{grid-template-columns:1fr;margin-top:32px}
.gp-lista .ct-rota{grid-template-columns:44px minmax(0,1fr)}

/* as duas telas: a conversa recebida (cabeçalho neutro, sem o verde do suporte) e os dois canais de vagas (cabeçalho claro com o símbolo) */
.gp-telas{display:grid;gap:18px;width:100%}
.gp-compara .ui{position:relative;width:88%;max-width:none;font-size:15px}
.gp-compara .gp-vagas{justify-self:end}
.gp-compara .ui header{padding:11px 16px;font-size:14.5px}
.gp-falsa header{background:#4B4A45}
.gp-avatar{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.22);font-style:normal;font-size:14px;font-weight:700;line-height:1}
.gp-falsa .corpo{padding:18px 16px;background:#F3F1EA}
.gp-falsa .bolha{max-width:88%;padding:10px 13px;font-size:15px;line-height:1.4;background:#fff;box-shadow:0 1px 1px rgba(31,30,25,.08);text-wrap:balance}
.gp-compara .gp-vagas header{gap:10px;background:#fff;border-bottom:1px solid #ECEAE0;color:var(--roxo-900)}
.gp-vagas header img{width:auto;height:22px;flex:none}
.gp-vagas .corpo{gap:0;padding:6px 16px}
.gp-vagas .corpo p{display:flex;align-items:center;gap:10px;min-height:46px;font-size:15px;font-weight:600;line-height:1.3;color:var(--tinta)}
.gp-vagas .corpo p + p{border-top:1px solid #ECEAE0}
.gp-vagas .corpo .ct-ico{width:18px;height:18px;flex:none;color:#155B38;stroke-width:2}
.gp-in{flex:none;width:18px;height:18px;background:var(--roxo);-webkit-mask:url(../assets-marca/icones/linkedin.svg) center/contain no-repeat;mask:url(../assets-marca/icones/linkedin.svg) center/contain no-repeat}
/* etiquetas: laranja do aviso (as cores do .ct-alerta) e verde do "conferido" (as do "check" da lista) */
.gp-etq{display:flex;align-items:center;gap:8px;padding:9px 16px;font-size:14px;font-weight:700;line-height:1.3}
.gp-etq .ct-ico{width:18px;height:18px;flex:none;stroke-width:2.2}
.gp-etq-nao{border-top:1px solid #E5C9A8;background:#FBF1E4;color:#9A4A12}
.gp-etq-sim{border-top:1px solid #BFE3CE;background:#DDF1E6;color:#155B38}
@media (max-width:980px){
  /* uma coluna: título, ilustração e lista, nessa ordem */
  .gp-conferir{grid-template-columns:1fr;grid-template-areas:"tit" "fig" "lista" "nota"}
  /* cartão, ilustração e lista empilhados com a mesma largura máxima (560px): as bordas direitas se alinham */
  .gp-compara{margin:28px 0 0;max-width:560px}
  .pg-golpe .gp-lista{margin-top:28px;max-width:560px}
  .gp-nota{max-width:560px}
}
@media (max-width:620px){
  /* o previa.css põe toda .ui em 100% no celular: aqui as duas telas seguem desencontradas, só um pouco mais largas */
  .gp-compara .ui{width:92%}
}

/* ---------- 3. o que fazer: três passos (a grade de /orcamento/ é de quatro) e cartão só com título e texto ---------- */
.pg-golpe .ct-etapas{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px}
.pg-golpe .ct-etapas > li{grid-row:span 3}
.pg-golpe .ct-etapa{grid-row:span 2}
[data-surf="papel"] .ct-etapa{background:var(--branco)}
/* com três passos, a linha horizontal cabe até 901px: desfaz, nessa faixa, a lista vertical que o previa-contato.css liga a 1100px */
@media (min-width:901px) and (max-width:1100px){
  .pg-golpe .ct-etapas{row-gap:0;max-width:none}
  .pg-golpe .ct-etapas > li{grid-template-rows:subgrid;grid-template-columns:none;column-gap:0;align-items:stretch}
  .pg-golpe .ct-etapas > li:not(:last-child)::after{top:21px;bottom:auto;left:56px;right:-4px;width:auto;height:2px;background:repeating-linear-gradient(90deg,var(--oliva) 0 6px,transparent 6px 11px)}
  .pg-golpe .ct-etapa{grid-template-rows:subgrid;padding:20px}
}
@media (max-width:900px){
  .pg-golpe .ct-etapas{grid-template-columns:1fr;margin-top:32px}
  .pg-golpe .ct-etapas > li,.pg-golpe .ct-etapa{grid-row:auto}
}

/* ---------- 4. perguntas: dois links discretos de saída ---------- */
.gp-saida{display:flex;flex-wrap:wrap;gap:20px 32px}
/* alvo de toque de 44px sem mexer no traço do link: a área extra fica num pseudo-elemento (o ::after é a seta) */
.gp-saida .link-seta{position:relative}
.gp-saida .link-seta::before{content:"";position:absolute;inset:-8px 0}