/* WheyProtein — WheyStudies 3.2.0
   Composição da página de ferramenta (v4, 27/out/2026): busca e resultados
   à esquerda, Como usar à direita (fixo ao rolar); abaixo de 1000px uma
   coluna, com o Como usar em faixa fina antes da busca.

   Escopo .ws-app. Os apelidos do tema resolvem aqui mesmo, a partir dos
   presets do theme.json: a ferramenta não depende de o tema enfileirar
   o tpl-ferramenta.css. Nenhum :root, nenhum seletor nu, nenhuma largura
   de página. */

.ws-app{
  --papel:var(--wp--preset--color--papel,#fafbfc);
  --gesso:var(--wp--preset--color--gesso,#f2f3f5);
  --tinta:var(--wp--preset--color--chumbo,#2b2b2b);
  --tinta2:var(--wp--preset--color--tinta-2,#737373);
  --linha:var(--wp--preset--color--linha,#e4e6eb);
  --linha2:var(--wp--preset--color--linha-2,#d3d7de);
  --navy:var(--wp--preset--color--navy,#2f3a55);
  --sage:var(--wp--preset--color--sage,#7c8b6e);
  --castanho:var(--wp--preset--color--castanho,#8a6a4f);
  --heron:var(--wp--preset--color--heron,#7a9da5);
  --corpo:var(--wp--preset--font-family--corpo,inherit);
  --display:var(--wp--preset--font-family--display,inherit);
  --r:var(--wp--custom--raio,6px);
  --tom:var(--wp--preset--color--footer,#28303f);
  --tom-forte:var(--wp--preset--color--footer-2,#232b38);
  --branco:#fff;
  font-family:var(--corpo);
  font-size:16px;
  line-height:1.55;
  color:var(--tinta);
}
.ws-app *{box-sizing:border-box}
.ws-app .ws-oculto{display:none!important}

/* ---------- a grade ---------- */
.ws-app .ws-lay{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(24px,3vw,40px);align-items:start}
.ws-app .ws-main{min-width:0}
.ws-app .ws-como-w{position:sticky;top:90px;min-width:0}

/* ---------- peças comuns ---------- */
.ws-app .ws-cartao{background:var(--papel);border:1px solid var(--linha);border-radius:var(--r)}
.ws-app .ws-rot{display:block;margin:0;font-family:var(--corpo);font-size:12px;line-height:1.5;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta2)}
.ws-app .ws-h2{margin:8px 0 0;font-size:clamp(22px,2.2vw,28px);line-height:1.25;font-weight:600;letter-spacing:-.5px;color:var(--tinta)}
.ws-app .ws-btn{display:inline-flex;align-items:center;justify-content:center;min-height:64px;padding:0 36px;border:1.5px solid var(--tom);border-radius:var(--r);
  background:var(--tom);color:var(--papel);font-family:var(--corpo);font-size:16px;font-weight:600;line-height:1;cursor:pointer;transition:background .15s}
.ws-app .ws-btn:hover{background:var(--tom-forte);border-color:var(--tom-forte)}
.ws-app .ws-btn:disabled{opacity:.6;cursor:default}
.ws-app .ws-btn.ws-sec{min-height:48px;padding:0 24px;font-size:15px;background:transparent;color:var(--tom)}
.ws-app .ws-btn.ws-sec:hover{background:var(--gesso)}
.ws-app :is(.ws-btn,.ws-sug-b,.ws-q,.ws-link):focus-visible{outline:2px solid var(--tom);outline-offset:3px}

/* ---------- a busca ---------- */
.ws-app .ws-busca{padding:clamp(24px,4vw,40px)}
.ws-app .ws-search{display:flex;gap:12px;margin-top:20px}
.ws-app .ws-field{position:relative;flex:1;min-width:0;display:flex;align-items:center}
.ws-app .ws-mag{position:absolute;left:20px;width:22px;height:22px;pointer-events:none;color:var(--tom)}
.ws-app .ws-q{width:100%;min-height:64px;padding:0 20px 0 56px;border:2px solid var(--tom);border-radius:var(--r);background:var(--branco);
  font-family:var(--corpo);font-size:18px;color:var(--tinta);outline:none;-webkit-appearance:none;appearance:none}
.ws-app .ws-q::placeholder{color:var(--tinta2)}
.ws-app .ws-q:focus{box-shadow:0 0 0 3px var(--gesso)}
.ws-app .ws-sug{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;font-size:14px;color:var(--tinta2)}
.ws-app .ws-sug-b{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--linha);border-radius:99px;background:var(--branco);
  font-family:var(--corpo);font-size:14px;font-weight:500;color:var(--tinta);cursor:pointer}
.ws-app .ws-sug-b:hover{border-color:var(--tom)}
.ws-app .ws-fontes{margin:20px 0 0;font-size:14px;line-height:1.55;color:var(--tinta2)}

/* ---------- carregando ---------- */
.ws-app .ws-status:empty{display:none}
.ws-app .ws-status{margin-top:28px}
.ws-app .ws-results:not(:empty){margin-top:48px}
.ws-app .ws-loading{display:flex;align-items:center;color:var(--tinta);font-style:italic}
.ws-app .ws-hint{margin-top:6px;font-size:13px;color:var(--tinta2)}
@keyframes ws-spin{to{transform:rotate(360deg)}}
.ws-app .ws-spin{display:inline-block;flex:0 0 auto;width:15px;height:15px;margin-right:9px;border:2px solid var(--linha2);border-top-color:var(--tom);border-radius:50%;animation:ws-spin .8s linear infinite}

/* ---------- resultado ---------- */
.ws-app .ws-resumo{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px}
.ws-app .ws-resumo h2{margin:0;font-size:clamp(22px,2.2vw,28px);line-height:1.25;font-weight:600;letter-spacing:-.5px;color:var(--tinta)}
.ws-app .ws-resumo p{margin:0;font-size:14px;color:var(--tinta2)}
.ws-app .ws-lista{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:20px}
.ws-app .ws-est{margin:0;padding:0}
.ws-app .ws-est article{height:100%;display:flex;flex-direction:column;gap:10px;padding:28px;background:var(--papel);border:1px solid var(--linha);border-left:4px solid var(--sage);border-radius:var(--r)}
.ws-app .ws-est-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.ws-app .ws-tit{margin:0;font-size:20px;line-height:1.35;font-weight:600;letter-spacing:-.3px;color:var(--tinta)}
.ws-app .ws-fonte{flex:none;padding:3px 10px;border-radius:99px;background:var(--gesso);color:var(--tom);font-size:12px;line-height:1.6;font-weight:600;letter-spacing:.04em}
.ws-app .ws-orig{margin:0;font-size:13px;font-style:italic;color:var(--tinta2)}
.ws-app .ws-aut{margin:0;font-size:15px;color:var(--tinta)}
.ws-app .ws-rev{margin:0;font-size:14px;color:var(--tinta2)}
.ws-app .ws-rev span+span::before{content:"·";margin:0 .4em}
.ws-app .ws-link{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:15px;font-weight:600;color:var(--tom);text-decoration:none}
.ws-app .ws-link:hover{text-decoration:underline;text-underline-offset:4px}
.ws-app .ws-mais{margin-top:32px}

/* ---------- como usar ---------- */
.ws-app .ws-como-w{padding:22px}
.ws-app .ws-como-tit{margin:6px 0 0;font-size:19px;line-height:1.25;letter-spacing:-.3px}
.ws-app .ws-como-w ol{list-style:none;margin:16px 0 0;padding:0}
.ws-app .ws-como-w li{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;margin:0;padding:0 0 20px;font-size:15px;line-height:1.3}
.ws-app .ws-como-w li:last-child{padding-bottom:0}
.ws-app .ws-como-w li:not(:last-child)::after{content:"";position:absolute;left:23px;top:54px;bottom:6px;border-left:3px dotted var(--c);opacity:.55}
.ws-app .ws-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r);border:2px solid var(--c);color:var(--c);background:var(--branco)}
.ws-app .ws-ico svg{width:26px;height:26px}
.ws-app .ws-como-w b{display:block;font-size:15px;line-height:1.3;font-weight:600;color:var(--tinta)}
.ws-app .ws-como-w small{display:block;margin-top:2px;font-size:13px;line-height:1.5;color:var(--tinta)}
.ws-app .ws-c1{--c:var(--navy)}
.ws-app .ws-c2{--c:var(--sage)}
.ws-app .ws-c3{--c:var(--castanho)}

/* ---------- telas ---------- */
@media (max-width:1000px){
  .ws-app .ws-lay{grid-template-columns:minmax(0,1fr)}
  .ws-app .ws-como-w{position:static;order:-1;padding:16px 14px}
  .ws-app .ws-como-w ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
  .ws-app .ws-como-w li{grid-template-columns:minmax(0,1fr);gap:8px;padding:0;text-align:center;justify-items:stretch}
  .ws-app .ws-como-w li .ws-ico{justify-self:center}
  .ws-app .ws-como-w li > span:last-child{min-width:0}
  .ws-app .ws-como-w li:not(:last-child)::after{left:calc(50% + 30px);right:calc(-50% + 30px);top:23px;bottom:auto;width:auto;height:0;border-left:0;border-top:3px dotted var(--c)}
  .ws-app .ws-como-w b{font-size:13px}
  .ws-app .ws-como-w small{display:none}
}
@media (max-width:600px){
  .ws-app .ws-search{flex-direction:column}
  .ws-app .ws-btn{width:100%}
  .ws-app .ws-est-top{flex-direction:column;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .ws-app .ws-spin{animation:none}
  .ws-app .ws-btn{transition:none}
}