/* Selene Studio · FAQ (/faq). Page styles on top of /site/site.css, drawn in Doop (frames "FAQ · …", x 16000):
   the left column with the title, the search and the topics (held while the questions scroll), the six groups,
   the search states, and the phone layout below 960 px. */

/* The current page lights up in the bar, the phone menu and the footer (not in the kit yet). */
.nav-links a[aria-current="page"],.rd-col a[aria-current="page"],.menu-links a[aria-current="page"],.menu-links a[aria-current="page"] svg{color:var(--signal)}

/* Page top: the same paper, with a soft light behind the title. */
:root{--pg-luz:radial-gradient(40% 560px at 20% 0,#fff 0%,rgb(255 255 255 / 0) 100%),radial-gradient(70% 420px at 50% -60px,rgb(37 88 232 / .07) 0%,rgb(37 88 232 / 0) 100%)}
html.dark{--pg-luz:radial-gradient(40% 560px at 20% 0,rgb(255 255 255 / .05) 0%,rgb(255 255 255 / 0) 100%),radial-gradient(70% 420px at 50% -60px,rgb(38 105 254 / .16) 0%,rgb(38 105 254 / 0) 100%)}
.fq-pg{position:relative;padding:152px 0 112px}
.fq-pg::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:640px;background:var(--pg-luz);pointer-events:none}
@media (min-width:960px) and (max-width:1295px){.fq-pg{zoom:var(--z,1)}}

.fq-grid{display:grid;grid-template-columns:400px 1fr;column-gap:80px;align-items:start}
.fq-lado{align-self:stretch}
.fq-cab h1{font:500 56px/1.05 var(--display);letter-spacing:-.02em;text-wrap:balance}
.fq-cab .lead{margin-top:20px;font-size:17px}

/* search */
.busca{position:relative;margin-top:28px}
.busca .field{width:100%;padding:0 44px 0 40px;-webkit-appearance:none;appearance:none}
.busca .field::-webkit-search-cancel-button,.busca .field::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.lupa{position:absolute;left:14px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--faint);pointer-events:none}
.kbd{position:absolute;right:9px;top:50%;margin-top:-11px;display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:6px;background:var(--muted);color:var(--muted-fg);font:500 12px/1 var(--sans);pointer-events:none}
.limpa{position:absolute;right:8px;top:50%;margin-top:-12px;width:24px;height:24px;border-radius:6px;display:none;place-items:center;background:var(--muted);color:var(--muted-fg);transition:color .2s var(--ease)}
.limpa:hover{color:var(--fg)}
.limpa svg{width:14px;height:14px}
.busca.cheia .limpa{display:grid}
.busca.cheia .kbd,.busca:focus-within .kbd{display:none}
.achou{min-height:20px;margin-top:12px;font-size:13px;line-height:20px;color:var(--muted-fg)}

/* topics: held under the bar while the questions scroll; the light-blue mark slides to the group in view */
.fq-fixo{position:sticky;top:104px;margin-top:8px}
.temas .rot{font:500 14px/20px var(--sans);color:var(--faint);margin-bottom:8px}
.temas-lista{position:relative;display:grid}
.temas-lista a{position:relative;z-index:1;display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;margin:0 -12px;border-radius:10px;font-size:15px;line-height:1.2;text-decoration:none;transition:color .2s var(--ease),opacity .2s var(--ease)}
.temas-lista a:hover{color:var(--signal)}
.temas-lista svg{width:16px;height:16px;flex:none;color:var(--faint);transition:color .2s var(--ease)}
.temas-lista .n{margin-left:auto;font-size:13px;color:var(--faint);transition:color .2s var(--ease)}
.temas-lista a[aria-current]{color:var(--signal);font-weight:500}
.temas-lista a[aria-current] svg,.temas-lista a[aria-current] .n{color:var(--signal)}
html:not(.js) .temas-lista a[aria-current]{background:var(--signal-soft)}
.temas-lista a.zero{opacity:.42}
.nome-cel{display:none}
.marca{position:absolute;left:-12px;right:-12px;top:0;height:40px;border-radius:10px;background:var(--signal-soft);opacity:0;pointer-events:none}
.marca.pronta{transition:transform .24s cubic-bezier(.23,1,.32,1),opacity .2s var(--ease)}
@media (prefers-reduced-motion:reduce){.marca.pronta{transition:none}}

/* "Não achou a sua pergunta?" */
.ajuda{margin-top:32px;padding:20px;border-radius:18px;background:var(--card);box-shadow:var(--raised)}
.ajuda h2,.fq-vazio h2{font:600 16px/1.3 var(--sans)}
.ajuda>p,.fq-vazio>p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--muted-fg)}
.ajuda .btn,.fq-vazio .btn{margin-top:16px}
.ajuda .mail,.fq-vazio .mail{margin-top:12px;font-size:13px;color:var(--faint)}
.mail a{color:inherit;text-decoration:none;transition:color .2s var(--ease)}
.mail a:hover{color:var(--signal)}

/* groups */
.grupo{scroll-margin-top:32px}
.grupo+.grupo{margin-top:64px}
.g-topo{display:flex;align-items:center;gap:14px}
.g-topo h2{font:500 28px/1.15 var(--display);letter-spacing:-.015em}
.g-topo h2:focus{outline:0}
.fq-lista .qs{margin-top:20px}
.fq-lista .q{scroll-margin-top:24px}
.q-t{min-width:0}
.q-resp a{color:var(--signal);font-weight:500;text-decoration:none}
.q-resp a:hover{text-decoration:underline;text-underline-offset:3px}
.fq-lista mark{background:var(--signal-soft);color:inherit;border-radius:4px;padding:0 2px;margin:0 -2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.q-resp mark{color:var(--fg)}

/* search states */
.fq-vazio{max-width:560px;padding:28px;border-radius:18px;background:var(--card);box-shadow:var(--raised)}
.fq-vazio h2{margin-top:16px;font-size:17px}
.fq-vazio>p{font-size:16px}
.fq-fim{margin-top:40px;font-size:16px;color:var(--muted-fg)}
.fq-fim a{color:var(--signal);font-weight:500;text-decoration:none}
.fq-fim a:hover{text-decoration:underline;text-underline-offset:3px}

/* phones and narrow windows: one column, the topics become a row of buttons held under the bar */
@media (max-width:959px){
  :root{--pg-luz:radial-gradient(130% 380px at 30% 0,#fff 0%,rgb(255 255 255 / 0) 100%)}
  html.dark{--pg-luz:radial-gradient(130% 380px at 30% 0,rgb(255 255 255 / .06) 0%,rgb(255 255 255 / 0) 100%)}
  .fq-pg{padding:92px 0 72px}
  .fq-pg::before{height:420px}
  /* stretch, not the desktop's start: a shrink-to-fit item takes the row of topic buttons as its width */
  .fq-grid{display:flex;flex-direction:column;align-items:stretch}
  .fq-grid>*,.temas{min-width:0}
  .fq-lado,.fq-fixo{display:contents}
  .fq-cab{order:1}
  .temas{order:2}
  .fq-lista{order:3;margin-top:28px}
  .ajuda{order:4;margin-top:48px}
  .fq-cab h1{font-size:36px;line-height:1.05}
  .fq-cab .lead{margin-top:14px;font-size:16px}
  .busca{margin-top:22px}
  .busca .field{padding-left:42px}
  .lupa{width:18px;height:18px;margin-top:-9px}
  .kbd{display:none}
  .limpa{width:28px;height:28px;margin-top:-14px;border-radius:8px}
  .achou{min-height:0;margin-top:10px}
  .achou:empty{display:none}
  .temas{position:sticky;top:60px;z-index:20;margin-top:12px;padding:6px 0;background:var(--canvas);box-shadow:0 0 0 100vmax var(--canvas);clip-path:inset(0 -100vmax)}
  .buscando .temas{display:none}
  .vazia:not(.com-pergunte) .ajuda{display:none} /* the empty-search card already offers the same way out; with the Pergunte box, the box stays */
  .temas .rot,.marca{display:none}
  .temas-lista{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:4px 16px;scrollbar-width:none}
  .temas-lista::-webkit-scrollbar{display:none}
  .temas-lista a{flex:none;height:36px;margin:0;padding:0 14px;gap:0;background:var(--card);box-shadow:var(--raised);font:500 14px/1 var(--sans);color:var(--fg);transition:background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
  .temas-lista a svg,.temas-lista .n,.nome-pc{display:none}
  .nome-cel{display:inline}
  .temas-lista a[aria-current]{background:var(--signal-soft);color:var(--signal);box-shadow:none}
  .grupo{scroll-margin-top:72px}
  .grupo+.grupo{margin-top:48px}
  .g-topo{gap:12px}
  .g-topo .ico{width:32px;height:32px}
  .g-topo .ico svg{width:16px;height:16px}
  .g-topo h2{font-size:24px}
  .fq-lista .qs{margin-top:16px}
  .fq-lista .q{scroll-margin-top:72px}
  .ajuda .btn,.fq-vazio .btn{display:flex;width:100%}
  .ajuda .mail,.fq-vazio .mail{text-align:center}
  .fq-vazio{padding:24px 20px}
  .fq-vazio h2{font-size:16px}
  .fq-vazio>p{font-size:15px}
  .fq-fim{margin-top:28px;font-size:15px}
}

/* "Perguntar à Selene" in the empty search. The box comes from another session and mounts in #pergunte-a-selene;
   until it says it is on the page (.com-pergunte on .fq-pg), the empty search keeps its plain version. */
.vazio-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.fq-pg .fq-vazio .vazio-acoes .btn{margin-top:0}
.fq-perguntar svg{width:16px;height:16px;fill:currentColor}
.fq-pg .fq-vazio .fq-perguntar,.fq-pg .fq-vazio .com-caixa{display:none}
.fq-pg.com-pergunte .fq-vazio .fq-perguntar{display:inline-flex}
.fq-pg.com-pergunte .fq-vazio .com-caixa{display:block}
.fq-pg.com-pergunte .fq-vazio .sem-caixa{display:none}
@media (max-width:959px){
  .vazio-acoes{display:grid}
  .fq-pg.com-pergunte .fq-vazio .fq-perguntar{display:flex}
}