/* Partitura Livre: base + componentes compartilhados (DESIGN_SYSTEM.md).
   Carregado em todas as páginas do site, depois de tokens.css e antes do CSS
   da página. Regra: o que só uma página usa vai no arquivo dela. */

/* ---------- base ---------- */
*{box-sizing:border-box}
/* o cabeçalho é fixo: âncoras e o foco do teclado param abaixo dele (WCAG 2.4.11) */
html{scroll-padding-top:calc(var(--header-h) + var(--space-3))}
html,body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;line-height:var(--leading-normal)}
a{color:inherit;text-decoration:none}
/* parágrafo e item de lista sem uma palavra sozinha na última linha
   (títulos usam balance) */
p,li{text-wrap:pretty}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* .hidden = escondido só visualmente (continua focável), ex.: input de arquivo */
.hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
.small{font-size:var(--text-xs);color:var(--color-text-muted)}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.inline-link{color:var(--color-primary);font-weight:var(--weight-semibold)}
.inline-link:hover{text-decoration:underline}

/* ---------- foco e movimento ---------- */
/* Anel de foco só para teclado; campos têm o próprio (borda + --ring). */
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
main:focus{outline:none}
.skip-link{position:absolute;left:var(--space-4);top:-60px;z-index:50;padding:10px var(--space-4);
  border-radius:var(--radius-sm);background:var(--color-text);color:#fff;font-weight:var(--weight-semibold);
  font-size:var(--text-md)}
.skip-link:focus{top:var(--space-3)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- moldura do site: cabeçalho, conteúdo, rodapé ---------- */
header.site{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--color-border)}
.nav{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand-logo{display:block;width:auto;height:38px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{color:var(--color-text-muted);font-size:var(--text-md);font-weight:var(--weight-semibold)}
.nav-links a:hover{color:var(--color-text)}
/* página atual (aria-current, posto pelo _html_page) */
.nav-links a[aria-current]{color:var(--color-text);text-decoration:underline 2px var(--color-primary);text-underline-offset:6px}
/* alvo dos links soltos do cabeçalho e do rodapé: 24px (44 no toque, WCAG
   2.5.8). O padding cresce a área de clique e a margem negativa a devolve: o
   texto não sai do lugar. Linha do texto: 14px x 1,5 = 21px no cabeçalho,
   13px x 1,5 = 19,5px no rodapé. */
.nav-links a{padding-block:1.5px;margin-block:-1.5px}
.foot-links a{padding-block:2.25px;margin-block:-2.25px}
@media (pointer:coarse){
  .nav-links a{padding-block:11.5px;margin-block:-11.5px}
  .foot-links a{padding-block:12.25px;margin-block:-12.25px}
  /* quando os links quebram em duas linhas, as áreas não se sobrepõem */
  .foot-links{row-gap:var(--space-6)}
}
main{min-height:calc(100vh - var(--header-h))}
footer.site{border-top:1px solid var(--color-border);margin-top:22px;background:var(--color-surface-muted)}
/* padding só vertical: o lateral vem do .wrap (alinha com o cabeçalho) */
.foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-top:22px;padding-bottom:22px;color:var(--color-text-muted);font-size:var(--text-sm)}
.foot a{color:var(--color-text-muted);font-weight:var(--weight-semibold)}
.foot a:hover,.foot a[aria-current]{color:var(--color-text)}
.foot a[aria-current]{text-decoration:underline 1px;text-underline-offset:4px}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
/* menu do celular: só aparece quando os links do cabeçalho somem */
.nav-menu{display:none}
@media(max-width:820px){
  .nav-links{display:none}
  .nav .nav-cta{display:none}
  .nav-menu{display:block}
  .brand-logo{height:34px}
}
/* telas estreitas (WCAG 1.4.10 pede 320px): primeiro o botão Menu encolhe;
   abaixo de 365px o logo desce para 28px e a margem lateral (--gutter, usada
   também pela partitura de ponta a ponta do resultado) para 16px.
   Logo + Menu: 216 + 89px, depois 178 + 89px. */
@media(max-width:380px){
  .nav{gap:var(--space-3)}
  .nav-menu>summary{padding:0 var(--space-3)}
}
@media(max-width:364px){
  :root{--gutter:var(--space-4)}
  .brand-logo{height:28px}
}

/* ---------- botão ---------- */
.btn,.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:var(--control-md);padding:0 18px;border:0;border-radius:var(--radius-control);background:var(--color-primary);
  color:var(--color-on-primary);font-weight:var(--weight-semibold);font-size:var(--text-md);cursor:pointer;
  transition:background-color var(--duration-fast),border-color var(--duration-fast),color var(--duration-fast);
  white-space:nowrap}
.btn:hover,.button:hover{background:var(--color-primary-hover)}
.btn.lg{height:var(--control-lg);padding:0 26px;font-size:15px}
.btn.sm{height:var(--control-sm);padding:0 14px;font-size:var(--text-sm)}
.btn.block{width:100%}
.btn.ghost,.button.secondary{background:#fff;color:var(--color-text);border:1px solid var(--color-border)}
.btn.ghost:hover,.button.secondary:hover{background:var(--color-surface-muted)}
.btn.danger{background:var(--color-danger)}
.btn.danger:hover{background:var(--color-danger-hover)}
.btn:active{filter:brightness(.94)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn[aria-busy="true"]{cursor:progress}
/* carregando dentro do botão: <span class="btn-spin"> visível com
   aria-busy="true" no botão */
.btn-spin{display:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.44);
  border-top-color:#fff;animation:sp .8s linear infinite;flex:none}
.btn[aria-busy="true"] .btn-spin{display:block}

/* ---------- carregando ---------- */
.spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--color-primary-border);
  border-top-color:var(--color-primary);animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
/* esqueleto: bloco cinza no lugar do conteúdo que ainda vem; dê largura/altura */
.skeleton{position:relative;overflow:hidden;background:#eceef4;border-radius:var(--radius-sm)}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
/* barra de progresso: <div class="progress"><span style="width:40%"></span></div>
   .indeterminate quando não há porcentagem real */
.progress{height:6px;border-radius:var(--radius-pill);background:#e4e7f7;overflow:hidden}
.progress>span{display:block;height:100%;width:0;background:var(--color-primary);
  border-radius:inherit;transition:width .3s}
.progress.indeterminate>span{width:40%;animation:indeterminate 1.2s ease-in-out infinite}
@keyframes indeterminate{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
/* movimento reduzido: giratório, esqueleto e barra sem porcentagem pulsam no
   lugar (só opacidade) em vez de parar. A barra fica inteira: parada em 40%
   ela parecia progresso de verdade (princípio 4). */
@media (prefers-reduced-motion:reduce){
  .spin,.btn-spin,.skeleton,.progress.indeterminate>span{animation:pulse 1.6s ease-in-out infinite!important}
  .progress.indeterminate>span{width:100%;transform:none}
}
@keyframes pulse{50%{opacity:.35}}

/* ---------- menu suspenso (<details class="dropdown">) ---------- */
.dropdown{position:relative}
.dropdown>summary{list-style:none;cursor:pointer}
.dropdown>summary::-webkit-details-marker{display:none}
.dropdown-panel{position:absolute;right:0;top:calc(100% + var(--space-2));z-index:30;min-width:232px;
  display:flex;flex-direction:column;padding:var(--space-2);background:#fff;
  border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow)}
.dropdown-panel a:not(.btn){display:flex;align-items:center;min-height:var(--control-md);padding:0 var(--space-3);
  border-radius:var(--radius-sm);font-weight:var(--weight-semibold);font-size:15px;color:var(--color-text)}
.dropdown-panel a:not(.btn):hover{background:var(--color-surface-muted)}
.dropdown-panel .btn{margin-top:var(--space-2)}

/* ---------- selo (eyebrow) ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);height:30px;padding:0 14px;
  border-radius:var(--radius-pill);background:var(--color-primary-soft);color:var(--color-primary-hover);
  font-size:var(--text-sm);font-weight:var(--weight-semibold)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--color-primary)}

/* ---------- cartão / painel ---------- */
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--space-6);box-shadow:var(--shadow-sm)}
.card h3{margin:0 0 6px;font-size:var(--text-base)}
.card p{margin:0;color:var(--color-text-muted);font-size:var(--text-md)}
/* cartão-link (guias): grade de 4, vira 1 coluna no celular */
.guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.guide-card{display:block}
.guide-card:hover{border-color:var(--color-primary-border);box-shadow:var(--shadow)}
.guide-card span{display:block;color:var(--color-primary-hover);font-size:var(--text-xs);font-weight:var(--weight-bold);margin-bottom:var(--space-2)}
.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
@media(max-width:820px){.guide-grid{grid-template-columns:1fr}}

/* ---------- perguntas (FAQ) ---------- */
.faq{display:grid;gap:10px}
.faq-item{border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-4);background:#fff}
.faq-item h3{margin:0 0 5px;font-size:15px}
.faq-item p{margin:0;color:var(--color-text-muted);font-size:var(--text-md)}

/* ---------- aviso ---------- */
/* .notice = informação; .success/.warning/.danger mudam o tom. .notice-box e
   .notice-warn são os nomes antigos (= .notice / .notice.danger). */
.notice,.notice-box{border:1px solid var(--color-info-border);background:var(--color-info-bg);color:var(--color-info-text);
  border-radius:var(--radius-sm);padding:14px;font-size:13.5px;line-height:1.45}
.notice.success{border-color:var(--color-success-border);background:var(--color-success-bg);color:var(--color-success-text)}
.notice.warning{border-color:var(--color-warning-border);background:var(--color-warning-bg);color:var(--color-warning-text)}
.notice.danger,.notice-warn{border-color:var(--color-danger-border);background:var(--color-danger-bg);color:var(--color-danger-text)}
/* aviso com ações: o que aconteceu e o que fazer ali mesmo (envio na home,
   partitura no resultado). O título tem classe própria: um <strong> no meio
   da frase de outro aviso continua na linha.
   <div class="notice danger with-actions" role="alert">
     <strong class="notice-title">Título</strong><p>Uma frase.</p>
     <div class="notice-actions"><button class="btn" type="button">Tentar de novo</button></div></div> */
.notice.with-actions{font-size:var(--text-md)}
.notice-title{display:block;font-size:var(--text-base);font-weight:var(--weight-bold);margin-bottom:var(--space-1)}
.with-actions p{margin:0 0 var(--space-1)}
.with-actions a:not(.btn){color:inherit;text-decoration:underline}
.notice-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
.notice-actions .btn.ghost{color:var(--color-text)}

/* ---------- campo de formulário ---------- */
/* <label class="field"><span>Rótulo</span><input ...><small class="field-hint">...</small></label>
   .cf-field é o nome antigo (contato e fórum). */
.contact-form{display:flex;flex-direction:column;gap:15px;margin-top:18px}
.field,.cf-field{display:flex;flex-direction:column;gap:6px}
.field>span,.cf-field>span{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text)}
.field input,.field select,.field textarea,
.cf-field input,.cf-field select,.cf-field textarea{
  width:100%;font:inherit;font-size:14.5px;color:var(--color-text);background:#fff;
  border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);padding:11px 13px;
  transition:border-color var(--duration-fast),box-shadow var(--duration-fast)}
.field textarea,.cf-field textarea{resize:vertical;min-height:120px;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus,
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{
  outline:none;border-color:var(--color-primary);box-shadow:var(--ring)}
.field input::placeholder,.field textarea::placeholder,
.cf-field input::placeholder,.cf-field textarea::placeholder{color:var(--color-placeholder)}
.field [aria-invalid="true"],.cf-field [aria-invalid="true"]{border-color:var(--color-danger)}
.field [aria-invalid="true"]:focus,.cf-field [aria-invalid="true"]:focus{
  border-color:var(--color-danger);box-shadow:0 0 0 3px var(--color-danger-bg)}
.field-hint{font-size:12.5px;color:var(--color-text-muted)}
/* mensagem de erro do campo: <small class="field-hint field-hint-error" id=...>,
   ligada ao campo por aria-describedby */
.field-hint-error{color:var(--color-danger);font-weight:var(--weight-semibold)}
.field-optional{font-weight:var(--weight-regular);color:var(--color-text-muted)}
/* armadilha anti-robô (honeypot): fora da tela */
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-form .actions{margin-top:var(--space-1)}