/* Página de parceria para agências (/para-agencias/)
   Só o que é desta página. Carrega depois de previa.css e previa-servico.css (o previa-setor.css saiu junto com os cartões de case)
   e reaproveita os blocos deles:
   .pg-topo, .hero-fluxo, .setores/.setor, .formas/.forma, .etapas/.etapa, .faq e .faq-lembrete.
   Cores sempre pelas variáveis de superfície do previa.css. Código de cores da página: agência em grafite,
   Olivas em roxo, cliente em verde (vale na ilustração do topo e nos formatos de parceria). */

/* respiro das seções: a escala das páginas internas (a mesma dos cases e do hub), e não a da Home */
.pg-agencias .sec{padding-block:clamp(48px,6vw,88px)}

/* ---------- 1. topo: ilustração "quem faz o quê" (agência → Olivas → cliente) ---------- */
/* nasce do .hero-fluxo do serviço; aqui ela também aparece no celular, mais compacta */
.ag-papeis .ui{max-width:310px}
.ag-papeis .ag-olivas{box-shadow:0 0 0 3px var(--oliva),var(--sombra)}
/* a bolinha desce três vezes e some no fim (no serviço ela não para); parada sobre a borda do cartão, parecia sujeira */
.ag-papeis .elo::after{animation-name:ag-elo-desce;animation-iteration-count:3;animation-fill-mode:forwards}
@keyframes ag-elo-desce{from{top:-4px;opacity:1}80%{opacity:1}to{top:calc(100% - 4px);opacity:0}}
@keyframes ag-elo-lado{from{left:-4px;opacity:1}80%{opacity:1}to{left:calc(100% - 4px);opacity:0}}
@media (min-width:621px) and (max-width:980px){
  .ag-papeis .elo::after{animation-name:ag-elo-lado}
}
/* a regra geral do previa.css (*{animation:none}) não alcança pseudo-elementos */
@media (prefers-reduced-motion:reduce){
  .ag-papeis .elo::after{animation:none;display:none}
}
@media (max-width:620px){
  /* no celular o elo tem 40px e o rótulo cobre o percurso: sem bolinha */
  .ag-papeis .elo::after{display:none}
  .hero-fluxo.ag-papeis{display:block;margin-top:4px;padding:18px 16px 14px}
  .ag-papeis .ui{max-width:none;font-size:13px}
  .ag-papeis .ui header{font-size:13px}
  .ag-papeis .ui:nth-child(1),.ag-papeis .ui:nth-child(5){transform:none}
  .ag-papeis .elo{height:40px}
  .ag-papeis .ag-agencia .linha:nth-child(2){display:none}
  .ag-papeis figcaption{margin-top:12px}
}

/* ---------- 2. o que assumimos: cartões de setor da Home, com o exemplo alinhado no pé; pedidos que chegam (pílulas) ---------- */
.ag-solucoes > .setor{display:flex;flex-direction:column}
.ag-solucoes > .setor .quem{margin-top:auto;padding-top:16px;align-self:auto}
.ag-pedidos{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:28px}
.ag-pedidos > b{flex:0 0 100%;margin-bottom:2px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg2)}
.ag-pedidos > span{padding:7px 14px;border:1px solid var(--linha);border-radius:999px;background:var(--chip);font-size:14.5px;font-weight:600;line-height:1.35;color:var(--titulo)}

/* ---------- 3. como funciona (o momento roxo da página): três cuidados num painel só, em três colunas (foram dois de 01/10 a 06/10/2026;
   o terceiro, "O cliente é da sua agência", entrou em 06/10/2026). O bloco "Projetos com agências"
   saiu em 01/10/2026 (Felipe: sem nome de agência e sem case com agência) e levou as regras dele. O formato "em parceria"
   (.ag-formatos) continua fora da página; o CSS fica para a volta do bloco ---------- */
/* o painel é um cartão claro sobre o roxo: as variáveis de texto e de fio voltam para as do fundo claro só dentro dele */
.ag-compromissos{--titulo:var(--tinta);--fg2:var(--tinta-2);--linha:#E3E1D6;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px;border-radius:var(--raio);background:var(--card);color:var(--card-fg);border:1px solid var(--linha);box-shadow:var(--sombra)}
.ag-compromissos > li{position:relative;padding:28px 28px 30px 76px}
.ag-compromissos > li + li{border-left:1px solid var(--linha)}
.ag-compromissos > li::before{content:"✓";position:absolute;left:28px;top:28px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--oliva);color:var(--roxo-900);font-size:16px;font-weight:800;line-height:1}
.ag-compromissos h3{font-size:1.2rem;color:var(--titulo)}
.ag-compromissos p{margin-top:8px;font-size:15.5px;color:var(--fg2)}
@media (min-width:981px) and (max-width:1180px){
  /* três colunas num painel mais estreito: menos respiro lateral, para o texto não ficar numa coluna fina */
  .ag-compromissos > li{padding:24px 22px 26px 66px}
  .ag-compromissos > li::before{left:22px;top:24px}
}

.ag-formatos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px clamp(28px,4vw,56px);align-items:center;margin-top:48px}
.ag-formatos-txt h3{font-size:clamp(1.4rem,2vw,1.7rem);color:var(--titulo)}
.ag-formatos-txt p{margin-top:12px;font-size:16px;color:var(--fg2)}
.formas.ag-dois{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
.forma h4{font-size:1.3rem;color:var(--titulo)}
.forma .ag-assina b{display:block;margin-bottom:8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--acento)}
.ag-nomes{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ag-nomes > span{padding:5px 12px;border-radius:999px;background:#3A3A34;color:#fff;font-size:14px;font-weight:700;line-height:1.3}
.ag-nomes > span.olivas{background:var(--roxo)}
.ag-nomes > i{font-style:normal;font-weight:800;color:var(--fg2)}

/* ---------- 4. como começar: os mesmos passos do serviço (.etapas), em três colunas; o fio é o do serviço, sem troca de cor ---------- */
@media (min-width:861px){
  .etapas.ag-passos{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:0;max-width:none}
}
@media (min-width:1101px){
  /* os passos desta página têm só título e texto (sem a linha "Você recebe"): três linhas na grade, não quatro */
  .etapas.ag-passos > li{grid-row:span 3}
  .ag-passos .etapa{grid-row:span 2}
}
@media (min-width:861px) and (max-width:1100px){
  /* o serviço empilha as 5 etapas abaixo de 1100px; com 3 passos, as colunas cabem até 861px */
  .etapas.ag-passos > li{grid-row:span 3;grid-template-rows:subgrid;grid-template-columns:none;column-gap:0;align-items:stretch}
  .etapas.ag-passos > li:not(:last-child)::after{top:21px;bottom:auto;left:56px;right:-4px;width:auto;height:2px}
  .ag-passos .etapa{grid-row:span 2;grid-template-rows:subgrid}
}
.ag-comecar-pe{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:34px}
.ag-comecar-pe .nota{flex:1 1 320px;max-width:62ch}

/* ---------- responsivo ---------- */
@media (min-width:981px) and (max-width:1180px){
  /* coluna da ilustração estreita: cartões alinhados, sem o desvio lateral, para não passarem da moldura */
  .ag-papeis .ui:nth-child(1),.ag-papeis .ui:nth-child(5){transform:none}
}
@media (min-width:981px) and (max-width:1100px){
  /* notebook pequeno e tablet deitado: os 8 cartões em quatro colunas (a regra geral dos setores deixa duas e a seção passa de 1300px) */
  .setores.ag-solucoes{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ag-solucoes > .setor{padding:20px}
  .ag-solucoes > .setor h3{font-size:1.2rem}
}
@media (min-width:621px) and (max-width:980px){
  /* tablet: os 8 cartões em duas colunas (o previa.css empilha os setores em uma), para a seção não dobrar de altura */
  .setores.ag-solucoes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ag-solucoes > .setor{padding:24px}
  /* ilustração deitada: o texto da linha pode quebrar, para o selo "aprovado" não ser cortado no cartão estreito */
  .ag-papeis .ui .linha > span:first-child:not(:only-child){white-space:normal}
}
@media (min-width:621px) and (max-width:980px){
  /* ilustração deitada, cartões estreitos: quando não cabe, o valor desce inteiro para a linha de baixo, em vez de ser cortado ou partido */
  .ag-papeis .ui .linha{flex-wrap:wrap;row-gap:2px}
  .ag-papeis .ui .linha > b,.ag-papeis .ui .linha > .pill{margin-left:auto}
  .ag-papeis .ui .linha > b{white-space:nowrap}
}
@media (max-width:380px){
  /* "Tecnologia white label" cabe numa linha (conferido em 360): sem isso, "Tecnologia" fica sozinha na primeira */
  .pg-topo h1#titulo-pagina{font-size:1.9rem}
}
@media (max-width:980px){
  .ag-compromissos{grid-template-columns:1fr}
  .ag-compromissos > li + li{border-left:0;border-top:1px solid var(--linha)}
  .ag-formatos{grid-template-columns:1fr;align-items:start}
}
@media (max-width:620px){
  /* os três fatos do topo, um por linha: em uma linha só, o ponto separador sobrava no fim da primeira */
  .pg-agencias .ja-integramos .nomes > span{display:block}
  .pg-agencias .ja-integramos .nomes > span::after{content:none}
  .ag-pedidos > span{border-radius:14px;font-size:14px}
  .ag-compromissos > li{padding:22px 20px 24px 64px}
  .ag-compromissos > li::before{left:20px;top:22px;width:30px;height:30px}
  /* os dois formatos entram no carrossel do celular (o display:grid do serviço carrega depois do previa.css) */
  .formas.ag-dois.carrossel{display:flex;margin-top:4px}
  .ag-comecar-pe .btn{width:100%;justify-content:center}
}