/* ==========================================================================
   QualPlugin — o sistema de desenho do site (Fase 5, Bloco 1).
   Um arquivo, uma fonte, os tokens no :root e os componentes que toda página
   usa. As páginas que a fase ainda não refez carregam também o legado.css,
   que some no fim da fase. Aprovado nas telas 1 (home v12), 18 (cabeçalho),
   9 (a base dos componentes) e 16 (o molde de texto e os erros).
   ========================================================================== */

:root{
  --paper:#FFFFFF; --sheet:#FFFFFF; --sheet-2:#F5F5F7; --sheet-3:#EBEBEF;
  --ink:#1D1D1F; --ink-2:#48484D; --ink-3:#6E6E73; --ink-4:#98989D;
  --rule:#E5E5EA; --rule-soft:#F0F0F3;
  --blue:#1B5FD9; --blue-2:#154CB0; --blue-soft:#EAF1FD; --blue-ink:#0F3F94;
  --violeta:#7A5AF8;
  --green:#12784A; --green-soft:#E7F8EF; --red:#C0303A; --red-soft:#FFF1F2; --amber:#9A4D00; --amber-soft:#FFF4DE;
  --aurora-1:#EEF2FF; --aurora-2:#F6EEF8;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* por elemento: o JS e o dado preenchem; aqui só o valor de partida */
  --dir:74px; --seta:18px; --x:0px; --y:0px; --escala:1; --h:210; --h2:250;
  --m-grad:linear-gradient(135deg,var(--blue),var(--violeta)); --cor:var(--blue); --dx:0; --dy:0; --rot:0; --atraso:0s;
  --on-solid:#FFFFFF;
  --sombra:0 1px 2px rgba(29,29,31,.04), 0 12px 32px rgba(29,29,31,.07);
  --sombra-alta:0 2px 6px rgba(29,29,31,.05), 0 30px 60px rgba(29,29,31,.12);
  --sans:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --raio:18px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E0E10; --sheet:#151517; --sheet-2:#1B1B1F; --sheet-3:#26262B;
    --ink:#F5F5F7; --ink-2:#C7C7CC; --ink-3:#98989D; --ink-4:#6E6E73;
    --rule:#2C2C31; --rule-soft:#232328;
    --blue:#6FA0FF; --blue-2:#9BBCFF; --blue-soft:#17233A; --blue-ink:#BFD4FF;
    --violeta:#A48CFF;
    --green:#5FD39A; --green-soft:#153426; --red:#F08A92; --red-soft:#3B1D21; --amber:#F0B35A; --amber-soft:#3A2A12;
    --aurora-1:#14172A; --aurora-2:#1B1622;
    --on-solid:#0E0E10;
    --sombra:0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.45);
    --sombra-alta:0 2px 6px rgba(0,0,0,.5), 0 30px 60px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --paper:#0E0E10; --sheet:#151517; --sheet-2:#1B1B1F; --sheet-3:#26262B;
  --ink:#F5F5F7; --ink-2:#C7C7CC; --ink-3:#98989D; --ink-4:#6E6E73;
  --rule:#2C2C31; --rule-soft:#232328;
  --blue:#6FA0FF; --blue-2:#9BBCFF; --blue-soft:#17233A; --blue-ink:#BFD4FF;
  --violeta:#A48CFF;
  --green:#5FD39A; --green-soft:#153426; --red:#F08A92; --red-soft:#3B1D21; --amber:#F0B35A; --amber-soft:#3A2A12;
  --aurora-1:#14172A; --aurora-2:#1B1622;
  --on-solid:#0E0E10;
  --sombra:0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.45);
  --sombra-alta:0 2px 6px rgba(0,0,0,.5), 0 30px 60px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
img{max-width:100%;display:block}
::selection{background:var(--blue-soft);color:var(--blue-ink)}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.folha{max-width:1120px;margin:0 auto;padding:0 32px}
@media (max-width:620px){.folha{padding:0 20px}}

/* ------------------------------------------------ a barra: fina, clara, translúcida */

/* ------------------------------------------------ a barra flutuante */
.nav{position:sticky;top:12px;z-index:20;padding:0 20px}
.nav .folha{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:56px;gap:16px;max-width:1040px;
  background:color-mix(in srgb, var(--sheet) 90%, transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--rule-soft);border-radius:18px;box-shadow:0 1px 2px rgba(29,29,31,.04), 0 8px 24px rgba(29,29,31,.06);padding:0 10px 0 16px}
.marca{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:16px;letter-spacing:-.01em;justify-self:start}
.marca i{width:28px;height:28px;border-radius:9px;color:#fff;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:14px;
  background:linear-gradient(135deg,#1B5FD9 0%,#3D8BFF 60%,#7BD0FF 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.nav-centro{display:flex;gap:6px;justify-self:center}
.nav-centro a{padding:7px 13px;border-radius:999px;font-weight:500;font-size:14px;color:var(--ink-3);transition:background .2s,color .2s}
.nav-centro a:hover{color:var(--ink)}
.nav-centro a.ativo{color:var(--ink);background:var(--sheet-2);font-weight:600}
.nav-direita{display:flex;align-items:center;gap:10px;justify-self:end}
.nav-direita .entrar{padding:7px 10px;font-weight:500;font-size:14px;color:var(--ink-2)}
.nav-direita .entrar:hover{color:var(--ink)}
.pilula{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:600;font-size:13.5px;border:0;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .2s,transform .2s}
.pilula:hover{background:var(--blue);color:#fff}
.sino{position:relative;width:36px;height:36px;border-radius:999px;display:grid;place-items:center;background:var(--sheet-2);color:var(--ink-2);font-size:15px}
.sino b{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:var(--blue);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center}
.nav .conta{display:inline-flex;align-items:center;gap:8px;padding:3px 11px 3px 3px;border-radius:999px;background:var(--sheet);border:1px solid var(--rule);font-weight:600;font-size:13.5px;box-shadow:0 1px 2px rgba(29,29,31,.04)}
.nav .conta i{width:28px;height:28px;border-radius:999px;background:linear-gradient(135deg,var(--blue),var(--violeta));color:#fff;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:12.5px}
@media (max-width:760px){
  .nav{top:8px;padding:0 10px}
  .nav .folha{grid-template-columns:1fr auto;height:auto;padding:8px 10px 0 14px;row-gap:0;border-radius:18px}
  .marca{grid-row:1;grid-column:1;font-size:15px}
  .marca i{width:26px;height:26px;font-size:13px}
  .nav-direita{grid-row:1;grid-column:2}
  .nav-direita{gap:4px}
  .nav-direita .pilula{padding:7px 13px;font-size:13px}
  .nav-direita .entrar{padding:7px 8px;font-size:13px}
  /* As seções numa linha própria, centradas e menores, com um fio em cima — não um estouro. */
  .nav-centro{grid-row:2;grid-column:1 / -1;justify-self:stretch;justify-content:center;gap:2px;margin:6px -10px 0 -14px;padding:4px 8px 6px;border-top:1px solid var(--rule-soft)}
  .nav-centro a{white-space:nowrap;font-size:12.5px;padding:5px 10px}
  .nav-centro a.ativo{background:transparent;color:var(--ink);font-weight:600}
}


/* ------------------------------------------------ o sino e a conta abrem no lugar (tela 18) */
.nav-direita{position:relative}
.nav-direita .sino,.nav-direita .conta{cursor:pointer}
.nav-direita .sino.aberto{background:var(--ink);color:var(--paper)}
.nav-direita .conta.aberto{border-color:var(--ink)}
/* o painel comum: nasce do botão, com uma seta */
.painel-nav{position:fixed;top:78px;right:var(--dir,74px);width:360px;background:var(--sheet);border:1px solid var(--rule-soft);border-radius:18px;box-shadow:var(--sombra-alta);z-index:30;animation:desce .2s cubic-bezier(.2,.7,.2,1);transform-origin:top right;overflow:hidden}
.painel-nav[data-painel="conta"]{width:300px}
.painel-nav[hidden]{display:none}
.painel-nav::before{content:"";position:absolute;top:-6px;right:var(--seta,18px);width:11px;height:11px;background:var(--sheet);border-left:1px solid var(--rule-soft);border-top:1px solid var(--rule-soft);transform:rotate(45deg)}
.painel-nav .cab{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 10px}
.painel-nav .cab b{font-size:14px;font-weight:600}
.painel-nav .cab a{font-size:12.5px;font-weight:600;color:var(--blue)}
/* o sino */
.sino-lista{display:grid;max-height:340px;overflow-y:auto}
.sino-lista a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 16px;border-top:1px solid var(--rule-soft);color:var(--ink);transition:background .15s}
.sino-lista a:hover{background:var(--sheet-2)}
.sino-lista .ic{width:32px;height:32px;border-radius:10px;background:var(--sheet-2);display:grid;place-items:center;color:var(--ink-3)}
.sino-lista .ic svg{width:15px;height:15px}
.sino-lista a.novo .ic{background:var(--blue-soft);color:var(--blue)}
.sino-lista b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.sino-lista small{display:block;font-size:12px;color:var(--ink-3);margin-top:2px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sino-lista time{font-size:11.5px;color:var(--ink-4);white-space:nowrap;padding-top:3px}
.sino-lista a.novo time{color:var(--blue);font-weight:600}
.sino-lista a.novo time::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue);margin-left:6px;vertical-align:1px}
.painel-nav .pe{display:flex;justify-content:center;padding:10px 16px;border-top:1px solid var(--rule-soft)}
.painel-nav .pe a{font-size:13px;font-weight:600;color:var(--ink-2)}
.painel-nav .vazio{padding:26px 16px;text-align:center;font-size:13px;color:var(--ink-4)}
/* a conta */
.conta-cab{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:16px 16px 12px}
.conta-cab .rosto{width:44px;height:44px;font-size:17px}
.conta-cab b{display:block;font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conta-cab .codigo-linha{margin-top:2px}
.conta-plano{margin:0 12px 6px;padding:10px 12px;border-radius:12px;background:linear-gradient(135deg,var(--aurora-1),var(--aurora-2));display:flex;align-items:center;justify-content:space-between;gap:10px}
.conta-plano b{display:block;font-size:13px;font-weight:600}
.conta-plano small{display:block;font-size:11.5px;color:var(--ink-3)}
.conta-plano .b2{height:30px;font-size:12px;padding:0 10px;flex:none}
.conta-plano.premium{background:#E7F8EF}
.conta-links{display:grid;padding:6px 8px 8px}
.conta-links a{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--ink-2)}
.conta-links a svg{width:16px;height:16px;color:var(--ink-4)}
.conta-links a:hover{background:var(--sheet-2);color:var(--ink)}
.conta-links a .n{font-size:11.5px;font-weight:600;color:var(--ink-4);font-variant-numeric:tabular-nums}
.conta-links a .n.novo{background:var(--blue);color:#fff;padding:1px 7px;border-radius:999px}
.conta-links .separa{height:1px;background:var(--rule-soft);margin:6px 10px}
.conta-links a.sair{color:var(--ink-4)}
/* a página por trás, só para o cabeçalho ter chão */
.veu-nav{position:fixed;inset:0;z-index:25}
.veu-nav[hidden]{display:none}
@media (max-width:760px){
  .painel-nav{position:fixed;left:12px!important;right:12px!important;top:auto;bottom:12px;width:auto!important;border-radius:20px;max-height:calc(100vh - 100px);overflow:auto;animation:sobe .25s cubic-bezier(.2,.7,.2,1)}
  .painel-nav::before{display:none}
  .veu-nav{background:rgba(29,29,31,.35);backdrop-filter:blur(3px)}
  .sino-lista{max-height:none}
  @keyframes sobe{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}

/* ------------------------------------------------ os componentes: cartões, botões, pílulas, chaves, campos */
.cartao-e{background:var(--sheet);border:1px solid var(--rule-soft);border-radius:24px;box-shadow:var(--sombra-alta);padding:30px 30px 26px}
.cartao-e .marca-e{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,var(--blue),#7BD0FF);color:#fff;font-weight:600;font-size:20px;margin-bottom:18px}
.cartao-e h1{margin:0;font-size:26px;font-weight:600;letter-spacing:-.02em}
.cartao-e .porque{margin:8px 0 20px;font-size:14.5px;line-height:1.55;color:var(--ink-3)}
.cartao-e .porque b{color:var(--ink);font-weight:600}
.campo-e{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border-radius:14px;border:1px solid var(--rule);background:var(--sheet);margin-bottom:10px;transition:border-color .2s,box-shadow .2s}
.campo-e:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.campo-e svg{width:16px;height:16px;color:var(--ink-4);flex:none}
.campo-e input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:15px;outline:0;color:var(--ink)}
.botao-e{width:100%;height:48px;border-radius:14px;border:0;background:var(--ink);color:var(--paper);font:inherit;font-size:15px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .2s,transform .2s}
.botao-e:hover{background:var(--blue);color:#fff;transform:translateY(-1px)}
.botao-e svg{width:16px;height:16px}
.cartao-e .miudo{margin:18px 0 0;font-size:13px;line-height:1.55;color:var(--ink-4)}
.cartao-e .miudo b{color:var(--ink-3);font-weight:600}
.rosto{display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--blue),#7BD0FF);color:#fff;font-weight:600;flex:none;overflow:hidden}
.rosto img{width:100%;height:100%;object-fit:cover}
.eu .rosto{width:52px;height:52px;font-size:20px}
.eu b{display:block;font-size:14.5px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.codigo-linha{display:inline-flex;align-items:center;gap:6px;margin-top:3px;font-size:12px;color:var(--ink-3)}
.codigo-linha code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;letter-spacing:.04em;color:var(--ink-2)}
.copiar{width:22px;height:22px;border-radius:6px;border:0;background:transparent;color:var(--ink-4);display:grid;place-items:center;cursor:pointer;padding:0}
.copiar:hover{background:var(--sheet-2);color:var(--ink-2)}
.copiar svg{width:13px;height:13px}
.copiar.feito{color:#12B76A}
.painel-c{margin-top:18px;background:var(--sheet);border:1px solid var(--rule-soft);border-radius:18px;box-shadow:var(--sombra);padding:20px 22px}
.f-campo{display:block;margin-top:14px}
.f-campo:first-of-type{margin-top:0}
.f-campo > span{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.f-campo > span small{font-weight:400;color:var(--ink-4)}
.f-campo input[type=text],.f-campo input[type=email],.f-campo textarea,.f-campo select{width:100%;box-sizing:border-box;font:inherit;font-size:14px;color:var(--ink);border:1px solid var(--rule);border-radius:12px;background:var(--sheet);padding:0 12px;height:42px;outline:0;transition:border-color .2s,box-shadow .2s}
.f-campo textarea{height:auto;padding:10px 12px;resize:vertical;line-height:1.5}
.f-campo input:focus,.f-campo textarea:focus,.f-campo select:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.f-campo input:disabled{background:var(--sheet-2);color:var(--ink-4)}
.f-campo .nota{display:block;margin-top:6px;font-size:12.5px;color:var(--ink-4);line-height:1.5}
.f-campo .nota a{color:var(--blue);font-weight:600}
.f-campo .apelido{display:flex;align-items:center;border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.f-campo .apelido i{font-style:normal;padding:0 0 0 12px;color:var(--ink-4);font-size:14px}
.f-campo .apelido input{border:0;border-radius:0;padding-left:2px}
.f-campo .apelido input:focus{box-shadow:none}
.f-campo .apelido:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.f-campo .apelido.off{background:var(--sheet-2)}
.f-campo .apelido.off input{background:transparent}
.acoes-c{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px}
.b1{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 16px;border-radius:999px;border:0;background:var(--ink);color:var(--paper);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .2s,transform .2s}
.b1:hover{background:var(--blue);color:#fff;transform:translateY(-1px)}
.b1 svg{width:14px;height:14px}
.b2{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:border-color .2s,color .2s,background .2s}
.b2:hover{border-color:var(--ink-3);color:var(--ink)}
.b2 svg{width:14px;height:14px}
.b2.vermelho{color:#C0303A;border-color:#F5C2C5}
.b2.vermelho:hover{background:#FFF1F2}
.b2.azul{color:var(--blue);border-color:var(--blue-soft);background:var(--blue-soft)}
.b2.mini{height:30px;padding:0 10px;font-size:12.5px}
.b1.vermelho{background:#C0303A}
.b1.vermelho:hover{background:#A6202A}
/* interruptores */
.chave{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;font-size:14px;color:var(--ink-2);cursor:pointer}
.chave + .chave{border-top:1px solid var(--rule-soft)}
.chave input{position:absolute;opacity:0;width:0;height:0}
.chave .i{flex:none;width:38px;height:22px;border-radius:999px;background:var(--rule);position:relative;transition:background .2s}
.chave .i::after{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.chave input:checked + .i{background:var(--blue)}
.chave input:checked + .i::after{transform:translateX(16px)}
.chave input:focus-visible + .i{box-shadow:0 0 0 3px var(--blue-soft)}
.chave input:disabled + .i{opacity:.5}
.chave .t small{display:block;font-size:12.5px;color:var(--ink-4);margin-top:2px}
/* etiquetas */
.et{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--sheet-2);color:var(--ink-3);white-space:nowrap}
.et.verde{background:#E7F8EF;color:#12784A}
.et.azul{background:var(--blue-soft);color:var(--blue-ink)}
.et.amarelo{background:#FFF4DE;color:#9A4D00}
.et.vermelho{background:#FFF1F2;color:#C0303A}

/* ------------------------------------------------ a home (tela 1) */
/* ------------------------------------------------ a primeira dobra: centrada, com ar */
.hero{position:relative;padding:88px 0 200px;overflow:hidden}
/* Os fundos da primeira dobra, para testar na barrinha. */
/* A aurora: o degradê pastel do NuroAI, azul-lavanda para rosa, terminando em branco. */
.hero{background:linear-gradient(180deg,var(--aurora-1) 0%,var(--aurora-2) 55%,var(--paper) 100%)}
.hero .luz{opacity:.22}
/* As órbitas: círculos finos atrás de tudo, e os ícones dos plugins sobre eles. */
.orbitas{position:absolute;left:50%;top:38%;width:1500px;height:1500px;transform:translate(-50%,-50%);pointer-events:none;z-index:0}
.orbitas circle{fill:none;stroke:var(--rule);stroke-width:1}
.orbitas .arco{stroke:var(--blue);stroke-width:1.5;opacity:.7;stroke-dasharray:180 2200;animation:gira 26s linear infinite}
@keyframes gira{to{stroke-dashoffset:-2380}}
.hero{--escala:1}
.satelite{left:calc(50% + var(--x) * var(--escala) - 29px);top:calc(38% + var(--y) * var(--escala) - 29px)}
.satelite{position:absolute;width:58px;height:58px;border-radius:999px;background:var(--sheet);border:1px solid var(--rule-soft);box-shadow:var(--sombra);display:grid;place-items:center;z-index:1;animation:flutua 7s ease-in-out infinite}
.satelite svg{width:30px;height:30px}
.satelite:nth-child(even){animation-duration:9s;animation-delay:-3s}
@keyframes flutua{50%{transform:translateY(-8px)}}
/* Profundidade: os de trás são menores, mais transparentes e levemente desfocados. */
.satelite.longe{width:48px;height:48px;opacity:.55;filter:blur(1.2px)}
.satelite.longe svg{width:24px;height:24px}
.satelite.meio{opacity:.8;filter:blur(.4px)}
@media (max-width:1100px){
  /* A 500 px os ícones ficam — poucos, atrás do título, mais discretos; as órbitas encolhem. */
  .orbitas{width:900px;height:900px;top:34%}
  /* Os quatro ficam nos cantos de cima, longe do título: x encolhe a 46%, y a 25%. */
  .hero{--escala:.5}
  .satelite{width:44px;height:44px;opacity:.7;left:calc(50% + var(--x) * var(--escala) - 22px);top:calc(9% + var(--y) * .12 - 22px)}
  .satelite svg{width:22px;height:22px}
  .satelite.so-largo{display:none}
  .satelite.longe{width:40px;height:40px;opacity:.45}
}
.hero .luz{position:absolute;width:640px;height:640px;border-radius:999px;filter:blur(90px);opacity:.28;pointer-events:none;z-index:0}
.hero .luz.a{background:var(--blue);top:-320px;left:50%;transform:translateX(-70%);animation:deriva 18s ease-in-out infinite alternate}
.hero .luz.b{background:var(--violeta);top:-260px;left:50%;transform:translateX(-10%);animation:deriva 22s ease-in-out infinite alternate-reverse}
@keyframes deriva{to{transform:translateX(-40%) translateY(60px)}}
.hero .folha{position:relative;z-index:2;text-align:center;max-width:760px}
.chapeu{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink-3);margin:0 0 18px}
.hero h1{font-weight:600;font-size:clamp(30px,4.4vw,54px);line-height:1.12;letter-spacing:-.025em;margin:0 0 18px;text-wrap:balance;min-height:2.24em}
.hero h1 .termo{background:linear-gradient(90deg,var(--blue) 0%,var(--violeta) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:pre-wrap}
.hero h1 .cursor{display:inline-block;width:2px;height:.85em;background:var(--blue);margin-left:2px;vertical-align:-.08em;border-radius:2px;animation:pisca 1.1s steps(2) infinite}
@keyframes pisca{50%{opacity:0}}
.hero .sub{font-size:17px;line-height:1.55;color:var(--ink-3);max-width:46ch;margin:0 auto 34px;font-weight:400}
.hero .sub b{font-weight:600;background:linear-gradient(90deg,var(--blue),var(--violeta));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1{min-height:0}

/* a busca: a pílula, e o painel de resultados que desce dela */
.busca-home{position:relative;max-width:640px;margin:0 auto;text-align:left}
.busca-home form{position:relative;display:flex;align-items:center;gap:6px;padding:6px 6px 6px 22px;border-radius:999px;background:var(--sheet);border:1px solid transparent;box-shadow:var(--sombra);transition:box-shadow .25s}
.busca-home form::before{content:"";position:absolute;inset:-1.5px;border-radius:999px;padding:1.5px;background:linear-gradient(90deg,var(--blue),var(--violeta) 60%,#F08AB0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;transition:opacity .25s;pointer-events:none}
.busca-home form:focus-within{box-shadow:var(--sombra-alta)}
.busca-home form:focus-within::before{opacity:1}
.busca-home input{flex:1;min-width:0;height:48px;border:0;background:transparent;font:inherit;font-size:16.5px;color:var(--ink);padding:0}
.busca-home input::placeholder{color:var(--ink-4)}
.busca-home button{width:48px;height:48px;flex:none;border:0;border-radius:999px;background:var(--blue);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s,transform .2s}
.busca-home button:hover{background:var(--blue-2)}
.busca-home button svg{width:20px;height:20px}
.estado{display:flex;align-items:center;gap:8px;min-height:18px;margin:0;padding:10px 16px 8px;font-size:12px;color:var(--ink-4);font-weight:500;border-bottom:1px solid var(--rule-soft)}
.estado .pontos i{display:inline-block;width:4px;height:4px;border-radius:99px;background:var(--ink-4);margin-right:3px;animation:pula 1s infinite}
.estado .pontos i:nth-child(2){animation-delay:.15s}.estado .pontos i:nth-child(3){animation-delay:.3s}
@keyframes pula{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-3px);opacity:1}}
.estado b{color:var(--ink-2);font-weight:600}
/* Sobreposto: desce da pílula e cobre o que está embaixo, sem empurrar nada. */
.painel-busca{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:5;background:var(--sheet);border:1px solid var(--rule-soft);border-radius:18px;box-shadow:var(--sombra-alta);overflow:hidden;animation:desce .25s cubic-bezier(.2,.7,.2,1)}
@keyframes desce{from{opacity:0;transform:translateY(-6px)}}
.painel-busca .lista:empty{display:none}
.resultado-demo{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;height:44px;padding:0 14px;border-top:1px solid var(--rule-soft);opacity:0;animation:entra .3s ease forwards;transition:background .15s}
.resultado-demo:first-child{border-top:0}
.resultado-demo:hover{background:var(--sheet-2)}
@keyframes entra{to{opacity:1}}
.resultado-demo .icone{width:28px;height:28px;border-radius:8px;background:var(--sheet-2);display:grid;place-items:center;overflow:hidden}
.resultado-demo .icone img{width:20px;height:20px;object-fit:contain}
.resultado-demo .texto{min-width:0;display:flex;align-items:baseline;gap:7px;overflow:hidden}
.resultado-demo h3{margin:0;font-size:13.5px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resultado-demo .em{margin:0;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.resultado-demo .em b{color:var(--ink-2);font-weight:500}
.chips{display:flex;gap:4px;justify-self:end}
.chips span{font-size:11px;font-weight:500;padding:2px 8px;border-radius:999px;background:var(--sheet-2);color:var(--ink-3);white-space:nowrap;line-height:1.5}
.chips span.casa{background:var(--blue-soft);color:var(--blue-ink)}
.chips span:not(.casa):nth-child(n+3){display:none}
@media (max-width:620px){
  .resultado-demo{height:42px;padding:0 12px;gap:8px}
  .resultado-demo .em{display:none}
  .chips span:not(.casa){display:none}
}
.exemplos{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin:-14px 0 18px}
.exemplos span{font-size:12.5px;color:var(--ink-4);margin-right:4px}
.exemplos button{font:inherit;font-size:12.5px;font-weight:500;padding:6px 12px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2);cursor:pointer;transition:border-color .2s,color .2s}
.exemplos button:hover,.exemplos button.ativo{border-color:var(--ink-3);color:var(--ink)}
@media (max-width:560px){.exemplos span{display:none}.exemplos button{font-size:12px;padding:5px 10px}}
@media (max-width:620px){
  .hero{padding:52px 0 180px}
  .hero .luz{width:420px;height:420px}
  .hero h1{font-size:clamp(28px,7.8vw,36px);min-height:2.3em}
  .hero .sub{font-size:15.5px;margin-bottom:26px}
  .busca-home form{padding-left:16px}
  .busca-home input{height:44px;font-size:16px}
  .busca-home button{width:44px;height:44px}
  .painel-busca{min-height:0}
}

.marcas{padding:0 0 64px;text-align:center}
.marcas p{margin:0 0 14px;font-size:12.5px;color:var(--ink-4);font-weight:500}
.marcas ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px}
.marcas li{font-size:15px;font-weight:600;color:var(--ink-4);letter-spacing:-.01em}
.marcas li a{color:var(--blue);font-weight:600}
@media (max-width:620px){.marcas{padding-bottom:44px}.marcas ul{gap:6px 18px}.marcas li{font-size:13.5px}}

/* ------------------------------------------------ as dobras seguintes */
.secao{padding:72px 0}
.secao.banda{background:var(--sheet-2)}
.secao-cabeca{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.secao-cabeca.centro{display:block;text-align:center;max-width:640px;margin:0 auto 36px}
.secao-cabeca.centro .lead{margin-left:auto;margin-right:auto}
.olho{margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.secao h2{font-weight:600;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;line-height:1.18;margin:0;text-wrap:balance}
.secao .lead{margin:10px 0 0;color:var(--ink-3);font-size:15.5px;line-height:1.55;max-width:56ch}
.secao .ver{font-size:13.5px;font-weight:600;color:var(--blue);white-space:nowrap}
.secao .ver:hover{text-decoration:underline}

/* os três passos, cada um com uma cena pequena */
.passos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.passo{background:var(--sheet);border-radius:var(--raio);padding:20px 24px 26px;box-shadow:var(--sombra)}
.passo h3{font-size:16.5px;font-weight:600;letter-spacing:-.01em;margin:0 0 6px}
.passo-texto{margin-top:18px}
.passo p{margin:0;color:var(--ink-3);font-size:14px;line-height:1.55}
.passo em{font-style:normal;color:var(--ink-2);font-weight:500}
.cena{height:150px;border-radius:14px;background:var(--sheet-2);display:flex;align-items:center;justify-content:center;gap:6px;overflow:hidden;padding:12px}
.cena-sinonimos{color:var(--rule)}
.sinonimos{display:flex;flex-direction:column;gap:8px}
.sinonimos span{font-size:11px;font-weight:500;padding:3px 8px;border-radius:999px;background:var(--sheet);border:1px solid var(--rule);color:var(--ink-2);white-space:nowrap}
.cena-sinonimos svg{width:28px;height:100px;flex:none}
.alvo-cena{font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--blue-soft);color:var(--blue-ink);white-space:nowrap}
.mini-linha{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;align-items:center;background:var(--sheet);border-radius:12px;padding:7px 8px;width:100%;box-shadow:var(--sombra)}
.mini-linha .icone{width:26px;height:26px;border-radius:7px;background:var(--sheet-2);display:grid;place-items:center;overflow:hidden}
.mini-linha .icone img{width:18px;height:18px;object-fit:contain}
.mini-linha .texto{min-width:0;display:flex;flex-direction:column;gap:1px}
.mini-linha .texto b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-linha .texto span{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-linha .chip{font-size:10px;font-weight:500;padding:2px 6px;border-radius:999px;background:var(--blue-soft);color:var(--blue-ink);white-space:nowrap}
.cena-resultado{flex-direction:column;gap:10px}
.mini-acoes{display:flex;gap:6px}
.mini-botao{font-size:11px;font-weight:600;padding:5px 11px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2)}
.mini-botao.cheio{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* a janela do SketchUp, pequena (passo 3) e grande (seção própria) */
.su{width:100%;height:100%;border-radius:10px;overflow:hidden;background:var(--sheet);box-shadow:var(--sombra);display:flex;flex-direction:column}
.su-barra{height:22px;background:#2B2B2E;display:flex;align-items:center;gap:5px;padding:0 9px;color:#B8B8BC;font-size:9.5px;font-weight:500}
.su-barra i{width:7px;height:7px;border-radius:50%;background:#5A5A5F}
.su-barra i:first-child{background:#FF5F57}.su-barra i:nth-child(2){background:#FEBC2E}.su-barra i:nth-child(3){background:#28C840}
.su-barra span{margin-left:6px}
.su-vista{position:relative;flex:1;background:linear-gradient(180deg,#F8F9FC 0%,#EEF0F5 100%)}
.su-janela{position:absolute;right:10px;top:10px;bottom:10px;width:52%;background:var(--sheet);border-radius:8px;box-shadow:var(--sombra-alta);padding:9px;display:flex;flex-direction:column;gap:6px}
.su-janela b{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:600}
.su-janela b i{width:13px;height:13px;border-radius:4px;background:linear-gradient(135deg,#1B5FD9,#7BD0FF);color:#fff;font-style:normal;font-size:8px;display:grid;place-items:center}
.su-pilula{font-size:9px;padding:4px 8px;border-radius:999px;border:1px solid var(--rule);color:var(--ink-2)}
.su-janela em{display:block;height:9px;border-radius:4px;background:var(--sheet-2)}
.su-janela em:nth-of-type(2){width:80%}.su-janela em:nth-of-type(3){width:60%}

.dentro-grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.tiques{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;color:var(--ink-2);font-size:14.5px}
.tiques li{display:flex;gap:10px;align-items:start}
.tiques li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--blue-soft);margin-top:1px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%231B5FD9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5'/%3E%3C/svg%3E")}
.acoes{display:flex;align-items:center;gap:18px;margin:26px 0 0;flex-wrap:wrap}
.su.grande{height:auto;border-radius:16px;box-shadow:var(--sombra-alta)}
.su.grande .su-barra{height:30px;font-size:11.5px;padding:0 12px}
.su.grande .su-barra i{width:10px;height:10px}
.eixos{position:absolute;inset:0;width:100%;height:100%}
.su.grande .su-vista{display:grid;grid-template-columns:minmax(0,1fr) clamp(250px,46%,290px);gap:16px;padding:16px;min-height:300px}
.su-janela.grande{position:relative;z-index:1;inset:auto;width:auto;min-width:0;grid-column:2;align-self:start;padding:12px;gap:8px;border-radius:12px}
.sj-nav{display:flex;align-items:center;justify-content:space-between}
.sj-nav .marca{font-size:12px;gap:6px}
.sj-nav .marca i{width:20px;height:20px;border-radius:6px;font-size:10px}
.sj-voce{font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--sheet-2);color:var(--ink-2)}
.sj-pilula{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 6px 12px;border-radius:999px;border:1px solid var(--rule);font-size:11.5px;color:var(--ink)}
.sj-pilula i{width:20px;height:20px;border-radius:50%;background:var(--blue)}
.sj-estado{margin:2px 2px 0;font-size:10.5px;color:var(--ink-4);font-weight:500}
.sj-lista{display:grid;gap:5px}
.su-janela.grande .mini-linha{box-shadow:none;border:1px solid var(--rule-soft);padding:6px 8px}
.coracao{font-size:13px;color:var(--ink-4)}
.coracao.on{color:#E5484D}

/* o cartão que envia, a trilha, o cartão que recebe */
.envio{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);align-items:start;gap:0;max-width:880px;margin:0 auto}
.envio .trilha-envio{margin-top:102px}
.cartao{background:var(--sheet);border-radius:var(--raio);box-shadow:var(--sombra-alta);padding:22px 24px}
.cartao h3{margin:0 0 14px;font-size:19px;font-weight:600;letter-spacing:-.01em}
.cartao .olho{margin-bottom:4px;color:var(--ink-4)}
.miniaturas{display:flex;gap:6px;margin-bottom:18px}
.miniaturas img,.miniaturas span{width:38px;height:38px;border-radius:10px;background:var(--sheet-2);object-fit:contain;padding:7px}
.miniaturas span{display:grid;place-items:center;padding:0;font-size:12px;font-weight:600;color:var(--ink-3)}
.para{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-2)}
.para .botao{margin-left:auto;font-size:13px;font-weight:600;padding:8px 16px;border-radius:999px;background:var(--ink);color:var(--paper);animation:aperta 6s infinite}
@keyframes aperta{0%,8%{transform:none}10%{transform:scale(.94)}13%,100%{transform:none}}
.avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#7A5AF8,#B69CFF);color:#fff;font-size:12px;font-weight:600;display:grid;place-items:center;flex:none}
.avatar.r{background:linear-gradient(135deg,#1B5FD9,#7BD0FF)}
.trilha-envio{position:relative;height:2px;background:repeating-linear-gradient(90deg,var(--rule) 0 6px,transparent 6px 12px)}
.pacote{position:absolute;top:-6px;left:0;width:14px;height:14px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px var(--blue-soft);opacity:0;animation:viaja 6s infinite}
@keyframes viaja{0%,12%{left:0;opacity:0}14%{opacity:1}42%{left:calc(100% - 14px);opacity:1}45%,100%{left:calc(100% - 14px);opacity:0}}
.dest-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--rule-soft)}
.dest-topo .marca{font-size:13px;gap:6px}
.dest-topo .marca i{width:22px;height:22px;border-radius:7px;font-size:11px}
.sininho{position:relative;font-size:15px;filter:grayscale(1);opacity:.7}
.sininho i{position:absolute;top:-2px;right:-3px;width:9px;height:9px;border-radius:50%;background:#E5484D;border:2px solid var(--sheet);opacity:0;animation:acende 6s infinite}
@keyframes acende{0%,44%{opacity:0;transform:scale(.4)}48%{opacity:1;transform:scale(1.25)}52%,92%{opacity:1;transform:none}100%{opacity:0}}
.aviso{display:flex;gap:10px;align-items:start;padding:10px 0;font-size:13px;color:var(--ink-2);line-height:1.4}
.aviso b{color:var(--ink);font-weight:600}
.aviso small{display:block;color:var(--ink-4);font-size:11.5px;margin-top:2px}
/* O aviso novo abre o espaço dele (0fr → 1fr) e empurra o antigo para baixo, em vez de aparecer por cima. */
.chegada{max-height:0;overflow:hidden;margin:0 -12px;animation:abre 6s infinite}
@keyframes abre{0%,44%{max-height:0}50%,92%{max-height:110px}100%{max-height:0}}
.aviso.novo{border-radius:12px;padding:10px 12px;margin:0 0 4px;background:var(--blue-soft);opacity:0;animation:chega 6s infinite}
@keyframes chega{0%,46%{opacity:0;transform:translateY(-6px)}52%{opacity:1;transform:none}92%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.pacote,.aviso.novo,.sininho i{opacity:1;animation:none;left:calc(100% - 14px)}.chegada{animation:none;max-height:none}}

/* categorias, destaque, campanha */
.categorias{display:flex;flex-wrap:wrap;gap:8px}
.categoria{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);font-size:14px;font-weight:500;transition:border-color .2s,box-shadow .2s}
.categoria:hover{border-color:var(--ink-3);box-shadow:var(--sombra)}
.categoria small{font-size:12px;color:var(--ink-4);font-weight:500}
.plugins{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.plugin{background:var(--sheet);border:1px solid var(--rule-soft);border-radius:var(--raio);padding:18px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px 14px;align-items:center;transition:transform .2s,box-shadow .2s}
.plugin:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta)}
.plugin .icone{width:44px;height:44px;border-radius:12px;background:var(--sheet-2);display:grid;place-items:center;overflow:hidden}
.plugin .icone img{width:30px;height:30px;object-fit:contain}
.plugin h3{margin:0;font-size:14.5px;font-weight:600;line-height:1.3}
.plugin small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:2px}
.plugin .funcao{grid-column:1/-1;font-size:12px;font-weight:500;color:var(--ink-2);padding:6px 10px;border-radius:10px;background:var(--sheet-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.campanha{padding:0 0 72px}

/* artigos e galeria, lado a lado */
.duas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
.artigo{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;padding:16px 0;border-top:1px solid var(--rule)}
.artigo:last-child{border-bottom:1px solid var(--rule)}
.artigo i{font-style:normal;font-size:13px;font-weight:600;color:var(--ink-4);line-height:1.3;padding-top:2px;font-variant-numeric:tabular-nums}
.artigo h3{margin:0 0 3px;font-size:16.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.artigo:hover h3{color:var(--blue)}
.artigo small{color:var(--ink-3);font-size:12.5px}
.galeria{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.foto{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--sheet-3);display:block}
.foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.foto:hover img{transform:scale(1.04)}
.foto span{position:absolute;inset:auto 0 0;padding:28px 12px 11px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));color:#fff}
.foto b{display:block;font-size:12.5px;font-weight:600;line-height:1.25}
.foto small{display:block;font-size:10.5px;opacity:.8;margin-top:2px}

/* premium */
.premium-home{border-radius:24px;background:linear-gradient(135deg,var(--blue-soft),var(--sheet-2) 60%,color-mix(in srgb, var(--violeta) 12%, var(--sheet)));padding:44px 48px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.premium-home p{margin:10px 0 0;color:var(--ink-3);max-width:46ch;font-size:15px;line-height:1.55}
.precos{display:flex;gap:10px}
.preco-home{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 22px;border-radius:16px;background:var(--sheet);box-shadow:var(--sombra);min-width:150px;text-align:center;transition:transform .2s}
.preco-home:hover{transform:translateY(-2px)}
.preco-home b{font-size:20px;font-weight:600;letter-spacing:-.02em}
.preco-home span{font-size:12px;color:var(--ink-3)}
.preco-home.escuro{background:var(--ink);color:var(--paper)}
.preco-home.escuro span{color:var(--ink-4)}

@media (max-width:1100px){
  .plugins{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Três colunas não cabem: cada passo deita, cena à esquerda e texto à direita. */
  .passos{grid-template-columns:1fr}
  .passo{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:center;padding:20px 28px 20px 20px}
  .passo-texto{margin-top:0}
}
@media (max-width:900px){
  .dentro-grade{grid-template-columns:1fr;gap:32px}
  .envio{grid-template-columns:1fr;gap:0;max-width:440px}
  .envio .trilha-envio{height:56px;width:2px;margin:0 auto;background:repeating-linear-gradient(180deg,var(--rule) 0 6px,transparent 6px 12px)}
  .pacote{left:-6px!important;top:0;animation-name:desce-trilha}
  @keyframes desce-trilha{0%,12%{top:0;opacity:0}14%{opacity:1}42%{top:calc(100% - 14px);opacity:1}45%,100%{top:calc(100% - 14px);opacity:0}}
  .duas{grid-template-columns:1fr;gap:44px}
  .premium-home{grid-template-columns:1fr;padding:30px 26px}
  .secao{padding:52px 0}
  .campanha{padding:0 0 52px}
  .anuncio{grid-template-columns:1fr;gap:14px;padding:16px}
  .anuncio-arte{height:96px}
}
@media (max-width:620px){
  .plugins{grid-template-columns:1fr}
  .passo{grid-template-columns:1fr;gap:0;padding:20px 24px 26px}
  .passo-texto{margin-top:18px}
  .su.grande .su-vista{grid-template-columns:minmax(0,1fr) 60%;gap:12px;padding:12px}
  .su-janela.grande{padding:9px;gap:6px}
  .su-janela.grande .mini-linha .texto span{display:none}
  .precos{flex-direction:column}
  .preco-home{min-width:0}
}

/* ------------------------------------------------ o rodapé */
.rodape{padding:48px 0 64px;border-top:1px solid var(--rule-soft);color:var(--ink-3);font-size:13px}
.rodape .folha{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,2fr);gap:40px}
.rodape-marca p{margin:14px 0 0;line-height:1.6;max-width:40ch}
.rodape nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.rodape nav div{display:grid;gap:8px;align-content:start}
.rodape nav b{color:var(--ink);font-weight:600;margin-bottom:4px}
.rodape a{color:var(--ink-2);font-weight:500}
.rodape a:hover{color:var(--blue)}
.rodape .marca{font-size:15px}
@media (max-width:760px){.rodape .folha{grid-template-columns:1fr;gap:28px}.rodape nav{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ------------------------------------------------ o anúncio nas páginas (o CSS da Fase 4; o Bloco 2 o refaz) */
.bloco-patrocinado {
    border: 1px dashed var(--rule); border-radius: 13px;
    padding: 12px 14px 4px; margin-bottom: 20px; background: var(--sheet-2);
}
.bloco-patrocinado > .rotulo {
    font: 600 10.5px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase;
    color: var(--amber); margin-bottom: 10px;
}

/*
 * O anúncio no meio do laço — o esqueleto da Fase 4, no lugar do
 * "espaço reservado" da Fase 1. Rótulo permanente no canto; a faixa
 * larga toma a linha inteira do grid.
 */
.anuncio {
    position: relative; background: var(--sheet); border: 1px solid var(--rule);
    border-radius: 12px; overflow: hidden;
}
.anuncio-faixa { grid-column: 1 / -1; }
.anuncio-rotulo {
    position: absolute; top: 10px; right: 10px; z-index: 1;
    font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-3); background: var(--sheet); border: 1px solid var(--rule);
    padding: 4px 7px; border-radius: 4px;
}
.anuncio-alvo { display: flex; flex-direction: column; text-decoration: none; color: inherit; height: 100%; }
.anuncio-faixa .anuncio-alvo { flex-direction: row; align-items: center; }
.anuncio-imagem { display: block; width: 100%; height: auto; object-fit: cover; aspect-ratio: 2 / 1; }
.anuncio-faixa .anuncio-imagem { width: 40%; aspect-ratio: 4 / 1; }
.anuncio-texto { display: flex; flex-direction: column; gap: 6px; padding: 14px; font-size: 14px; }
.anuncio-texto strong { font-size: 15px; line-height: 1.3; }
.anuncio-texto .fraco { font-size: 13px; }
.anuncio-botao { width: auto; height: 36px; padding: 0 14px; font-size: 13.5px; margin-top: 4px; align-self: flex-start; }
@media (max-width: 640px) {
    .anuncio-faixa .anuncio-alvo { flex-direction: column; }
    .anuncio-faixa .anuncio-imagem { width: 100%; }
}

/* A unidade do Google: a mesma moldura, o Google preenche o meio. */
.anuncio-adsense { padding: 30px 12px 12px; min-height: 120px; }
.anuncio-adsense ins { display: block; width: 100%; }

/* O plugin patrocinado: o card do catálogo, com o selo do componente. */
.anuncio-plugin { position: relative; }
.anuncio-plugin .card-alvo { border-radius: 12px; }

/* As posições de espaço único. Esqueleto funcional; a fase de telas ajusta. */
.barra-de-anuncio { max-width: 1200px; margin: 14px auto 0; padding: 0 24px; }
.barra-de-anuncio .anuncio-alvo { flex-direction: row; align-items: center; }
.barra-de-anuncio .anuncio-imagem { width: 25%; aspect-ratio: 4 / 1; }
.anuncio-hero { margin: 22px 0 8px; }
.anuncio-hero .anuncio-alvo { flex-direction: row; align-items: center; }
.anuncio-hero .anuncio-imagem { width: 50%; aspect-ratio: 2 / 1; }
.anuncio-mini { margin-top: 14px; }
.anuncio-mini .anuncio-imagem { aspect-ratio: 4 / 1; }
.anuncio-mini .anuncio-texto { padding: 10px 12px; font-size: 13px; }
.anuncio-mini .anuncio-botao { display: none; }
.ficha-lado .anuncio-card { margin-bottom: 16px; }

/* A lateral: uma coluna de 300 px ao lado do conteúdo, só onde cabe. */
@media (min-width: 1200px) {
    .com-lateral { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; max-width: 1248px; margin: 0 auto; padding: 0 24px; }
    .com-lateral > .folha { max-width: none; padding-left: 0; padding-right: 0; }
    .lateral-de-anuncio { position: sticky; top: 16px; align-self: start; margin-top: 24px; }
}
@media (max-width: 1199px) {
    .lateral-de-anuncio { max-width: 1200px; margin: 0 auto 24px; padding: 0 24px; }
}

.botao {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; padding: 0 22px; width: 100%;
    border-radius: 10px; border: 1px solid transparent;
    background: var(--blue); color: var(--on-solid);
    font: 600 15px var(--sans); text-decoration: none; cursor: pointer;
}
.botao.secundario { background: var(--sheet); border-color: var(--rule); color: var(--ink); }

/* ------------------------------------------------ o molde da página de texto e os erros (tela 16) */
/* o molde da página de texto */
.doc{max-width:1120px;margin:22px auto 0;padding:0 32px 80px;display:grid;grid-template-columns:220px minmax(0,720px);gap:48px;justify-content:center;align-items:start}
.doc-sumario{position:sticky;top:84px}
.doc-sumario .outros{display:grid;gap:2px;margin-bottom:18px}
.doc-sumario .outros a{padding:7px 10px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--ink-3)}
.doc-sumario .outros a.on{background:var(--blue-soft);color:var(--blue-ink);font-weight:600}
.doc-sumario .outros a:hover{background:var(--sheet-2);color:var(--ink)}
.doc-sumario h4{margin:0 0 6px;padding:0 10px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.doc-sumario ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule-soft)}
.doc-sumario ol a{display:block;padding:5px 12px;font-size:13px;color:var(--ink-3);border-left:2px solid transparent;margin-left:-1px}
.doc-sumario ol a:hover{color:var(--ink)}
.doc-sumario ol a.on{color:var(--blue);border-left-color:var(--blue);font-weight:600}
.doc-corpo .olho-d{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.doc-corpo h1{margin:6px 0 0;font-size:clamp(26px,3vw,34px);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.doc-corpo .meta{margin:10px 0 0;font-size:13px;color:var(--ink-4);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.resumo-d{margin:22px 0 28px;padding:18px 20px;border-radius:18px;background:linear-gradient(135deg,var(--aurora-1),var(--aurora-2))}
.resumo-d b{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.resumo-d ul{margin:0;padding-left:18px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.resumo-d li{margin:3px 0}
.resumo-d small{display:block;margin-top:8px;font-size:12px;color:var(--ink-4)}
.doc-corpo h2{margin:30px 0 8px;font-size:19px;font-weight:600;letter-spacing:-.01em;scroll-margin-top:90px}
.doc-corpo h2 span{color:var(--ink-4);font-weight:500;margin-right:8px}
.doc-corpo p,.doc-corpo li{font-size:15.5px;line-height:1.7;color:var(--ink-2)}
.doc-corpo p{margin:0 0 12px}
.doc-corpo ul{margin:0 0 12px;padding-left:20px}
.doc-corpo p b,.doc-corpo li b{color:var(--ink);font-weight:600}
.doc-corpo a{color:var(--blue);font-weight:600}
.doc-corpo .onde{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--sheet-2);color:var(--ink-2);vertical-align:middle}
.doc-corpo table{width:100%;border-collapse:collapse;font-size:14px;margin:6px 0 16px}
.doc-corpo th{text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);padding:8px 10px;border-bottom:1px solid var(--rule-soft)}
.doc-corpo td{padding:9px 10px;border-bottom:1px solid var(--rule-soft);vertical-align:top;color:var(--ink-2);line-height:1.5}
.doc-corpo td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.doc-pe{margin-top:36px;padding-top:18px;border-top:1px solid var(--rule-soft);font-size:13.5px;color:var(--ink-4);line-height:1.6}
.doc-pe a{color:var(--blue);font-weight:600}
.doc-versoes{margin-top:10px;font-size:12.5px;color:var(--ink-4)}
/* os erros */
.erro-p{max-width:560px;margin:56px auto 80px;padding:0 20px}
.erro-p .cartao-e{padding:32px 30px 28px;text-align:center}
.erro-p .codigo{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-bottom:12px}
.erro-p .marca-e{margin:0 auto 14px}
.erro-p h1{margin:0;font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
.erro-p .porque{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-3)}
.erro-p .porque b{color:var(--ink);font-weight:600}
.erro-p .porque a{color:var(--blue);font-weight:600}
.erro-p .acoes-c{justify-content:center;margin-top:20px}
.erro-p .busca-404{display:flex;align-items:center;gap:8px;height:46px;padding:0 6px 0 14px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);margin:18px auto 0;max-width:400px;text-align:left}
.erro-p .busca-404 svg{width:16px;height:16px;color:var(--ink-4);flex:none}
.erro-p .busca-404 input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:14.5px;outline:0}
.erro-p .busca-404 button{height:34px;padding:0 14px;border-radius:999px;border:0;background:var(--ink);color:var(--paper);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.erro-p .motivo{margin:16px 0 0;padding:12px 14px;border-radius:12px;background:#FFF1F2;color:#8A1F27;font-size:13.5px;line-height:1.5;text-align:left}
.erro-p .motivo b{display:block;color:#8A1F27;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
.erro-p .fica{margin:16px 0 0;padding:12px 14px;border-radius:12px;background:var(--sheet-2);font-size:13px;line-height:1.5;color:var(--ink-3);text-align:left}
.erro-p .erro-linha{margin:0 0 14px;padding:10px 12px;border-radius:12px;background:#FFF1F2;color:#C0303A;font-size:13.5px;font-weight:500;text-align:left;display:flex;gap:8px;align-items:center}
.erro-p .erro-linha svg{width:15px;height:15px;flex:none}
.erro-p .relogio{width:64px;height:64px;border-radius:50%;margin:0 auto 16px;border:2px solid var(--rule);border-top-color:var(--blue);animation:gira 1.4s linear infinite}
.erro-p .mini-links{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.erro-p .mini-links a{font-size:12.5px;font-weight:500;padding:5px 11px;border-radius:999px;border:1px solid var(--rule);color:var(--ink-2)}
.erro-p.escuro{max-width:none;margin:0;padding:0;min-height:calc(100vh - 100px);display:grid;place-items:center}
.erro-p.escuro .cartao-e{background:transparent;border:0;box-shadow:none}
@media (max-width:900px){.doc{grid-template-columns:1fr;gap:20px}.doc-sumario{position:static}.doc-sumario ol{display:none}.doc-sumario .outros{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0;padding-bottom:4px}.doc-sumario .outros a{flex:none;border:1px solid var(--rule);border-radius:999px;padding:6px 12px;font-size:13px}.doc-sumario h4{display:none}}


/* ------------------------------------------------ a busca (tela 2) e o catálogo (tela 8) */
.topo-busca{position:relative;background:linear-gradient(180deg,var(--aurora-1) 0%,var(--aurora-2) 70%,var(--paper) 100%);padding:44px 0 26px;overflow:visible}
.topo-busca .folha{max-width:880px}
.topo-busca .rotulo{margin:0 0 10px 4px;font-size:12.5px;color:var(--ink-3);font-weight:500}
.pilula-busca{position:relative;display:flex;align-items:center;gap:6px;height:58px;padding:6px 6px 6px 8px;border-radius:999px;background:var(--sheet);box-shadow:var(--sombra);border:1px solid var(--rule-soft)}
.pilula-busca::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(90deg,var(--blue),var(--violeta) 60%,#F08AB0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;pointer-events:none}
.escopo{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 12px 0 12px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet-2);font:inherit;font-size:13.5px;font-weight:500;color:var(--blue);cursor:pointer;white-space:nowrap}
.escopo svg{width:15px;height:15px}
.escopo b{font-weight:500}
.escopo i{font-style:normal;color:var(--ink-4);margin-left:2px;letter-spacing:.1em}
.pilula-busca .lupa{width:18px;height:18px;color:var(--ink-4);margin-left:8px;flex:none}
.pilula-busca input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);outline:0;padding:0 4px}
.pilula-busca input::placeholder{color:var(--ink-4)}
.nao-achou{font-size:13.5px;color:var(--ink-3);white-space:nowrap;margin-right:6px}
.nao-achou a{color:var(--blue);font-weight:600}
.limpar{width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:var(--ink-4);font-size:18px;cursor:pointer;display:grid;place-items:center}
.limpar:hover{background:var(--sheet-2);color:var(--ink)}
.ir{width:44px;height:44px;border-radius:50%;border:0;background:var(--blue);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;transition:transform .2s,background .2s}
.ir:hover{background:var(--blue-2);transform:scale(1.04)}
.ir svg{width:18px;height:18px}
.populares{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:12px 0 0 6px}
.populares span{font-size:12.5px;color:var(--ink-4);margin-right:4px}
.populares a{font-size:12.5px;font-weight:500;padding:5px 11px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2)}
.populares a:hover{border-color:var(--ink-3);color:var(--ink)}

.bloco{padding:14px 18px;border-top:1px solid var(--rule-soft)}
.bloco:first-child{border-top:0}
.bloco .titulo{display:flex;justify-content:space-between;margin:0 0 10px;font-size:12.5px;color:var(--ink-3);font-weight:500}
.bloco .titulo a,.bloco .titulo button{color:var(--ink-4);font-weight:500}
.bloco .titulo a:hover,.bloco .titulo button:hover{color:var(--blue)}
.escopos{display:flex;flex-wrap:wrap;gap:6px}
.escopos span{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;padding:6px 10px 6px 12px;border-radius:999px;background:var(--sheet-2);color:var(--ink-3);cursor:pointer}
.escopos span.on{background:var(--blue-soft);color:var(--blue-ink)}
.escopos span i{font-style:normal;font-size:12px;opacity:.7}
.linha-busca{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 6px;border-radius:10px;font-size:14.5px;cursor:pointer}
.linha-busca:hover{background:var(--sheet-2)}
.linha-busca svg{width:16px;height:16px;color:var(--ink-4)}
.linha-busca small{font-size:12px;color:var(--ink-4)}
.linha-busca .x{color:var(--ink-4);font-size:16px;line-height:1;padding:0 4px;opacity:0}
.linha-busca:hover .x{opacity:1}
.painel-busca .pe{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;background:var(--sheet-2);font-size:12px;color:var(--ink-4)}
.painel-busca .pe kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:5px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-3);font:inherit;font-size:11px;margin-right:2px}
.painel-busca .pe a{color:var(--blue);font-weight:600}

.resultados{padding:8px 0 80px}
.grade-resultados{display:grid;grid-template-columns:232px minmax(0,1fr);gap:40px;align-items:start}
.filtros{position:sticky;top:84px}
.filtros h2{margin:0 0 6px;font-size:15px;font-weight:600}
.grupo{padding:14px 0;border-top:1px solid var(--rule-soft)}
.grupo:first-of-type{border-top:0;padding-top:8px}
.grupo h3{margin:0 0 8px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:600}
.opcao{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:14px;color:var(--ink-2);cursor:pointer}
.opcao i{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--rule);background:var(--sheet);display:grid;place-items:center;flex:none}
.opcao.on i{background:var(--blue);border-color:var(--blue)}
.opcao.on i::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.opcao.on{color:var(--ink)}
.opcao small{margin-left:auto;font-size:12px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.grupo .mais{font-size:12.5px;color:var(--blue);font-weight:600;padding:4px 0}
.filtros .limpar-filtros{display:inline-block;margin-top:6px;font-size:12.5px;color:var(--ink-4)}
.cabeca-lista{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:10px 0 18px}
.cabeca-lista p{margin:0;font-size:14px;color:var(--ink-3)}
.cabeca-lista p b{color:var(--ink);font-weight:600}
.cabeca-lista p em{font-style:normal;color:var(--blue);font-weight:500}
.ordem{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3)}
.ordem b{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:10px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink);font-weight:500}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cards .card{position:relative;display:flex;flex-direction:column;background:var(--sheet);border:1px solid var(--rule-soft);border-radius:var(--raio);box-shadow:var(--sombra);overflow:hidden;transition:transform .2s,box-shadow .2s}
.cards .card:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta)}
.cards .card h3{margin:0;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.cards .card .em{margin:0;color:var(--ink-3);font-size:13px}
.cards .card .icone-img{object-fit:contain}
.botao-icone{width:38px;height:38px;border-radius:50%;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,color .2s}
.botao-icone:hover{border-color:var(--ink-3);color:var(--ink)}
.botao-icone svg{width:16px;height:16px}
.botao-icone.on{color:#E5484D;border-color:#F5C2C5;background:#FFF1F2}
.fim{margin:26px 0 0;font-size:14px;color:var(--ink-3);text-align:center}
.fim a{color:var(--blue);font-weight:600}
.dica{font-style:normal;color:var(--ink-2);font-weight:500}

.cards .anuncio-card{border-radius:var(--raio);border-color:var(--rule-soft);box-shadow:var(--sombra)}
.cards .anuncio-card .anuncio-texto{padding:12px 14px}
.cards .anuncio-card .anuncio-imagem{aspect-ratio:16/9}
.cards .bloco-patrocinado{margin:0;padding:0;border:0;background:transparent;display:flex;flex-direction:column;gap:6px}
.cards .bloco-patrocinado > .rotulo{margin:0 0 0 2px}
.cards .bloco-patrocinado > .card,.cards .bloco-patrocinado > .anuncio{flex:1}
.nada{text-align:center;padding:36px 0 60px}
.aneis{position:relative;width:180px;height:180px;margin:0 auto 22px}
.aneis i{position:absolute;inset:0;border-radius:50%;border:1px solid var(--rule)}
.aneis i:nth-child(2){inset:22px;opacity:.8}
.aneis i:nth-child(3){inset:44px;opacity:.6}
.aneis span{position:absolute;inset:62px;border-radius:50%;background:var(--sheet);box-shadow:var(--sombra-alta);display:grid;place-items:center;color:var(--ink-2)}
.aneis span svg{width:24px;height:24px}
.aneis b{position:absolute;inset:-1px;border-radius:50%;border:1.5px solid transparent;border-top-color:var(--blue);animation:gira-anel 3s linear infinite}
@keyframes gira-anel{to{transform:rotate(360deg)}}
.nada h2{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em}
.nada h2 em{font-style:normal;color:var(--blue)}
.nada p{margin:8px auto 0;max-width:46ch;color:var(--ink-3);font-size:14.5px;line-height:1.55}
.nada .tente{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:16px 0 22px}
.nada .tente span{font-size:12.5px;color:var(--ink-4);align-self:center;margin-right:4px}
.nada .tente a{font-size:13px;font-weight:500;padding:6px 12px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2)}
.nada .acoes{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.nada .segundo{padding:8px 16px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);font-size:13.5px;font-weight:600;color:var(--ink-2)}
.veu{position:fixed;inset:0;z-index:60;background:rgba(29,29,31,.45);backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px}
.janela{width:100%;max-width:420px;background:var(--sheet);border-radius:22px;box-shadow:var(--sombra-alta);padding:22px 22px 20px;animation:desce .25s cubic-bezier(.2,.7,.2,1)}
.janela .cabeca-j{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.janela h2{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em}
.janela .fechar{width:30px;height:30px;border-radius:50%;border:0;background:var(--sheet-2);color:var(--ink-2);font-size:16px;cursor:pointer;display:grid;place-items:center}
.janela .abas{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:12px;background:var(--sheet-2);margin-bottom:16px}
.janela .abas span{text-align:center;padding:7px;border-radius:9px;font-size:13px;font-weight:500;color:var(--ink-3)}
.janela .abas span.on{background:var(--sheet);color:var(--blue);box-shadow:var(--sombra)}
.janela .resumo{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--sheet-2);margin-bottom:14px}
.janela .resumo img{width:36px;height:36px;border-radius:10px;background:var(--sheet);padding:6px}
.janela .resumo b{display:block;font-size:13.5px;font-weight:600}
.janela .resumo small{font-size:12px;color:var(--ink-3)}
.janela label{display:block;font-size:13px;font-weight:600;margin:0 0 6px}
.janela label i{font-style:normal;color:#E5484D}
.janela .campo{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:44px;padding:6px 10px;border-radius:12px;border:1px solid var(--rule);background:var(--sheet);margin-bottom:14px;font-size:14px}
.janela .campo input,.janela .campo textarea{flex:1;min-width:80px;border:0;background:transparent;font:inherit;font-size:14px;outline:0;resize:none;padding:4px 2px;color:var(--ink)}
.janela .campo.alto{align-items:start}
.janela .campo.alto textarea{width:100%;min-height:56px}
.amigo{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 3px;border-radius:999px;background:var(--blue-soft);color:var(--blue-ink);font-size:13px;font-weight:500}
.amigo i{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#7A5AF8,#B69CFF);color:#fff;font-style:normal;font-size:11px;font-weight:600;display:grid;place-items:center}
.amigo em{font-style:normal;opacity:.6;margin-left:2px}
.janela .sugestoes{display:flex;gap:6px;flex-wrap:wrap;margin:-8px 0 14px}
.janela .sugestoes span{font-size:12px;color:var(--ink-3);padding:4px 10px;border-radius:999px;border:1px solid var(--rule);cursor:pointer}
.janela .como{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:12px 14px;border-radius:12px;border:1px solid var(--rule-soft);background:var(--sheet-2);font-size:12.5px;color:var(--ink-3);line-height:1.5;margin-bottom:16px}
.janela .como b{display:block;color:var(--ink);font-weight:600;font-size:13px;margin-bottom:2px}
.janela .como i{width:34px;height:34px;border-radius:10px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-style:normal}
.janela .como i svg{width:18px;height:18px}
.janela .enviar{width:100%;height:44px;border-radius:12px;border:0;background:var(--blue);color:#fff;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.janela .enviar:hover{background:var(--blue-2)}
.janela .enviar.secundario{background:var(--sheet-2);color:var(--ink)}
.janela .rodape-j{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.janela .rodape-j .enviar{width:auto;padding:0 18px}
.sucesso{text-align:center;padding:10px 0 4px}
.sucesso .aneis{width:150px;height:150px;margin-bottom:18px}
.sucesso .aneis span{inset:48px;background:#DDF5E8;color:#12704A;box-shadow:none}
.sucesso .aneis b{border-top-color:#12704A;animation-duration:2s}
.sucesso h2{font-size:22px}
.sucesso p{margin:6px 0 20px;color:var(--ink-3);font-size:14px}

.tile{display:inline-flex;align-self:flex-start;align-items:center;justify-content:center;height:44px;min-width:44px;max-width:100px;padding:5px;border-radius:12px;background:var(--sheet-2);flex:none}
.tile img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;border-radius:6px;image-rendering:auto}
.tile.g{height:72px;min-width:72px;max-width:170px;padding:8px;border-radius:16px}
.tile.g img{border-radius:8px}
.tile.p{height:36px;min-width:36px;max-width:84px;padding:4px;border-radius:10px}
.tile.p img{border-radius:5px}
.botao-icone.on{color:var(--blue);border-color:var(--blue-soft);background:var(--blue-soft)}
.card.outro .capa{position:relative;height:120px;background:linear-gradient(135deg,var(--aurora-1),var(--aurora-2));display:grid;place-items:center;color:var(--blue);overflow:hidden}
.card.outro .capa img{width:100%;height:100%;object-fit:cover}
.card.outro .capa svg{width:34px;height:34px;opacity:.8}
.card.outro .tipo{position:absolute;left:12px;top:10px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);background:color-mix(in srgb, var(--sheet) 85%, transparent);padding:3px 8px;border-radius:999px;backdrop-filter:blur(6px)}
.card.outro h3{font-size:16px}

.cards .f-topo{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.cards .f-topo .acoes{display:flex;gap:2px;margin:-4px -8px 0 0}
.f-obter{color:var(--blue);font-weight:600;font-size:13px;white-space:nowrap}
.f-obter:hover{text-decoration:underline}
.cards .rotulo-tipo{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);margin:0 0 6px}
.cards .tile.foto{padding:0;overflow:hidden}
.cards .tile.foto img{width:44px;height:44px;object-fit:cover;border-radius:0}
.cards .tile.doc{color:var(--ink-3)}
.cards .tile.doc svg{width:20px;height:20px}
.cards .card{padding:0}
.cards .m-banner{position:relative;height:100px;margin:10px 10px 0;border-radius:14px;background:var(--m-grad);overflow:hidden}
.cards .m-banner img{width:100%;height:100%;object-fit:cover}
.cards .m-avatar{position:absolute;left:22px;top:76px;display:inline-flex;padding:5px;border-radius:16px;background:var(--sheet);box-shadow:0 0 0 3px var(--sheet), var(--sombra)}
.cards .m-avatar .tile{background:var(--sheet-2);height:48px;min-width:48px;max-width:96px;border-radius:12px}
.cards .m-selo{position:absolute;right:20px;top:94px;font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:999px;background:var(--sheet);box-shadow:var(--sombra);color:var(--ink-2);white-space:nowrap}
.cards .m-corpo{padding:48px 20px 16px;display:flex;flex-direction:column;flex:1}
.cards h3{font-size:16px}
.cards .m-termos{margin:8px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.cards .m-termos b{color:var(--ink-2);font-weight:500}
.cards .m-dados{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:14px;padding:10px 6px;border:1px solid var(--rule-soft);border-radius:12px;text-align:center}
.cards .m-dados small{display:flex;justify-content:center;align-items:center;gap:4px;font-size:10.5px;color:var(--ink-4)}
.cards .m-dados small svg{width:11px;height:11px}
.cards .m-dados b{display:block;font-size:12.5px;font-weight:600;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cards .m-acoes{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px;gap:8px;margin-top:auto;padding-top:14px}
.cards .m-acoes .obter{height:44px;border-radius:999px;background:var(--ink);color:var(--paper);font:inherit;font-size:14px;font-weight:600;border:0;cursor:pointer}
.cards .m-acoes .obter:hover{background:var(--blue);color:#fff}
.cards .m-acoes .botao-icone{width:44px;height:44px;border-radius:999px}
.cards .m-acoes .salvar-texto{grid-column:2 / span 2;height:44px;border-radius:999px;justify-content:center}
.cards .card.outro{padding:18px 18px 14px}
.cards .m-banner{height:104px}
.cards .m-avatar{top:80px;padding:3px;border-radius:14px;box-shadow:0 0 0 2px var(--sheet), 0 4px 14px rgba(29,29,31,.10)}
.cards .m-avatar .tile{height:46px;min-width:46px;border-radius:11px}
/* categoria e acessos: dois selos pequenos e translúcidos nos cantos de cima do banner */
.cards .m-cat,.cards .m-vistas{position:absolute;top:10px;display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.86);color:var(--ink-2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap;max-width:60%;overflow:hidden;text-overflow:ellipsis}
.cards .m-cat{right:10px;letter-spacing:.04em;text-transform:uppercase}
.cards .m-vistas{left:10px}
.cards .m-vistas svg{width:12px;height:12px;color:var(--ink-3)}
.cards .m-corpo{padding:42px 20px 16px}
/* onde fica e precisa de, um embaixo do outro */
.cards .m-dados{display:block;gap:0;margin-top:14px;padding:2px 12px;text-align:left}
.cards .m-dados div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--rule-soft);min-width:0}
.cards .m-dados div:first-child{border-top:0}
.cards .m-dados small{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-4);flex:none}
.cards .m-dados small svg{width:12px;height:12px}
.cards .m-dados b{margin:0;font-size:12.5px;font-weight:600;text-align:right}
/* obter: a pílula preta com a seta, que fica azul ao passar o mouse */
.cards .m-acoes{grid-template-columns:minmax(0,1fr) 44px 44px}
.cards .m-acoes .obter{display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .2s,transform .2s}
.cards .m-acoes .obter svg{width:15px;height:15px}
.cards .m-acoes .obter:hover{transform:translateY(-1px)}
/* o marcador enche de baixo para cima ao salvar */
.marcador-salvar .mc{position:relative;width:16px;height:16px;display:block}
.marcador-salvar .mc svg{position:absolute;inset:0;width:16px;height:16px}
.marcador-salvar .mc .cheio{color:var(--blue);clip-path:inset(100% 0 0 0);transition:clip-path .38s cubic-bezier(.2,.7,.2,1)}
.marcador-salvar.on .mc .cheio{clip-path:inset(0 0 0 0)}
.marcador-salvar.on{background:var(--sheet);border-color:var(--rule)}
/* a galeria: a foto toma o card */
.cards .card.outro.galeria{padding:0}
.cards .card.outro.galeria .capa{position:relative;flex:1;min-height:200px;margin:10px 10px 0;border-radius:14px;overflow:hidden;background:var(--sheet-3)}
.cards .card.outro.galeria .capa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cards .card.outro.galeria .capa .m-cat{left:10px;right:auto}
.cards .card.outro.galeria .g-corpo{padding:14px 20px 14px}
.cards .card.outro.galeria h3{font-size:16px}
.cards .card.outro.galeria .f-rodape{margin-top:12px}

/* os dois selos do banner, bem menores */
.cards .m-cat,.cards .m-vistas{top:8px;font-size:9.5px;font-weight:600;padding:2px 6px;gap:4px;background:rgba(255,255,255,.8);color:var(--ink-3)}
.cards .m-cat{right:8px;letter-spacing:.02em;text-transform:none;max-width:56%}
.cards .m-vistas{left:8px}
.cards .m-vistas svg{width:10px;height:10px}
.cards .card.outro.galeria .capa .m-cat{left:8px}
/* o marcador: enche de baixo para cima em verde, estoura, e assenta em azul cheio */
.marcador-salvar{overflow:visible}
.marcador-salvar .mc .cheio{color:var(--blue);clip-path:inset(100% 0 0 0);transition:none}
.marcador-salvar.on .mc .cheio{clip-path:inset(0 0 0 0)}
.marcador-salvar.on.vivo .mc .cheio{animation:enche 1.15s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes enche{0%{clip-path:inset(100% 0 0 0);color:#12B76A}55%{clip-path:inset(0 0 0 0);color:#12B76A}80%{color:#12B76A}100%{clip-path:inset(0 0 0 0);color:var(--blue)}}
.marcador-salvar .mc i{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--cor);opacity:0;pointer-events:none}
.marcador-salvar .mc i:nth-child(odd){border-radius:1px;transform:rotate(45deg)}
.marcador-salvar.on.vivo .mc i{animation:estoura .65s cubic-bezier(.1,.8,.3,1) .58s forwards}
@keyframes estoura{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(calc(var(--dx) * 1px),calc(var(--dy) * 1px)) scale(1)}}
.marcador-salvar.on.vivo{animation:pulsa .5s ease .55s}
@keyframes pulsa{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.marcador-salvar.on .mc .cheio{animation:none;clip-path:inset(0)}}

/* o ícone: 2 px de branco, 3 px de cinza — e nada mais */
.cards .m-avatar{top:84px;left:20px;padding:2px;border-radius:12px;box-shadow:0 0 0 2px var(--sheet), 0 3px 10px rgba(29,29,31,.10)}
.cards .m-avatar .tile{height:42px;min-width:42px;padding:3px;border-radius:10px}
.cards .m-corpo{padding:38px 18px 14px}
/* onde fica e precisa de: linhas mais baixas, letra menor */
.cards .m-dados{margin-top:10px;padding:0 10px}
.cards .m-dados div{padding:5px 0}
.cards .m-dados small{font-size:11px;gap:5px}
.cards .m-dados small svg{width:11px;height:11px}
.cards .m-dados b{font-size:11.5px}
.cards .m-termos{margin-top:6px;font-size:12px}
/* o botão, mais junto do que vem antes e mais baixo */
.cards .m-acoes{padding-top:10px;gap:6px;grid-template-columns:minmax(0,1fr) 40px 40px}
.cards .m-acoes .obter{height:40px;font-size:13.5px}
.cards .m-acoes .botao-icone{width:40px;height:40px}
/* o banner em aurora: o degradê da primeira dobra da home, com duas luzes, uma posição por card */
.cards .m-dados b{color:var(--ink-4);font-weight:500}
.cards .m-acoes{display:flex;justify-content:space-between;align-items:center;gap:6px;padding-top:10px}
.cards .m-acoes .obter{height:34px;padding:0 16px;font-size:13px;flex:none}
.cards .m-acoes .obter svg{width:14px;height:14px}
.cards .m-acoes .lado{display:flex;gap:4px}
.cards .m-acoes .botao-icone{width:34px;height:34px}
.cards .m-acoes .botao-icone svg{width:14px;height:14px}
.cards .marcador-salvar .mc,.cards .marcador-salvar .mc svg{width:14px;height:14px}
/* a animação: enche em verde, dá um pulo curto, uma onda fina se abre com pontinhos, e o azul assenta */
.marcador-salvar.on.vivo .mc .cheio{animation:enche 1.2s cubic-bezier(.3,.6,.2,1) forwards}
@keyframes enche{0%{clip-path:inset(100% 0 0 0);color:#12B76A;transform:scale(1)}45%{clip-path:inset(0 0 0 0);color:#12B76A;transform:scale(1)}55%{transform:scale(1.28)}68%{transform:scale(1);color:#12B76A}100%{clip-path:inset(0 0 0 0);color:var(--blue);transform:scale(1)}}
.marcador-salvar .mc::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:1.5px solid #12B76A;opacity:0;pointer-events:none}
.marcador-salvar.on.vivo .mc::after{animation:onda .6s cubic-bezier(.1,.7,.3,1) .5s forwards}
@keyframes onda{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.4)}}
.marcador-salvar .mc i{width:3px;height:3px;margin:-1.5px 0 0 -1.5px}
.marcador-salvar .mc i:nth-child(odd){border-radius:50%;transform:none}
.marcador-salvar .mc i:nth-child(even){width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:0;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.marcador-salvar.on.vivo .mc i{animation:estoura .7s cubic-bezier(.1,.8,.3,1) .52s forwards}
@keyframes estoura{0%{opacity:0;transform:translate(0,0) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(calc(var(--dx) * 1px),calc(var(--dy) * 1px)) scale(1)}}
.marcador-salvar.on.vivo{animation:none}

/* o aviãozinho decola ao clicar, nos dois modos */
.botao-icone.voa svg{animation:voa .55s cubic-bezier(.3,.6,.2,1)}
@keyframes voa{0%{transform:none;opacity:1}45%{transform:translate(7px,-7px) rotate(-18deg);opacity:0}46%{transform:translate(-6px,6px) rotate(-18deg);opacity:0}100%{transform:none;opacity:1}}
/* modo janela: a janela nasce do botão que a chamou */
.janela.do-botao{animation:cresce .32s cubic-bezier(.2,.7,.2,1)}
@keyframes cresce{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
/* modo card: uma camada sobe de baixo para cima e vira o formulário */
.cards .card .envio-card{position:absolute;inset:0;z-index:3;background:var(--sheet);border-radius:inherit;padding:14px 18px 16px;display:flex;flex-direction:column;clip-path:inset(100% 0 0 0);transition:clip-path .45s cubic-bezier(.2,.7,.2,1);overflow:hidden}
.cards .card.enviando .envio-card{clip-path:inset(0 0 0 0)}
.envio-card .ec-topo{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.envio-card .ec-topo .tile{height:34px;min-width:34px;padding:3px;border-radius:9px}
.envio-card .ec-topo b{display:block;font-size:13.5px;font-weight:600;line-height:1.2}
.envio-card .ec-topo small{display:block;font-size:11.5px;color:var(--ink-3)}
.envio-card .ec-topo .fechar{margin-left:auto;width:28px;height:28px;border-radius:50%;border:0;background:var(--sheet-2);color:var(--ink-2);font-size:15px;cursor:pointer;display:grid;place-items:center;flex:none}
.envio-card label{display:block;font-size:11.5px;font-weight:600;margin:0 0 4px}
.envio-card label i{font-style:normal;color:#E5484D}
.envio-card .campo{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:36px;padding:3px 8px;border-radius:10px;border:1px solid var(--rule);background:var(--sheet);margin-bottom:8px;font-size:13px}
.envio-card .campo.alto{align-items:start}
.envio-card .campo input,.envio-card .campo textarea{flex:1;min-width:60px;border:0;background:transparent;font:inherit;font-size:13px;outline:0;resize:none;padding:3px 2px;color:var(--ink)}
.envio-card .campo.alto textarea{width:100%;min-height:44px}
.envio-card .amigo{padding:2px 8px 2px 2px;font-size:12px}
.envio-card .amigo i{width:20px;height:20px;font-size:10px}
.envio-card .sugestoes{display:flex;gap:4px;flex-wrap:wrap;margin:-2px 0 8px}
.envio-card .sugestoes span{font-size:11px;color:var(--ink-3);padding:3px 8px;border-radius:999px;border:1px solid var(--rule);cursor:pointer}
.envio-card .ec-nota{font-size:11px;color:var(--ink-4);line-height:1.4;margin:0 0 8px}
.envio-card .ec-acoes{margin-top:auto;display:flex;justify-content:space-between;align-items:center}
.envio-card .ec-acoes .enviar{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 16px;border-radius:999px;background:var(--blue);color:#fff;font:inherit;font-size:13px;font-weight:600;border:0;cursor:pointer}
.envio-card .ec-acoes .enviar:hover{background:var(--blue-2)}
.envio-card .ec-acoes .cancelar{font:inherit;font-size:13px;color:var(--ink-3);background:none;border:0;cursor:pointer}
.envio-card .ec-sucesso{position:absolute;inset:0;z-index:4;display:grid;place-content:center;justify-items:center;text-align:center;background:var(--sheet);border-radius:inherit;opacity:0;pointer-events:none;transition:opacity .3s;padding:20px}
.cards .card.enviado .ec-sucesso{opacity:1;pointer-events:auto}
.ec-sucesso .aneis{width:110px;height:110px;margin-bottom:14px}
.ec-sucesso .aneis i:nth-child(2){inset:14px}
.ec-sucesso .aneis i:nth-child(3){inset:28px}
.ec-sucesso .aneis span{inset:36px;background:#DDF5E8;color:#12704A;box-shadow:none}
.ec-sucesso .aneis span svg{width:18px;height:18px}
.ec-sucesso .aneis b{border-top-color:#12704A;animation-duration:2s}
.ec-sucesso h4{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em}
.ec-sucesso p{margin:4px 0 0;font-size:12.5px;color:var(--ink-3)}

.bandeja{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:45;width:min(840px,calc(100% - 32px));background:var(--sheet);border:1px solid var(--rule-soft);border-radius:18px;box-shadow:var(--sombra-alta);padding:10px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:center;animation:sobe-bandeja .3s cubic-bezier(.2,.7,.2,1)}
@keyframes sobe-bandeja{from{opacity:0;transform:translate(-50%,16px)}}
.bandeja .fichas{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:30px}
.bandeja .fichas .rotulo{font-size:12px;color:var(--ink-4);margin-right:4px}
.bandeja .ficha{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 3px;border-radius:999px;background:var(--sheet-2);font-size:12.5px;font-weight:500;animation:sobe-ficha .25s ease}
@keyframes sobe-ficha{from{opacity:0;transform:translateY(6px)}}
.bandeja .ficha .tile{height:24px;min-width:24px;padding:2px;border-radius:7px;background:var(--sheet)}
.bandeja .ficha .x{border:0;background:transparent;color:var(--ink-4);font-size:15px;cursor:pointer;padding:0 4px;line-height:1}
.bandeja .ficha .x:hover{color:var(--ink)}
.bandeja .campos{display:flex;gap:6px;align-items:center}
.bandeja .campo{display:flex;align-items:center;gap:4px;height:36px;padding:0 8px;border-radius:10px;border:1px solid var(--rule);font-size:13px;min-width:0}
.bandeja .campo.para{flex:none}
.bandeja .campo.msg{flex:1}
.bandeja .campo input{border:0;background:transparent;font:inherit;font-size:13px;outline:0;min-width:40px;flex:1;color:var(--ink)}
.bandeja .campo .amigo{padding:2px 8px 2px 2px;font-size:12px}
.bandeja .campo .amigo i{width:20px;height:20px;font-size:10px}
.bandeja .acoes{grid-column:2;grid-row:1 / span 2;display:flex;align-items:center;gap:6px}
.bandeja .enviar{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 18px;border-radius:999px;background:var(--blue);color:#fff;font:inherit;font-size:13.5px;font-weight:600;border:0;cursor:pointer;white-space:nowrap}
.bandeja .enviar:hover{background:var(--blue-2)}
.bandeja .fechar{width:32px;height:32px;border-radius:50%;border:0;background:var(--sheet-2);color:var(--ink-2);cursor:pointer;font-size:15px}
.bandeja .sucesso-b{grid-column:1 / -1;display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:#12704A;padding:6px 4px}
.bandeja .sucesso-b svg{width:18px;height:18px}
body.com-bandeja .resultados{padding-bottom:140px}
/* o card que já está na bandeja: o aviãozinho vira um visto azul */
.botao-icone.na-bandeja{color:var(--blue);background:var(--blue-soft);border-color:transparent}
/* no formulário do card, "Juntar mais" ao lado do Enviar */
.envio-card .ec-acoes .direita{display:flex;gap:6px;align-items:center}
.envio-card .ec-acoes .juntar{height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.envio-card .ec-acoes .juntar:hover{border-color:var(--ink-3);color:var(--ink)}
@media (max-width:620px){
  .bandeja{grid-template-columns:1fr;gap:8px}
  .bandeja .acoes{grid-column:1;grid-row:auto;justify-content:flex-end}
  .bandeja .campos{flex-wrap:wrap}
  .bandeja .campo.msg{flex:1 1 100%}
  body.com-bandeja .resultados{padding-bottom:220px}
}

/* os botões do formulário no card: só "Juntar" e "Enviar", à direita (o × fecha); nada quebra a 252 px */
.envio-card .ec-acoes{justify-content:flex-end}
.envio-card .ec-acoes .cancelar{display:none}
.envio-card .ec-acoes .juntar{padding:0 11px}
/* a camada do formulário entra e sai com um leve deslize e fade, não só o corte */
.cards .card .envio-card{transform:translateY(10px);opacity:0;transition:clip-path .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s}
.cards .card.enviando .envio-card{transform:none;opacity:1}
/* a fichinha que voa do card até a bandeja */
.voando{position:fixed;z-index:80;pointer-events:none;display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 3px;border-radius:999px;background:var(--sheet);box-shadow:var(--sombra-alta);font-size:12.5px;font-weight:500;transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .2s .4s;transform-origin:left center}
.voando .tile{height:24px;min-width:24px;padding:2px;border-radius:7px}
.bandeja .ficha.nova{animation:pousa .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes pousa{from{transform:scale(.6);opacity:0}}
/* a festa: cada card enviado enche de verde e ganha um visto; o aviãozinho estoura confete no centro da tela */
.cards .card .festa{position:absolute;inset:0;z-index:5;pointer-events:none;background:rgba(18,183,106,.18);clip-path:inset(100% 0 0 0);transition:clip-path .55s cubic-bezier(.2,.7,.2,1),opacity .45s;display:grid;place-items:center}
.cards .card .festa i{width:44px;height:44px;border-radius:50%;background:#12B76A;color:#fff;display:grid;place-items:center;transform:scale(0);transition:transform .35s cubic-bezier(.2,1.5,.4,1) .35s;box-shadow:0 8px 20px rgba(18,183,106,.35)}
.cards .card .festa i svg{width:20px;height:20px}
.cards .card.celebrando .festa{clip-path:inset(0 0 0 0)}
.cards .card.celebrando .festa i{transform:scale(1)}
.cards .card.celebrou .festa{opacity:0}

.cards .card .festa{overflow:hidden}
.cards .card .festa b{position:absolute;left:50%;top:50%;width:6px;height:10px;margin:-5px 0 0 -3px;border-radius:2px;background:var(--cor);opacity:0;animation:confete-card 1.1s cubic-bezier(.1,.7,.3,1) var(--atraso) forwards}
.cards .card .festa b:nth-child(3n){border-radius:50%;width:6px;height:6px}
@keyframes confete-card{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.5)}12%{opacity:1}100%{opacity:0;transform:translate(calc(var(--dx) * 1px),calc(var(--dy) * 1px + 40px)) rotate(calc(var(--rot) * 1deg)) scale(1)}}
@media (prefers-reduced-motion:reduce){.card .festa b{display:none}}

.cards .card.outro .m-acoes{padding-top:12px}
.cards .card.outro.galeria .g-corpo{display:flex;flex-direction:column;flex:none}
.cards .card.outro .em{font-size:12.5px;line-height:1.45}

.cards .card{transition:transform .2s,box-shadow .2s,min-height .4s cubic-bezier(.2,.7,.2,1)}
.cards .card.enviando{min-height:384px}

/* só um ×: o do navegador some */
.pilula-busca input[type="search"]::-webkit-search-cancel-button,.pilula-busca input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
/* o segmento abre a lista do que procurar */
.escopo-caixa{position:relative}
.escopo-lista{position:absolute;left:0;top:calc(100% + 8px);z-index:7;min-width:200px;background:var(--sheet);border:1px solid var(--rule-soft);border-radius:14px;box-shadow:var(--sombra-alta);padding:6px;animation:desce .2s cubic-bezier(.2,.7,.2,1)}
.escopo-lista button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:9px;background:transparent;font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;text-align:left}
.escopo-lista button:hover{background:var(--sheet-2)}
.escopo-lista button svg{width:16px;height:16px;color:var(--ink-4);flex:none}
.escopo-lista button small{margin-left:auto;font-size:11.5px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.escopo-lista button.on{color:var(--blue-ink);background:var(--blue-soft)}
.escopo-lista button.on svg{color:var(--blue)}
.escopo-lista .fio{height:1px;background:var(--rule-soft);margin:6px 4px}
/* o pedir função: abas que funcionam, os passos de como funciona, o botão enviando, o sucesso que entra */
.janela .abas span{cursor:pointer}
.janela .passos-pedido{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.janela .passos-pedido li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;border-radius:12px;background:var(--sheet-2)}
.janela .passos-pedido i{width:34px;height:34px;border-radius:10px;background:var(--sheet);color:var(--blue);display:grid;place-items:center;font-style:normal;box-shadow:var(--sombra)}
.janela .passos-pedido i svg{width:18px;height:18px}
.janela .passos-pedido b{display:block;font-size:13.5px;font-weight:600;margin-bottom:2px}
.janela .passos-pedido p{margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.janela .passos-pedido small{display:inline-block;margin-top:6px;font-size:11px;font-weight:600;color:var(--ink-4);letter-spacing:.04em;text-transform:uppercase}
.janela .enviar.aguarde{pointer-events:none;background:var(--blue-2)}
.janela .enviar .pontos{display:inline-flex;gap:3px;margin-left:4px}
.janela .enviar .pontos i{width:5px;height:5px;border-radius:50%;background:#fff;animation:pisca-ponto 1s infinite}
.janela .enviar .pontos i:nth-child(2){animation-delay:.15s}.janela .enviar .pontos i:nth-child(3){animation-delay:.3s}
@keyframes pisca-ponto{0%,80%,100%{opacity:.3}40%{opacity:1}}
.janela .sucesso{animation:entra-sucesso .45s cubic-bezier(.2,.9,.3,1.2)}
@keyframes entra-sucesso{from{opacity:0;transform:scale(.9)}}
.janela .sucesso .detalhe{margin:-10px 0 18px;padding:10px 14px;border-radius:12px;background:var(--sheet-2);font-size:12.5px;color:var(--ink-2);text-align:left;display:flex;gap:10px;align-items:center}
.janela .sucesso .detalhe b{display:block;font-size:12.5px;color:var(--ink);font-weight:600}
.janela .sucesso .detalhe small{color:var(--ink-4)}
.janela .contador{font-size:11.5px;color:var(--ink-4);text-align:right;margin:-8px 0 12px}
@media (max-width:1100px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .grade-resultados{grid-template-columns:1fr;gap:12px}
  .filtros{position:static;display:flex;gap:6px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:none}
  .filtros h2,.filtros .limpar-filtros,.grupo .mais,.grupo .opcao{display:none}
  .grupo{padding:0;border:0;flex:none}
  .grupo h3{margin:0;font-size:13px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--ink-2);padding:8px 12px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);white-space:nowrap}
  .grupo h3::after{content:" ▾";color:var(--ink-4)}
  .grupo.on h3{background:var(--blue-soft);border-color:transparent;color:var(--blue-ink)}
}
@media (max-width:620px){
  .topo-busca{padding:28px 0 22px}
  .topo-busca .rotulo{margin-left:2px}
  .pilula-busca{height:52px;padding:4px 4px 4px 6px}
  .escopo{height:40px;padding:0 10px}
  .escopo b{display:none}
  .escopo i{margin:0}
  .pilula-busca .lupa{margin-left:4px}
  .pilula-busca input{font-size:15px}
  .nao-achou{display:none}
  .ir{width:40px;height:40px}
  .populares span{display:none}
  .cards{grid-template-columns:1fr}
  .cabeca-lista{margin:6px 0 14px}
  .resultados{padding-bottom:48px}
  .nada{padding:20px 0 40px}
  .aneis{width:150px;height:150px}
  .aneis span{inset:48px}
}

.cat-topo{max-width:1120px;margin:28px auto 0;padding:0 32px;display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cat-topo h1{margin:0;font-size:clamp(24px,3vw,32px);font-weight:600;letter-spacing:-.02em}
.cat-topo p{margin:6px 0 0;color:var(--ink-3);font-size:15px}
.cat-topo p a{color:var(--blue);font-weight:600}
.cat-ferr{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cat-ferr .campo-c{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);min-width:220px}
.cat-ferr .campo-c svg{width:15px;height:15px;color:var(--ink-4)}
.cat-ferr .campo-c input{border:0;background:transparent;font:inherit;font-size:13.5px;outline:0;flex:1;min-width:0;color:var(--ink)}
.cat-ferr .ordem b{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink);font-weight:500;font-size:13.5px}
.cat-categorias{max-width:1120px;margin:22px auto 0;padding:0 32px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.cat-categorias::-webkit-scrollbar{display:none}
.cat-categorias span{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;padding:7px 12px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2);cursor:pointer;white-space:nowrap}
.cat-categorias span small{font-size:11px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.cat-categorias span.on{background:var(--blue-soft);border-color:transparent;color:var(--blue-ink)}
.cat-categorias span.on small{color:var(--blue-ink)}
.cat-conta{max-width:1120px;margin:18px auto 0;padding:0 32px;font-size:13.5px;color:var(--ink-3);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.cat-conta b{color:var(--ink);font-weight:600}
.cat-conta .autor-f{display:inline-flex;align-items:center;gap:6px}
.cat-conta .autor-f b{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);font-weight:500;font-size:13px}
.cat-grade{max-width:1120px;margin:14px auto 0;padding:0 32px 40px}
.cat-grade .cards-p{grid-template-columns:repeat(3,minmax(0,1fr))}
/* o card de plugin: o M, com as funções no lugar dos nomes */
.cards-p .card .m-corpo .em b{color:var(--ink);font-weight:600}
.cards-p .m-avatar .tile{background:var(--sheet-2)}
.catalogo-p .paginacao{max-width:1120px;margin:0 auto;padding:0 32px 80px;display:flex;justify-content:center;align-items:center;gap:6px;font-size:13.5px}
.catalogo-p .paginacao a,.catalogo-p .paginacao span{min-width:36px;height:36px;padding:0 10px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2);font-weight:500}
.catalogo-p .paginacao span.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.catalogo-p .paginacao a.seta-p{border-color:transparent;background:transparent}
/* os laterais, como na galeria */
@media (max-width:1100px){.cat-grade .cards-p{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
  .cat-topo,.cat-categorias,.cat-conta,.cat-grade,.catalogo-p .paginacao{padding-left:20px;padding-right:20px}
  .cat-grade .cards-p{grid-template-columns:1fr}
  .cat-ferr{width:100%}
  .cat-ferr .campo-c{flex:1;min-width:0}
}

@media (max-width:620px){
  .cat-grade[data-colunas="2"] .cards-p{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cat-grade[data-colunas="2"] .cards .m-banner{height:74px;margin:8px 8px 0;border-radius:12px}
  .cat-grade[data-colunas="2"] .cards .m-cat,.cat-grade[data-colunas="2"] .cards .m-vistas{top:6px;font-size:9px;padding:2px 5px;gap:3px}
  .cat-grade[data-colunas="2"] .cards .m-cat{right:6px;max-width:58%}
  .cat-grade[data-colunas="2"] .cards .m-vistas{left:6px}
  .cat-grade[data-colunas="2"] .cards .m-vistas svg{width:9px;height:9px}
  .cat-grade[data-colunas="2"] .cards .m-avatar{top:60px;left:14px;padding:2px;border-radius:10px}
  .cat-grade[data-colunas="2"] .cards .m-avatar .tile{height:34px;min-width:34px;padding:2px;border-radius:8px}
  .cat-grade[data-colunas="2"] .cards .m-corpo{padding:28px 12px 12px}
  .cat-grade[data-colunas="2"] .cards h3{font-size:13.5px}
  .cat-grade[data-colunas="2"] .cards .em{font-size:11px;margin-top:2px}
  .cat-grade[data-colunas="2"] .cards .m-termos{font-size:11px;margin-top:5px;line-height:1.45}
  .cat-grade[data-colunas="2"] .cards .m-termos .exemplo{white-space:normal;max-width:100%;line-height:1.3;font-size:9.5px}
  .cat-grade[data-colunas="2"] .cards .m-dados{margin-top:8px;padding:0 8px;border-radius:10px}
  .cat-grade[data-colunas="2"] .cards .m-dados div{padding:4px 0;gap:6px}
  .cat-grade[data-colunas="2"] .cards .m-dados small{font-size:10.5px;gap:4px}
  .cat-grade[data-colunas="2"] .cards .m-dados small svg{width:10px;height:10px}
  .cat-grade[data-colunas="2"] .cards .m-dados b{font-size:10.5px}
  .cat-grade[data-colunas="2"] .cards .m-acoes{padding-top:8px;gap:5px;grid-template-columns:minmax(0,1fr) 32px 32px}
  .cat-grade[data-colunas="2"] .cards .m-acoes .obter{height:32px;font-size:12px;gap:5px;padding:0 6px}
  .cat-grade[data-colunas="2"] .cards .m-acoes .obter svg{width:13px;height:13px}
  .cat-grade[data-colunas="2"] .cards .m-acoes .botao-icone{width:32px;height:32px}
}


/* a busca, no site: a faixa é o .topo-busca (o .topo é genérico demais para toda página); o formulário, .caixa-busca */
.caixa-busca{position:relative}
/* o segmento é um <details>: abre sem JavaScript, e a setinha do navegador some */
.escopo-caixa summary{list-style:none}
.escopo-caixa summary::-webkit-details-marker{display:none}
.escopo-caixa[open] .escopo-lista{display:block}
.escopo-lista a{text-decoration:none}
.escopo-lista .fio{height:1px;background:var(--rule-soft);margin:6px 4px}
/* as abas da janela são botões de verdade */
.janela .abas button{font:inherit;border:0;cursor:pointer;background:transparent}
.bloco .titulo button{font:inherit;border:0;background:none;cursor:pointer;padding:0}
/* as fitas que se arrastam: o mouse pega e puxa, sem barra de rolagem */
.cat-categorias{cursor:grab;user-select:none}
.cat-categorias.arrastando{cursor:grabbing}
.cat-categorias.arrastando a{pointer-events:none}
@media (max-width:900px){
  .com-js .filtros[data-arrasta]{cursor:grab;user-select:none}
  .com-js .filtros[data-arrasta].arrastando{cursor:grabbing}
}
/* o que só existe para quem está sem JavaScript */
.com-js [data-so-sem-js]{display:none}
/* a paginação das telas refeitas */
.resultados .paginacao{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;margin:26px 0 0}
.resultados .paginacao-contagem{margin:0;color:var(--ink-4)}
.resultados .paginacao-paginas{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.resultados .pagina{min-width:36px;height:36px;padding:0 12px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2);font-weight:500;text-decoration:none}
.resultados .pagina:hover{border-color:var(--ink-3);color:var(--ink)}
/* o pedido em página própria: a mesma janela, sem a moldura de janela */
.pedido-p{max-width:620px;margin:22px auto 0;padding:0 32px 80px}
.pedido-p h1{margin:0 0 8px;font-size:clamp(24px,3vw,30px);font-weight:600;letter-spacing:-.02em}
.pedido-p h2{margin:28px 0 12px;font-size:17px;font-weight:600}
.pedido-p > p{margin:0 0 20px;color:var(--ink-3);font-size:15px;line-height:1.6}
.janela.em-pagina{max-width:none;padding:0;background:transparent;box-shadow:none;border-radius:0;animation:none}
.janela.em-pagina .enviar{width:auto;padding:0 20px}
.escopo-caixa .escopo-lista form{display:contents}
.painel-busca .bloco[hidden]{display:none}
.painel-busca .linha-busca{text-decoration:none;color:inherit}
.painel-busca .linha-busca span:first-of-type{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.painel-busca .linha-busca .x{background:none;border:0;font:inherit;cursor:pointer}
/* o degradê do banner: seis, escolhidos pelo nome — o mesmo card tem o mesmo banner em toda página */
.cards .m-banner[data-degrade="0"]{--m-grad:linear-gradient(135deg,#FFB35C 0%,#FF6B6B 50%,#FF8FB1 100%)}
.cards .m-banner[data-degrade="1"]{--m-grad:linear-gradient(135deg,#6C5CE7 0%,#3D8BFF 55%,#7BD0FF 100%)}
.cards .m-banner[data-degrade="2"]{--m-grad:linear-gradient(135deg,#00B894 0%,#55EFC4 60%,#DFF9F0 100%)}
.cards .m-banner[data-degrade="3"]{--m-grad:linear-gradient(135deg,#F04FBF 0%,#7A5AF8 60%,#3D8BFF 100%)}
.cards .m-banner[data-degrade="4"]{--m-grad:linear-gradient(135deg,#3D8BFF 0%,#7BD0FF 55%,#DFF1FF 100%)}
.cards .m-banner[data-degrade="5"]{--m-grad:linear-gradient(135deg,#F4A23A 0%,#F08AB0 55%,#7A5AF8 100%)}
/* o rótulo que o leitor de tela lê e a tela não mostra: aqui também, porque a busca deixou o legado */
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* o card M com dados de verdade: o link é o nome e o "Ver mais"; o ícone que não existe vira o monograma */
.cards .card h3 a{color:inherit;text-decoration:none}
.cards .card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
/* A linha das ações sobe inteira acima da camada do link do card — e é ela
   que sobe, não cada filho: o `*` daqui punha `position:relative` até no
   rótulo de leitor de tela, que é absoluto de propósito. Ele virava uma
   segunda linha dentro do botão, e o marcador saía descentralizado. */
.cards .card .m-acoes{position:relative;z-index:2}
.cards .card .m-acoes .obter{text-decoration:none;color:var(--paper)}
/* o "Ver mais" ocupa o espaço que sobra: no card de 252 px do mockup a linha
   já ficava justa, mas num card mais largo o vão entre ele e os ícones virava
   um buraco no meio do rodapé. */
.cards .m-acoes .obter{flex:1 1 auto;max-width:200px}
.cards .card .m-acoes .obter:hover{color:#fff}
.cards .tile .monograma{width:36px;height:36px;border-radius:9px;font-size:13px}
.cards .m-avatar .tile .monograma{width:36px;height:36px}
.cards .m-termos .exemplo{color:var(--ink-4);font-style:italic}
.cards .m-vistas.patrocinado{background:var(--amber-soft);color:var(--amber);letter-spacing:.04em;text-transform:uppercase}
.cards .card.patrocinado{border-color:color-mix(in srgb, var(--amber) 35%, var(--rule-soft))}
/* o salvar dentro do card é um formulário: o botão é o marcador */
.cards .favoritar{display:inline-flex;margin:0}
/* o formulário de enviar dentro do card: um <select> no lugar do campo de apelido */
.envio-card .campo select{flex:1;min-width:60px;border:0;background:transparent;font:inherit;font-size:13px;outline:0;color:var(--ink);padding:3px 0}
.envio-card .sem-amigos{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin:0 0 10px}
.envio-card .sem-amigos a{color:var(--blue);font-weight:600}
.envio-card form{display:contents}
.bandeja .campo select{border:0;background:transparent;font:inherit;font-size:13px;outline:0;color:var(--ink);min-width:60px}
.bandeja form{display:contents}
/* a janela: o formulário é de verdade, com o CSRF; o e-mail é opcional */
.janela form{display:contents}
/* `display:contents` ganha do `hidden` do navegador — e a aba escondida
   continuava na tela. Quem diz "esconde" aqui precisa dizer de novo. */
.janela form[hidden],.envio-card form[hidden],.bandeja form[hidden]{display:none}
.janela .campo input[type="email"]{min-width:0}
.janela .erro-j{margin:-8px 0 12px;font-size:12.5px;color:var(--red)}
.janela .como a{color:var(--blue);font-weight:600}
.janela label small{font-weight:400;color:var(--ink-4)}
/* o catálogo: as seções da página são a folha */
.catalogo-p .cat-topo,.catalogo-p .cat-categorias,.catalogo-p .cat-conta,.catalogo-p .cat-grade{max-width:1120px}
.cat-categorias a{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;padding:7px 12px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2);white-space:nowrap;text-decoration:none}
.cat-categorias a small{font-size:11px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.cat-categorias a.on{background:var(--blue-soft);border-color:transparent;color:var(--blue-ink)}
.cat-categorias a.on small{color:var(--blue-ink)}
.cat-ferr form{display:contents}
.cat-ferr select{height:40px;padding:0 12px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink);font:inherit;font-size:13.5px;font-weight:500}
.cat-conta select{height:30px;padding:0 8px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink);font:inherit;font-size:13px}
.catalogo-p .paginacao{flex-wrap:wrap}
.catalogo-p .paginacao-contagem{margin:0 10px 0 0;font-size:13px;color:var(--ink-4)}
.catalogo-p .paginacao-paginas{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.catalogo-p .paginacao .pagina.atual{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.catalogo-p .paginacao .pagina.desativada{opacity:.4}
.catalogo-p .paginacao .pagina.reticencias{border-color:transparent;background:transparent}
.catalogo-p .cat-grade .cards{margin-top:0}
.catalogo-p .nada{padding:36px 0 60px}
/* a busca sem termo: o catálogo inteiro está a um clique */
.resultados .cabeca-lista h1{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em}
.resultados .cabeca-lista .ordem select{border:1px solid var(--rule);background:var(--sheet);color:var(--ink);font:inherit;font-size:13px;font-weight:500;padding:7px 12px;border-radius:10px}
.resultados .cabeca-lista .ordem form{display:contents}
.filtros form{display:contents}
.filtros .opcao input{position:absolute;opacity:0;width:1px;height:1px}
.filtros .opcao{position:relative}
.filtros .aplicar{margin-top:10px;width:100%}
.filtros .grupo h3 button{all:unset;cursor:pointer}
/* o botão de aplicar e o de fechar são da bandeja de filtro a 900 px */
.filtros .lista-f .aplicar,.filtros .fechar-f{display:none}
/* a 900 px os grupos viram pílulas; a lista de um grupo abre embaixo da tela, como o painel da conta */
@media (max-width:900px){
  .filtros .grupo .lista-f{display:none}
  .filtros .grupo.aberto .lista-f{display:block;position:fixed;left:12px;right:12px;bottom:12px;z-index:46;padding:14px 16px;background:var(--sheet);border:1px solid var(--rule-soft);border-radius:20px;box-shadow:var(--sombra-alta);max-height:calc(100vh - 100px);overflow:auto;animation:sobe-bandeja .25s cubic-bezier(.2,.7,.2,1)}
  .filtros .grupo.aberto .lista-f{transform:none}
  .filtros .grupo.aberto .opcao{display:flex}
  .filtros .grupo.aberto .lista-f .aplicar{display:inline-flex;margin-top:12px}
  .filtros .grupo .fechar-f{display:none}
  .filtros .grupo.aberto .fechar-f{display:block;margin:0 0 8px;font-size:13px;font-weight:600;color:var(--ink-3);background:none;border:0;padding:0;cursor:pointer;text-align:left}
  .filtros > .aplicar{display:none}
}
/* a janela do SketchUp: os resultados numa coluna, a bandeja acima da barra */
.sketchup .grade-resultados{grid-template-columns:1fr}


/* ------------------------------------------------ a função (tela 3) e o plugin (tela 4) */
.migalhas{max-width:1120px;margin:22px auto 0;padding:0 32px;font-size:12.5px;color:var(--ink-4);display:flex;gap:6px;flex-wrap:wrap}
.migalhas a{color:var(--ink-3)}
.migalhas a:hover{color:var(--blue)}
.migalhas b{color:var(--ink-2);font-weight:500}
/* o alto: o banner do card, maior, com o ícone saindo dele */
.funcao-topo{max-width:1120px;margin:12px auto 0;padding:0 32px}
.acoes-f{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.acoes-f .obter{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--paper);font:inherit;font-size:14px;font-weight:600;border:0;cursor:pointer;transition:background .2s,transform .2s}
.acoes-f .obter svg{width:15px;height:15px}
.acoes-f .obter:hover{background:var(--blue);color:#fff;transform:translateY(-1px)}
.acoes-f .com-texto{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.acoes-f .com-texto:hover{border-color:var(--ink-3);color:var(--ink)}
.acoes-f .com-texto svg{width:15px;height:15px}
.acoes-f .com-texto.marcador-salvar .mc,.acoes-f .com-texto.marcador-salvar .mc svg{width:15px;height:15px}
.acoes-f .com-texto.marcador-salvar.on{color:var(--blue);border-color:var(--blue-soft);background:var(--blue-soft)}
/* as duas colunas */
.corpo-f{max-width:1120px;margin:36px auto 0;padding:0 32px 80px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}
.secao-f{padding:0 0 32px;margin:0 0 32px;border-bottom:1px solid var(--rule-soft)}
.secao-f:last-child{border-bottom:0;margin-bottom:0}
.secao-f h2{margin:0 0 12px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.secao-f h2 small{font-weight:500;color:var(--ink-4);font-size:13px;margin-left:8px}
.secao-f p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.65}
.secao-f .fraco{color:var(--ink-4);font-size:14px}
.secao-f .termos span{font-size:13px;padding:5px 12px}
.secao-f .termos span.casa{background:var(--blue-soft);color:var(--blue-ink)}
.nota-descricao{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--sheet-2);color:var(--ink-3);font-size:13.5px}
.nota-descricao svg{width:16px;height:16px;flex:none;color:var(--ink-4)}
/* onde fica: a barra do SketchUp com o ícone aceso */
.onde-f{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:20px;align-items:center}
.onde-f b{display:block;font-size:15px;font-weight:600;margin-bottom:4px}
.su-mini{border-radius:12px;overflow:hidden;box-shadow:var(--sombra);border:1px solid var(--rule-soft)}
.su-mini .barra{height:22px;background:#2B2B2E;display:flex;align-items:center;gap:5px;padding:0 9px;color:#B8B8BC;font-size:9.5px;font-weight:500}
.su-mini .barra i{width:7px;height:7px;border-radius:50%;background:#5A5A5F}
.su-mini .barra i:first-child{background:#FF5F57}.su-mini .barra i:nth-child(2){background:#FEBC2E}.su-mini .barra i:nth-child(3){background:#28C840}
.su-mini .barra span{margin-left:6px}
.su-mini .menu{display:flex;gap:10px;padding:5px 10px;background:#F2F2F5;font-size:9.5px;color:#48484D;border-bottom:1px solid #E5E5EA}
.su-mini .menu span.on{color:var(--blue);font-weight:600}
.su-mini .ferr{display:flex;gap:4px;padding:6px 8px;background:#FAFAFC;border-bottom:1px solid #E5E5EA;align-items:center}
.su-mini .ferr i{width:18px;height:18px;border-radius:4px;background:#E5E5EA}
.su-mini .ferr .tile{height:22px;min-width:22px;padding:2px;border-radius:5px;background:var(--blue-soft);box-shadow:0 0 0 2px var(--blue)}
.su-mini .vista{height:70px;background:linear-gradient(180deg,#F8F9FC,#EEF0F5);position:relative}
.su-mini .vista svg{position:absolute;inset:0;width:100%;height:100%}
.su-mini .legenda{padding:6px 10px;font-size:10.5px;color:var(--ink-4);background:var(--sheet)}
/* as outras funções do plugin: o card aprovado, compacto */
.outras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.card-c{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--rule-soft);border-radius:16px;background:var(--sheet);box-shadow:var(--sombra);transition:transform .2s,box-shadow .2s}
.card-c:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta)}
.card-c .tile{height:40px;min-width:40px;padding:3px;border-radius:10px}
.card-c b{display:block;font-size:14px;font-weight:600}
.card-c small{display:block;font-size:12px;color:var(--ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-c .ver{font-size:12.5px;font-weight:600;color:var(--blue);white-space:nowrap}
/* a galeria vazia: um convite, não um buraco */
.convite-galeria{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 18px;border:1px dashed var(--rule);border-radius:16px}
.convite-galeria .quadro-vazio{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--aurora-1),var(--aurora-2));display:grid;place-items:center;color:var(--blue)}
.convite-galeria .quadro-vazio svg{width:22px;height:22px}
.convite-galeria b{display:block;font-size:14px;font-weight:600}
.convite-galeria p{font-size:13px;color:var(--ink-3);margin-top:2px}
.convite-galeria .pilula{font-size:13px;padding:8px 14px}
/* a lateral: como obter, detalhes, anúncio */
.lado-f{position:sticky;top:84px;display:grid;gap:14px}
.painel-f{border:1px solid var(--rule-soft);border-radius:18px;background:var(--sheet);box-shadow:var(--sombra);padding:18px 20px}
.painel-f h2{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.painel-f .oferta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.painel-f .oferta b{display:block;font-size:15px;font-weight:600}
.painel-f .oferta small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.painel-f .obter-largo{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;border-radius:12px;background:var(--blue);color:#fff;font:inherit;font-size:14.5px;font-weight:600;border:0;cursor:pointer;transition:background .2s}
.painel-f .obter-largo:hover{background:var(--blue-2)}
.painel-f .obter-largo svg{width:15px;height:15px}
.painel-f .nota{margin:10px 0 0;font-size:12px;color:var(--ink-4);text-align:center}
.painel-f .precisa{margin-top:14px;padding-top:14px;border-top:1px solid var(--rule-soft);display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-2)}
.painel-f .precisa svg{width:16px;height:16px;color:var(--ink-4);flex:none}
.painel-f .precisa a{color:var(--blue);font-weight:600;margin-left:auto;font-size:12.5px;white-space:nowrap}
.detalhes-f{margin:0;padding:0;list-style:none}
.detalhes-f li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--rule-soft);font-size:13.5px}
.detalhes-f li:first-child{border-top:0;padding-top:0}
.detalhes-f li span{display:inline-flex;align-items:center;gap:7px;color:var(--ink-4)}
.detalhes-f li span svg{width:14px;height:14px}
.detalhes-f li b{font-weight:500;color:var(--ink);text-align:right}
.detalhes-f li b a{color:var(--blue)}
.anuncio-f{border:1px dashed var(--rule);border-radius:18px;padding:14px;color:var(--ink-4);font-size:12px;text-align:center}
.anuncio-f .arte{height:200px;border-radius:12px;background:linear-gradient(135deg,var(--blue-soft),color-mix(in srgb, var(--violeta) 14%, var(--sheet)));margin-bottom:8px}
.anuncio-f b{display:block;color:var(--ink-3);font-weight:600;margin-bottom:2px}
/* a 500 px: uma coluna, e as ações fixas embaixo */
.barra-fixa{display:none}
@media (max-width:900px){
  .corpo-f{grid-template-columns:1fr;gap:28px}
  .lado-f{position:static}
  .onde-f{grid-template-columns:1fr}
  .outras{grid-template-columns:1fr}
}
@media (max-width:620px){
  .migalhas,.funcao-topo,.corpo-f{padding-left:20px;padding-right:20px}
  .corpo-f{padding-bottom:110px}
  .barra-fixa{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:30;gap:8px;padding:8px;border-radius:18px;background:color-mix(in srgb, var(--sheet) 92%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--rule-soft);box-shadow:var(--sombra-alta)}
  .barra-fixa .obter{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:12px;background:var(--blue);color:#fff;font:inherit;font-size:14px;font-weight:600;border:0}
  .barra-fixa .botao-icone{width:42px;height:42px;border-radius:12px;flex:none}
  .barra-fixa .obter{white-space:nowrap;font-size:13.5px;padding:0 12px;min-width:0}
  .barra-fixa .obter svg{width:15px;height:15px;flex:none}
  .convite-galeria{grid-template-columns:auto minmax(0,1fr)}
  .convite-galeria .pilula{grid-column:1 / -1;justify-self:start}
}

/* o alto vira duas colunas: à esquerda quem é e o que fazer; à direita a demonstração */
.alto-f{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:40px;align-items:center;padding:8px 0 0}
.alto-f .lado-esq{display:flex;flex-direction:column;gap:14px}
.alto-f .quem{display:flex;align-items:center;gap:14px}
.alto-f .quem .tile{height:64px;min-width:64px;max-width:150px;padding:6px;border-radius:16px;box-shadow:var(--sombra)}
.alto-f .selos{display:flex;gap:6px;flex-wrap:wrap}
.alto-f .selo{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px;background:var(--sheet-2);color:var(--ink-3)}
.alto-f .selo svg{width:12px;height:12px}
.alto-f .selo.cat{color:var(--blue-ink);background:var(--blue-soft)}
.alto-f h1{margin:0;font-size:clamp(26px,3.2vw,36px);font-weight:600;letter-spacing:-.025em;line-height:1.1}
.alto-f .sub{margin:0;font-size:15px;color:var(--ink-3)}
.alto-f .sub a{color:var(--ink);font-weight:600}
.alto-f .problema{margin:0;font-size:17px;line-height:1.5;color:var(--ink-2);max-width:44ch}
.alto-f .problema b{color:var(--ink);font-weight:600}
.exemplo{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#9A4D00;background:#FFF4DE;padding:2px 7px;border-radius:999px;vertical-align:middle;margin-left:6px;white-space:nowrap}
/* a demonstração: o que a função faz, em loop */
.demo{position:relative;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#F8F9FC,#EEF0F5);border:1px solid var(--rule-soft);box-shadow:var(--sombra-alta);aspect-ratio:16/10.5}
.demo .barra{height:26px;background:#2B2B2E;display:flex;align-items:center;gap:5px;padding:0 10px;color:#B8B8BC;font-size:10px;font-weight:500}
.demo .barra i{width:8px;height:8px;border-radius:50%;background:#5A5A5F}
.demo .barra i:first-child{background:#FF5F57}.demo .barra i:nth-child(2){background:#FEBC2E}.demo .barra i:nth-child(3){background:#28C840}
.demo .barra span{margin-left:6px}
.demo svg.cena{position:absolute;left:0;right:0;top:26px;bottom:0;width:100%;height:calc(100% - 26px)}
.demo .rotulo-demo{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.88);color:var(--ink-2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.demo .rotulo-demo i{width:6px;height:6px;border-radius:50%;background:#E5484D;animation:pisca-rec 1.2s infinite}
@keyframes pisca-rec{50%{opacity:.3}}
.demo .passo-demo{position:absolute;right:12px;bottom:12px;max-width:62%;text-align:right;line-height:1.3;font-size:10.5px;font-weight:500;padding:5px 10px;border-radius:999px;background:rgba(29,29,31,.72);color:#fff}
.demo .cursor{position:absolute;width:14px;height:14px;left:0;top:26px;pointer-events:none;animation:cursor 6s infinite}
.demo .cursor svg{width:14px;height:14px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
@keyframes cursor{0%{transform:translate(60%,180%)}20%{transform:translate(60%,180%)}35%{transform:translate(9%,20%)}45%{transform:translate(9%,20%) scale(.85)}50%{transform:translate(9%,20%)}65%{transform:translate(52%,150%)}72%{transform:translate(52%,150%) scale(.85)}78%{transform:translate(52%,150%)}100%{transform:translate(60%,180%)}}
/* a superfície com o buraco que fecha */
.demo .buraco{animation:fecha 6s infinite}
@keyframes fecha{0%,72%{transform:scale(1);opacity:1}86%{transform:scale(.05);opacity:1}88%,100%{transform:scale(0);opacity:0}}
.demo .contorno{animation:contorno 6s infinite}
@keyframes contorno{0%,64%{opacity:0}70%,80%{opacity:1}86%,100%{opacity:0}}
.demo .icone-aceso{animation:acende 6s infinite}
@keyframes acende{0%,33%{opacity:0}40%,55%{opacity:1}62%,100%{opacity:0}}
/* "quando usar" e os passos */
.quando{display:grid;gap:8px}
.quando li{display:flex;gap:10px;align-items:start;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.quando li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--blue);margin-top:9px}
.passos-f{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:passo}
.passos-f li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;border-radius:14px;background:var(--sheet-2);counter-increment:passo}
.passos-f li::before{content:counter(passo);width:30px;height:30px;border-radius:50%;background:var(--sheet);color:var(--ink);font-size:13px;font-weight:600;display:grid;place-items:center;box-shadow:var(--sombra)}
.passos-f b{display:block;font-size:14px;font-weight:600;margin-bottom:2px}
.passos-f p{font-size:13.5px;color:var(--ink-3);line-height:1.5}
.passos-f .tile{height:22px;min-width:22px;padding:2px;border-radius:6px;vertical-align:middle;display:inline-flex;margin:0 2px}
/* quem mais resolve isso: as outras funções que a mesma busca traz */
.tambem{display:grid;gap:10px}
.tambem .card-c small{white-space:normal}
.tambem .card-c .porque{display:inline-block;margin-top:4px;font-size:11.5px;color:var(--blue-ink);background:var(--blue-soft);padding:2px 8px;border-radius:999px}
/* compatibilidade e aula, na lateral */
.compat{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.compat span{font-size:12px;font-weight:500;padding:4px 9px;border-radius:999px;background:var(--sheet-2);color:var(--ink-2)}
.compat span.nao{color:var(--ink-4);text-decoration:line-through;background:transparent;border:1px dashed var(--rule)}
.compat-so{display:flex;gap:10px;margin-top:10px;font-size:12.5px;color:var(--ink-3)}
.compat-so b{color:var(--ink);font-weight:500}
.aula-f{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center}
.aula-f .capa{width:96px;height:60px;border-radius:10px;background:linear-gradient(135deg,#2B2B2E,#48484D);display:grid;place-items:center;color:#fff;position:relative;overflow:hidden}
.aula-f .capa svg{width:22px;height:22px}
.aula-f .capa small{position:absolute;right:5px;bottom:4px;font-size:10px;background:rgba(0,0,0,.6);padding:1px 5px;border-radius:4px}
.aula-f b{display:block;font-size:13.5px;font-weight:600}
.aula-f small{font-size:12px;color:var(--ink-3)}
.aula-f a{font-size:12.5px;color:var(--blue);font-weight:600}
/* o vazio de cada bloco, quando o painel ainda não tem */
.painel-vazio{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;border:1px dashed var(--rule);color:var(--ink-4);font-size:12.5px}
@media (max-width:900px){
  .alto-f{grid-template-columns:1fr;gap:20px}
}
@media (max-width:620px){
  .alto-f .quem .tile{height:52px;min-width:52px}
  .alto-f .problema{font-size:15.5px}
}


.quadro-dir{position:relative}
.quadro-dir > *{display:none!important}
.quadro-dir[data-modo="video"] .demo,.quadro-dir[data-modo="anuncio"] .demo-anuncio{display:block!important}
.quadro-dir[data-modo="vazio"] .demo-vazio{display:grid!important}
.demo-vazio{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/10.5;background:linear-gradient(135deg,#FFB35C 0%,#FF6B6B 50%,#FF8FB1 100%);display:grid;place-items:center;box-shadow:var(--sombra-alta)}
.demo-vazio .luz{position:absolute;inset:-30%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.35),transparent 55%);pointer-events:none}
.demo-vazio .avatar-g{position:relative;display:inline-flex;padding:6px;border-radius:24px;background:rgba(255,255,255,.92);box-shadow:0 12px 32px rgba(29,29,31,.18)}
.demo-vazio .avatar-g .tile{height:96px;min-width:96px;max-width:220px;padding:10px;border-radius:20px;background:var(--sheet-2)}
.demo-vazio .nome-g{position:absolute;left:14px;bottom:12px;font-size:11px;font-weight:600;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.86);color:var(--ink-2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.demo-anuncio{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/10.5;background:var(--sheet-2);box-shadow:var(--sombra-alta);border:1px solid var(--rule-soft)}
.demo-anuncio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.demo-anuncio .veu-a{position:absolute;inset:auto 0 0;padding:44px 16px 14px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.62));color:#fff;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.demo-anuncio .veu-a b{display:block;font-size:15px;font-weight:600;line-height:1.2}
.demo-anuncio .veu-a small{display:block;font-size:12px;opacity:.85;margin-top:2px}
.demo-anuncio .veu-a .saiba{flex:none;height:34px;padding:0 14px;border-radius:999px;background:#fff;color:var(--ink);font-size:12.5px;font-weight:600;display:inline-flex;align-items:center}
.demo-anuncio .rotulo-a{position:absolute;left:12px;top:12px;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.86);color:var(--ink-3)}


.quadro-dir[data-modo="adsense"] .demo-adsense{display:grid!important}
.demo-adsense{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/10.5;background:var(--sheet-2);border:1px solid var(--rule-soft);box-shadow:var(--sombra);place-items:center}
.demo-adsense .unidade{width:336px;max-width:calc(100% - 32px);height:280px;max-height:calc(100% - 48px);border-radius:12px;background:var(--sheet);border:1px solid var(--rule);display:grid;grid-template-rows:1fr auto;overflow:hidden}
.demo-adsense .unidade .img{background:repeating-linear-gradient(45deg,#F0F0F3 0 10px,#E9E9EE 10px 20px)}
.demo-adsense .unidade .txt{padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--ink-3)}
.demo-adsense .unidade .txt b{display:block;color:var(--ink-2);font-size:13px}
.demo-adsense .unidade .txt span.b{flex:none;padding:6px 12px;border-radius:6px;background:#1A73E8;color:#fff;font-weight:600;font-size:12px}
.demo-adsense .rotulo-a{position:absolute;left:12px;top:12px;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.9);color:var(--ink-3)}
.demo-adsense .obs{position:absolute;right:12px;bottom:10px;font-size:10.5px;color:var(--ink-4)}
/* o monograma: quando a função e o plugin não têm ícone, as iniciais do plugin num degradê que vem do nome */
.tile .mono{display:block;height:100%;aspect-ratio:1}
.tile .mono svg{display:block;height:100%;width:auto}


main:not([data-onde="icones"]) [data-onde-alvo="icones"],main:not([data-onde="extensoes"]) [data-onde-alvo="extensoes"],main:not([data-onde="direito"]) [data-onde-alvo="direito"],main:not([data-onde="janela"]) [data-onde-alvo="janela"]{display:none!important}
/* o caminho pelo menu, como uma trilha em pílula */
.caminho{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:8px;background:var(--sheet);border:1px solid var(--rule);font-size:12.5px;font-weight:500;color:var(--ink);vertical-align:middle;white-space:nowrap;margin:0 2px}
.caminho i{font-style:normal;color:var(--ink-4)}
.caminho b{font-weight:600;color:var(--blue-ink)}
/* as cenas do SketchUp para cada lugar */
.su-mini .menu-aberto{position:relative}
.su-mini .lista{position:absolute;left:8px;top:100%;z-index:2;width:118px;background:#fff;border:1px solid #D6D6DD;border-radius:6px;box-shadow:0 8px 20px rgba(29,29,31,.14);padding:4px;font-size:9.5px;color:#48484D}
.su-mini .lista div{display:flex;justify-content:space-between;align-items:center;padding:3px 8px;border-radius:4px;white-space:nowrap}
.su-mini .lista div.on{background:var(--blue);color:#fff}
.su-mini .lista div.fraco{color:#98989D}
.su-mini .lista .sub{position:absolute;left:100%;top:40px;min-width:104px;background:#fff;border:1px solid #D6D6DD;border-radius:6px;box-shadow:0 8px 20px rgba(29,29,31,.14);padding:4px}
.su-mini .vista.alta{height:118px}
.su-mini .contexto{position:absolute;left:8px;top:14px;width:118px;background:#fff;border:1px solid #D6D6DD;border-radius:6px;box-shadow:0 8px 20px rgba(29,29,31,.14);padding:4px;font-size:9.5px;color:#48484D}
.su-mini .contexto div{padding:3px 8px;border-radius:4px;display:flex;justify-content:space-between}
.su-mini .contexto div.on{background:var(--blue);color:#fff}
.su-mini .contexto .sub{position:absolute;left:100%;top:58px;min-width:104px;background:#fff;border:1px solid #D6D6DD;border-radius:6px;box-shadow:0 8px 20px rgba(29,29,31,.14);padding:4px}
.su-mini .dialogo{position:absolute;right:10px;top:10px;width:118px;background:#fff;border:1px solid #D6D6DD;border-radius:8px;box-shadow:0 8px 20px rgba(29,29,31,.16);overflow:hidden;font-size:9.5px}
.su-mini .dialogo .tit{padding:5px 8px;background:#2B2B2E;color:#fff;font-weight:600}
.su-mini .dialogo .corpo{padding:6px;display:grid;gap:4px}
.su-mini .dialogo .corpo span{display:block;padding:4px 7px;border-radius:5px;background:#F2F2F5;color:#48484D}
.su-mini .dialogo .corpo span.on{background:var(--blue);color:#fff}
.su-mini .sub{display:block!important}
.su-mini .cursorzinho{position:absolute;width:12px;height:12px}
.su-mini .cursorzinho svg{width:12px;height:12px}


main[data-onde="icones"] .quadro-dir[data-modo="video"] .demo[data-onde-alvo="icones"],main[data-onde="extensoes"] .quadro-dir[data-modo="video"] .demo[data-onde-alvo="extensoes"],main[data-onde="direito"] .quadro-dir[data-modo="video"] .demo[data-onde-alvo="direito"],main[data-onde="janela"] .quadro-dir[data-modo="video"] .demo[data-onde-alvo="janela"]{display:block!important}
.demo text{font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:10px;fill:#48484D}
.demo .aparece{animation:aparece 6s infinite}
@keyframes aparece{0%,38%{opacity:0}42%,64%{opacity:1}68%,100%{opacity:0}}
.demo .aceso-2{animation:aceso-2 6s infinite}
@keyframes aceso-2{0%,50%{opacity:0}54%,64%{opacity:1}68%,100%{opacity:0}}
/* o cursor, um caminho por lugar */
.demo.v-extensoes .cursor{animation-name:cursor-extensoes}
@keyframes cursor-extensoes{0%,20%{transform:translate(60%,180%)}33%{transform:translate(82%,2%)}40%{transform:translate(82%,2%) scale(.85)}44%{transform:translate(82%,2%)}52%{transform:translate(74%,24%)}57%{transform:translate(74%,24%) scale(.85)}62%{transform:translate(74%,24%)}70%{transform:translate(52%,150%)}76%{transform:translate(52%,150%) scale(.85)}82%{transform:translate(52%,150%)}100%{transform:translate(60%,180%)}}
.demo.v-direito .cursor{animation-name:cursor-direito}
@keyframes cursor-direito{0%,20%{transform:translate(60%,180%)}33%{transform:translate(52%,150%)}40%{transform:translate(52%,150%) scale(.85)}44%{transform:translate(52%,150%)}54%{transform:translate(63%,132%)}58%{transform:translate(63%,132%) scale(.85)}64%{transform:translate(63%,132%)}72%{transform:translate(52%,150%)}78%{transform:translate(52%,150%) scale(.85)}84%{transform:translate(52%,150%)}100%{transform:translate(60%,180%)}}
.demo.v-janela .cursor{animation-name:cursor-janela}
@keyframes cursor-janela{0%,20%{transform:translate(60%,180%)}35%{transform:translate(84%,46%)}45%{transform:translate(84%,46%) scale(.85)}50%{transform:translate(84%,46%)}65%{transform:translate(52%,150%)}72%{transform:translate(52%,150%) scale(.85)}78%{transform:translate(52%,150%)}100%{transform:translate(60%,180%)}}

.alto-f .selo.nos{color:#12704A;background:#DDF5E8}
.alto-f .sub a.dev{color:var(--ink);font-weight:600}
/* as funções, em largura total, com os cards aprovados */
.funcoes-p{max-width:1120px;margin:40px auto 0;padding:0 32px}
.funcoes-p .cabeca-lista{margin:0 0 16px}
.funcoes-p .cabeca-lista h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-.015em}
.funcoes-p .cabeca-lista h2 small{font-weight:500;color:var(--ink-4);font-size:13px;margin-left:8px}
.filtro-p{display:flex;gap:6px;flex-wrap:wrap}
.filtro-p span{font-size:12.5px;font-weight:500;padding:6px 12px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2);cursor:pointer}
.filtro-p span.on{background:var(--blue-soft);border-color:transparent;color:var(--blue-ink)}
.cards-p{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
/* a lateral do plugin: quem fez, e os outros dele */
.dev-f{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center}
.dev-f .logo{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#1B5FD9,#7BD0FF);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;letter-spacing:-.02em}
.dev-f b{display:block;font-size:14.5px;font-weight:600}
.dev-f small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px}
.dev-f a{font-size:12.5px;color:var(--blue);font-weight:600}
.outros-p{list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--rule-soft);display:grid;gap:6px}
.outros-p li{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--ink-2)}
.outros-p li small{color:var(--ink-4);white-space:nowrap}
.outros-p li a{color:var(--blue);font-weight:600;font-size:12.5px}
/* o card de anúncio na grade: só AdSense, na moldura do card */
.cards-p .card.anuncio-g{position:relative;display:grid;place-items:center;padding:16px;background:var(--sheet-2);border:1px solid var(--rule-soft);box-shadow:none;min-height:300px}
.cards-p .card.anuncio-g:hover{transform:none;box-shadow:none}
.cards-p .card.anuncio-g .rotulo-a{position:absolute;left:12px;top:12px;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.9);color:var(--ink-3)}
.cards-p .card.anuncio-g .unidade{width:100%;max-width:300px;height:250px;border-radius:12px;background:var(--sheet);border:1px solid var(--rule);display:grid;grid-template-rows:1fr auto;overflow:hidden}
.cards-p .card.anuncio-g .unidade .img{background:repeating-linear-gradient(45deg,#F0F0F3 0 10px,#E9E9EE 10px 20px)}
.cards-p .card.anuncio-g .unidade .txt{padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--ink-3)}
.cards-p .card.anuncio-g .unidade .txt b{display:block;color:var(--ink-2);font-size:13px}
.cards-p .card.anuncio-g .unidade .txt span.b{flex:none;padding:6px 12px;border-radius:6px;background:#1A73E8;color:#fff;font-weight:600;font-size:12px}
@media (max-width:1100px){.cards-p{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.funcoes-p{padding:0 20px;margin-top:28px}.cards-p{grid-template-columns:1fr}}



/* as fotos da galeria feitas com o plugin (a grade da tela 14, que o 3b traz inteira) */
.fotos-p{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.foto-p{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/2;background:var(--sheet-2)}
.foto-p img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.foto-p:hover img{transform:scale(1.03)}
.foto-p b{position:absolute;left:10px;right:10px;bottom:8px;font-size:12.5px;font-weight:600;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:620px){.fotos-p{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* a linha de explicação antes de uma lista dentro da seção */
.secao-f .antes{margin:0 0 12px}
/* os nomes pelos quais a função é chamada.
   A pílula é a da tela 2, que ficou na fatia do card e nunca veio para cá: sem
   ela os 34 nomes saíam como uma parede de texto corrido. E cada um é uma
   busca — quem reconhece a palavra que usa quer ver o que mais responde por
   ela (pedido do cliente em 30/09/2026). */
.termos{display:flex;flex-wrap:wrap;gap:5px}
.termos span,.termos a{font-size:12px;font-weight:500;padding:3px 9px;border-radius:999px;background:var(--sheet-2);color:var(--ink-2);white-space:nowrap}
.termos a{text-decoration:none;transition:background .15s,color .15s}
.termos a:hover{background:var(--blue-soft);color:var(--blue-ink)}
.secao-f .termos a{font-size:13px;padding:5px 12px}
/* o ícone que amplia: o do acervo é um retrato da barra de ferramentas, e a
   64 px ninguém lê o que está escrito nele */
.tile.amplia{border:0;font:inherit;cursor:zoom-in;overflow:hidden}
.tile.amplia:hover{box-shadow:var(--sombra-alta)}
.janela.so-foto{max-width:none;width:auto;padding:0;background:transparent;box-shadow:none}
.foto-grande{position:relative;display:inline-block}
.foto-grande img{display:block;max-width:min(92vw,900px);max-height:82vh;border-radius:18px;background:var(--sheet);box-shadow:var(--sombra-alta)}
.foto-grande .fechar{position:absolute;right:10px;top:10px;background:rgba(255,255,255,.92);color:var(--ink);box-shadow:var(--sombra)}
/* o dado do bloco vazio: o mockup dimensionava o SVG no atributo do HTML, e a
   view usa `viewBox` como todo ícone do sistema — sem esta regra ele nasce com
   os 191 px que o SVG pede quando ninguém manda, e o "Ainda não cadastramos
   onde obter" vira um painel de 213 px de altura. */
.painel-vazio svg{width:16px;height:16px;flex:none;color:var(--ink-4)}
/* o que só o site tem */
/* a demonstração de verdade: o arquivo que o painel sobe, em loop e sem som */
.quadro-dir[data-modo="demo"] .demo-arquivo{display:block!important}
.demo-arquivo{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/10.5;background:var(--sheet-2);border:1px solid var(--rule-soft);box-shadow:var(--sombra-alta)}
.demo-arquivo video,.demo-arquivo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.demo-arquivo .rotulo-demo{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.88);color:var(--ink-2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* o anúncio no quadro é o parcial de sempre, na moldura do quadro */
.quadro-dir[data-modo="anuncio"] .anuncio{display:block!important;border-radius:22px;overflow:hidden;aspect-ratio:16/10.5;box-shadow:var(--sombra-alta)}
.quadro-dir[data-modo="anuncio"] .anuncio .anuncio-alvo{height:100%}
.quadro-dir[data-modo="anuncio"] .anuncio .anuncio-imagem{aspect-ratio:16/10.5}
.quadro-dir[data-modo="anuncio"] .anuncio-adsense{display:grid!important;place-items:center;border-radius:22px;aspect-ratio:16/10.5;background:var(--sheet-2);border:1px solid var(--rule-soft)}
/* o nome do plugin e o da função entram na cena desenhada vindos do catálogo,
   e o menu desenhado tem 118 px: no mockup os nomes eram curtos, no acervo
   "Eneroth Random Selection" vaza a borda do menu. O corte é no rótulo, e não
   na linha, porque a linha é quem guarda o submenu — `overflow` nela cortaria
   o submenu junto. */
.su-mini .lista > div > span,.su-mini .contexto > div > span,.su-mini .sub > div > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-mini .sub > div{max-width:132px}
.su-mini .dialogo .tit span,.su-mini .dialogo .corpo span span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* o caminho do menu cabe na coluna em que está: o mockup o desenhou numa
   linha só, e no catálogo de verdade "Extensões › Eneroth Random Selection ›
   Seleciona Aleatóriamente" tem 452 px numa coluna de 243 — ele passava por
   baixo da cena desenhada, cortado no meio de uma palavra. */
.caminho{flex-wrap:wrap;white-space:normal;max-width:100%}
/* o "onde fica" sem cena desenhada: o dado, com o caminho do menu */
.onde-f .sem-cena{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--sheet-2);color:var(--ink-3);font-size:13px}
.onde-f .sem-cena svg{width:16px;height:16px;flex:none;color:var(--ink-4)}
/* "Mandar para um amigo": um <details> na linha das ações, que abre o formulário */
.enviar-painel{position:relative}
.enviar-painel > summary{list-style:none;cursor:pointer}
.enviar-painel > summary::-webkit-details-marker{display:none}
.enviar-painel[open] > summary{border-color:var(--ink-3);color:var(--ink)}
.enviar-painel form{position:absolute;left:0;top:calc(100% + 8px);z-index:8;width:min(320px,86vw);padding:16px 18px;border-radius:18px;background:var(--sheet);border:1px solid var(--rule-soft);box-shadow:var(--sombra-alta);animation:desce .2s cubic-bezier(.2,.7,.2,1)}
.enviar-painel label{display:block;font-size:12.5px;font-weight:600;margin:0 0 6px}
.enviar-painel label small{font-weight:400;color:var(--ink-4)}
.enviar-painel .campo{display:flex;align-items:center;min-height:40px;padding:0 10px;border-radius:12px;border:1px solid var(--rule);background:var(--sheet);margin-bottom:12px}
.enviar-painel .campo select,.enviar-painel .campo input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:13.5px;color:var(--ink);outline:0}
.enviar-painel .enviar{width:100%;height:40px;border-radius:12px;border:0;background:var(--blue);color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.enviar-painel .enviar:hover{background:var(--blue-2)}
@media (max-width:620px){.enviar-painel form{position:static;width:auto;box-shadow:none;padding:14px 0 0;border:0;border-top:1px solid var(--rule-soft);border-radius:0}}
/* as ações do alto são formulários (salvar, enviar) como em todo o site */
.acoes-f form{display:contents}
.acoes-f .favoritar{display:inline-flex}
.barra-fixa form{display:contents}
/* a lateral: o anúncio entra na moldura do painel */
.lado-f .anuncio{border-radius:18px;overflow:hidden}
.lado-f .anuncio-mini{margin:0}


/* ------------------------------------------------ as páginas públicas (tela 14) */
.pub-a{max-width:1120px;margin:22px auto 0;padding:0 32px 80px}
.trilha-p{margin:0 0 14px;font-size:13px;color:var(--ink-4)}
.trilha-p a{color:var(--ink-3);font-weight:500}
/* o alto do autor, da categoria e do perfil: a mesma cabeça */
.cabeca-p{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;padding:22px 24px;border-radius:22px;background:var(--sheet);border:1px solid var(--rule-soft);box-shadow:var(--sombra)}
.cabeca-p .grande{width:76px;height:76px;border-radius:20px;display:grid;place-items:center;background:var(--sheet-2);overflow:hidden}
.cabeca-p .grande img{width:100%;height:100%;object-fit:cover}
.cabeca-p .grande.rosto{border-radius:50%;font-size:28px;background:linear-gradient(135deg,var(--blue),#7BD0FF)}
.cabeca-p h1{margin:0;font-size:clamp(22px,2.6vw,28px);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.cabeca-p .sub-p{margin:4px 0 0;font-size:14px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.cabeca-p .sub-p a{color:var(--blue);font-weight:600}
.cabeca-p .sub-p code{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-2)}
.cabeca-p .bio{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-2);max-width:60ch}
.cabeca-p .selos{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cabeca-p .lado-p{display:flex;flex-direction:column;gap:8px;align-items:end}
.secao-p{margin-top:28px}
.secao-p > h2{margin:0 0 12px;font-size:18px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.secao-p > h2 small{font-size:13px;font-weight:500;color:var(--ink-4)}
.secao-p > h2 a{margin-left:auto;font-size:13px;font-weight:600;color:var(--blue)}
.grade-p{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
/* a categoria: as fichas das outras */
.cat-irmas{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin-top:18px}
.cat-irmas::-webkit-scrollbar{display:none}
.cat-irmas a{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;padding:7px 12px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2);white-space:nowrap}
.cat-irmas a small{font-size:11px;color:var(--ink-4)}
.cat-irmas a.on{background:var(--blue-soft);border-color:transparent;color:var(--blue-ink)}
.cat-conta-p{margin:16px 0 12px;font-size:13.5px;color:var(--ink-3);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.cat-conta-p b{color:var(--ink);font-weight:600}
/* o perfil público */
.colecoes-p{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.colecao-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;border-radius:18px;background:var(--sheet);border:1px solid var(--rule-soft);box-shadow:var(--sombra);color:var(--ink);transition:transform .15s,box-shadow .15s}
.colecao-card:hover{transform:translateY(-1px);box-shadow:var(--sombra-alta)}
.colecao-card .capa-c{width:56px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--aurora-1),var(--aurora-2));display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:5px;box-sizing:border-box}
.colecao-card .capa-c i{border-radius:5px;background:rgba(255,255,255,.85)}
.colecao-card b{display:block;font-size:14.5px;font-weight:600}
.colecao-card small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px}
.colecao-card .seta{color:var(--ink-4);font-size:18px}
.salvos-p{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.salvo-p{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:14px;background:var(--sheet);border:1px solid var(--rule-soft);box-shadow:var(--sombra)}
.salvo-p .tile{height:36px;min-width:36px;padding:3px;border-radius:9px;background:var(--sheet-2)}
.salvo-p b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.salvo-p small{display:block;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fechado-p{padding:36px 20px;text-align:center;border:1px dashed var(--rule);border-radius:18px;color:var(--ink-4);font-size:14px}
.fechado-p b{display:block;color:var(--ink-2);font-weight:600;margin-bottom:2px}
.codigo-p{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:18px;letter-spacing:.08em;font-weight:600;padding:8px 14px;border-radius:12px;background:var(--sheet-2)}
/* a coleção pública */
.itens-p{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.item-p{display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:14px 16px;border-radius:18px;background:var(--sheet);border:1px solid var(--rule-soft);box-shadow:var(--sombra);gap:10px}
.item-p .topo-i{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center}
.item-p .tile{height:40px;min-width:40px;padding:3px;border-radius:10px;background:var(--sheet-2)}
.item-p b{display:block;font-size:14.5px;font-weight:600}
.item-p small{display:block;font-size:12.5px;color:var(--ink-3)}
.item-p .nota-i{margin:0;padding:10px 12px;border-radius:0 12px 12px 12px;background:var(--sheet-2);font-size:13px;color:var(--ink-2);line-height:1.5;position:relative}
.item-p .nota-i .de{display:block;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4);margin-bottom:2px}
.item-p .acoes-i{display:flex;gap:6px;align-items:center}
.item-p .acoes-i .obter{height:32px;padding:0 14px;border-radius:999px;background:var(--ink);color:var(--paper);font:inherit;font-size:12.5px;font-weight:600;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none}
.item-p .acoes-i .obter:hover{background:var(--blue);color:#fff}
.item-p .acoes-i .obter svg{width:14px;height:14px;flex:none}
.item-p .acoes-i .botao-icone{width:32px;height:32px;border-radius:50%;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-3);display:grid;place-items:center;cursor:pointer}
.item-p .acoes-i .botao-icone svg{width:15px;height:15px}
.dona-p{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-3)}
.dona-p .rosto{width:34px;height:34px;font-size:13px}
.dona-p b{color:var(--ink);font-weight:600}
.dona-p a{color:var(--blue);font-weight:600;margin-left:auto;font-size:13px}
.aviso-p{margin-top:14px;padding:10px 14px;border-radius:12px;background:var(--amber-soft);color:var(--amber);font-size:13px;display:flex;align-items:center;gap:8px}
.aviso-p svg{width:15px;height:15px;flex:none}
.privada-p{max-width:520px;margin:60px auto;padding:0 20px;text-align:center}
.privada-p .cartao-e{padding:32px 28px}
.privada-p .fechadura{width:60px;height:60px;border-radius:50%;background:var(--sheet-2);color:var(--ink-3);display:grid;place-items:center;margin:0 auto 14px}
.privada-p .fechadura svg{width:26px;height:26px}
.privada-p h1{font-size:22px}
/* plugin para o SketchUp */
.sk-alto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding:30px 0 10px}
.sk-alto .chapeu{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);background:var(--blue-soft);padding:5px 12px;border-radius:999px}
.sk-alto h1{margin:14px 0 0;font-size:clamp(30px,4vw,42px);font-weight:600;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
.sk-alto .lead{margin:12px 0 0;font-size:16.5px;line-height:1.55;color:var(--ink-3);max-width:46ch}
.sk-alto .acoes-c{margin-top:20px}
.sk-alto .b1{height:46px;padding:0 20px;font-size:14.5px}
.sk-alto .req{margin:12px 0 0;font-size:12.5px;color:var(--ink-4)}
/* a janela desenhada em CSS */
.sk-cena{position:relative;border-radius:22px;background:linear-gradient(180deg,#E8EAEF,#D6D9DF);padding:26px;min-height:360px;overflow:hidden}
.sk-cena .barra-su{position:absolute;left:0;right:0;top:0;height:26px;background:#F4F4F4;border-bottom:1px solid #C9C9C9;display:flex;align-items:center;gap:10px;padding:0 12px;font-size:11px;color:#333}
.sk-cena .barra-su span.aberto{background:#DCE6F5;padding:2px 5px;border-radius:3px}
.sk-cena .janelinha{position:relative;margin:26px auto 0;width:min(300px,100%);background:#fff;border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.25);border:1px solid #9A9A9A;overflow:hidden;font-size:11px}
.sk-cena .janelinha .tit{height:24px;display:flex;align-items:center;gap:6px;padding:0 8px;border-bottom:1px solid #E6E6E6;font-size:10.5px}
.sk-cena .janelinha .tit i{width:12px;height:12px;border-radius:3px;background:linear-gradient(135deg,#1B5FD9,#7BD0FF);color:#fff;font-size:7px;font-weight:700;display:grid;place-items:center;font-style:normal}
.sk-cena .janelinha .tit span.x{margin-left:auto;color:#666}
.sk-cena .miolo{padding:10px}
.sk-cena .barrinha-j{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:999px;border:1px solid var(--rule);box-shadow:var(--sombra);margin-bottom:8px}
.sk-cena .barrinha-j i{width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,#1B5FD9,#7BD0FF)}
.sk-cena .barrinha-j span{font-size:10px;color:var(--ink-3);padding:0 4px}
.sk-cena .busca-j{display:flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 12px;border-radius:999px;border:1px solid var(--blue);box-shadow:0 0 0 3px var(--blue-soft);font-size:11px;color:var(--ink-4);margin-bottom:10px}
.sk-cena .busca-j i{margin-left:auto;width:22px;height:22px;border-radius:50%;background:var(--blue)}
.sk-cena .rot-j{font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);margin:8px 0 4px}
.sk-cena .salvo-j{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 8px;border-radius:10px;border:1px solid var(--rule-soft);box-shadow:var(--sombra);margin-bottom:5px}
.sk-cena .salvo-j .tile{height:22px;min-width:22px;padding:2px;border-radius:6px;background:var(--sheet-2)}
.sk-cena .salvo-j b{display:block;font-size:10.5px}
.sk-cena .salvo-j small{display:block;font-size:9px;color:var(--ink-3)}
.sk-cena .salvo-j .et{font-size:8.5px;padding:2px 6px}
.passos-sk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:34px}
.passo-sk{padding:18px 20px;border-radius:20px;background:var(--sheet);border:1px solid var(--rule-soft);box-shadow:var(--sombra)}
.passo-sk .n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:13px;font-weight:600;margin-bottom:10px}
.passo-sk h3{margin:0;font-size:16px;font-weight:600}
.passo-sk p{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-3)}
.passo-sk p b{color:var(--ink-2);font-weight:600}
.passo-sk .menu-sk{margin-top:10px;font-size:12px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.passo-sk .menu-sk span{padding:3px 8px;border-radius:7px;background:var(--sheet-2);font-weight:500}
.passo-sk .menu-sk i{font-style:normal;color:var(--ink-4)}
.passo-sk .codigo-p{font-size:15px;margin-top:8px;padding:6px 10px}
.faz-sk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.faz-sk div{padding:14px 16px;border-radius:16px;background:var(--sheet-2)}
.faz-sk div b{display:block;font-size:14px;font-weight:600;margin-bottom:2px}
.faz-sk div small{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.duvidas-sk{max-width:720px}
.duvidas-sk details{border-top:1px solid var(--rule-soft)}
.duvidas-sk details:last-child{border-bottom:1px solid var(--rule-soft)}
.duvidas-sk summary{list-style:none;cursor:pointer;padding:13px 0;font-size:14.5px;font-weight:600;display:flex;justify-content:space-between;gap:12px}
.duvidas-sk summary::-webkit-details-marker{display:none}
.duvidas-sk summary::after{content:"+";font-weight:400;color:var(--ink-4)}
.duvidas-sk details[open] summary::after{content:"–"}
.duvidas-sk details p{margin:0 0 14px;font-size:14px;line-height:1.6;color:var(--ink-3)}
.versao-sk{margin-top:26px;font-size:12.5px;color:var(--ink-4)}
/* larguras menores — escritas aqui, no mesmo espírito das outras telas */
@media (max-width:900px){
  .grade-p{grid-template-columns:repeat(2,minmax(0,1fr))}
  .itens-p{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sk-alto{grid-template-columns:1fr;gap:24px}
  .passos-sk{grid-template-columns:1fr}
  .faz-sk{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .pub-a{padding-left:20px;padding-right:20px}
  .cabeca-p{grid-template-columns:auto minmax(0,1fr);gap:14px;padding:16px 18px}
  .cabeca-p .lado-p{grid-column:1 / -1;align-items:stretch}
  .grade-p,.itens-p,.colecoes-p,.salvos-p{grid-template-columns:1fr}
  .faz-sk{grid-template-columns:1fr}
}


/* o que só o site de verdade tem */
/* a paginação do catálogo, na largura destas páginas */
.pub-a .paginacao{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:24px;font-size:13.5px}
.pub-a .paginacao-contagem{margin:0;color:var(--ink-4);font-size:12.5px}
.pub-a .paginacao-paginas{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.pub-a .paginacao .pagina{min-width:36px;height:36px;padding:0 10px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2);font-weight:500}
.pub-a .paginacao .pagina.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pub-a .paginacao .pagina.desativada,.pub-a .paginacao .pagina.reticencias{border-color:transparent;background:transparent;color:var(--ink-4)}
/* a cabeça: o monograma no lugar da foto, e o botão de copiar o código */
.cabeca-p .grande .monograma{width:100%;height:100%;border-radius:inherit}
.cabeca-p .sub-p .copiar{width:26px;height:26px;border-radius:8px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-3);display:grid;place-items:center;cursor:pointer}
.cabeca-p .sub-p .copiar svg{width:13px;height:13px}
/* a seção vazia destas páginas: a mesma linha tracejada do painel da função */
.secao-p .painel-vazio{margin-top:4px}
/* o item da coleção: o ícone é o mesmo tile do card */
.item-p .tile img,.salvo-p .tile img{width:100%;height:100%;object-fit:contain;display:block}
.item-p .tile .monograma,.salvo-p .tile .monograma{width:100%;height:100%;border-radius:inherit}
.salvo-p{color:var(--ink);text-decoration:none}
.salvo-p .seta{color:var(--ink-4);font-size:16px}
/* o bloco fechado também diz uma frase embaixo do título */
.fechado-p p{margin:8px 0 0}
.fechado-p .codigo-p{margin-bottom:2px}
/* salvar dentro da coleção é o formulário de sempre */
.item-p .acoes-i form{display:contents}
.item-p .acoes-i{margin-top:auto}
/* a dona, no fim da coleção */
.dona-p{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule-soft)}
.dona-p .rosto{border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--sheet-2);flex:none}
.dona-p .rosto img,.dona-p .rosto .monograma{width:100%;height:100%;object-fit:cover;border-radius:50%}
/* a página do plugin: a cena é desenho, e o botão é o de sempre */
.sk-alto .acoes-c{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sk-cena .janelinha .tit b{font-weight:600}
.sk-cena .salvo-j .tile{display:grid;place-items:center;background:var(--sheet-2);color:var(--ink-4);font-size:9px}
.faz-sk div small{display:block}
.duvidas-sk details p:first-of-type{margin-top:0}


/* ------------------------------------------------ a galeria (telas 5, 6 e 15) */
/* ================================================== tela 5: a galeria */
/* O feed é uma grade de cards B: a foto manda, o resto explica. Três
   colunas a 1440, duas a 1000, uma a 500 — e o anúncio é uma célula, como
   na busca. */
.galeria-p{max-width:1120px;margin:22px auto 0;padding:0 32px 80px}
.topo-g{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.topo-g h1{margin:0;font-size:clamp(24px,3vw,30px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.topo-g p{margin:6px 0 0;font-size:14.5px;color:var(--ink-3);max-width:52ch}
.abas-g{display:flex;gap:6px;margin-bottom:16px}
.abas-g a{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2);font-size:13px;font-weight:500}
.abas-g a.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.abas-g a small{font-size:11.5px;color:var(--ink-4)}
.abas-g a.on small{color:rgba(255,255,255,.7)}
.grade-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
/* o card B: foto 7/5, título, autor, com que foi feito, e as três ações */
.card-b{position:relative;display:flex;flex-direction:column;border-radius:20px;background:var(--sheet);border:1px solid var(--rule-soft);box-shadow:var(--sombra);overflow:hidden;transition:transform .16s,box-shadow .16s}
.card-b:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta)}
.card-b .capa{aspect-ratio:7/5;width:100%}
.card-b .capa .quantas{position:absolute;right:10px;top:10px;z-index:2;display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.card-b .capa .quantas svg{width:11px;height:11px}
.card-b .corpo-b{padding:12px 14px 0;display:flex;flex-direction:column;gap:8px;flex:1}
.card-b h3{margin:0;font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.card-b h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.card-b .quem-b{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3)}
.card-b .quem-b .rosto{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#7BD0FF);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:600;flex:none}
.card-b .quem-b b{color:var(--ink-2);font-weight:600}
.card-b .feito-b{display:flex;flex-wrap:wrap;gap:5px}
.card-b .feito-b span{font-size:11.5px;font-weight:500;padding:3px 9px;border-radius:999px;background:var(--blue-soft);color:var(--blue-ink);white-space:nowrap}
.card-b .feito-b span.sem{background:var(--sheet-2);color:var(--ink-4)}
.card-b .acoes-b{position:relative;z-index:2;display:flex;align-items:center;gap:4px;padding:8px 10px 10px;margin-top:auto}
.card-b .acoes-b .conta-b{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 10px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--ink-3);font:inherit;font-size:12.5px;font-weight:500;cursor:pointer}
.card-b .acoes-b .conta-b:hover{background:var(--sheet-2);color:var(--ink)}
.card-b .acoes-b .conta-b svg{width:16px;height:16px}
.card-b .acoes-b .conta-b.curtido{color:var(--red)}
/* o número só aparece quando o painel liga (flag `galeria.contagem_publica`) */
.card-b .acoes-b .conta-b .n-c{font-variant-numeric:tabular-nums}
.card-b .acoes-b .conta-b.curtido svg{fill:currentColor}
.card-b .acoes-b .espaco{flex:1}
/* A lateral vertical não é desta página: o layout já a põe em toda página
   acima de 1200 px, com a campanha que couber. Desenhá-la de novo aqui
   seria um segundo lugar para a mesma posição. */
/* a galeria vazia e o convite: a página nunca fica muda */
.vazio-g{padding:44px 24px;text-align:center;border:1px dashed var(--rule);border-radius:20px;color:var(--ink-3)}
.vazio-g b{display:block;font-size:16px;color:var(--ink);font-weight:600;margin-bottom:4px}

/* ================================================== tela 6: a publicação */
/* Uma coluna, a foto em 7/5 e tudo o que é da publicação embaixo dela. O
   anúncio vem depois das ações — nunca no meio da obra de alguém. */
.pub-p{max-width:860px;margin:22px auto 0;padding:0 24px 90px}
.foto-grande-p{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:7/5;background:var(--sheet-2);box-shadow:var(--sombra-alta)}
.foto-grande-p .quadro-f{position:absolute;inset:0}
.foto-grande-p .seta-f{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:var(--sombra)}
.foto-grande-p .seta-f svg{width:18px;height:18px}
.foto-grande-p .seta-f.esq{left:12px}.foto-grande-p .seta-f.dir{right:12px}
.pontos-f{display:flex;justify-content:center;gap:6px;margin-top:10px}
.pontos-f i{width:7px;height:7px;border-radius:50%;background:var(--rule)}
.pontos-f i.on{background:var(--ink-3);width:22px;border-radius:999px}
.cabeca-pub{margin-top:18px}
.cabeca-pub h1{margin:0;font-size:clamp(22px,2.8vw,30px);font-weight:600;letter-spacing:-.025em;line-height:1.15;text-wrap:balance}
.autor-pub{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:14px;color:var(--ink-3)}
.autor-pub .rosto{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#7BD0FF);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:600;flex:none}
.autor-pub b{display:block;color:var(--ink);font-size:14.5px;font-weight:600;line-height:1.3}
.autor-pub small{display:block;font-size:12.5px;color:var(--ink-4)}
.autor-pub .ver-perfil{margin-left:auto;font-size:13px;font-weight:600;color:var(--blue)}
.legenda-pub{margin:16px 0 0;font-size:16px;line-height:1.65;color:var(--ink-2);white-space:pre-line}
/* "Feito com": os plugins citados, em carrossel quando passam de um */
.feito-pub{margin-top:26px}
.feito-pub h2{margin:0 0 10px;font-size:15px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:baseline;gap:8px}
.feito-pub h2 small{font-size:12.5px;font-weight:500;color:var(--ink-4)}
.fita-pub{display:flex;flex-wrap:wrap;gap:8px}
.ficha-pub{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;background:var(--blue-soft);color:var(--blue-ink);font-size:13.5px;font-weight:600}
.ficha-pub:hover{background:var(--blue);color:#fff}
.ficha-pub.sem-link{background:var(--amber-soft);color:var(--amber);cursor:default}
.ficha-pub.sem-link:hover{background:var(--amber-soft);color:var(--amber)}
.ficha-pub small{font-weight:500;opacity:.75;margin-left:6px}
/* as ações da publicação */
.acoes-pub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:24px;padding-top:18px;border-top:1px solid var(--rule-soft)}
.acoes-pub .acao,.barra-pub .acao{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.acoes-pub .acao:hover,.barra-pub .acao:hover{border-color:var(--ink-3);color:var(--ink)}
.acoes-pub .acao svg,.barra-pub .acao svg{width:16px;height:16px}
.acoes-pub .acao.curtido,.barra-pub .acao.curtido{color:var(--red);border-color:#F5C2C5;background:var(--red-soft)}
.acoes-pub .acao.curtido svg,.barra-pub .acao.curtido svg{fill:currentColor}
.acoes-pub .acao.salvo,.barra-pub .acao.salvo{color:var(--blue);border-color:var(--blue-soft);background:var(--blue-soft)}
.acoes-pub .denunciar{margin-left:auto;background:transparent;border:0;color:var(--ink-4);font-size:12.5px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.acoes-pub .denunciar:hover{color:var(--red)}
.acoes-pub .denunciar svg{width:14px;height:14px}
/* a dica de quem não tem e-mail, ancorada no botão que ela responde */
.dica-ancora{position:relative}
.dica-e{position:absolute;left:0;top:calc(100% + 10px);z-index:6;width:min(320px,86vw);padding:14px 16px;border-radius:16px;background:var(--ink);color:#fff;box-shadow:var(--sombra-alta);font-size:13.5px;line-height:1.5}
.dica-e::before{content:"";position:absolute;left:22px;top:-6px;width:12px;height:12px;background:var(--ink);transform:rotate(45deg);border-radius:2px}
.dica-e b{display:block;font-weight:600;margin-bottom:2px}
.dica-e .linha-d{display:flex;gap:8px;margin-top:10px}
.dica-e .linha-d a{flex:1;text-align:center;height:34px;line-height:34px;border-radius:10px;background:#fff;color:var(--ink);font-size:13px;font-weight:600}
.dica-e .linha-d button{height:34px;padding:0 12px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:transparent;color:rgba(255,255,255,.8);font:inherit;font-size:13px;cursor:pointer}
/* o anúncio vem depois das ações, e é o parcial de sempre */
.anuncio-pub{margin-top:26px}
/* mais do autor */
.mais-pub{margin-top:34px}
.mais-pub h2{margin:0 0 12px;font-size:17px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:baseline;gap:10px}
.mais-pub h2 a{margin-left:auto;font-size:13px;font-weight:600;color:var(--blue)}
.mini-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mini-p{border-radius:14px;overflow:hidden;background:var(--sheet);border:1px solid var(--rule-soft);box-shadow:var(--sombra)}
.mini-p .capa{aspect-ratio:7/5}
.mini-p b{display:block;padding:8px 10px 10px;font-size:13px;font-weight:600;line-height:1.35}
/* a barra fixa a 500 px */
.barra-pub{display:none}

/* ================================================== tela 15: publicar */
/* Quatro passos, um por vez. Cada um cabe numa tela sem rolagem no
   computador, e a trilha diz onde a pessoa está. */
.publicar-p{max-width:720px;margin:22px auto 0;padding:0 24px 90px}
.passos-p{display:flex;align-items:center;gap:6px;margin:0 0 22px}
.passos-p .p{flex:1;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-4)}
.passos-p .p i{width:24px;height:24px;border-radius:50%;background:var(--sheet-2);color:var(--ink-4);display:grid;place-items:center;font-size:12px;font-weight:600;font-style:normal;flex:none}
.passos-p .p.on{color:var(--ink)}
.passos-p .p.on i{background:var(--ink);color:var(--paper)}
.passos-p .p.feito i{background:var(--green-soft);color:var(--green)}
.passos-p .p .risco{flex:1;height:1px;background:var(--rule)}
.cartao-p{padding:24px;border-radius:22px;background:var(--sheet);border:1px solid var(--rule-soft);box-shadow:var(--sombra)}
.cartao-p h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em}
.cartao-p .ajuda{margin:6px 0 18px;font-size:13.5px;color:var(--ink-3)}
.campo-p{margin-bottom:16px}
.campo-p label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.campo-p label small{font-weight:400;color:var(--ink-4)}
.campo-p .caixa{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--rule);background:var(--sheet)}
.campo-p .caixa.alta{min-height:120px;padding:10px 12px;align-items:flex-start}
.campo-p input,.campo-p textarea{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:14.5px;color:var(--ink);outline:0;resize:vertical}
.campo-p .contador{margin:6px 0 0;font-size:12px;color:var(--ink-4);text-align:right}
/* as fotos: soltar, escolher ou colar — o componente do C27 */
.fotos-p3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.foto-slot{position:relative;aspect-ratio:7/5;border-radius:14px;overflow:hidden;border:1px solid var(--rule-soft);background:var(--sheet-2)}
.foto-slot .capa-marca{position:absolute;left:8px;top:8px;z-index:2;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.9);color:var(--ink-2)}
.foto-slot .tirar{position:absolute;right:6px;top:6px;z-index:2;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.5);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:14px}
.foto-slot.vaga{display:grid;place-items:center;border-style:dashed;color:var(--ink-4);font-size:12.5px;text-align:center;padding:10px}
.solta-g{display:grid;justify-items:center;gap:6px;padding:26px 16px;border:1.5px dashed var(--rule);border-radius:16px;background:var(--sheet-2);text-align:center;cursor:pointer}
.solta-g .ic{width:42px;height:42px;border-radius:12px;background:var(--sheet);display:grid;place-items:center;color:var(--blue)}
.solta-g .ic svg{width:20px;height:20px}
.solta-g b{font-size:14px;font-weight:600}
.solta-g small{font-size:12.5px;color:var(--ink-4);max-width:46ch;line-height:1.45}
.solta-g kbd{font-family:inherit;font-size:11.5px;font-weight:600;padding:1px 6px;border-radius:6px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2)}
/* os plugins usados: fichas, e o que não existe vira ficha sem link */
.busca-menc{position:relative;margin-bottom:12px}
.sugestoes-m{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;padding:6px;border-radius:14px;background:var(--sheet);border:1px solid var(--rule-soft);box-shadow:var(--sombra-alta)}
.sugestoes-m div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:8px 10px;border-radius:10px;font-size:13.5px}
.sugestoes-m div:hover{background:var(--sheet-2)}
.sugestoes-m .tile{width:28px;height:28px;border-radius:8px;background:var(--sheet-2);display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--ink-3)}
.sugestoes-m small{display:block;font-size:12px;color:var(--ink-4)}
.sugestoes-m .criar{color:var(--amber);font-weight:600}
.fichas-m{display:flex;flex-wrap:wrap;gap:8px}
.ficha-m{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 10px;border-radius:999px;background:var(--blue-soft);color:var(--blue-ink);font-size:13px;font-weight:600}
.ficha-m.sem-link{background:var(--amber-soft);color:var(--amber)}
.ficha-m small{font-weight:500;opacity:.8}
.ficha-m button{width:20px;height:20px;border-radius:50%;border:0;background:rgba(0,0,0,.08);color:inherit;cursor:pointer;font-size:13px;line-height:1;display:grid;place-items:center}
/* a autorização, em bloco que se lê */
.autoriza-p{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:16px;border-radius:16px;background:var(--sheet-2);font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.autoriza-p input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--blue)}
.revisao-p{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--blue-soft);color:var(--blue-ink);font-size:13px}
.revisao-p svg{width:16px;height:16px;flex:none}
.pe-p{display:flex;align-items:center;gap:10px;margin-top:20px}
.pe-p .voltar{background:transparent;border:0;color:var(--ink-3);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;padding:0 6px}
.pe-p .seguir{margin-left:auto;height:44px;padding:0 22px;border-radius:999px;border:0;background:var(--ink);color:var(--paper);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.pe-p .seguir:hover{background:var(--blue)}
.pe-p .seguir svg{width:16px;height:16px}

/* ================================================== tela 15b: denunciar */
/* A denúncia é a janela de sempre, com os motivos da Fase 3. Ela não
   derruba nada: manda para a fila. */
.motivos-d{display:grid;gap:8px;margin:4px 0 14px}
.motivos-d label{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:12px 14px;border-radius:14px;border:1px solid var(--rule);cursor:pointer;font-size:13.5px}
.motivos-d label:hover{border-color:var(--ink-3)}
.motivos-d input{margin:3px 0 0;accent-color:var(--blue)}
.motivos-d b{display:block;font-weight:600}
.motivos-d small{display:block;font-size:12.5px;color:var(--ink-4);line-height:1.45}
.aviso-d{display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--sheet-2);font-size:12.5px;color:var(--ink-3)}
.aviso-d svg{width:15px;height:15px;flex:none;color:var(--ink-4)}

/* ================================================== larguras menores */
@media (max-width:1100px){
  .grade-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mini-g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .galeria-p,.pub-p,.publicar-p{padding-left:20px;padding-right:20px}
  .grade-g{grid-template-columns:1fr}
  .mini-g{grid-template-columns:1fr 1fr}
  .fotos-p3{grid-template-columns:1fr 1fr}
  .passos-p .p span{display:none}
  .passos-p .p{flex:none}
  .acoes-pub .denunciar{margin-left:0;width:100%;justify-content:center;padding-top:6px}
  /* a barra fixa: curtir e salvar sempre à mão, como na função */
  .barra-pub{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:20;gap:8px;padding:8px;border-radius:999px;background:var(--sheet);border:1px solid var(--rule-soft);box-shadow:var(--sombra-alta)}
  .barra-pub .acao{flex:1;justify-content:center}
  .pub-p{padding-bottom:90px}
}


/* o que só o site de verdade tem */
/* o anúncio no feed é uma célula com a mesma moldura do card */
.card-b.card-anuncio{border-color:color-mix(in srgb, var(--amber) 35%, var(--rule-soft))}
.card-b.card-anuncio .anuncio{display:block}
.card-b.card-anuncio .anuncio-imagem{aspect-ratio:7/5}
.card-b.card-anuncio .anuncio-alvo{display:block;color:inherit}
.card-b.card-anuncio .anuncio-rotulo{position:absolute;right:10px;top:10px;z-index:2}
/* a foto do card e da publicação: o que o banco tem, na moldura desenhada */
.card-b .capa{position:relative;background:var(--sheet-2);overflow:hidden}
.card-b .capa img,.mini-p .capa img,.foto-slot img{width:100%;height:100%;object-fit:cover;display:block}
.mini-p .capa{position:relative;background:var(--sheet-2);overflow:hidden}
.foto-grande-p img{width:100%;height:100%;object-fit:cover}
/* o slide: uma foto por vez, e as outras esperando */
.foto-grande-p [data-foto]{position:absolute;inset:0;opacity:0;transition:opacity .25s}
.foto-grande-p [data-foto].on{opacity:1}
.pontos-f button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--rule);cursor:pointer}
.pontos-f button.on{background:var(--ink-3);width:22px;border-radius:999px}
/* as ações são formulários, como em todo o site */
.acoes-pub form{display:contents}
.barra-pub form{display:contents}
.card-b .acoes-b form{display:contents}
/* a dica de quem não tem e-mail nasce escondida */
.dica-e[hidden]{display:none}
.dica-e .linha-d form{display:contents}
.dica-e .linha-d button.como-link{background:#fff;color:var(--ink);border:0;font-weight:600;flex:1;height:34px;border-radius:10px;cursor:pointer;font-family:inherit;font-size:13px}
/* publicar: o passo que não é o da vez fica guardado, e sem JavaScript
   todos aparecem, um debaixo do outro, num formulário só */
.com-js .cartao-p[hidden]{display:none}
.sem-passos .passos-p{display:none}
/* a lista inteira de plugins, para quem não tem JavaScript escolher */
.lista-toda{margin-top:10px;border:1px solid var(--rule-soft);border-radius:14px;padding:10px 12px;max-height:240px;overflow:auto}
.lista-toda summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-2)}
.lista-toda label{display:flex;gap:8px;align-items:flex-start;font-size:13px;padding:4px 0}
.lista-toda input{margin:3px 0 0;accent-color:var(--blue)}
/* o erro de um campo, na cor do sistema */
.erro-p{margin:6px 0 0;font-size:12.5px;color:var(--red);font-weight:500}
/* o resumo dos erros, fora dos passos: ele aparece em qualquer um deles */
.erro-resumo{margin:0 0 16px;padding:14px 16px;border-radius:16px;background:var(--red-soft);color:var(--red);font-size:13.5px}
.erro-resumo b{display:block;font-weight:600;margin-bottom:4px}
.erro-resumo ul{margin:0;padding-left:18px}
.erro-resumo li{margin:2px 0}
.erro-resumo p{margin:8px 0 0}
/* o alto da página de publicar */
.titulo-pub{margin:0;font-size:clamp(22px,2.6vw,28px);font-weight:600;letter-spacing:-.025em;line-height:1.15}
.ajuda-pub{margin:8px 0 20px;font-size:14.5px;color:var(--ink-3);max-width:60ch}
.cartao-p .ajuda.depois-do-campo{margin-top:10px}
/* salvar, no card, tem a cor de salvo */
.card-b .acoes-b .conta-b.salvo{color:var(--blue)}
/* o botão que apaga alguma coisa, ou que acusa */
.pe-p .seguir.perigo{background:var(--red)}
.pe-p .seguir.perigo:hover{background:var(--red)}
.pe-p a.voltar{display:inline-flex;align-items:center;height:44px}


/* ------------------------------------------------ o que só existe no site de verdade */
/* o recado de uma ação (gravado, enviado…) e o convite a vincular e-mail */
.recado{max-width:1120px;margin:16px auto 0;padding:12px 16px;border-radius:14px;font-size:14px;font-weight:500;display:flex;gap:10px;align-items:center;width:calc(100% - 40px)}
.recado-ok{background:#E7F8EF;color:#12784A}
.recado-erro{background:#FFF1F2;color:#C0303A}
.recado b{font-weight:600}
.convite{max-width:1120px;margin:16px auto 0;width:calc(100% - 40px);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 18px;border-radius:18px;background:linear-gradient(135deg,var(--aurora-1),var(--aurora-2));border:1px solid var(--rule-soft)}
.convite p{margin:0;font-size:14px;color:var(--ink-2)}
.convite-acoes{display:flex;gap:8px;align-items:center}
.convite-acoes form{margin:0}
/* o campo de arquivo: soltar, escolher e colar (C27) */
.solta-i{position:relative;display:grid;justify-items:center;gap:6px;padding:22px 16px;border:1.5px dashed var(--rule);border-radius:16px;background:var(--sheet-2);text-align:center;cursor:pointer;transition:border-color .15s,background .15s;outline:0}
.solta-i:hover,.solta-i:focus-visible,.solta-i.sobre{border-color:var(--blue);background:var(--blue-soft)}
.solta-i input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.solta-i .ic{width:40px;height:40px;border-radius:12px;background:var(--sheet);display:grid;place-items:center;color:var(--blue)}
.solta-i .ic svg{width:20px;height:20px}
.solta-i b{font-size:14px;font-weight:600}
.solta-i small{font-size:12.5px;color:var(--ink-4);max-width:480px;line-height:1.45}
.solta-i kbd{font-family:inherit;font-size:11.5px;font-weight:600;padding:1px 6px;border-radius:6px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2)}
.solta-i .previas{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.solta-i .previas img{width:56px;height:56px;object-fit:cover;border-radius:10px;background:var(--sheet)}
.solta-i .aviso-i{font-size:12.5px;color:#C0303A;font-weight:500}
/* o que os painéis precisam além do mockup: a foto no rosto, o nome no botão, sair e "marcar tudo" como botões */
/* A foto de perfil na moldura redonda.
   `height:100%` dentro de uma grade de linha automática é altura indefinida:
   o Chrome cai no tamanho natural e uma foto em retrato de 400x900 vira 28x63,
   estourando a barra para cima e para baixo (o cliente viu, 01/10/2026). O
   `aspect-ratio` resolve a altura sem depender da porcentagem, e o `overflow`
   da moldura garante que nada escape dela em nenhum caso. */
.nav .conta i,.rosto{overflow:hidden}
.nav .conta i img,.rosto img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;border-radius:999px;display:block}
.nav .conta .conta-nome{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){.nav .conta .conta-nome{display:none}.nav .conta{padding-right:3px}}
.painel-nav .cab .fraco{font-weight:500;color:var(--ink-4)}
.painel-nav .cab form{margin:0}
.painel-nav .ler-tudo{border:0;background:transparent;padding:0;font:inherit;font-size:12.5px;font-weight:600;color:var(--blue);cursor:pointer}
.conta-links form{margin:0;display:contents}
.conta-links button.sair{width:100%;border:0;background:transparent;font:inherit;cursor:pointer;display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--ink-4);text-align:left}
.conta-links button.sair:hover{background:var(--sheet-2);color:var(--ink)}
.conta-links button.sair svg{width:16px;height:16px;color:var(--ink-4)}
.fraco{color:var(--ink-4)}
/* o monograma: as iniciais num degradê que nasce do nome (tela 3) */
.monograma{display:inline-grid;place-items:center;width:100%;height:100%;border-radius:inherit;color:#fff;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,hsl(var(--h) 70% 55%),hsl(var(--h2) 75% 62%))}
.resultado-demo .icone.monograma{width:28px;height:28px;border-radius:8px;font-size:11px}
.marcas li a.mais{color:var(--blue)}
.marcas li a:not(.mais){color:var(--ink-4)}
.marcas li a:not(.mais):hover{color:var(--ink)}
.anuncio-hero{padding:0}
/* os erros: o texto miúdo e a marca centrada; o que o jurídico ainda vai fechar */
.erro-p .porque.miudo{font-size:12.5px;color:var(--ink-4);margin-top:14px}
.erro-p .cartao-e .marca-e{margin:0 auto 14px}
mark.a-definir{background:#FFF4DE;color:#9A4D00;padding:0 4px;border-radius:4px}
/* o documento numa coluna: a trilha nunca cresce além da tela (1fr sozinho vale min-content, e a tabela empurra) */
@media (max-width:900px){.doc{grid-template-columns:minmax(0,1fr)}.doc-corpo{min-width:0}.doc-corpo table{display:block;overflow-x:auto;max-width:100%}}
/* a busca no cabeçalho, só nas páginas que a fase ainda não refez */
.busca-topo{display:flex;align-items:center;gap:6px;height:36px;padding:0 4px 0 12px;border-radius:999px;border:1px solid var(--rule);background:var(--sheet);justify-self:center;width:min(100%,360px);position:relative}
.busca-topo input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:13.5px;color:var(--ink)}
.busca-topo button{height:28px;padding:0 12px;border-radius:999px;border:0;background:var(--ink);color:var(--paper);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.busca-topo .sugestoes{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;background:var(--sheet);border:1px solid var(--rule-soft);border-radius:14px;box-shadow:var(--sombra-alta);overflow:hidden;text-align:left}
.nav .folha.com-busca{grid-template-columns:auto minmax(200px,340px) minmax(0,1fr) auto;gap:14px}
.nav .folha.com-busca .busca-topo{order:2;justify-self:start;width:100%}
.nav .folha.com-busca .nav-centro{order:3;justify-self:center}
.nav .folha.com-busca .nav-direita{order:4}
@media (max-width:1000px){.nav .folha.com-busca{grid-template-columns:auto minmax(160px,1fr) auto}.nav .folha.com-busca .nav-centro{grid-row:2;grid-column:1 / -1;justify-content:center;margin:6px -10px 0 -14px;padding:4px 8px 6px;border-top:1px solid var(--rule-soft)}.nav .folha.com-busca{height:auto;padding-top:8px}}
@media (max-width:760px){.nav .folha.com-busca{grid-template-columns:1fr auto}.nav .folha.com-busca .busca-topo{grid-row:3;grid-column:1 / -1;order:5;width:auto;justify-self:stretch;margin:0 4px 8px}.nav .folha.com-busca .nav-centro{margin-top:0;border-top:0;padding-top:2px}}
/* as páginas por trás: o conteúdo começa abaixo da barra flutuante */
main.folha{padding-top:22px;padding-bottom:64px}
/* rótulo que o leitor de tela lê e a tela não mostra */
.visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* a janela do SketchUp: coluna única, sem as posições só do site (a barra de uma linha vem no Bloco 7) */
.sketchup .barra-de-anuncio,.sketchup .lateral-de-anuncio,.sketchup .anuncio-hero{display:none}