/*
Theme Name: Prompteiro
Theme URI: https://prompteiro.com
Author: Prompteiro
Description: Tema sob medida do Prompteiro — catálogo pesquisável de prompts de IA (texto, imagem e vídeo), com votação por estrelas, subcategorias e monetização por AdSense/afiliados.
Version: 1.9.15
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: prompteiro
*/

:root{
  --bg:#F6F8FB; --card:#FFFFFF; --ink:#101828; --ink-2:#5A6472; --ink-3:#8A94A6;
  --line:#E4E9F0; --accent:#2456E6; --accent-soft:#EBF0FF; --violet:#7C5CFC; --violet-soft:#F1EDFF;
  --amber:#F59E0B; --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5}
img{max-width:100%;height:auto}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
a{color:var(--accent)}

/* ---------- header ---------- */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.hd{display:flex;align-items:center;gap:20px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex-shrink:0}
.brand img{width:44px;height:44px}
.brand b{font-size:22px;letter-spacing:-.3px}
.brand b span{color:var(--accent)}
.search{flex:1;max-width:520px;position:relative}
.search input{width:100%;padding:11px 42px 11px 16px;border:1.5px solid var(--line);border-radius:12px;font-size:15px;background:var(--bg);outline:none;transition:border-color .15s;font-family:inherit;color:var(--ink)}
.search input:focus{border-color:var(--accent);background:#fff}
.search button{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--ink-3);cursor:pointer;padding:8px;display:flex}
.hd-menu{margin-left:auto;display:flex;align-items:center;gap:22px}
.hd nav{display:flex;gap:22px;font-size:14px;color:var(--ink-2)}
.hd nav a{color:inherit;text-decoration:none}
.hd nav a:hover{color:var(--accent)}
.hd-burger{display:none;background:none;border:1.5px solid var(--line);border-radius:10px;width:42px;height:42px;align-items:center;justify-content:center;color:var(--ink-2);cursor:pointer;padding:0;flex-shrink:0}
.hd-burger:hover{border-color:var(--accent);color:var(--accent)}
.hd-burger .i-close{display:none}
.hd-burger[aria-expanded="true"] .i-open{display:none}
.hd-burger[aria-expanded="true"] .i-close{display:block}

/* ---------- seletor de idioma + Google Translate ---------- */
.langsel select{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px;font-size:13px;font-weight:600;color:var(--ink-2);font-family:inherit;cursor:pointer}
.langsel select:hover{border-color:var(--accent);color:var(--accent)}
body{top:0!important;position:static!important}
body>.skiptranslate,.goog-te-banner-frame,#goog-gt-tt,.goog-te-balloon-frame,.goog-te-spinner-pos{display:none!important}
.goog-text-highlight{background:none!important;box-shadow:none!important}
font[style]{background:none!important;box-shadow:none!important}
@media(max-width:760px){
  .hd{flex-wrap:wrap;gap:10px;padding:12px 0}
  .hd .brand{margin-left:8px}
  .brand img{width:36px;height:36px}
  .brand b{font-size:19px}
  /* Blog e idioma ficam À MOSTRA na barra (nada de dropdown): o hambúrguer é
     só das categorias. */
  .hd-menu{display:flex;order:0;margin-left:auto;gap:10px;align-items:center}
  .hd nav{gap:10px;font-size:14px}
  .hd .langsel select{padding:6px 6px;font-size:12.5px}
  .hd-burger{display:inline-flex;margin-right:8px}
  .search{order:3;flex-basis:100%;max-width:100%}
  .search input{padding:10px 40px 10px 14px;font-size:16px}
}

/* ---------- hero da home ---------- */
/* A home não tinha h1 nenhum até a v1.3.0. Compacto de propósito: o catálogo
   continua sendo a primeira coisa que a pessoa vê, mas agora a página diz
   sobre o que ela é — para quem chega frio e para o Google. */
.home-hero{padding:24px 0 4px}
.home-hero h1{margin:0 0 6px;font-size:26px;letter-spacing:-.5px;line-height:1.25}
.home-hero p{margin:0;color:var(--ink-2);font-size:15px;max-width:720px}
@media(max-width:760px){.home-hero{padding:18px 0 2px}.home-hero h1{font-size:21px}.home-hero p{font-size:14px}}

/* ---------- chips ---------- */
.filters{padding:20px 0 4px}
.chips{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chip{border:1.5px solid var(--line);background:#fff;color:var(--ink-2);padding:9px 18px;border-radius:999px;font-size:14.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:all .15s;text-decoration:none;font-family:inherit}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chips-micro{margin-top:12px;min-height:30px}
.chip.mini{padding:5px 13px;font-size:13px;font-weight:500;border-radius:999px;background:var(--bg)}
.chip.mini.on{background:var(--violet);border-color:var(--violet);color:#fff}
.chip.mini.more{color:var(--accent);border-style:dashed;background:#fff}
.chip.mini.hidden-chip{display:none}
.micro-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:700;margin-right:4px}

/* ---------- ads ---------- */
.ad{margin:20px 0;text-align:center}
.ad-placeholder{border:1.5px dashed #B9C6E4;background:var(--accent-soft);border-radius:12px;display:flex;align-items:center;justify-content:center;gap:10px;padding:22px;color:var(--accent);font-size:14px}
.ad-placeholder b{font-size:11px;border:1.5px solid var(--accent);border-radius:6px;padding:2px 7px;letter-spacing:.06em}

/* ---------- toolbar + paginação ---------- */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 14px;flex-wrap:wrap}
.toolbar .count-info{color:var(--ink-3);font-size:13.5px}
.toolbar select{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:7px 12px;font-size:13.5px;color:var(--ink);font-family:inherit;cursor:pointer}
.pager{display:flex;justify-content:center;align-items:center;gap:8px;padding:6px 0 10px;flex-wrap:wrap}
.pager a,.pager span.current,.pager span.dots{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--line);background:#fff;border-radius:10px;font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none;padding:0 8px}
.pager a:hover{border-color:var(--accent);color:var(--accent)}
.pager span.current{background:var(--accent);border-color:var(--accent);color:#fff}
.pager span.dots{border:none;background:none}

/* ---------- grid & cards ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:6px 0 30px}
@media(max-width:1000px){.grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:transform .15s, box-shadow .15s;display:flex;flex-direction:column;position:relative}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(16,24,40,.12)}
.card a.cardlink{position:absolute;inset:0;z-index:1}
.thumb{aspect-ratio:3/4;position:relative;display:flex;align-items:center;justify-content:center;font-size:44px;overflow:hidden;background:var(--bg)}
.thumb.tall{aspect-ratio:3/4;font-size:64px}
.thumb img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.94);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;display:flex;align-items:center;gap:5px;color:var(--ink);z-index:2;pointer-events:none;backdrop-filter:blur(4px)}
.rating{position:absolute;top:12px;right:12px;background:rgba(16,24,40,.72);color:#fff;border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700;backdrop-filter:blur(4px);z-index:2}
.rating{pointer-events:none}

/* ---------- ações sobrepostas no card ---------- */
.cactions{position:absolute;left:9px;right:9px;bottom:9px;display:flex;align-items:center;gap:5px;z-index:2}
.cbtn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:34px;min-width:34px;padding:0 8px;border:none;border-radius:11px;background:rgba(16,24,40,.55);color:#fff;font-size:12px;font-weight:700;cursor:pointer;backdrop-filter:blur(6px);transition:background .15s;font-family:inherit;text-decoration:none;white-space:nowrap;flex-shrink:0}
.cbtn svg{flex-shrink:0}
/* Pilha de emoji explícita onde o ícone é conteúdo, não decoração. Sem o
   polyfill do WP o glifo é desenhado pelo sistema, e o stack do body (que
   começa em -apple-system) não garante a fonte de emoji no Windows/Linux. */
.sn-mic,.badge,.pill.macro{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",inherit}
.cbtn:hover{background:rgba(16,24,40,.8)}
.cbtn.act-like.on{background:var(--accent)}
.cbtn .nlikes{font-size:11.5px}
/* Mesma mecânica de produção: uma linha só, o botão cede espaço aos ícones e o
   que sobrar do rótulo é cortado (em PT o corte é de 6px, invisível). Quebrar
   linha, que eu havia tentado, empurrava o botão para baixo no desktop.
   Fonte 11.5px em vez de 12px: dá ~8px a mais de rótulo sem mudar a altura, o
   que ajuda os idiomas de palavra longa. O que resolve de fato é o rótulo
   curto no dicionário — a caixa não tem mais que ~55px para texto. */
.cbtn.view-btn{margin-left:auto;background:rgba(255,255,255,.94);color:var(--ink);padding:0 9px;flex-shrink:1;overflow:hidden;font-size:11.5px}
/* Medido em 2026-08-01 num viewport de 1280 (notebook comum, grade de 4
   colunas, card de 222px): sobram 29px para o rotulo e "Ver prompt" pede 66
   — nenhum idioma de escrita latina cabe ali, nem o portugues. Cortar o
   texto ("Ver promp") e pior que nao mostrar, entao abaixo de 250px de card
   o rotulo some e fica so o olho: coerente com os tres botoes vizinhos, que
   ja sao so icone, e com o card inteiro clicavel. Acima disso o rotulo
   aparece — em 1600px o card tem 259px e cabe ate "View prompt". */
.card{container-type:inline-size}
.cbtn.view-btn .vlbl-curto{display:none}
/* Card estreito troca o rótulo longo pelo curto — NÃO fica só o olho. Deixar o
   botão sem texto nenhum some com a chamada e, no card 2×2 do mobile, onde ele
   ocupa a linha inteira, sobra um olho solto no meio de um botão largo. */
@container (max-width:250px){
  .cbtn.view-btn .vlbl{display:none}
  .cbtn.view-btn .vlbl-curto{display:inline}
}
.cbtn.view-btn:hover{background:#fff;color:var(--accent)}
.cbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:9px;flex:1}
.cbody h3{margin:0;font-size:16.5px;letter-spacing:-.2px}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{background:var(--bg);border:1px solid var(--line);color:var(--ink-2);font-size:12px;padding:3px 10px;border-radius:999px;text-decoration:none;position:relative;z-index:2}
a.tag:hover{border-color:var(--accent);color:var(--accent)}
.empty{text-align:center;color:var(--ink-3);padding:60px 0;font-size:15px}

/* ---------- trilha de navegação (breadcrumb) ---------- */
/* Substituiu o "← Voltar": diz onde a pessoa está, e não só de onde veio. O
   Google recomenda uma trilha visível correspondendo ao BreadcrumbList — sem
   ela ele pode descartar o rich result mesmo com o JSON-LD correto. */
.crumbs{font-size:13px;color:var(--ink-3);margin:22px 0 16px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;line-height:1.6}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--accent);text-decoration:underline}
.crumbs span{color:var(--ink-3);opacity:.6}
.crumbs strong{color:var(--ink);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* ---------- detalhe do prompt ---------- */
.back{color:var(--accent);font-weight:600;font-size:14px;display:inline-flex;gap:6px;margin:22px 0 16px;text-decoration:none}
.term-intro{color:var(--ink-2);font-size:15px;max-width:760px;margin:8px 0 0}
.term-all{margin:8px 0 0;font-size:14px}
.term-all a{text-decoration:none;font-weight:600}
.term-all a:hover{text-decoration:underline}
.dgrid{display:grid;grid-template-columns:380px 1fr;gap:32px;align-items:start;padding-bottom:30px}
@media(max-width:820px){.dgrid{grid-template-columns:1fr}}
.dcover{border-radius:var(--radius);aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;font-size:90px;border:1px solid var(--line);overflow:hidden;background:var(--bg)}
.dcover img{width:100%;height:100%;object-fit:cover}
.dtitle{margin:0 0 6px;font-size:28px;letter-spacing:-.5px}
.dmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.metabtn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;font-family:inherit;transition:all .15s}
.metabtn:hover{border-color:var(--accent);color:var(--accent)}
.metabtn.is-static{cursor:default}
.metabtn.is-static:hover{border-color:var(--line);color:var(--ink-2)}
.metabtn.act-like.on{background:var(--accent);border-color:var(--accent);color:#fff}
.star{color:var(--amber);font-weight:800}
.dmeta .count{color:var(--ink-3);font-size:13.5px}
.pill{font-size:12.5px;font-weight:700;padding:4px 12px;border-radius:999px;text-decoration:none}
.pill.macro{background:var(--accent-soft);color:var(--accent)}
.pill.micro{background:var(--violet-soft);color:var(--violet)}
.plabel{display:flex;justify-content:space-between;align-items:center;margin:18px 0 8px}
.plabel h2{margin:0;font-size:15px;letter-spacing:0}
.copy{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:9px 18px;font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;gap:7px;align-items:center;font-family:inherit}
.copy:hover{background:#1c46c4}
.pbox{background:#0F1729;color:#DCE6FF;border-radius:12px;padding:18px 20px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;line-height:1.65;white-space:pre-wrap;word-wrap:break-word;max-height:320px;overflow-y:auto;overscroll-behavior:contain}
.pbox::-webkit-scrollbar{width:10px}
.pbox::-webkit-scrollbar-track{background:transparent}
.pbox::-webkit-scrollbar-thumb{background:#3D4B6E;border-radius:999px;border:2px solid #0F1729}
.pbox::-webkit-scrollbar-thumb:hover{background:#55689A}
.howto{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-top:20px}
.howto h2{margin:0 0 8px;font-size:15px;letter-spacing:0}
.howto p{margin:0;color:var(--ink-2);font-size:14.5px}
.toolrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.tool{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--bg);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none}
.tool:hover{border-color:var(--accent);color:var(--accent)}
.tool.aff{background:var(--violet-soft);border-color:#D8CCFF;color:var(--violet)}
.aff-note{color:var(--ink-3);font-size:12px;margin:10px 0 0}

/* Links para os hubs de ferramenta. Os chips "Funciona com" saem do site (parte
   deles é afiliado); esta linha é o link interno que faz /ferramenta/ existir
   no grafo. */
.toolhubs{color:var(--ink-3);font-size:12.5px;margin:10px 0 0}
.toolhub{color:var(--accent);font-weight:600;text-decoration:none}
.toolhub:hover{text-decoration:underline}

/* Termo abaixo do piso de indexação: mesma aparência, sem link (ver
   PROMPTEIRO_MIN_TAG em functions.php). */
.is-flat{cursor:default;color:var(--ink-3)}
a.tag:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- seções da ficha (Veja também, blog, produtos) ---------- */
.sect{padding:8px 0 12px;border-top:1px solid var(--line);margin-top:10px}
.sect>h2{font-size:20px;letter-spacing:-.3px;margin:22px 0 4px}
.sect .grid{padding-top:14px}

/* Título + "ver todos" na mesma linha no desktop; no mobile o link cai abaixo. */
.sect-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:22px 0 4px}
.sect-head>h2{margin:0;font-size:20px;letter-spacing:-.3px}
.sect-mais{color:var(--accent);font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap}
.sect-mais:hover{text-decoration:underline}
@media(max-width:640px){
  .sect-head{flex-direction:column;align-items:flex-start;gap:4px}
  .sect-head>h2{font-size:18px}
}

/* Chips de categoria do blog */
.chips-blog .chip .cnt{font-size:11.5px;font-weight:700;color:var(--ink-3);margin-left:2px}
.chips-blog .chip.on .cnt{color:rgba(255,255,255,.8)}

/* ---------- post do blog ---------- */
.post{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 38px;max-width:780px;margin:4px auto 10px}
@media(max-width:600px){.post{padding:24px 20px}}
.post-meta{color:var(--ink-3);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px}
.post-meta a{color:var(--accent);text-decoration:none}
.post h1{margin:0 0 16px;font-size:30px;line-height:1.2;letter-spacing:-.6px}
@media(max-width:600px){.post h1{font-size:24px}}
.post-cover{margin:0 0 22px;border-radius:14px;overflow:hidden}
.post-cover img{width:100%;height:auto;display:block}
.post-body{color:var(--ink-2);font-size:16px;line-height:1.75}
.post-body h2{color:var(--ink);font-size:21px;margin:32px 0 10px;letter-spacing:-.3px}
.post-body h3{color:var(--ink);font-size:17.5px;margin:26px 0 8px}
.post-body p{margin:0 0 16px}
.post-body ul,.post-body ol{padding-left:22px;margin:0 0 16px}
.post-body li{margin-bottom:7px}
.post-body img{border-radius:12px;margin:8px 0}
.post-body blockquote{margin:0 0 16px;padding:14px 18px;background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;color:var(--ink)}
.post-body a{color:var(--accent)}

/* ---------- produtos de afiliado ---------- */
/* 4 colunas no desktop e 2×2 no mobile (padrão do oqueassistiragora). Com
   auto-fill o celular caía em 1 coluna e a seção virava uma torre de scroll. */
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:16px 0 4px}
@media(max-width:900px){.prods{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(max-width:420px){.prods{gap:10px}.prod-body{padding:10px 11px 12px}.prod-body b{font-size:12.5px}}
.prod{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.prod:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(16,24,40,.12)}
.prod-img{aspect-ratio:1/1;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.prod-img img{width:100%;height:100%;object-fit:contain;padding:10px}
.prod-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.prod-body b{font-size:13.5px;font-weight:600;line-height:1.35}
.prod-cta{margin-top:auto;color:var(--accent);font-weight:700;font-size:13px}
.prod-loja{color:var(--ink-3);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}

/* ---------- seções do blog ---------- */
.bloggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;padding:14px 0 4px}
.bcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.bcard:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(16,24,40,.12)}
.bimg{aspect-ratio:16/9;overflow:hidden;background:var(--bg)}
.bimg img{width:100%;height:100%;object-fit:cover}
.bimg-ph{display:flex;align-items:center;justify-content:center;font-size:38px}
.bbody{padding:13px 15px 15px;display:flex;flex-direction:column;gap:6px}
.bbody strong{font-size:15.5px;line-height:1.3;letter-spacing:-.2px}
.bbody em{font-style:normal;color:var(--ink-3);font-size:12px}
.cpager{display:flex;justify-content:center;gap:7px;padding:12px 0 4px;flex-wrap:wrap}
.cpager .pg{min-width:34px;height:34px;border:1.5px solid var(--line);background:#fff;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;font-family:inherit}
.cpager .pg:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.cpager .pg.is-cur{background:var(--accent);border-color:var(--accent);color:#fff}
.cpager .pg:disabled{opacity:.4;cursor:default}

/* ---------- navegação do catálogo: painel lateral (home e arquivos) ----------
   v1.6.0: a linha de chips virou painel à esquerda (drawer no mobile). Continua
   sendo a navegação ÚNICA do catálogo, com links canônicos.

   Regra que não pode ser quebrada: TODOS os links ficam no HTML e o recolhimento
   (painel inteiro ou grupo) é só classe + CSS. Se os itens aparecessem por JS no
   clique, o Googlebot não veria nenhum — e são eles que tiram /categoria/ e
   /sub/ da orfandade. O HTML é idêntico em desktop e mobile; quem muda a
   apresentação é o media query, porque o hCDN mistura variantes. */
.shell{max-width:1420px;margin:0 auto;padding:0 24px;display:flex;align-items:flex-start;gap:28px}
.shell>.wrap{flex:1 1 auto;min-width:0;max-width:none;margin:0;padding:0}
.sidenav{flex:0 0 250px;position:sticky;top:88px;max-height:calc(100vh - 104px);overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 12px 14px;margin:24px 0}
.sn-head{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 8px}
.sn-head b{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.sn-tgl{background:none;border:1.5px solid var(--line);border-radius:8px;width:28px;height:28px;display:none;align-items:center;justify-content:center;color:var(--ink-3);cursor:pointer;padding:0;font-size:14px;line-height:1}
.sn-tgl:hover{border-color:var(--accent);color:var(--accent)}
.sn-nav{display:flex;flex-direction:column}
.sn-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 8px 7px 16px;font-size:13.5px;color:var(--ink-2);text-decoration:none;border-radius:9px}
.sn-item:hover{background:var(--bg);color:var(--accent)}
.sn-item.on{background:var(--violet-soft);color:var(--violet);font-weight:600}
.sn-item .cnt,.sn-macro .cnt{font-size:11px;font-weight:700;opacity:.55;flex-shrink:0}
.sn-todos{padding-left:8px;font-weight:600;color:var(--ink)}
.sn-todos.on{background:var(--accent-soft);color:var(--accent)}
.sn-grupo{border-top:1px solid var(--line);margin-top:8px;padding-top:6px}
.sn-macrow{display:flex;align-items:center;gap:4px}
/* Grid de 3 colunas: ícone à esquerda, NOME CENTRALIZADO, contagem à direita —
   igual nos três macros (em flex, o tradutor partia o texto e cada um alinhava
   de um jeito). */
.sn-macro{flex:1 1 auto;display:grid;grid-template-columns:22px 1fr max-content;align-items:center;gap:6px;padding:7px 8px;font-size:14px;font-weight:700;color:var(--ink);text-decoration:none;border-radius:9px;min-width:0}
.sn-macro .sn-mname{text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn-macro:hover{background:var(--accent-soft);color:var(--accent)}
.sn-macro.on{background:var(--accent);color:#fff}
.sn-macro.on .cnt{opacity:.85}
.sn-chev{background:none;border:none;color:var(--ink-3);cursor:pointer;padding:4px 6px;font-size:12px;line-height:1;border-radius:6px;transition:transform .15s}
.sn-chev:hover{color:var(--accent);background:var(--bg)}
.sn-grupo:not(.aberto) .sn-chev{transform:rotate(-90deg)}
.sn-lista{display:flex;flex-direction:column;padding:2px 0 4px}
.sn-grupo:not(.aberto) .sn-lista{display:none}
/* O item ativo aparece mesmo com o grupo fechado: a pessoa precisa se ver. */
.sn-grupo:not(.aberto) .sn-lista .sn-item.on{display:flex}
.sn-backdrop{display:none}
/* Vitrine do blog na HOME: 4 colunas × 2 linhas no desktop (o data-pager="8"
   põe 8 por página no JS). No mobile valem a regra geral de 2 colunas e o
   pager de 4 em 4. */
@media(min-width:761px){
  .sect-home .bloggrid{grid-template-columns:repeat(4,1fr)}
}
/* A dica de navegação do hero: as duas frases estão sempre no HTML; o media
   query escolhe a do dispositivo. */
.only-mobile{display:none}
@media(max-width:760px){
  .only-desktop{display:none}
  .only-mobile{display:inline}
  .shell{display:block;padding:0}
  .shell>.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
  /* Drawer: mora fora da tela e o hambúrguer o traz. Sempre no DOM. */
  .sidenav{position:fixed;top:0;bottom:0;left:0;width:min(320px,86vw);z-index:60;margin:0;border-radius:0;border-width:0 1px 0 0;max-height:none;transform:translateX(-105%);transition:transform .2s ease}
  html.side-open .sidenav{transform:translateX(0)}
  html.side-open .sn-backdrop{display:block;position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:55}
  .sn-tgl{display:inline-flex}

  /* Grades de card em 2 COLUNAS no mobile (padrão kitdenegocios): blog e as
     seções de prompts das páginas ("Veja também", "Prompts que aparecem neste
     post"). Os cards encolhem para caber — título menor e as MESMAS ações do
     desktop, empilhadas: ícones numa linha e "Ver prompt" em largura cheia
     embaixo (lado a lado não cabe em ~166px). O grid do CATÁLOGO
     (home/arquivos) não muda: lá vale o pager global de 4 em 4. */
  .bloggrid{grid-template-columns:repeat(2,1fr);gap:12px}
  .bbody{padding:10px 12px}
  .bbody strong{font-size:13.5px}
  .bbody em{font-size:11px}
  .sect .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .sect .grid .cactions{flex-wrap:wrap;gap:5px}
  .sect .grid .cbtn{height:30px;min-width:30px;padding:0 7px;font-size:11px;border-radius:9px}
  .sect .grid .cbtn .nlikes{font-size:10.5px}
  .sect .grid .cbtn.view-btn{flex:1 1 100%;margin-left:0;justify-content:center}
  .sect .grid .cbody{padding:10px 12px 12px}
  .sect .grid .cbody h3{font-size:14px}
  .sect .grid .badge{padding:3px 9px;font-size:10.5px}
  .sect .grid .rating{padding:3px 9px;font-size:11px}
}

/* ---------- vídeo do YouTube ---------- */
.videobox{margin-top:20px}
.videobox h2{margin:0 0 8px;font-size:15px;letter-spacing:0}
.vplayer{aspect-ratio:16/9;border-radius:12px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;border:1px solid var(--line);background:#000}
.vplayer img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.vplayer .playbtn{width:70px;height:50px;background:rgba(20,20,20,.85);border-radius:14px;display:flex;align-items:center;justify-content:center;transition:background .15s;position:relative;z-index:2}
.vplayer:hover .playbtn{background:#FF0033}
.vplayer .playbtn::after{content:'';border-left:22px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:5px}
.vplayer iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- lightbox da imagem destacada ---------- */
.dcover.is-zoomable{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(10,14,26,.92);display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;backdrop-filter:blur(6px)}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-close{position:fixed;top:16px;right:16px;width:44px;height:44px;border:none;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);z-index:1001}
.lb-close:hover{background:rgba(255,255,255,.28)}

/* ---------- votação ---------- */
.ratebox{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-top:20px}
.ratebox h2{margin:0 0 6px;font-size:15px;letter-spacing:0}
.stars{font-size:32px;line-height:1;cursor:pointer;color:#D5DCE8;user-select:none;display:inline-flex;gap:4px}
.stars span{transition:transform .1s}
.stars span:hover{transform:scale(1.15)}
.stars span.f{color:var(--amber)}
.stars.done{cursor:default}
.stars.done span:hover{transform:none}
.votemsg{color:var(--ink-2);font-size:13.5px;margin:8px 0 0;min-height:18px}

/* ---------- páginas institucionais ---------- */
.legal{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 38px;max-width:780px;margin:24px auto 30px}
@media(max-width:600px){.legal{padding:24px 20px}}
.legal h1{margin:0 0 4px;font-size:26px;letter-spacing:-.4px}
.legal .upd{color:var(--ink-3);font-size:13px;margin-bottom:22px}
.legal h2{font-size:17px;margin:26px 0 8px}
.legal p,.legal li{color:var(--ink-2);font-size:15px;line-height:1.7;margin:0 0 12px}
.legal ul{padding-left:22px;margin:0 0 12px}
.legal li{margin-bottom:6px}
.legal .hl{background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;padding:14px 18px;color:var(--ink);font-size:15px;margin:0 0 12px}

/* ---------- formulário de contato ---------- */
.cform{margin:18px 0 6px;display:flex;flex-direction:column;gap:14px}
.cf-field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
.cform input,.cform textarea{width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:15px;background:var(--bg);outline:none;transition:border-color .15s;font-family:inherit;color:var(--ink);font-weight:400}
.cform input:focus,.cform textarea:focus{border-color:var(--accent);background:#fff}
.cform textarea{resize:vertical;min-height:120px;line-height:1.6}
.cf-btn{align-self:flex-start;background:var(--accent);color:#fff;border:none;border-radius:12px;padding:12px 26px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}
.cf-btn:hover{background:#1b45c4}
.cf-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.cf-alt{font-size:14px;color:var(--ink-2);margin-top:16px!important}
.legal .hl.cf-err{background:#FDECEC;border-left-color:#E5484D}

/* ---------- footer ---------- */
.site-footer{background:#fff;border-top:1px solid var(--line);margin-top:30px}
.ft{display:flex;align-items:center;gap:20px;padding:26px 0;flex-wrap:wrap;font-size:14px;color:var(--ink-2)}
.ft .brand img{width:30px;height:30px}
.ft .brand b{font-size:16px}
.ft nav{display:flex;gap:18px;flex-wrap:wrap}
.ft nav a{color:inherit;text-decoration:none}
.ft nav a:hover{color:var(--accent)}
.ft .cp{margin-left:auto;color:var(--ink-3);font-size:13px}

/* ---------- acessibilidade / util ---------- */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* mobile <=480px — no fim para vencer o cascade */
@media(max-width:480px){
  .dtitle{font-size:22px}
  .chips{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .chip{white-space:nowrap;flex-shrink:0}
  .ft{gap:12px}
  .ft .cp{margin-left:0;flex-basis:100%}
}

/* mobile <=760px — afastar footer da margem esquerda */
@media(max-width:760px){
  .ft{padding-left:8px}
}

/* v1.1.0 — paginação local mobile (mesma página p/ todos os dispositivos) */
.mpager{display:none}
.mpager a,.mpager button,.mpager span.current{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--line);background:#fff;border-radius:10px;font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none;padding:0 8px;cursor:pointer;font-family:inherit}
.mpager span.current{background:var(--accent);border-color:var(--accent);color:#fff}
.mpager span.dots{border:none;background:none;min-width:24px}
@media(max-width:760px){nav.pager:not(.mpager){display:none}}

/* ---------- banner de consentimento de cookies ---------- */
.ptcookies{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--card);border-top:2px solid var(--accent);box-shadow:0 -8px 30px rgba(16,24,40,.14)}
.ptcookies[hidden]{display:none}
.ptcookies-in{display:flex;align-items:center;gap:18px 24px;flex-wrap:wrap;padding:16px 20px}
.ptcookies p{flex:1;min-width:280px;margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.ptcookies p b{color:var(--ink)}
.ptcookies a{font-weight:700;color:var(--accent);text-decoration:underline}
.ptcookies-btns{display:flex;gap:10px;flex-wrap:wrap}
.ptcookie-btn{border:1.5px solid var(--accent);background:var(--accent);color:#fff;padding:10px 22px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
.ptcookie-btn:hover{filter:brightness(1.07)}
.ptcookie-btn.ghost{background:#fff;color:var(--ink-2);border-color:var(--line)}
.ptcookie-btn.ghost:hover{border-color:var(--ink-3);color:var(--ink);filter:none}
@media(max-width:760px){
  .ptcookies-in{padding:14px 16px;gap:12px}
  .ptcookies p{font-size:13px;min-width:0}
  .ptcookies-btns{width:100%}
  .ptcookie-btn{flex:1;text-align:center}
}

/* ---------- barra "This page is available in English" ----------
   Aparece só para navegador em inglês numa página PT que TEM irmã EN, e só
   até a pessoa fechar (localStorage). O HTML é sempre o mesmo — quem decide
   é o JS, porque a página é cacheada e não pode variar por visitante. */
.ptlangbar{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;background:var(--accent-soft);border-bottom:1px solid #C9DCFB;padding:9px 16px;font-size:13.5px;color:var(--ink-2)}
.ptlangbar a{color:var(--accent);font-weight:700;text-decoration:none}
.ptlangbar a:hover{text-decoration:underline}
.ptlangbar button{background:none;border:none;color:var(--ink-3);font-size:15px;cursor:pointer;line-height:1;padding:2px 6px}
.ptlangbar button:hover{color:var(--ink)}
/* No celular o aviso tem de caber em UMA linha, em qualquer idioma. Com
   flex-wrap ele quebrava em duas (a frase em cima, o link embaixo) e empurrava
   o site para baixo. Encolher a fonte não resolve sozinho: a frase em japonês é
   bem mais larga que a inglesa. Então a FRASE trunca com reticências e o que
   nunca encolhe é o link (a parte acionável) e o X. */
@media (max-width:640px){
  .ptlangbar{flex-wrap:nowrap;gap:8px;padding:8px 12px;font-size:12.5px}
  .ptlangbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .ptlangbar a,.ptlangbar button{flex-shrink:0;white-space:nowrap}
}