/* ============ estilo base — compartilhado ============ */
/* painel de amp estilo Mesa Boogie: tokens de cor/fonte, cabeçalho (.faceplate),
   controles genéricos (.mesa/.campo/select/.grupo/.tocar/.alternador) e
   estrutura de seção (.secao/h2/.prosa). Carregado por <link rel="stylesheet">
   tanto em index.html quanto em pratica.html, ANTES do <style> específico de
   cada página — nada aqui é específico de braço, piano, acordes ou TAB (isso
   fica só no index.html, que é quem usa). */

:root{
  --tolex:#0E0D0C;
  --tolex-2:#19140F;
  --painel:#DCD3BE;
  --valvula:#D8352A;
  --patina:#6FA8A0;
  --setima:#B98BA0;
  --corda:#8C9A93;
  --tinta:#F2EDE2;
  --jacaranda:#170F0C;
  --traste:#77857E;

  --display:"Archivo Narrow","Arial Narrow",ui-sans-serif,system-ui,sans-serif;
  --corpo:"Newsreader",Georgia,"Times New Roman",serif;
  --dado:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --marca:"Dancing Script","Segoe Script",cursive;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--tolex);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 5px);
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.envolve{max-width:1080px;margin:0 auto;padding:0 20px 90px}

/* faceplate — painel de amp preto, cromados nos cantos (::before/::after,
   sem tocar no HTML), jewel vermelho que pisca sozinho a cada nota tocada
   (a classe .acesa é acionada por JS específico de cada página) */
.faceplate{
  position:relative;
  background:linear-gradient(180deg,#1A1917 0%,#100F0E 100%);
  color:var(--tinta);margin:0 0 34px;padding:22px 20px 20px;
  border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,#3a3a3a,#d8d8d8 50%,#3a3a3a) 1;
  box-shadow:0 14px 40px rgba(0,0,0,.55);
}
.faceplate::before,.faceplate::after{content:'';position:absolute;top:14px;width:9px;height:9px;
  border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0%,#aaa 40%,#555 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.6)}
.faceplate::before{left:14px}
.faceplate::after{right:14px}
.faceplate .interno{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:20px}
.jewel{width:26px;height:26px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 32%, #FFB3A8 0%, var(--valvula) 42%, #5C0F08 100%);
  box-shadow:0 0 0 4px #D8D8D8,0 0 0 5px #7A7A7A,0 0 14px rgba(216,53,42,.45);transition:box-shadow .18s ease}
.jewel.acesa{box-shadow:0 0 0 4px #D8D8D8,0 0 0 5px #7A7A7A,0 0 26px 6px rgba(216,53,42,.95)}
.marca{font-family:var(--marca);font-weight:700;font-size:38px;letter-spacing:normal;text-transform:none;line-height:1;margin:0}
.eyebrow{font-family:var(--display);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--corda);margin:0 0 6px}
.subtitulo{font-size:15px;color:#B7AF9F;margin:6px 0 0;max-width:46ch;font-style:italic}

/* controles */
.mesa{background:var(--tolex-2);border:1px solid rgba(220,211,190,.14);border-radius:3px;
  padding:18px;display:flex;flex-wrap:wrap;gap:18px 26px;align-items:flex-end;margin-bottom:26px}
.campo{display:flex;flex-direction:column;gap:7px}
.campo>span{font-family:var(--display);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--corda)}
select{appearance:none;-webkit-appearance:none;
  font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--tolex);color:var(--tinta);border:1px solid rgba(220,211,190,.28);border-radius:2px;
  padding:9px 34px 9px 12px;min-width:190px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--corda) 50%),linear-gradient(135deg,var(--corda) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.grupo{display:flex;border:1px solid rgba(220,211,190,.28);border-radius:2px;overflow:hidden}
.grupo button{font-family:var(--display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--tolex);color:var(--corda);border:0;padding:10px 15px;cursor:pointer}
.grupo button+button{border-left:1px solid rgba(220,211,190,.28)}
.grupo button[aria-pressed="true"]{background:var(--painel);color:#1B2422;font-weight:700}
.tocar{font-family:var(--display);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  background:transparent;color:var(--valvula);border:1px solid var(--valvula);border-radius:2px;
  padding:10px 18px;cursor:pointer;transition:background .15s ease,color .15s ease}
.tocar:hover{background:var(--valvula);color:#16211F}
.tocar.ativo{background:var(--valvula);color:#16211F}
.tocar:disabled,select:disabled{opacity:.4;cursor:not-allowed}
.texto-btn{background:none;border:0;color:var(--corda);cursor:pointer;padding:10px 0;
  font-family:var(--display);font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px}
.texto-btn:hover{color:var(--painel)}
.alternador{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--tolex);color:var(--corda);border:1px solid rgba(220,211,190,.28);border-radius:2px;
  padding:10px 15px;cursor:pointer;transition:background .15s ease,color .15s ease}
.alternador[aria-pressed="true"]{background:var(--painel);color:#1B2422;border-color:var(--painel)}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--valvula);outline-offset:2px}
input[type=range]{width:150px;accent-color:var(--valvula);background:transparent}
input[type=number]{font-family:var(--dado);font-weight:700;font-size:15px;
  background:var(--tolex);color:var(--tinta);border:1px solid rgba(220,211,190,.28);border-radius:2px;
  padding:9px 12px;width:64px}
.bpm{font-family:var(--dado);font-size:13px;color:var(--painel);min-width:62px}

/* seções */
.secao{margin-top:60px}
h2{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--valvula);margin:0 0 4px}
.regra{height:1px;background:rgba(220,211,190,.18);margin:0 0 22px}
.prosa{font-size:19px;line-height:1.7;max-width:62ch;color:rgba(242,237,226,.9);margin:0}
.prosa em{color:var(--painel);font-style:italic}

footer{margin-top:80px;padding-top:20px;border-top:1px solid rgba(220,211,190,.14)}
footer p{font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--corda);margin:0}

@media (max-width:640px){
  body{font-size:16px}
  .marca{font-size:30px}
  .mesa{gap:14px 18px;padding:14px}
  select{min-width:150px}
  .prosa{font-size:17px}
  /* o link de navegação do cabeçalho (Casa Doze <-> Prática guiada) tem
     margin-left:auto pra ficar à direita no desktop — numa tela estreita,
     em vez de espremer do lado do wordmark, cai pra sua própria linha */
  .faceplate .interno{flex-wrap:wrap}
  .faceplate .interno>a{margin-left:0!important;flex:1 0 100%}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ---- chamada da prática guiada ---- */
/* O link no cabeçalho passava despercebido: era um .texto-btn cinza encostado
   na borda, do tamanho de uma legenda. Esta é a mesma ideia com o peso certo —
   um convite de linha inteira logo abaixo do cabeçalho, com a barra vermelha do
   jewel à esquerda pra puxar o olho. O <a> inteiro é clicável, não só o botão. */
.chamada{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin:22px 0 6px;padding:16px 20px;text-decoration:none;
  background:linear-gradient(90deg,rgba(216,53,42,.14),rgba(216,53,42,.03) 60%,transparent);
  border:1px solid rgba(216,53,42,.34);border-left:3px solid var(--valvula);
  border-radius:3px;transition:border-color .15s ease,background .15s ease}
.chamada:hover{border-color:var(--valvula);
  background:linear-gradient(90deg,rgba(216,53,42,.2),rgba(216,53,42,.05) 60%,transparent)}
.chamada:focus-visible{outline:2px solid var(--valvula);outline-offset:2px}
.chamada-texto{flex:1 1 320px;min-width:0}
.chamada-titulo{font-family:var(--display);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--valvula);margin:0 0 4px}
.chamada-frase{font-family:var(--corpo);font-size:18px;color:var(--tinta);margin:0;line-height:1.45}
.chamada-frase em{color:var(--painel);font-style:italic}
/* não é <button> pra o link continuar sendo link (abrir em nova aba, copiar
   endereço); herda só a aparência do .tocar */
.chamada-acao{flex:none;font-family:var(--display);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;color:var(--valvula);
  border:1px solid var(--valvula);border-radius:2px;padding:11px 18px;white-space:nowrap;
  transition:background .15s ease,color .15s ease}
.chamada:hover .chamada-acao{background:var(--valvula);color:#16211F}

/* o link do cabeçalho vira um destino, não uma legenda */
.link-cabecalho{font-family:var(--display);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--painel);text-decoration:none;white-space:nowrap;
  border:1px solid rgba(220,211,190,.35);border-radius:2px;padding:9px 14px;
  transition:border-color .15s ease,color .15s ease,background .15s ease}
.link-cabecalho:hover{border-color:var(--valvula);color:var(--valvula)}
.link-cabecalho:focus-visible{outline:2px solid var(--valvula);outline-offset:2px}

/* seletor de idioma PT | EN no cabeçalho */
.seletor-idioma{display:inline-flex;align-items:center;border:1px solid rgba(220,211,190,.35);
  border-radius:2px;background:var(--tolex);overflow:hidden;padding:0;height:35px;flex:none}
.lang-btn{background:transparent;border:0;color:var(--corda);padding:0 9px;height:100%;
  font-family:var(--dado);font-size:11px;font-weight:700;letter-spacing:.06em;cursor:pointer;
  transition:background .15s ease,color .15s ease}
.lang-btn:hover{color:var(--painel)}
.lang-btn.ativo{background:var(--painel);color:#16211F;font-weight:800}
.lang-btn:focus-visible{outline:2px solid var(--valvula);outline-offset:-2px}
.lang-sep{color:rgba(220,211,190,.25);font-size:10px;user-select:none}

@media (max-width:640px){
  .chamada{padding:14px 16px;gap:12px}
  .chamada-frase{font-size:16px}
  .chamada-acao{width:100%;text-align:center}
  /* na tela estreita a frase inteira empurrava o braço pra fora da dobra. O
     convite sobrevive na primeira oração; a lista dos blocos e o arremate são
     o que dá pra perder. */
  .chamada-frase em,.chamada-detalhe{display:none}
}
@media (prefers-reduced-motion:reduce){
  .chamada,.chamada-acao,.link-cabecalho{transition:none}
}

/* ---- afinador ---- */
.afinador{margin-top:22px;padding:16px 20px;background:var(--tolex-2);
  border:1px solid rgba(220,211,190,.16);border-radius:3px}
.afinador-topo{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.afinador-topo p{margin:0}
.afinador-corpo{margin-top:16px}
.afinador-leitura{display:flex;align-items:baseline;justify-content:center;gap:12px;
  min-height:58px}
.afinador-nota{font-family:var(--display);font-size:48px;font-weight:700;
  color:var(--corda);line-height:1;transition:color .15s ease}
.afinador-nota.afinado{color:var(--patina)}
.afinador-oitava{font-family:var(--dado);font-size:14px;color:var(--corda)}
.afinador-cents{font-family:var(--dado);font-size:15px;color:var(--corda);min-width:74px}

/* a régua: o centro é o afinado, e a agulha anda ±50 cents */
.afinador-regua{position:relative;height:34px;margin-top:6px;
  border-top:1px solid rgba(220,211,190,.16)}
.afinador-regua::before{content:"";position:absolute;left:50%;top:0;width:1px;height:12px;
  background:var(--painel)}
.afinador-faixa{position:absolute;left:calc(50% - 5%);top:0;width:10%;height:12px;
  background:rgba(111,168,160,.22)}
.afinador-agulha{position:absolute;top:-4px;left:50%;width:3px;height:20px;
  border-radius:2px;background:var(--valvula);transform:translateX(-50%);
  transition:left .09s linear,background .15s ease}
.afinador-agulha.afinado{background:var(--patina)}
.afinador-escala{display:flex;justify-content:space-between;
  font-family:var(--dado);font-size:10px;color:var(--corda);margin-top:14px}
.afinador-dica{font-family:var(--corpo);font-size:16px;color:var(--tinta);
  text-align:center;margin:10px 0 0;min-height:24px}
.afinador-erro{font-family:var(--corpo);font-size:15px;color:var(--valvula);margin:12px 0 0}

/* as seis cordas soltas, como referência */
.cordas-soltas{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.corda-solta{font-family:var(--dado);font-size:12px;padding:5px 10px;border-radius:2px;
  border:1px solid rgba(220,211,190,.16);color:var(--corda);transition:all .15s ease}
.corda-solta.perto{border-color:var(--painel);color:var(--painel)}
.corda-solta.afinado{background:var(--patina);border-color:var(--patina);color:#12201E}
@media (prefers-reduced-motion:reduce){
  .afinador-agulha,.corda-solta,.afinador-nota{transition:none}
}