/* ============ 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:#0D0C0A;
  --tolex-2:#161412;
  --tolex-3:#221E1A;
  --painel:#E4DAC4;
  --valvula:#E5382C;
  --patina:#6FA8A0;
  --setima:#C295AA;
  --corda:#9AA59F;
  --tinta:#F5EFEB;
  --jacaranda:#150F0D;
  --traste:#83918A;
  --ouro-metal:#C5A059;
  --led-verde:#34D399;
  --led-laranja:#F59E0B;
  --led-vermelho:#EF4444;

  --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}
/* skip-link — pular direto para o conteúdo principal (acessibilidade teclado) */
.skip-link{position:absolute;top:-100%;left:16px;z-index:9999;
  background:var(--valvula);color:#fff;font-family:var(--display);font-size:14px;font-weight:700;
  letter-spacing:.04em;padding:12px 24px;border-radius:0 0 4px 4px;text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,.5);transition:top .15s ease}
.skip-link:focus{top:0;outline:2px solid #fff;outline-offset:2px}
html,body{margin:0}
body{
  background:var(--tolex);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(220,211,190,.03) 0%, transparent 70%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.08) 0 2px, transparent 2px 4px);
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:17px;line-height:1.65;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
.envolve{max-width:1120px;margin:0 auto;padding:0 20px 90px}

/* faceplate — painel de amp boutique: acabamento de alumínio escovado anodizado,
   friso chanfrado (piping), parafusos mecânicos nos cantos e jewel lamp com refração */
.faceplate{
  position:relative;
  background:linear-gradient(180deg,#1C1A17 0%,#13110F 100%);
  color:var(--tinta);margin:0 0 34px;padding:24px 24px 22px;
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:2px solid #282420;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 16px 40px rgba(0,0,0,.75);
}
.faceplate::before,.faceplate::after{
  content:'';position:absolute;top:16px;width:12px;height:12px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%,#FFFFFF 0%,#B8B8B8 35%,#555555 80%,#222222 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6), 0 2px 5px rgba(0,0,0,.85);
}
.faceplate::before{left:18px}
.faceplate::after{right:18px}
.faceplate .interno{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:22px;flex-wrap:nowrap}
.jewel{
  width:28px;height:28px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 32%, #FFD2CC 0%, #FF4D3D 32%, var(--valvula) 55%, #520B05 100%);
  box-shadow:
    0 0 0 3px #CCCCCC,
    0 0 0 5px #555555,
    0 0 0 6px #1A1A1A,
    0 4px 12px rgba(0,0,0,.7),
    0 0 16px rgba(229,56,44,.4);
  transition:box-shadow .18s cubic-bezier(.2,0,0,1);
}
.jewel.acesa{
  box-shadow:
    0 0 0 3px #FFFFFF,
    0 0 0 5px #777777,
    0 0 0 6px #222222,
    0 0 28px 8px rgba(229,56,44,.95);
}
.marca{
  font-family:var(--marca);font-weight:700;font-size:40px;letter-spacing:normal;
  text-transform:none;line-height:1;margin:0;color:#FFF9F0;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
}
.eyebrow{
  font-family:var(--display);font-size:12px;letter-spacing:.08em;font-weight:600;
  text-transform:uppercase;color:var(--corda);margin:0 0 4px;
}
.subtitulo{font-size:15.5px;color:#BDB4A5;margin:4px 0 0;max-width:52ch;font-style:italic;line-height:1.45}

/* controles de hardware */
.mesa{
  background:linear-gradient(180deg,var(--tolex-2) 0%,#13110F 100%);
  border:1px solid rgba(220,211,190,.16);border-radius:4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.4);
  padding:20px;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:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--corda);
}
select{
  appearance:none;-webkit-appearance:none;
  font-family:var(--display);font-weight:600;font-size:14.5px;letter-spacing:.03em;
  background:#13110F;color:var(--painel);
  border:1px solid rgba(220,211,190,.25);border-radius:3px;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.06);
  padding:9px 36px 9px 13px;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% - 18px) 50%,calc(100% - 12px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  transition:border-color .15s ease,box-shadow .15s ease;
}
select:hover{border-color:rgba(220,211,190,.45)}
select:focus-visible{outline:0;border-color:var(--ouro-metal);box-shadow:0 0 0 2px rgba(197,160,89,.35)}

.grupo{
  display:inline-flex;background:#110F0D;
  border:1px solid rgba(220,211,190,.25);border-radius:4px;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.6);padding:3px;gap:2px;
}
.grupo button{
  font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;background:transparent;color:var(--corda);
  border:0;border-radius:2px;padding:8px 14px;cursor:pointer;
  transition:background .15s ease,color .15s ease,transform .08s ease;
}
.grupo button:active{transform:scale(.96)}
.grupo button[aria-pressed="true"]{
  background:linear-gradient(180deg,#E8DEC8 0%,#C8BEA8 100%);
  color:#15120E;font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.5), inset 0 1px 0 #FFF;
}

.tocar{
  font-family:var(--display);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  background:linear-gradient(180deg,#2A1816 0%,#1A0F0E 100%);
  color:#FF8A80;border:1px solid rgba(229,56,44,.55);border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 3px 8px rgba(0,0,0,.45);
  padding:10px 20px;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .08s ease;
}
.tocar:hover{border-color:var(--valvula);box-shadow:0 0 14px rgba(229,56,44,.35)}
.tocar:active{transform:scale(.96)}
.tocar.ativo{
  background:var(--valvula);color:#150807;border-color:var(--valvula);
  box-shadow:0 0 20px rgba(229,56,44,.7);
}
.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:12px;letter-spacing:.06em;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:.05em;text-transform:uppercase;
  background:var(--tolex-2);color:var(--corda);
  border:1px solid rgba(220,211,190,.28);border-radius:3px;
  padding:9px 15px;cursor:pointer;
  box-shadow:0 2px 5px rgba(0,0,0,.35);
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .08s ease;
}
.alternador:active{transform:scale(.96)}
.alternador[aria-pressed="true"]{
  background:linear-gradient(180deg,#E8DEC8 0%,#C8BEA8 100%);
  color:#15120E;border-color:#C8BEA8;font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.5), inset 0 1px 0 #FFF;
}
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;font-variant-numeric:tabular-nums;
  background:#13110F;color:var(--tinta);border:1px solid rgba(220,211,190,.28);border-radius:3px;
  padding:8px 12px;width:68px;box-shadow:inset 0 2px 4px rgba(0,0,0,.6);
}
.bpm{font-family:var(--dado);font-size:13px;color:var(--painel);min-width:62px;font-variant-numeric:tabular-nums}

/* fita de notas destacadas da escala */
.campo-notas-escala{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-left:auto;
}
@media (max-width:980px){
  .campo-notas-escala{margin-left:0;width:100%}
}
.fita-notas-escala{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.nota-escala-pill{
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  background:#141210;
  border:1px solid rgba(220,211,190,.22);
  border-radius:3px;
  padding:6px 11px;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 2px 4px rgba(0,0,0,.35);
  transition:all .12s ease;
  user-select:none;
}
.nota-escala-pill:hover{
  border-color:var(--ouro-metal);
  background:#1C1916;
  transform:translateY(-1px);
}
.nota-escala-pill:active{
  transform:scale(.95);
}
.nota-escala-pill:focus-visible{
  outline:2px solid var(--valvula);
  outline-offset:2px;
}
.nota-escala-pill .pill-nome{
  font-family:var(--display);
  font-size:14px;
  font-weight:700;
  color:var(--painel);
  letter-spacing:.02em;
}
.nota-escala-pill .pill-grau{
  font-family:var(--mono);
  font-size:10px;
  font-weight:600;
  color:var(--corda);
}
.nota-escala-pill.raiz{
  background:radial-gradient(ellipse at 50% 30%, #E5382C 0%, #8E150D 100%);
  border-color:rgba(255,160,150,.6);
  box-shadow:0 0 10px rgba(229,56,44,.55), inset 0 1px 0 rgba(255,255,255,.3);
}
.nota-escala-pill.raiz .pill-nome{
  color:#FFFFFF;
}
.nota-escala-pill.raiz .pill-grau{
  color:rgba(255,255,255,.85);
}
.nota-escala-pill.caracteristica{
  background:rgba(218,165,32,.14);
  border-color:var(--ouro-metal);
  box-shadow:0 0 8px rgba(218,165,32,.25);
}
.nota-escala-pill.caracteristica .pill-nome,
.nota-escala-pill.caracteristica .pill-grau{
  color:var(--ouro-metal);
}
.nota-escala-pill.tocando{
  background:#FFFFFF!important;
  border-color:#FFFFFF!important;
  transform:scale(1.08)!important;
  box-shadow:0 0 16px rgba(255,255,255,.9)!important;
}
.nota-escala-pill.tocando .pill-nome,
.nota-escala-pill.tocando .pill-grau{
  color:#110F0D!important;
}

/* seções estruturais */
.secao{margin-top:54px}
h2{
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--painel);margin:0 0 10px;display:flex;align-items:center;gap:10px;
}
h2::before{content:"";width:4px;height:14px;border-radius:1px;background:var(--valvula);display:inline-block}
.regra{height:1px;background:linear-gradient(90deg,rgba(220,211,190,.22) 0%,rgba(220,211,190,.04) 70%,transparent);margin:0 0 22px}
.prosa{font-size:18px;line-height:1.7;max-width:64ch;color:rgba(245,239,235,.9);margin:0;text-wrap:pretty}
.prosa em{color:var(--painel);font-style:italic}

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

@media (max-width:640px){
  body{font-size:16px}
  .marca{font-size:30px}
  .subtitulo{font-size:13.5px}
  .faceplate{padding:16px 14px}
  .mesa{gap:14px 18px;padding:14px}
  select{min-width:140px}
  .prosa{font-size:16.5px}
  .faceplate .interno{flex-wrap:wrap;gap:10px 8px;align-items:center}
  .faceplate .interno>#seletorIdioma{margin-left:0!important;margin-top:2px}
  .faceplate nav{display:flex;flex-wrap:wrap;gap:8px 6px;width:100%}
  .faceplate nav a.link-cabecalho,
  .faceplate .interno>a.link-cabecalho{
    margin-left:0!important;
    flex:1 1 calc(50% - 6px);
    text-align:center;
    padding:8px 6px;
    font-size:11px;
  }
  .faceplate nav a.link-cabecalho:last-child,
  .faceplate .interno>a.link-cabecalho:last-child{
    flex:1 1 100%;
  }
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* botão de tap tempo estilo pedal vintage */
.btn-tap{
  font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;background:var(--tolex-2);color:var(--ouro-metal);
  border:1px solid rgba(197,160,89,.45);border-radius:3px;padding:6px 11px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.35);
  transition:all .12s ease;user-select:none;touch-action:manipulation;
}
.btn-tap:hover{border-color:var(--ouro-metal);background:rgba(197,160,89,.15);color:#FFF}
.btn-tap:active,.btn-tap.pulsando{
  background:var(--ouro-metal);color:#12100E;transform:scale(.95);
  box-shadow:0 0 14px rgba(197,160,89,.7);
}

/* aviso de contagem prévia (count-in de preparação) */
.aviso-contagem{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--tolex-2);border:1px solid rgba(216,53,42,.45);border-left:4px solid var(--valvula);
  border-radius:4px;padding:10px 18px;margin-bottom:18px;
  box-shadow:0 6px 20px rgba(0,0,0,.45);animation:contagemSurgir .2s ease-out;
  transition:border-left-color .2s ease,box-shadow .2s ease;
}
.aviso-contagem.vai-comecar{
  border-left-color:var(--ouro-metal);
  box-shadow:0 6px 20px rgba(0,0,0,.45), 0 0 12px rgba(197,160,89,.25);
}
@keyframes contagemSurgir{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
.contagem-tag{
  font-family:var(--display);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--valvula);font-weight:700;
  transition:color .2s ease;
}
.aviso-contagem.vai-comecar .contagem-tag{
  color:var(--ouro-metal);
}
.contagem-corpo{display:flex;align-items:center;gap:16px}
.contagem-numero{
  font-family:var(--dado);font-size:26px;font-weight:700;color:var(--painel);
  min-width:24px;text-align:center;line-height:1;
}
.contagem-pontos{display:flex;align-items:center;gap:8px}
.contagem-ponto{
  display:inline-block;width:12px;height:12px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);
  transition:all .12s ease-out;
}
.contagem-ponto.passado{
  background:rgba(216,53,42,.45);border-color:rgba(216,53,42,.6);
}
.aviso-contagem.vai-comecar .contagem-ponto.passado{
  background:rgba(197,160,89,.45);border-color:rgba(197,160,89,.6);
}
.contagem-ponto.ativo{
  background:var(--valvula);border-color:var(--valvula);
  box-shadow:0 0 10px var(--valvula);transform:scale(1.25);
}
.aviso-contagem.vai-comecar .contagem-ponto.ativo{
  background:var(--ouro-metal);border-color:var(--ouro-metal);
  box-shadow:0 0 10px var(--ouro-metal);transform:scale(1.25);
}

.faceplate nav{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
/* o link do cabeçalho vira um destino, estilo tecla de console analógico */
.link-cabecalho{
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--painel);text-decoration:none;white-space:nowrap;
  background:#161412;border:1px solid rgba(220,211,190,.25);border-radius:3px;padding:6px 11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 4px rgba(0,0,0,.3);
  transition:border-color .15s ease,color .15s ease,background .15s ease,transform .08s ease,box-shadow .15s ease;
}
.link-cabecalho:hover{border-color:var(--ouro-metal);color:#FFF;background:#1E1A16}
.link-cabecalho:active{transform:scale(.96)}
.link-cabecalho.ativo{
  background:linear-gradient(180deg,#E8DEC8 0%,#C8BEA8 100%);
  color:#15120E;border-color:#C8BEA8;font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.5), inset 0 1px 0 #FFF;
}
.link-cabecalho:focus-visible{outline:2px solid var(--valvula);outline-offset:2px}

/* destaque de alto relevo para o Blog no cabeçalho */
.link-cabecalho.link-blog{
  border-color:rgba(197,160,89,.55);
  color:var(--ouro-metal);
  background:rgba(197,160,89,.08);
  font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 12px rgba(197,160,89,.2);
}
.link-cabecalho.link-blog:hover{
  border-color:var(--ouro-metal);
  background:rgba(197,160,89,.22);
  color:#FFF;
  box-shadow:0 0 16px rgba(197,160,89,.45);
}
.link-cabecalho.link-blog.ativo{
  background:linear-gradient(180deg,#E8DEC8 0%,#C8BEA8 100%);
  color:#15120E;border-color:#C8BEA8;font-weight:800;
  box-shadow:0 2px 8px rgba(0,0,0,.5), inset 0 1px 0 #FFF, 0 0 14px rgba(197,160,89,.35);
}

/* seletor de idioma PT | EN no cabeçalho */
.seletor-idioma{display:inline-flex;align-items:center;border:1px solid rgba(220,211,190,.3);
  border-radius:3px;background:#13110F;overflow:hidden;padding:2px;height:34px;flex:none;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
.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:.04em;cursor:pointer;
  border-radius:2px;transition:background .15s ease,color .15s ease}
.lang-btn:hover{color:var(--painel)}
.lang-btn.ativo{background:linear-gradient(180deg,#E8DEC8 0%,#C8BEA8 100%);color:#12100E;font-weight:800;
  box-shadow:0 1px 3px rgba(0,0,0,.4)}
.lang-btn:focus-visible{outline:2px solid var(--valvula);outline-offset:-2px}
.lang-sep{color:rgba(220,211,190,.2);font-size:10px;user-select:none}

/* ---- Hub de Módulos (Os Três Pilares da Casa Doze) ---- */
.hub-pilares{
  margin:22px 0 32px;
  background:linear-gradient(180deg, rgba(22,20,18,.95) 0%, rgba(15,13,11,.95) 100%);
  border:1px solid rgba(220,211,190,.18);border-radius:6px;
  padding:20px 22px 18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 36px rgba(0,0,0,.55);
}
.hub-header{
  display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:8px 16px;margin-bottom:16px;padding-bottom:12px;
  border-bottom:1px solid rgba(220,211,190,.1);
}
.hub-titulo{
  font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--painel);margin:0;
  display:flex;align-items:center;gap:8px;
}
.hub-titulo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ouro-metal);
  box-shadow:0 0 8px rgba(197,160,89,.7);display:inline-block}
.hub-subtitulo{font-size:14.5px;color:var(--corda);margin:0;font-style:italic}

.hub-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;
}
.modulo-card{
  position:relative;background:#110F0D;
  border:1px solid rgba(220,211,190,.18);border-radius:4px;
  padding:16px 16px 14px;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 4px 12px rgba(0,0,0,.4);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.modulo-card:not(.modulo-ativo){cursor:pointer}
.modulo-card:not(.modulo-ativo):hover{
  transform:translateY(-2px);border-color:rgba(220,211,190,.4);
  box-shadow:0 10px 26px rgba(0,0,0,.6);
}
.modulo-card:not(.modulo-ativo):active{transform:scale(.98)}
.modulo-card:focus-visible{outline:2px solid var(--valvula);outline-offset:2px}
.modulo-card.modulo-ativo{
  border-color:rgba(197,160,89,.55);
  background:linear-gradient(180deg,#191613 0%,#100E0C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 22px -4px rgba(197,160,89,.22), 0 6px 18px rgba(0,0,0,.5);
}

.modulo-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.modulo-badge{
  font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--corda);display:inline-flex;align-items:center;gap:6px;
}
.modulo-card.modulo-ativo .modulo-badge{color:var(--ouro-metal)}
.led{width:7px;height:7px;border-radius:50%;display:inline-block;background:#333;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.8)}
.led-verde{background:var(--led-verde);box-shadow:0 0 8px var(--led-verde)}
.led-laranja{background:var(--led-laranja);box-shadow:0 0 8px var(--led-laranja)}
.led-ouro{background:var(--ouro-metal);box-shadow:0 0 8px var(--ouro-metal)}
.led-azul{background:#4EA8DE;box-shadow:0 0 8px #4EA8DE}

.modulo-titulo{
  font-family:var(--display);font-size:16.5px;font-weight:700;letter-spacing:.02em;
  color:var(--tinta);margin:0 0 6px;
}
.modulo-card.modulo-ativo .modulo-titulo{color:#FFF9F0}
.modulo-desc{
  font-family:var(--corpo);font-size:14.5px;line-height:1.45;color:#B5ADA1;
  margin:0 0 14px;flex:1 0 auto;
}
.modulo-rodape{margin-top:auto;display:flex;align-items:center;justify-content:space-between}
.modulo-status-atual{
  font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ouro-metal);display:inline-flex;align-items:center;gap:4px;
}
.modulo-acao-btn{
  font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--painel);border:1px solid rgba(220,211,190,.25);
  border-radius:2px;padding:6px 12px;background:#191613;transition:all .15s ease;
}
.modulo-card:hover .modulo-acao-btn{
  background:var(--painel);color:#12100E;border-color:var(--painel);
}

/* barra de atalho rápido do afinador */
.afinador-atalho-barra{
  margin-top:14px;padding-top:12px;border-top:1px solid rgba(220,211,190,.08);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;
}
.afinador-atalho-texto{color:var(--corda);font-family:var(--corpo);font-style:italic;margin:0;font-size:14px}
.afinador-atalho-link{
  font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--patina);text-decoration:none;
  display:inline-flex;align-items:center;gap:4px;transition:color .15s ease;
}
.afinador-atalho-link:hover{color:#90D8CE;text-decoration:underline}

/* ---- Destaque Editorial do Blog na Home ---- */
.blog-destaque-banner{
  margin-top:16px;padding-top:16px;border-top:1px solid rgba(220,211,190,.1);
  display:flex;flex-direction:column;gap:10px;
}
.blog-destaque-card{
  background:linear-gradient(180deg,#181512 0%,#100E0C 100%);
  border:1px solid rgba(197,160,89,.35);border-radius:4px;
  padding:16px 18px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 0 20px -4px rgba(197,160,89,.15), 0 6px 18px rgba(0,0,0,.45);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.blog-destaque-card:hover{
  border-color:rgba(197,160,89,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 0 24px -2px rgba(197,160,89,.25), 0 8px 24px rgba(0,0,0,.55);
}
.blog-destaque-topo{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;gap:12px;
}
.blog-destaque-badge{
  font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ouro-metal);
  display:inline-flex;align-items:center;gap:7px;
}
.blog-destaque-novidade{
  font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;background:rgba(197,160,89,.15);color:var(--ouro-metal);
  border:1px solid rgba(197,160,89,.4);border-radius:3px;padding:3px 7px;
}
.blog-destaque-corpo{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
.blog-destaque-info{flex:1 1 540px;min-width:0}
.blog-destaque-titulo{
  font-family:var(--display);font-size:17.5px;font-weight:700;line-height:1.3;
  margin:0 0 6px;letter-spacing:-.01em;
}
.blog-destaque-titulo a{
  color:var(--tinta);text-decoration:none;transition:color .15s ease;
}
.blog-destaque-titulo a:hover{color:var(--ouro-metal)}
.blog-destaque-resumo{
  font-family:var(--corpo);font-size:14.5px;line-height:1.45;color:#B8B0A2;margin:0;
}
.blog-destaque-resumo em{font-style:italic;color:var(--painel)}
.blog-destaque-acoes{
  display:flex;align-items:center;gap:12px;flex:none;
}
.btn-blog-destaque-ler{
  font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;background:var(--ouro-metal);color:#12100E;
  border:1px solid var(--ouro-metal);border-radius:3px;padding:8px 16px;
  text-decoration:none;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.4);
  transition:all .15s ease;
}
.btn-blog-destaque-ler:hover{
  background:#E0B768;border-color:#E0B768;color:#000;
  box-shadow:0 0 14px rgba(197,160,89,.5);
}
.btn-blog-destaque-hub{
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--corda);text-decoration:none;white-space:nowrap;
  transition:color .15s ease;
}
.btn-blog-destaque-hub:hover{color:var(--painel);text-decoration:underline}

@media (max-width:640px){
  .blog-destaque-corpo{flex-direction:column;align-items:flex-start}
  .blog-destaque-acoes{width:100%;justify-content:space-between;margin-top:6px}
}

@media (max-width:860px){
  .hub-grid{grid-template-columns:1fr;gap:12px}
}

/* chamada legada (mantida para compatibilidade em páginas de destino) */
.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(229,56,44,.12),rgba(229,56,44,.03) 60%,transparent);
  border:1px solid rgba(229,56,44,.32);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(229,56,44,.18),rgba(229,56,44,.04) 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:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--valvula);margin:0 0 4px}
.chamada-frase{font-family:var(--corpo);font-size:17.5px;color:var(--tinta);margin:0;line-height:1.45}
.chamada-frase em{color:var(--painel);font-style:italic}
.chamada-acao{
  flex:none;font-family:var(--display);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:var(--valvula);border:1px solid var(--valvula);border-radius:2px;padding:10px 18px;white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
.chamada:hover .chamada-acao{background:var(--valvula);color:#150807}

@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}
}

/* ---- card de grau característico ---- */
.card-grau{
  margin-top:20px;
  background:var(--tolex-2);
  border:1px solid rgba(220,211,190,.16);
  border-radius:4px;
  padding:16px 20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.card-grau-topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  border-bottom:1px solid rgba(220,211,190,.1);
  padding-bottom:12px;
}
.card-grau-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.card-grau-rotulo{
  font-family:var(--display);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ouro-metal);
  background:rgba(197,160,89,.12);
  border:1px solid rgba(197,160,89,.3);
  padding:3px 8px;
  border-radius:3px;
}
.badge-modo-natureza{
  font-family:var(--display);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:3px 9px;
  border-radius:12px;
}
.badge-modo-natureza.natureza-menor{
  background:rgba(111,168,160,.18);
  color:var(--patina);
  border:1px solid rgba(111,168,160,.45);
}
.badge-modo-natureza.natureza-maior{
  background:rgba(218,165,32,.18);
  color:var(--ouro-metal);
  border:1px solid rgba(218,165,32,.5);
}
.badge-modo-natureza.natureza-diminuto{
  background:rgba(229,56,44,.18);
  color:#FF8A80;
  border:1px solid rgba(229,56,44,.45);
}
.card-grau-valor{
  font-family:var(--display);
  font-size:17px;
  font-weight:700;
  color:var(--painel);
  letter-spacing:.02em;
}
.card-grau-nota{
  font-family:var(--dado);
  font-size:13px;
  font-weight:700;
  color:#fff;
  background:var(--valvula);
  padding:2px 10px;
  border-radius:12px;
  box-shadow:0 0 10px rgba(229,56,44,.4);
}
.btn-ouvir-grau{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:rgba(220,211,190,.08);
  border:1px solid rgba(220,211,190,.22);
  color:var(--painel);
  font-family:var(--display);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:6px 13px;
  border-radius:3px;
  cursor:pointer;
  transition:all .15s ease;
}
.btn-ouvir-grau:hover{
  background:rgba(220,211,190,.16);
  border-color:var(--ouro-metal);
  color:#fff;
  transform:translateY(-1px);
}
.card-grau-resumo{
  font-family:var(--corpo);
  font-size:16px;
  line-height:1.6;
  color:rgba(245,239,235,.9);
  margin:0;
}
.card-grau-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(220,211,190,.08);
  border-radius:3px;
  padding:12px 14px;
}
.card-grau-col{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.card-grau-col-label{
  font-family:var(--display);
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--corda);
}
.card-grau-col-val{
  font-family:var(--dado);
  font-size:13px;
  color:var(--painel);
}