/* freepik.com.br — tema claro, destaque rosa choque */

:root{
  --branco:#FFFFFF;
  --preto:#1A1A1A;
  --cinza-txt:#4A4A4A;
  --rosa:#FF0066;
  --rosa-esc:#CC0052;
  --linha:#E0E0E0;
  --fundo-2:#F0F0F0;
  --verde-badge:#00B87A;
  --verde:#22C55E;
  --verde-esc:#16A34A;
  --azul:#3B82F6;
  --roxo:#8B5CF6;
  --raio:14px;
  --sombra:0 4px 20px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--branco);
  color:var(--preto);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button,input{font-family:inherit;font-size:inherit}
.oculto{display:none !important}
.centro{text-align:center}

/* ---------------------------------------------------------------- topo */
.topo{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;border-bottom:1px solid var(--fundo-2);
  position:sticky;top:0;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);z-index:50;flex-wrap:wrap;
}
.marca{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--preto)}
.marca-ponto{width:14px;height:14px;border-radius:50%;background:var(--rosa);flex:none}
.marca-txt{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;font-size:15px;letter-spacing:-.2px}
.marca-txt strong{color:var(--rosa)}

.nav-usuario{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ola{font-size:14px;color:var(--cinza-txt)}
.ola strong{color:var(--preto)}
.btn-linha{
  font-size:14px;font-weight:500;color:var(--cinza-txt);text-decoration:none;
  padding:8px 12px;border-radius:999px;transition:.15s;
}
.btn-linha:hover{color:var(--rosa);background:rgba(255,0,102,.07)}
.btn-peq{padding:9px 18px;font-size:14px}

.badge-usos{
  font-size:13px;font-weight:700;padding:7px 14px;border-radius:999px;
  background:var(--fundo-2);color:var(--cinza-txt);white-space:nowrap;
}
.badge-usos.tem{background:rgba(255,0,102,.1);color:var(--rosa)}
.badge-usos.zero{background:#F5F5F5;color:#9A9A9A}
.badge-usos.ilimitado{background:var(--rosa);color:#fff}

/* ---------------------------------------------------------------- hero */
.hero{max-width:840px;margin:0 auto;padding:52px 20px 26px;text-align:center}
.hero h1{
  font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;
  font-size:clamp(34px,7vw,60px);line-height:1.05;margin:0 0 12px;letter-spacing:-1.5px;
}
.hero .sub{margin:0 0 24px;color:var(--cinza-txt);font-size:clamp(15px,2.4vw,18px)}

.abas{
  display:inline-flex;gap:6px;background:var(--fundo-2);padding:5px;
  border-radius:999px;margin-bottom:20px;max-width:100%;flex-wrap:wrap;justify-content:center;
}
.aba{
  border:0;background:transparent;color:var(--cinza-txt);font-weight:500;
  padding:9px 20px;border-radius:999px;cursor:pointer;transition:.15s;font-size:14px;
}
.aba:hover{color:var(--preto)}
.aba.ativa{background:var(--rosa);color:#fff;font-weight:700;box-shadow:0 1px 4px rgba(255,0,102,.3)}

.caixa-busca{
  display:flex;align-items:center;gap:8px;
  border:2px solid var(--linha);border-radius:999px;
  padding:6px 6px 6px 18px;background:var(--branco);transition:.18s;
}
.caixa-busca:focus-within{border-color:var(--rosa);box-shadow:0 0 0 4px rgba(255,0,102,.12)}
.caixa-busca input{
  flex:1;border:0;outline:0;background:transparent;padding:12px 0;
  font-size:17px;color:var(--preto);min-width:0;
}
.caixa-busca input::placeholder{color:#9A9A9A}
.lupa{width:20px;height:20px;flex:none;fill:none;stroke:#9A9A9A;stroke-width:2;stroke-linecap:round}

.btn-rosa{
  background:var(--rosa);color:#fff;border:0;border-radius:999px;
  padding:13px 26px;font-weight:700;font-size:15px;cursor:pointer;
  transition:.15s;white-space:nowrap;text-decoration:none;display:inline-block;
}
.btn-rosa:hover{background:var(--rosa-esc)}
.btn-rosa:active{transform:translateY(1px)}
.btn-rosa[disabled]{opacity:.6;cursor:progress}

/* tags rapidas: mesmas pills na home (button) e no artigo (link) */
.tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.tags button,.tags a{
  border:1px solid var(--linha);background:var(--branco);color:var(--cinza-txt);
  padding:8px 18px;border-radius:100px;cursor:pointer;font-size:.9rem;
  line-height:1.4;text-decoration:none;display:inline-block;transition:.15s;
}
.tags button:hover,.tags a:hover{border-color:var(--rosa);color:var(--rosa)}

/* ---------------------------------------------------------------- grid */
.resultados{max-width:1400px;margin:0 auto;padding:14px 20px 60px}
.linha-status{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin:18px 4px 16px;flex-wrap:wrap;
}
.linha-status h2{font-family:'Space Grotesk','Inter',sans-serif;font-size:19px;margin:0;font-weight:700}
.conta{color:#9A9A9A;font-size:13px}

.grid{column-count:2;column-gap:14px}
@media(min-width:700px){.grid{column-count:3}}
@media(min-width:1080px){.grid{column-count:4}}

.card{
  break-inside:avoid;margin:0 0 14px;position:relative;
  border-radius:var(--raio);overflow:hidden;background:var(--fundo-2);
  border:1px solid var(--fundo-2);
}
.card img{width:100%;height:auto;display:block;background:var(--fundo-2)}
.card.foto{cursor:zoom-in}
.card.icone{background:#fff;padding:22px}
.card.icone img{object-fit:contain;max-height:150px;margin:0 auto;width:auto}

.badge-tipo{
  position:absolute;top:10px;left:10px;z-index:2;
  font-size:10.5px;font-weight:700;letter-spacing:.5px;color:#fff;
  padding:4px 9px;border-radius:6px;background:rgba(26,26,26,.78);
  backdrop-filter:blur(4px);pointer-events:none;
}
.badge-tipo.t-photo{background:rgba(26,26,26,.78)}
.badge-tipo.t-vector{background:rgba(0,184,122,.88)}
.badge-tipo.t-psd{background:rgba(59,130,246,.88)}
.badge-tipo.t-icone{background:rgba(139,92,246,.88)}

.capa{
  position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0) 55%);
  opacity:0;transition:.18s;display:flex;flex-direction:column;justify-content:flex-end;
  padding:12px;gap:8px;
}
.card:hover .capa,.card:focus-within .capa{opacity:1}
.capa .tit{
  color:#fff;font-size:12.5px;line-height:1.35;font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.btn-baixar{
  background:var(--rosa);color:#fff;border:0;border-radius:999px;
  padding:9px 14px;font-weight:700;font-size:13px;cursor:pointer;align-self:flex-start;
}
.btn-baixar:hover{background:var(--rosa-esc)}

/* fotos: as duas opções direto na capa da thumb */
.acoes-capa{display:flex;flex-wrap:wrap;gap:6px}
.btn-capa{
  flex:1 1 auto;min-width:88px;border:0;border-radius:999px;color:#fff;
  padding:9px 10px;font-weight:700;font-size:12.5px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  white-space:nowrap;transition:.15s;
}
.btn-capa.premium{background:var(--rosa)}
.btn-capa.premium:hover{background:var(--rosa-esc)}
.btn-capa.free{background:var(--verde)}
.btn-capa.free:hover{background:var(--verde-esc)}
.btn-capa[disabled]{opacity:.65;cursor:progress}
/* thumb estreita: empilha em vez de espremer */
@media(max-width:520px){
  .acoes-capa{flex-direction:column}
  .btn-capa{width:100%;flex:1 1 auto}
}

/* toque: a capa só aparece depois do primeiro toque no card */
@media(hover:none){
  .capa{background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0) 55%)}
  .card.ativo .capa{opacity:1}
}

.carregando{text-align:center;padding:26px;color:var(--cinza-txt);font-size:14px}
.spin{
  display:inline-block;width:15px;height:15px;vertical-align:-2px;margin-right:7px;
  border:2px solid var(--linha);border-top-color:var(--rosa);border-radius:50%;
  animation:girar .7s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}
.vazio{text-align:center;padding:44px 20px;color:var(--cinza-txt)}
.btn-mais{
  margin:22px auto 0;border:1px solid var(--linha);background:var(--branco);
  color:var(--preto);padding:13px 30px;border-radius:999px;font-weight:600;cursor:pointer;transition:.15s;
}
.btn-mais:hover{border-color:var(--rosa);color:var(--rosa)}

/* ---------------------------------------- conteudo longo: SEO e artigo
   Os dois blocos usam exatamente a mesma tipografia: e o mesmo tipo de
   leitura, muda so onde aparece. .artigo-conteudo e alias de .artigo. */
.secao-seo,.artigo{
  max-width:800px;
  margin:0 auto;
  padding:0 20px 64px;
  font-size:1rem;
  line-height:1.75;
  color:var(--cinza-txt);
}
.secao-seo{padding-top:8px}

/* separador entre o grid e o texto institucional */
.separador{
  border:0;border-top:1px solid var(--fundo-2);
  max-width:200px;margin:64px auto 56px;
}

.secao-seo h2,.artigo h2{
  font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;color:var(--rosa);
  font-size:clamp(20px,2.7vw,26px);line-height:1.28;margin:44px 0 14px;letter-spacing:-.5px;
}
.secao-seo h2:first-child,.artigo h2:first-child{margin-top:0}
.secao-seo h3,.artigo h3{
  font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;color:var(--rosa);
  font-size:clamp(17px,2.1vw,19px);margin:32px 0 10px;letter-spacing:-.2px;
}
.secao-seo p,.artigo p{margin:0 0 18px}
.secao-seo strong,.artigo strong{color:var(--preto);font-weight:700}
.secao-seo a,.artigo a,
.artigo-conteudo a{
  color:var(--rosa);font-weight:600;text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px;transition:.15s;
}
.secao-seo a:hover,.artigo a:hover,
.artigo-conteudo a:hover{color:var(--rosa-esc)}
.secao-seo ul,.secao-seo ol,.artigo ul,.artigo ol{margin:0 0 18px;padding-left:24px}
.secao-seo li,.artigo li{margin-bottom:9px}
.secao-seo blockquote,.artigo blockquote{
  margin:0 0 20px;padding:4px 0 4px 20px;border-left:3px solid var(--rosa);color:var(--preto);
}

/* ------------------------------------------------- pagina de artigo */
.artigo h1,.artigo-conteudo h1{
  font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;color:var(--rosa);
  font-size:clamp(28px,4.8vw,42px);line-height:1.15;letter-spacing:-1.2px;margin:8px 0 30px;
}
.artigo-conteudo h2,.artigo-conteudo h3{color:var(--rosa)}

/* ilustracao decorativa: nao clicavel, so respiro visual */
.ilustracao{margin:34px 0;padding:0}
.ilustracao img{
  width:100%;max-width:700px;height:auto;display:block;margin:0 auto;
  border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.08);background:var(--fundo-2);
}

/* hero do artigo: mesmo visual da home */
.hero-artigo{padding:44px 20px 30px;border-bottom:1px solid var(--fundo-2);margin-bottom:40px}
.hero-artigo .titulo-busca{
  font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;
  font-size:clamp(22px,3.4vw,30px);margin:0 0 8px;letter-spacing:-.8px;color:var(--preto);
}
.hero-artigo .aba{text-decoration:none;display:inline-block;font-weight:500}
.hero-artigo .aba.ativa{font-weight:700}
.voltar-home{margin-top:44px;padding-top:24px;border-top:1px solid var(--fundo-2)}
.voltar-home a{text-decoration:none}
.voltar-home a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- rodape */
.rodape{
  border-top:1px solid var(--fundo-2);padding:28px 20px;
  text-align:center;color:#9A9A9A;font-size:13px;
}
.links-artigos{
  max-width:900px;margin:0 auto 16px;line-height:2.1;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 4px;
}
.links-artigos a{
  color:var(--cinza-txt);text-decoration:none;font-size:12px;font-weight:600;
  letter-spacing:.6px;padding:3px 7px;border-radius:6px;transition:.15s;
}
.links-artigos a:hover{color:var(--rosa);background:rgba(255,0,102,.07)}
.links-artigos a.atual{color:var(--rosa);background:rgba(255,0,102,.09)}
.links-artigos .sep{color:var(--linha);font-size:11px}
.rodape .creditos{color:#9A9A9A;padding-top:4px}

/* ---------------------------------------------------------------- modal */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:aparecer .16s ease-out;
}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
.modal-card{
  background:var(--branco);border-radius:20px;padding:34px 30px;
  max-width:420px;width:100%;text-align:center;box-shadow:var(--sombra);position:relative;
}
.modal-card h3{
  font-family:'Space Grotesk','Inter',sans-serif;font-size:21px;
  margin:0 0 10px;line-height:1.3;
}
.modal-card p{color:var(--cinza-txt);margin:0 0 22px;font-size:15px}
.fechar-x{
  position:absolute;top:8px;right:14px;border:0;background:transparent;
  font-size:28px;line-height:1;color:#9A9A9A;cursor:pointer;z-index:2;
}
.fechar-x:hover{color:var(--preto)}

/* ------------------------------------------------- modal de foto (2 opções) */
.modal-foto{max-width:620px;text-align:left;padding:26px}
.modal-foto img{
  width:100%;border-radius:12px;background:var(--fundo-2);
  margin:6px 0 16px;max-height:52vh;object-fit:contain;
}
.modal-foto h3{font-size:17px;margin:0 0 18px;line-height:1.35;text-align:left}
.acoes-foto{display:flex;gap:12px;flex-wrap:wrap}
.acoes-foto>button{
  flex:1 1 200px;min-height:50px;border:0;border-radius:10px;color:#fff;
  font-weight:700;font-size:15px;cursor:pointer;transition:.15s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;
}
.btn-premium{background:var(--rosa)}
.btn-premium:hover{background:var(--rosa-esc)}
.btn-free{background:var(--verde)}
.btn-free:hover{background:var(--verde-esc)}
.acoes-foto>button[disabled]{opacity:.65;cursor:progress}
.ico-coroa{font-size:16px;line-height:1}
.nota-foto{
  font-size:12.5px;color:#888;margin:16px 0 0;line-height:1.6;text-align:left;
}
@media(max-width:560px){
  .acoes-foto{flex-direction:column}
  .acoes-foto>button{flex:1 1 auto;width:100%}
}

/* ------------------------------------------------- popup de conversão (Starter) */
.modal-starter{
  max-width:560px;padding:40px;text-align:center;border-radius:16px;
  max-height:90vh;overflow-y:auto;
}
.modal-starter h2{
  font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;color:var(--rosa);
  font-size:clamp(21px,3.4vw,26px);line-height:1.25;margin:0 0 12px;letter-spacing:-.6px;
}
.starter-sub{color:var(--cinza-txt);font-size:15px;line-height:1.6;margin:0 0 22px}
.starter-sub strong{color:var(--preto)}

.plano-card{
  border:2px solid var(--rosa);border-radius:12px;padding:24px;
  background:#FFF5F8;text-align:left;margin:0 0 18px;
}
.plano-topo{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin-bottom:14px;
}
.plano-nome{color:var(--rosa);font-weight:700;font-size:14.5px;letter-spacing:.4px}
.plano-preco{color:var(--preto);font-weight:700;font-size:22px;white-space:nowrap}
.plano-mes{font-size:13px;font-weight:500;color:var(--cinza-txt)}
.plano-bullets{list-style:none;margin:0;padding:0}
.plano-bullets li{
  position:relative;padding-left:26px;margin-bottom:9px;
  color:var(--preto);font-size:14.5px;line-height:1.45;
}
.plano-bullets li:last-child{margin-bottom:0}
.plano-bullets li::before{
  content:"✓";position:absolute;left:0;top:0;
  color:var(--verde);font-weight:700;font-size:15px;
}

.starter-vagas{
  color:var(--rosa);font-style:italic;font-size:.9rem;margin:0 0 18px;
}

#formStarter{text-align:left}
.starter-linha{display:flex;gap:10px}
.starter-campo{flex:1 1 0;min-width:0;margin-bottom:12px}
.starter-campo input{
  width:100%;border:1px solid var(--linha);border-radius:8px;padding:13px 14px;
  font-size:15px;color:var(--preto);outline:0;background:var(--branco);transition:.15s;
}
.starter-campo input::placeholder{color:#9A9A9A}
.starter-campo input:focus{border-color:var(--rosa);box-shadow:0 0 0 3px rgba(255,0,102,.12)}
.starter-campo input.invalido{border-color:#D93025;background:#FFF7F7}
.erro-campo{display:none;color:#D93025;font-size:12.5px;margin-top:5px}
.erro-campo.ativo{display:block}
.erro-geral{
  margin:12px 0 0;font-size:13.5px;padding:10px 12px;border-radius:8px;
  background:#FFF0F4;border:1px solid #FFCBDB;color:#B00040;
}
.erro-geral.ok{background:#EFFBF5;border-color:#B9EBD6;color:#08704B}

.cf-turnstile{margin:12px 0;display:flex;justify-content:center}
.cf-turnstile iframe{max-width:100%}

.btn-starter{
  width:100%;height:52px;background:var(--rosa);color:#fff;border:0;border-radius:10px;
  font-weight:700;font-size:15.5px;cursor:pointer;transition:.15s;margin-top:6px;
}
.btn-starter:hover{background:var(--rosa-esc)}
.btn-starter[disabled]{opacity:.65;cursor:progress}

.link-continuar{
  display:block;margin:18px auto 0;background:none;border:0;
  color:#999;font-size:.85rem;text-decoration:none;cursor:pointer;
}
.link-continuar:hover{color:var(--cinza-txt)}

/* ---- página de longtail (rodada 12) ----
   O grid aqui vem pronto do servidor: cada card é um link, sem hover de botões,
   porque o alvo é o crawler (e o visitante que chega do Google). */
.grid-longtail .card a{display:block}
a.btn-mais{display:inline-block;text-decoration:none}
.lista-relacionadas{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.lista-relacionadas li{margin:0}
.lista-relacionadas a{
  display:inline-block;padding:9px 16px;border:1px solid var(--linha);border-radius:999px;
  font-size:.9rem;font-weight:600;text-decoration:none;color:var(--preto);transition:.15s;
}
.lista-relacionadas a:hover{border-color:var(--rosa);color:var(--rosa);text-decoration:none}
.secao-longtail{padding-top:0}

/* ---- popups de gating de busca (rodada 12) ---- */
.modal-gate{max-width:480px;padding:38px 32px;text-align:center}
.modal-gate h2{
  font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;color:var(--rosa);
  font-size:clamp(20px,3.2vw,24px);line-height:1.3;margin:0 0 12px;letter-spacing:-.5px;
}
.gate-bloco{animation:aparecer .22s ease-out}
.btn-link{display:flex;align-items:center;justify-content:center;text-decoration:none}
.btn-premium-grande{height:58px;font-size:17px}
#erroPremium{margin-top:12px}
@media(max-width:560px){.modal-gate{padding:28px 22px}}

.sucesso-icone{font-size:44px;line-height:1;margin-bottom:14px}
#starterSucesso{animation:aparecer .22s ease-out}

@media(max-width:560px){
  .modal-starter{padding:28px 22px}
  .starter-linha{flex-direction:column;gap:0}
  .plano-card{padding:18px}
}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--preto);color:#fff;padding:13px 22px;border-radius:999px;
  font-size:14px;z-index:120;box-shadow:var(--sombra);max-width:90vw;text-align:center;
}

/* ---------------------------------------------------------------- auth */
.auth-wrap{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:32px 20px;gap:22px;
}
.auth-logo{
  text-decoration:none;color:var(--preto);text-align:center;
  font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;font-size:26px;letter-spacing:-.8px;
}
.auth-logo span{color:var(--rosa)}
.auth-card{
  background:var(--branco);border:1px solid var(--linha);border-radius:12px;
  padding:32px;max-width:420px;width:100%;box-shadow:var(--sombra);
}
.auth-card h1{font-family:'Space Grotesk','Inter',sans-serif;font-size:22px;margin:0 0 6px}
.auth-card .desc{color:#888;font-size:14px;margin:0 0 22px}
.campo{margin-bottom:16px}
.campo label{display:block;font-weight:500;font-size:13.5px;margin-bottom:6px;color:var(--preto)}
.campo input{
  width:100%;border:1px solid var(--linha);border-radius:8px;padding:12px;
  font-size:15px;color:var(--preto);outline:0;transition:.15s;background:var(--branco);
}
.campo input:focus{border-color:var(--rosa);box-shadow:0 0 0 3px rgba(255,0,102,.12)}
.campo .ajuda{font-size:12px;color:#9A9A9A;margin-top:5px}
.btn-full{
  width:100%;height:48px;background:var(--rosa);color:#fff;border:0;border-radius:8px;
  font-weight:700;font-size:15.5px;cursor:pointer;transition:.15s;margin-top:6px;
}
.btn-full:hover{background:var(--rosa-esc)}
.auth-links{text-align:center;margin-top:18px;font-size:14px;color:#888}
.auth-links a{color:var(--rosa);text-decoration:none;font-weight:500}
.auth-links a:hover{text-decoration:underline}
.aviso{
  border-radius:8px;padding:12px 14px;font-size:14px;margin-bottom:18px;line-height:1.45;
}
.aviso.erro{background:#FFF0F4;border:1px solid #FFCBDB;color:#B00040}
.aviso.ok{background:#EFFBF5;border:1px solid #B9EBD6;color:#08704B}
.aviso ul{margin:6px 0 0;padding-left:18px}