/* Fontes alojadas localmente (sem pedidos à Google — RGPD). Subsets latin + latin-ext;
   o browser só descarrega o latin-ext se a página usar esses caracteres. */
@font-face{font-family:'Clarity City';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/clarity-city-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Clarity City';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/clarity-city-latin-ext-400.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Clarity City';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/clarity-city-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Clarity City';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/clarity-city-latin-ext-500.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Clarity City';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/clarity-city-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Clarity City';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/clarity-city-latin-ext-600.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Clarity City';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/clarity-city-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Clarity City';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/clarity-city-latin-ext-700.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/bebas-neue-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/bebas-neue-latin-ext-400.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
  :root{
    --bg:#121212;
    --surface:#171717;
    --surface-2:#1D1D1D;
    --surface-3:#212121;
    --line:#1F1F1F;
    --fret-wire:#756b5c;
    --line-soft:#1A1A1A;
    --text:#FFFFFF;
    --text-muted:#DDDDDD;
    --text-faint:#A3A3A3;
    --label:#B7B7B7;
    --ember:#D1AA8D;
    --ember-hot:#D1AA8D;
    --ember-dim:#5A4A3D;
    --string:#F0F0F0;
    --radius-sm:4px;
    --radius:8px;
    --font-display:'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
    --font-body:'Clarity City', 'Liberation Sans', Arial, sans-serif;
    --maxw:100%;
    --maxw-read:1450px;
  }
 
  *{box-sizing:border-box;}
  [hidden]{display:none !important;}
  *, *::before, *::after{ font-family:var(--font-body); }
  /* overflow-x:clip em vez de hidden: hidden transforma o body num contentor de
     scroll e desliga o position:sticky (o filtro de categorias do blog). */
  html, body{ overflow-x:hidden; overflow-x:clip; max-width:100%; font-family:var(--font-body); }
  select, option, optgroup, button, input, textarea{ font-family:var(--font-body); }
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    /* transparente: deixa ver o fundo escuro do html e do ::before. Sem isto,
       a pré-visualização (que embrulha a página num body claro) fica branca */
    background:transparent;
    color:var(--text);
    font-family:var(--font-body);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    padding-bottom:calc(72px + env(safe-area-inset-bottom));
  }
  /* Fundo: gradiente radial fixo ao ecrã (não estica com a altura da página e
     funciona também no iOS, onde background-attachment:fixed falha).
     A declaração "background:#121212" antes do gradiente é o fallback: se o
     browser não reconhecer radial-gradient(), ignora essa linha e fica com a
     cor sólida (a mesma da ponta exterior do gradiente, sem salto visual). */
  html{ background:var(--bg); }
  body::before{
    content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:#121212;
    background:radial-gradient(#242424, #121212);
  }
  ::selection{ background:var(--ember); color:#121212; }
  a{ color:inherit; }
  button, select, input{ font-family:inherit; }
  button{ cursor:pointer; }
  :focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
 
  .wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px, 3vw, 56px); }
  /* página curta: o rodapé fica no fundo do ecrã, não a seguir ao conteúdo */
  body{ min-height:100vh; display:flex; flex-direction:column; }
  main{ flex:1 0 auto; }
  footer{ margin-top:auto; flex:0 0 auto; }
 
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
  }
 
  .site-header{
    padding:26px 0 18px;
    border-bottom:1px solid var(--line-soft);
  }
  /* o cabeçalho alinha com o conteúdo do painel (que vai até às bordas):
     mesmo recuo lateral que o padding interno do .panel */
  .site-header > .wrap{ padding-left:14px; padding-right:14px; }
  @media (min-width:720px){ .site-header > .wrap{ padding-left:30px; padding-right:30px; } }
  .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .brand{ display:flex; align-items:center; gap:14px; min-width:0; }
  /* Logo em SVG com fill:currentColor — branco no fundo escuro, ember no hover */
  .brand-logo{ display:inline-flex; text-decoration:none; flex:0 0 auto; }
  .brand-logo img{ display:block; height:42px; width:auto; transition:opacity 0.2s ease; }
  .brand-logo:hover img{ opacity:0.8; }
  @media (min-width:720px){ .brand-logo img{ height:70px; } }
  .brand-name{
    font-family:var(--font-display);
    font-size:1.5rem;
    font-weight:400;
    letter-spacing:0.06em;
    color:var(--text);
  }
  .brand-tag{
    font-size:0.82rem;
    color:var(--text-faint);
    display:none;
  }
  @media (min-width:640px){ .brand-tag{ display:block; padding-left:14px; border-left:1px solid var(--line); } }
 
  .lang-switch{
    flex:0 0 auto;
    position:relative;
  }
  .lang-switch select{
    width:auto;
    min-width:0;
    background:var(--surface-2);
    border:1px solid var(--line);
    color:var(--text);
    font-family:var(--font-body);
    font-size:0.8rem;
    font-weight:500;
    letter-spacing:0.02em;
    padding:8px 32px 8px 13px;
    border-radius:20px;
    cursor:pointer;
    transition:border-color 0.12s ease, color 0.12s ease;
  }
  .lang-switch select:hover{ border-color:var(--ember-dim); }
  @media (max-width:400px){
    .lang-switch select{ padding:7px 30px 7px 11px; font-size:0.76rem; }
  }
 
  .hero{ padding:56px 0 0; }
  /* o hero (que contém o braço) prolonga-se até às bordas do ecrã, sem as
     margens laterais do wrap. O hero-intro continua centrado a --maxw-read
     e o padding interno do .panel evita que o braço cole às bordas. */
  .hero > .wrap{ padding-left:0; padding-right:0; }
 
  .hero-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:22px;
    margin-bottom:0;
  }
  .hero-layout > *{ min-width:0; }
 
  /* título, braço e depois o parágrafo (em todos os tamanhos de ecrã) */
  .hero-intro{ display:contents; }
  .hero h1{ order:1; margin-bottom:14px; }
  .panel{ order:2; }
  .hero p{
    order:3;
    /* mesmas margens do container dos cards (.wrap), com largura máxima de 900px */
    --gx:clamp(20px, 3vw, 56px);
    width:calc(100% - 2 * var(--gx));
    max-width:900px;
    margin-left:auto; margin-right:auto;
    padding-top:20px;
    border-top:1px solid var(--line-soft);
  }
  .hero h1{
    overflow-wrap:break-word;
    font-family:var(--font-display);
    font-weight:400;
    letter-spacing:0.01em;
    font-size:clamp(2.2rem, 5vw, 3.4rem);
    line-height:1.1;
    margin:0 auto 16px;
    color:var(--text);
    text-align:center;
    max-width:22ch;
  }
  /* Linha descritiva dentro do h1: dá ao título as palavras que se pesquisam
     ("scale map", "Drop tunings") sem mexer no slogan. */
  .hero h1 .hero-kicker{
    display:block;
    font-family:var(--font-body);
    font-size:0.78rem; font-weight:500; line-height:1.4;
    letter-spacing:0.12em; text-transform:uppercase;
    color:var(--ember);
    margin-bottom:12px;
  }
  /* a regra universal de font-family apanha o span: repor a do título */
  .hero h1 .hero-slogan{ display:block; font-family:var(--font-display); max-width:22ch; margin:0 auto; }
  /* a largura de 22ch passa a ser só do slogan: o kicker usa a largura toda e
     não quebra a meio em ecrãs estreitos */
  .hero h1{ max-width:none; }
  @media (max-width:720px){
    .hero h1 .hero-kicker{ font-size:0.68rem; letter-spacing:0.07em; margin-bottom:10px; }
  }
  .hero p{
    font-size:1rem;
    color:var(--text-muted);
    margin-top:0; margin-bottom:0;
    text-align:center;
    text-wrap:pretty;
  }
  /* em ecrãs largos o texto preenche toda a largura do container dos cards */
  @media (min-width:720px){
    .hero p{ text-align:justify; text-align-last:center; text-wrap:wrap; hyphens:auto; }
  }
 
  .panel{
    min-width:0;
    overflow:hidden;
    background:transparent;
    border:0;
    border-radius:var(--radius);
    padding:22px;
  }
  @media (min-width:720px){ .panel{ padding:28px 30px; } }
 
  .metro-dock{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:50;
    background:rgba(18,18,18,0.6);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    padding:10px 32px;
    padding-bottom:10px;
  }
  .metro-dock-inner{
    max-width:var(--maxw-read);
    margin:0 auto;
    display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:nowrap;
    min-width:0;
  }
  .metro-core{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
  .metro-dock .bpm-readout{ display:flex; align-items:baseline; gap:6px; }
  .metro-dock .bpm-number{
    font-family:var(--font-display);
    font-size:1.8rem; font-weight:400;
    font-variant-numeric:tabular-nums;
    line-height:1; color:var(--text);
    min-width:2.6ch; text-align:right;
  }
  .metro-dock .bpm-unit{ font-size:0.72rem; color:var(--text-faint); }
  .play-btn.sm{ padding:9px 16px; font-size:0.82rem; }
 
  .metro-slider{
    display:flex; align-items:center; gap:9px;
    flex:1 1 auto; min-width:120px; max-width:360px;
  }
  .metro-sig{ display:flex; align-items:center; gap:9px; flex:0 0 auto; }
  .metro-siglabel{ font-size:0.72rem; font-weight:500; letter-spacing:0.04em; color:var(--label); }
  .metro-sig select{ padding:7px 30px 7px 10px; font-size:0.82rem; }
  .metro-dock .beat-row{ gap:7px; min-height:0; flex:0 0 auto; }
  .metro-dock .beat-dot{
    width:13px; height:13px; min-width:13px; min-height:13px;
    border-color:#666666;
  }
 
  .controls{
    min-width:0;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:16px 20px;
    margin-bottom:22px;
  }
  @media (min-width:780px){ .controls{ grid-template-columns:repeat(4, 1fr); } }
 
  .field label{
    display:block;
    font-size:0.74rem;
    font-weight:500;
    letter-spacing:0.04em;
    color:var(--label);
    margin-bottom:7px;
  }
  .select-wrap{ position:relative; }
  .select-wrap::after{
    content:'';
    position:absolute; right:12px; top:50%; width:8px; height:8px;
    border-right:1.5px solid var(--text-faint); border-bottom:1.5px solid var(--text-faint);
    transform:translateY(-70%) rotate(45deg);
    pointer-events:none;
  }
  select{
    width:100%;
    min-width:0;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    background:var(--surface-2);
    border:1px solid var(--line);
    color:var(--text);
    font-size:0.9rem;
    font-weight:400;
    padding:10px 34px 10px 12px;
    border-radius:var(--radius-sm);
  }
  select:hover{ border-color:var(--ember-dim); }
 
  .toggle-group{
    display:flex;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    padding:3px;
  }
  .toggle-group button{
    flex:1;
    background:transparent;
    border:none;
    color:var(--text-muted);
    font-size:0.85rem;
    font-weight:400;
    padding:8px 10px;
    border-radius:3px;
  }
  .toggle-group button.active{
    background:var(--ember);
    color:#121212;
  }
  .toggle-group.sm{ padding:2px; }
  .toggle-group.sm button{
    flex:0 0 auto;
    font-size:0.78rem;
    padding:5px 11px;
  }
  .view-field{ display:flex; align-items:center; gap:12px; }
 
  .board-config{
    min-width:0;
    max-width:100%;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:14px 26px;
    padding:14px 0 0;
  }
  .stepper-field{ display:flex; align-items:center; gap:12px; }
  .stepper-label{
    font-size:0.74rem;
    font-weight:500;
    letter-spacing:0.04em;
    color:var(--label);
  }
  .stepper{
    display:flex;
    align-items:center;
    gap:4px;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:20px;
    padding:3px;
  }
  .stepper-value{
    min-width:30px;
    text-align:center;
    font-size:0.85rem;
    font-weight:400;
    font-variant-numeric:tabular-nums;
    color:var(--text);
  }
  .icon-btn.sm{ width:26px; height:26px; min-width:26px; font-size:0.9rem; border:none; background:transparent; }
  .icon-btn.sm:hover{ background:var(--surface-3); }
  .icon-btn.sm:disabled{ opacity:0.3; cursor:not-allowed; background:transparent; }
  .config-hint{ font-size:0.75rem; color:var(--text-faint); margin-left:auto; }
 
  .string-select{
    width:100%;
    min-width:0;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    background:var(--surface-3);
    border:1.5px solid rgba(255,255,255,0.18);
    color:var(--text-muted);
    font-family:var(--font-body);
    font-size:0.78rem;
    font-weight:500;
    text-align:center;
    padding:11px 6px;
    border-radius:10px;
    cursor:pointer;
    transition:border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  }
  .string-select:hover{ border-color:var(--ember-dim); color:var(--text); }
  .string-select:focus,
  .string-select:focus-visible{
    outline:none;
    border-color:var(--ember);
    color:var(--text);
    box-shadow:0 0 0 3px var(--ember-dim);
  }
 
  .legend-row{
    min-width:0;
    max-width:100%;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:18px;
    padding:14px 0;
    border-top:1px solid var(--line-soft);
    border-bottom:1px solid var(--line-soft);
    margin-bottom:18px;
  }
  .legend-item{ display:flex; align-items:center; gap:7px; font-size:0.78rem; color:var(--text-faint); }
  .legend-dot{ width:12px; height:12px; min-width:12px; aspect-ratio:1/1; border-radius:50%; flex:0 0 auto; }
  .legend-dot.root{ background:var(--ember); }
  .legend-dot.degree{ background:var(--text); opacity:0.9; }
 
  .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; min-width:0; max-width:100%; }
  .chip{
    font-size:0.78rem;
    font-weight:400;
    padding:5px 10px;
    border-radius:20px;
    background:var(--surface-3);
    border:1px solid var(--line);
    color:var(--text-muted);
    animation:chipIn 0.2s ease backwards;
    animation-delay:var(--ci, 0ms);
  }
  .chip.root{ color:var(--ember); border-color:var(--ember-dim); }
  .chip:hover{
    border-color:var(--ember-dim);
    color:var(--text);
    transition:border-color 0.15s, color 0.15s;
  }
 
  .board-fade{ position:relative; }
  .board-fade::after{
    content:'›';
    position:absolute; top:0; right:0; bottom:14px;
    width:44px;
    display:flex; align-items:center; justify-content:flex-end;
    padding-right:10px;
    font-family:var(--font-body);
    font-size:1.4rem; font-weight:700; line-height:1;
    color:var(--ember);
    pointer-events:none;
    opacity:0; transition:opacity 0.2s ease;
  }
  .board-fade.can-scroll-right::after{ opacity:1; }
  /* esbatido na margem: máscara no próprio braço (funciona com qualquer fundo) */
  .board-fade.can-scroll-right .board-scroll{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent); }
  @media (min-width:721px) and (hover:hover){ .board-fade::after{ display:none; } }
  .board-scroll{
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:14px;
    margin:0 -4px;
    -webkit-overflow-scrolling:touch;
    min-width:0;
    max-width:100%;
    position:relative;
  }
  .board-scroll::-webkit-scrollbar{ height:8px; }
  .board-scroll::-webkit-scrollbar-track{ background:var(--surface-2); border-radius:4px; }
  .board-scroll::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
 
  .fret-grid{
    display:grid;
    min-width:1180px;
    width:100%;
    padding:0 4px;
  }
  .cell{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    min-width:0;
    overflow:visible;
  }
 
  .fret-num-cell{
    font-family:var(--font-body);
    font-size:0.78rem;
    color:var(--text-faint);
    font-weight:400;
  }
  .fret-num-cell.marker-fret{ color:var(--ember); font-weight:400; }
  .inlay-dot{ flex:0 0 auto; width:6px; height:6px; min-width:6px; aspect-ratio:1/1; border-radius:50%; background:rgba(255,255,255,0.13); }
  .inlay-pair{ display:flex; flex-direction:column; gap:10px; }
  .inlay-pair .inlay-dot{ width:5px; height:5px; min-width:5px; }
 
  .string-row .cell{ height:100%; }
  .string-label{
    font-family:var(--font-body);
    font-size:0.75rem;
    color:var(--text-faint);
    justify-content:center !important;
    padding:0 6px 0 2px;
    letter-spacing:0.02em;
    overflow:hidden;
  }
  .nut{ justify-content:flex-start !important; padding-left:6px; }
  .nut .note-dot{ margin-right:auto; }
 
  .string-line::before{
    content:'';
    position:absolute; left:0; right:0; top:50%;
    height:var(--sw, 1.5px);
    background:var(--string);
    opacity:var(--sop, 0.75);
    transform:translateY(-50%);
  }
  .string-line.edge-left::before{
    background:linear-gradient(90deg, transparent 0%, var(--string) 78%);
  }
  .string-line.edge-right::before{
    background:linear-gradient(270deg, transparent 0%, var(--string) 60%);
  }
  .fret-wire{ border-right:1px solid var(--fret-wire, #33302A); }
  .nut{ border-right:4px solid var(--ember) !important; }
 
  body.lefty-board .fret-wire{ border-right:none; border-left:1px solid var(--fret-wire, #33302A); }
  body.lefty-board .nut{
    border-right:none !important;
    border-left:4px solid var(--ember) !important;
    justify-content:flex-end !important;
    padding-left:0;
    padding-right:6px;
  }
  body.lefty-board .nut .note-dot{ margin-right:0; margin-left:auto; }
  body.lefty-board .string-label{ padding:0 2px 0 6px; }
  body.lefty-board .board-fade::after{
    content:'‹';
    right:auto; left:0;
    justify-content:flex-start;
    padding-right:0; padding-left:10px;
  }
  body.lefty-board .board-fade.can-scroll-right .board-scroll{ -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 44px),transparent); mask-image:linear-gradient(to left,#000 calc(100% - 44px),transparent); }
 
  /* ── Keyframes do fretboard ─────────────────────────────────── */

  /* entrada da bola ao renderizar: pop do centro com fade */
  @keyframes dotIn{
    0%  { transform:scale(0.4); }
    70% { transform:scale(1.08); }
    100%{ transform:scale(1); }
  }
  /* glow pulsante contínuo para as raízes */
  @keyframes rootPulse{
    0%,100%{ box-shadow:0 0 0 3px rgba(209,170,141,0.18); }
    50%     { box-shadow:0 0 0 6px rgba(209,170,141,0.32), 0 0 12px rgba(209,170,141,0.18); }
  }
  /* pulso do beat-dot no metrónomo */
  @keyframes beatPop{
    0%  { transform:scale(1); }
    30% { transform:scale(1.45); }
    60% { transform:scale(0.92); }
    100%{ transform:scale(1); }
  }
  /* entrada dos chips da legenda */
  @keyframes chipIn{
    from{ opacity:0; transform:translateY(4px); }
    to  { opacity:1; transform:translateY(0); }
  }

  .note-dot{
    position:relative;
    z-index:2;
    flex:0 0 auto;
    width:var(--dot, 32px);
    height:var(--dot, 32px);
    min-width:var(--dot, 32px);
    min-height:var(--dot, 32px);
    aspect-ratio:1 / 1;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--surface-3);
    color:var(--text);
    font-family:var(--font-body);
    font-size:var(--dot-fs, 0.72rem);
    font-weight:500;
    letter-spacing:-0.02em;
    display:flex; align-items:center; justify-content:center;
    /* animação de entrada escalonada via --di (delay index) injetado inline */
    /* fill-mode "backwards": aplica o estado inicial durante o atraso, mas larga
       o transform no fim — com "both" o scale(1) final ficava preso e anulava
       o hover/active. */
    animation:dotIn 0.22s ease backwards;
    animation-delay:var(--di, 0ms);
    transition:transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease, opacity 0.22s ease;
  }
  /* hover: levanta + glow suave */
  .note-dot:hover{
    transform:scale(1.22);
    box-shadow:0 0 0 4px rgba(255,255,255,0.08), 0 4px 12px rgba(0,0,0,0.4);
    z-index:4;
    cursor:pointer;
  }
  /* click: comprime e dispara */
  .note-dot:active{ transform:scale(0.88); transition-duration:0.06s; }

  .note-dot.in-scale{
    background:var(--string); color:#121212; border-color:transparent;
  }
  .note-dot.in-scale:hover{ box-shadow:0 0 0 4px rgba(240,240,240,0.2), 0 4px 12px rgba(0,0,0,0.4); }

  .note-dot.outside{ border-style:dashed; border-color:var(--ember-dim); }

  /* raiz: glow pulsante contínuo */
  .note-dot.is-root{
    background:var(--ember); color:#121212; border-color:transparent;
    animation:dotIn 0.22s ease backwards var(--di,0ms), rootPulse 2.4s ease-in-out 0.5s infinite;
  }
  /* o rootPulse controla o box-shadow, por isso o hover da raiz usa
     transform + brilho (que a animação não toca) */
  .note-dot.is-root:hover{ filter:brightness(1.12); }
 
 
  .board-hint{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
    font-size:0.78rem; color:var(--text-faint); margin-top:4px;
  }
 
  .pill-toggle{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--surface-2);
    border:1px solid var(--line);
    color:var(--text-muted);
    font-size:0.8rem; font-weight:400;
    padding:8px 14px; border-radius:20px;
  }
  .pill-toggle:hover{ border-color:var(--ember-dim); }
  .pill-dot{
    width:8px; height:8px; min-width:8px; aspect-ratio:1/1;
    border-radius:50%; background:var(--line); flex:0 0 auto;
  }
  .pill-toggle[aria-pressed="true"]{
    background:var(--ember); border-color:var(--ember); color:#121212;
  }
  .pill-toggle[aria-pressed="true"] .pill-dot{ background:#121212; }
 
  .cell.low-zone{ background:rgba(209,170,141,0.06); }
  .note-dot.dimmed{ opacity:0.16; }
  .note-dot.chord-tone{ box-shadow:0 0 0 2px var(--ember); }
  .note-dot.ghost{ opacity:0.34; }
  .note-dot.shape-note{
    background:var(--ember); color:#121212; border-color:transparent;
    box-shadow:0 0 0 3px rgba(209,170,141,0.28);
    z-index:3;
  }
 
  .tab-section .wrap, .chords .wrap, .routines .wrap, .gear .wrap, .info .wrap{
    max-width:var(--maxw-read);
    padding-top:44px;
  }
  .chords, .tab-section{ padding:0; margin-top:46px; }
  .chords-head{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:14px; flex-wrap:wrap; margin-bottom:18px;
  }
  .chords-head h2{
    font-family:var(--font-display);
    font-size:clamp(1.3rem, 3vw, 1.7rem);
    font-weight:400; margin:0 0 6px;
  }
  .chords-head p{ margin:0; color:var(--text-muted); font-size:0.9rem; }
 
  .chords-tools{
    display:flex; align-items:center; flex-wrap:wrap;
    gap:12px 22px; margin:0 0 18px;
  }
  .tool-field{ display:flex; align-items:center; gap:10px; min-width:0; }
  .density-hint{
    margin:0; flex:1 1 240px; min-width:0;
    font-size:0.78rem; color:var(--text-faint);
  }
 
  .chord-grid{
    display:grid; gap:10px;
    grid-template-columns:repeat(auto-fit, minmax(132px, 1fr));
  }
  .chord-btn{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:13px 13px 12px;
    text-align:left;
    display:flex; flex-direction:column; gap:4px;
    transition:border-color 0.12s ease, background 0.12s ease;
  }
  .chord-btn:hover{ border-color:var(--ember-dim); }
  .chord-btn[aria-pressed="true"]{
    border-color:var(--ember);
    background:var(--surface-3);
  }
  .chord-degree{
    font-size:0.68rem; letter-spacing:0.06em;
    color:var(--text-faint);
  }
  .chord-btn[aria-pressed="true"] .chord-degree{ color:var(--ember); }
  .chord-name{
    font-family:var(--font-body);
    font-size:1.2rem; font-weight:700; color:var(--text);
    line-height:1.05;
  }
  .chord-frets{
    font-size:0.72rem; color:var(--text-muted);
    line-height:1.5;
    margin-top:1px; padding-top:7px;
    border-top:1px solid var(--line-soft);
    max-height:0; padding-top:0; margin-top:0;
    overflow:hidden; opacity:0;
    transition:max-height 0.18s ease, opacity 0.14s ease,
               padding-top 0.18s ease, margin-top 0.18s ease;
  }
  .chord-btn:hover .chord-frets,
  .chord-btn:focus-visible .chord-frets,
  .chord-btn[aria-pressed="true"] .chord-frets{
    max-height:120px; opacity:1;
    padding-top:8px; margin-top:2px;
  }
  @media (hover:none){
    .chord-frets{ max-height:120px; opacity:1; padding-top:8px; margin-top:2px; }
  }
  .chord-frets .cf-line{ display:block; }
  .chord-frets .cf-str{ color:var(--text-faint); }
 
 
  .cd-tab{ display:flex; gap:6px; flex-wrap:wrap; }
  .cd-tab-cell{
    display:flex; flex-direction:column; align-items:center; gap:2px;
    min-width:40px; padding:7px 6px;
    background:var(--surface-3); border:1px solid var(--line);
    border-radius:6px;
  }
  .cd-tab-cell b{ font-size:0.95rem; color:var(--ember); font-weight:400; }
  .cd-tab-cell small{ font-size:0.62rem; color:var(--text-faint); }
  .cd-tab-cell.muted b{ color:var(--text-faint); }
 
  .chord-detail{
    margin-top:16px;
    background:var(--surface);
    border:1px solid var(--line-soft);
    border-left:2px solid var(--ember);
    border-radius:var(--radius);
    padding:20px;
  }
  .cd-title{
    font-family:var(--font-body);
    font-size:1.25rem; font-weight:700; margin:0 0 4px;
  }
  .cd-sub{ font-size:0.85rem; color:var(--text-faint); margin:0 0 16px; }
  .cd-block{ margin-bottom:16px; }
  .cd-block:last-child{ margin-bottom:0; }
  /* forma sugerida + notas do acorde: lado a lado em desktop (ver breakpoint
     mais abaixo), empilhados por omissão (mobile/tablet) */
  .cd-pair{ margin-bottom:16px; }
  .cd-panel > .cd-pair:last-child{ margin-bottom:0; }
  .cd-pair .cd-block{ margin-bottom:16px; }
  .cd-pair .cd-block:last-child{ margin-bottom:0; }
  .cd-label{
    font-size:0.68rem; letter-spacing:0.06em;
    color:var(--text-faint); margin-bottom:7px;
  }
  .cd-notes{ display:flex; flex-wrap:wrap; gap:6px; }
  .cd-note{
    font-size:0.78rem; font-weight:400;
    padding:5px 9px; border-radius:6px;
    background:var(--surface-3); border:1px solid var(--line);
    color:var(--text-muted);
  }
  .cd-note.is-root{ background:var(--ember); color:#121212; border-color:var(--ember); }
  .cd-note small{ opacity:0.55; font-weight:400; margin-left:4px; }
  .cd-scale-name{ font-size:0.95rem; font-weight:400; color:var(--text); margin-bottom:8px; }
  .cd-hint{ font-size:0.82rem; color:var(--text-muted); margin:8px 0 0; }
  .cd-apply{
    margin-top:12px;
    background:transparent; border:1px solid var(--line);
    color:var(--text); font-size:0.78rem; font-weight:400;
    padding:8px 14px; border-radius:20px;
  }
  .cd-apply:hover{ border-color:var(--ember); }
 
  @media (max-width:720px){
    .tab-section, .chords, .gear, .info{ margin-top:32px; }
    .tab-section .wrap, .chords .wrap, .routines .wrap, .gear .wrap, .info .wrap{ padding-top:32px; }
    .chord-grid{ grid-template-columns:repeat(auto-fill, minmax(108px, 1fr)); gap:8px; }
    .chord-name{ font-size:1.15rem; }
    .chord-detail{ padding:16px; }
    .chords-tools{ gap:10px 14px; }
    .density-hint{ flex-basis:100%; }
  }
 
  .gear{ padding:0; margin-top:46px; }
  .gear-head{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:16px; flex-wrap:wrap; margin-bottom:20px;
  }
  .gear-head h2{
    font-family:var(--font-display);
    font-size:clamp(1.3rem, 3vw, 1.7rem);
    font-weight:400; margin:0 0 6px;
  }
  .gear-head p{ margin:0; color:var(--text-muted); font-size:0.92rem; }
  /* Badge de calibre/espessura: vive dentro do respetivo card (cordas/palhetas),
     ao lado do kicker, não solto no cabeçalho da secção. */
  .gear-card-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:8px;
  }
  .gear-card-badge{
    background:var(--ember); color:#121212;
    font-weight:700; font-size:0.72rem;
    padding:3px 10px; border-radius:20px; white-space:nowrap;
    letter-spacing:0.03em; flex:none;
  }
 
  .gear-grid{
    display:grid; gap:14px;
    grid-template-columns:1fr;
  }
  @media (min-width:640px){ .gear-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media (min-width:1000px){ .gear-grid{ grid-template-columns:repeat(4, 1fr); } .gear-grid.gear-grid-3{ grid-template-columns:repeat(3, 1fr); } }
  .gear-sub{ margin:26px 0 14px; }
  .gear-sub h3{ margin:0 0 4px; font-size:1.05rem; font-weight:600; letter-spacing:0.01em; color:var(--text); }
  .gear-sub p{ margin:0; color:var(--text-muted); font-size:0.88rem; }
  .gear-sub-extra{ margin-top:40px; }
 
  .gear-card.is-instrument .gear-kicker{ color:var(--ember-hot); }
  .gear-card.is-course .gear-kicker{ color:var(--ember-hot); }
 
  .gear-card{
    display:flex; flex-direction:column; gap:8px;
    background:transparent;
    border:solid 1px #333333;
    border-radius:var(--radius);
    padding:20px;
    text-decoration:none;
    position:relative;
    overflow:hidden;
    /* transições de todos os elementos que animam */
    transition:
      border-color 0.22s ease,
      transform 0.22s ease,
      box-shadow 0.22s ease,
      background 0.22s ease;
  }
  /* linha de destaque ember no topo, cresce no hover */
  .gear-card::before{
    content:'';
    position:absolute; top:0; left:0; right:0;
    height:2px;
    background:linear-gradient(90deg, var(--ember), transparent);
    opacity:0;
    transform:scaleX(0);
    transform-origin:left;
    transition:opacity 0.22s ease, transform 0.28s ease;
  }
  .gear-card:hover{
    border-color:var(--ember-dim);
    background:rgba(255,255,255,0.04);
    transform:translateY(-4px);
    box-shadow:0 8px 28px rgba(0,0,0,0.45), 0 0 0 1px var(--ember-dim);
  }
  .gear-card:hover::before{
    opacity:1;
    transform:scaleX(1);
  }
  .gear-kicker{
    font-family:var(--font-display); font-weight:400;
    font-size:0.85rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--ember);
    transition:letter-spacing 0.22s ease;
  }
  .gear-card:hover .gear-kicker{ letter-spacing:0.13em; }
  .gear-name{
    font-size:0.98rem; font-weight:500; color:var(--text);
    transition:color 0.18s ease;
  }
  .gear-card:hover .gear-name{ color:#fff; }
  .gear-desc{ font-size:0.85rem; color:var(--text-muted); line-height:1.5; }
  /* CTA: fica sempre no fundo do card (margin-top:auto no último filho).
     Como está depois de alt/more/extras, encosta à base mesmo em cards curtos. */
  .gear-cta{
    margin-top:auto; padding-top:14px;
    font-size:0.82rem; font-weight:500; color:var(--text-muted);
    display:flex; align-items:center; gap:6px;
    transition:color 0.18s ease, gap 0.22s ease;
  }
  .gear-cta::after{
    content:'→';
    color:var(--ember);
    display:inline-block;
    transition:transform 0.22s ease;
  }
  .gear-card:hover .gear-cta{ color:var(--text); gap:10px; }
  .gear-card:hover .gear-cta::after{ transform:translateX(4px); }

  /* O card é um <div>; o link principal (nome do produto) estica-se por cima
     do card inteiro. A alternativa fica acima dessa camada, com link próprio. */
  .gear-main{ color:inherit; text-decoration:none; }
  .gear-main::after{ content:''; position:absolute; inset:0; z-index:1; }
  @supports selector(:has(*)){
    .gear-main:focus-visible{ outline:none; }
    .gear-card:has(.gear-main:focus-visible){ outline:2px solid var(--ember); outline-offset:2px; }
  }
  .gear-alt{
    position:relative; z-index:2;
    margin-top:12px; padding-top:10px;
    border-top:1px solid rgba(255,255,255,0.08);
    display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px;
    font-size:0.78rem; line-height:1.4; color:var(--text-faint);
  }
  .gear-alt-link{
    color:var(--text-muted); font-weight:500;
    text-decoration:underline; text-decoration-color:var(--ember-dim);
    text-underline-offset:3px;
    transition:color 0.18s ease, text-decoration-color 0.18s ease;
  }
  .gear-alt-link:hover{ color:var(--text); text-decoration-color:var(--ember); }
  /* "Outras opções": segue a linha da alternativa, sem nova divisória */
  .gear-alt + .gear-more{ margin-top:6px; padding-top:0; border-top:0; }
  .gear-more{ row-gap:6px; }
  .gear-more .gear-alt-label{ flex-basis:100%; }
  .gear-sep{ color:var(--text-faint); }
  .gear-card.is-course{ border:solid 1px #333333; }
  .gear-card.is-course::before{
    background:linear-gradient(90deg, var(--ember), var(--ember-dim));
  }
  .learn-section{ margin-top:32px; }
  .maintain-section{ margin-top:32px; }
  @media (min-width:1000px){ .learn-grid{ grid-template-columns:repeat(2, 1fr); } }
    .gear-card.is-instrument{
    background-image: linear-gradient(to bottom, rgba(16,14,12,0.84) 0%, rgba(16,14,12,0.68) 100%), url('../images/gear/guitar.jpg');
  }

  /* ── Imagens de fundo dos cards ─────────────────────────────────
     Overlay escuro por cima para manter o texto legível.
     Fallback: gradiente escuro quando a imagem não carrega (offline).
     As imagens carregam do Unsplash CDN quando o site está online.
  ──────────────────────────────────────────────────────────────── */

  /* ── Imagens dos cards (base64 embutido) ── */
  .gear-card[data-affiliate="gear_palhetas_kicker"],
  .gear-card[data-affiliate="gear_pickups_kicker"],
  .gear-card[data-affiliate="gear_afinacao_kicker"],
  .gear-card[data-affiliate="gear_single_kicker"],
  .gear-card[data-affiliate="gear_pedals_kicker"],
  .gear-card[data-affiliate="gear_overdrive_kicker"],
  .gear-card[data-affiliate="gear_amp_kicker"],
  .gear-card[data-affiliate="gear_modeler_kicker"],
  .gear-card[data-affiliate="gear_setup_kicker"],
  .gear-card[data-affiliate="course_play"],
  .gear-card[data-affiliate^="course_setup"],
  .gear-card[data-affiliate="gear_cordas_kicker"],
  .gear-card[data-affiliate="gear_cleaning_kicker"],
  .gear-card.is-instrument {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .gear-card[data-affiliate="gear_cordas_kicker"]{
    background-image: linear-gradient(to bottom, rgba(16,14,12,0.84) 0%, rgba(16,14,12,0.68) 100%), url('../images/gear/strings.jpg');
  }

  .gear-card[data-affiliate="gear_palhetas_kicker"]{
    background-image: linear-gradient(to bottom, rgba(16,14,12,0.84) 0%, rgba(16,14,12,0.68) 100%), url('../images/gear/picks.jpg');
  }

  .gear-card[data-affiliate="gear_pickups_kicker"]{
    background-image: linear-gradient(to bottom, rgba(16,14,12,0.84) 0%, rgba(16,14,12,0.68) 100%), url('../images/gear/pickups.jpg');
  }

  .gear-card[data-affiliate="gear_afinacao_kicker"]{
    background-image: linear-gradient(to bottom, rgba(16,14,12,0.84) 0%, rgba(16,14,12,0.68) 100%), url('../images/gear/tuner.jpg');
  }

  .gear-card[data-affiliate="gear_pedals_kicker"]{
    background-image: linear-gradient(to bottom, rgba(16,14,12,0.84) 0%, rgba(16,14,12,0.68) 100%), url('../images/gear/noise-gate.jpg');
  }

  .gear-card[data-affiliate="gear_overdrive_kicker"]{
    background-image: linear-gradient(to bottom, rgba(16,14,12,0.84) 0%, rgba(16,14,12,0.68) 100%), url('../images/gear/overdrive.jpg');
  }

  .gear-card[data-affiliate="gear_amp_kicker"]{
    background-image: linear-gradient(to bottom, rgba(16,14,12,0.84) 0%, rgba(16,14,12,0.68) 100%), url('../images/gear/amp.jpg');
  }

  .gear-card[data-affiliate="gear_modeler_kicker"]{
    background-image: linear-gradient(to bottom, rgba(16,14,12,0.84) 0%, rgba(16,14,12,0.68) 100%), url('../images/gear/modeler.jpg');
  }

  .gear-card[data-affiliate="gear_cab_kicker"]{
    background-image: linear-gradient(to bottom, rgba(16,14,12,0.84) 0%, rgba(16,14,12,0.68) 100%), url('../images/gear/cab.jpg');
    background-size: cover;
    background-position: center;
  }
  .gear-card[data-affiliate="gear_frfr_kicker"]{
    background-image: linear-gradient(to bottom, rgba(16,14,12,0.84) 0%, rgba(16,14,12,0.68) 100%), url('../images/gear/frfr.jpg');
    background-size: cover;
    background-position: center;
  }
  .gear-card[data-affiliate="gear_plugin_kicker"]{
    background-image: linear-gradient(to bottom, rgba(16,14,12,0.84) 0%, rgba(16,14,12,0.68) 100%), url('../images/gear/plugin.jpg');
    background-size: cover;
    background-position: center;
  }

  .gear-card[data-affiliate="gear_setup_kicker"]{
    background-image: linear-gradient(to bottom, rgba(16,14,12,0.84) 0%, rgba(16,14,12,0.68) 100%), url('../images/gear/setup-kit.jpg');
  }

  .gear-card[data-affiliate="course_play"]{
    background-image: linear-gradient(to bottom, rgba(16,14,12,0.84) 0%, rgba(16,14,12,0.68) 100%), url('../images/gear/course-play.jpg');
  }

  .gear-card[data-affiliate^="course_setup"]{
    background-image: linear-gradient(to bottom, rgba(16,14,12,0.84) 0%, rgba(16,14,12,0.68) 100%), url('../images/gear/course-setup.jpg');
  }

  .gear-card[data-affiliate="gear_cleaning_kicker"]{
    background-image: linear-gradient(to bottom, rgba(16,14,12,0.84) 0%, rgba(16,14,12,0.68) 100%), url('../images/gear/cleaning.jpg');
  }

  /* Bordão avulso + limas: a foto de setup (ferramentas na guitarra) */
  .gear-card[data-affiliate="gear_single_kicker"]{
    background-image: linear-gradient(to bottom, rgba(16,14,12,0.86) 0%, rgba(16,14,12,0.72) 100%), url('../images/gear/course-setup.jpg');
  }
  /* ── Cards de lista: Plugins (software) e IRs (impulse responses) ──── */
  /* Vêm agrupados num wrapper .tiles-row que ocupa a linha toda do gear-grid
     e divide-se em 2 colunas iguais em desktop (1 em telemóvel). */
  .tiles-row{
    grid-column:1 / -1;
    display:grid; gap:14px;
    grid-template-columns:1fr;
  }
  @media (min-width:640px){ .tiles-row{ grid-template-columns:repeat(2, 1fr); } }
  /* A 3ª coluna (capturas) só entra quando há mesmo largura para as três
     ficarem legíveis; abaixo disso prefere-se 2 colunas (a terceira desce). */
  @media (min-width:1050px){ .tiles-row{ grid-template-columns:repeat(3, 1fr); } }
  .tiles-row > .gear-card{ margin:0; }
  .gear-card.is-tiles.is-plugins{
    background-image: linear-gradient(to bottom, rgba(16,14,12,0.90) 0%, rgba(16,14,12,0.78) 100%), url('../images/gear/plugin.jpg');
    background-size:cover; background-position:center;
  }
  .gear-card.is-tiles.is-captures{
    background-image: linear-gradient(to bottom, rgba(16,14,12,0.90) 0%, rgba(16,14,12,0.78) 100%), url('../images/gear/captures.jpg');
    background-size:cover; background-position:center;
    /* lista mais curta do que Plugins/IRs: não esticar para a altura da
       linha toda (ficaria com uma faixa vazia no fundo do card) */
    align-self:start;
  }
  .gear-card.is-tiles.is-irs{
    background-image: linear-gradient(to bottom, rgba(16,14,12,0.90) 0%, rgba(16,14,12,0.78) 100%), url('../images/gear/ir.jpg');
    background-size:cover; background-position:center;
  }
  .gear-card.is-bass-set{
    background-image: linear-gradient(to bottom, rgba(16,14,12,0.86) 0%, rgba(16,14,12,0.70) 100%), url('../images/gear/bass.jpg');
    background-size:cover; background-position:center;
  }
  .is-tiles-head{ font-size:0.98rem; }   /* = .gear-name: todos os títulos de card iguais */

  /* ── Card de Guitarras: 3 opções (6, 7, 8 cordas) lado a lado ───── */
  .guitar-set-grid{
    position:relative; z-index:2;
    display:grid; gap:10px;
    grid-template-columns:1fr;
    margin-top:14px;
  }
  /* As 3 opções só ficam lado a lado quando o próprio card tem largura para
     isso (container query), não conforme a largura do ecrã. */
  .gear-card.is-guitar-set{ container-type:inline-size; }
  @container (min-width:540px){ .guitar-set-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
  /* ── "Completa o setup": 3 grupos (instrumento, analógico, digital) ───
     A 3 colunas a grelha tem 6 pistas e cada card ocupa 2: assim a última
     linha pode ficar com 2 cards a meio ou 1 card na linha toda (fillOrphans
     no JS decide). No grupo do instrumento, o card das guitarras/baixos
     ocupa 2/3 da linha (cabem as 3 opções lado a lado) e os captadores 1/3. */
  @media (min-width:1000px){
    .gear-grid.gear-grid-3{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
    .gear-grid.gear-grid-3 > *{ grid-column:span 2; }
    .gear-grid.gear-grid-3 > .tiles-row{ grid-column:1 / -1; }
    #gearInstGrid > .is-guitar-set{ grid-column:span 4; }
  }
  @media (min-width:640px) and (max-width:999px){
    #gearInstGrid > *{ grid-column:1 / -1; }
  }
  .gear-groups{ display:flex; flex-direction:column; }
  /* segunda grelha do mesmo grupo (pedais por baixo de amp + coluna):
     mesma distância que entre linhas de cards */
  .gear-grid-follow{ margin-top:14px; }
  .gear-grid-follow:empty{ display:none; }
  .gear-group{
    margin:36px 0 14px; padding-top:24px;
    border-top:1px solid var(--line-soft);
  }
  .gear-group:first-child{ margin-top:6px; padding-top:0; border-top:0; }
  .gear-group-h{
    margin:0 0 6px;
    display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
    font-family:var(--font-display); font-weight:400;
    font-size:1.45rem; line-height:1.05; letter-spacing:0.03em;
    color:var(--text);
  }
  /* a regra universal de font-family (*) não deixa o <span> herdar a Bebas */
  .gear-group-h > span:not(.gear-group-tag){ font-family:var(--font-display); }
  .gear-group-tag{
    font-family:var(--font-body); font-weight:500;
    font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--ember);
    border:1px solid rgba(209,170,141,0.35); border-radius:999px;
    padding:4px 10px; line-height:1;
  }
  .gear-group-p{ margin:0; color:var(--text-muted); font-size:0.88rem; max-width:72ch; }
  .guitar-opt{
    display:flex; flex-direction:column; gap:4px;
    padding:12px 14px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:var(--radius-sm);
  }
  .guitar-opt-head{
    font-family:var(--font-display); font-weight:400;
    font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--ember); margin-bottom:2px;
  }
  .guitar-opt-ref{
    font-size:0.92rem; font-weight:500; color:var(--text);
    text-decoration:none;
    transition:color 0.18s ease;
  }
  .guitar-opt-ref:hover{ color:var(--ember); }
  .guitar-opt-alt{
    display:flex; flex-wrap:wrap; gap:2px 6px;
    margin-top:6px; padding-top:6px;
    border-top:1px dashed rgba(255,255,255,0.08);
    font-size:0.74rem; line-height:1.35; color:var(--text-faint);
  }
  .guitar-opt-alt-label{ color:var(--text-faint); white-space:nowrap; }
  .guitar-opt-alt-link{
    color:var(--text-muted);
    text-decoration:underline;
    text-decoration-color:var(--ember-dim);
    text-underline-offset:3px;
  }
  .guitar-opt-alt-link:hover{ color:var(--text); text-decoration-color:var(--ember); }
  /* Colunas internas adaptam-se à largura do card (não da viewport):
     cada tile pede pelo menos ~150px; se couberem mais, acrescenta colunas */
  .tile-list{
    position:relative; z-index:2;
    display:grid; gap:8px;
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    margin-top:14px;
  }
  /* Compatibilidade com a classe antiga (não usada no render atual) */
  .plugin-grid{
    position:relative; z-index:2;
    display:grid; gap:8px;
    grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
    margin-top:14px;
  }
  .plugin-tile{
    display:flex; flex-direction:column; gap:2px;
    padding:10px 12px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:var(--radius-sm);
    color:var(--text); text-decoration:none;
    transition:background 0.18s ease, border-color 0.18s ease, transform 0.14s ease;
  }
  .plugin-tile:hover{
    background:rgba(209,170,141,0.10);
    border-color:var(--ember-dim);
    transform:translateY(-1px);
  }
  .plugin-brand{
    font-family:var(--font-display); font-weight:400;
    font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--ember);
  }
  .plugin-name{ font-size:0.88rem; font-weight:500; color:var(--text); }
  /* Pill "Grátis": discreto, verde-aço */
  .plugin-tile.is-free{ background:rgba(80,170,120,0.07); border-color:rgba(80,170,120,0.22); }
  .plugin-tile.is-free:hover{ background:rgba(80,170,120,0.14); border-color:rgba(80,170,120,0.45); }
  .plugin-free{
    position:absolute; top:8px; right:8px;
    font-family:var(--font-display); font-weight:400;
    font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase;
    color:#5fc08c;
    padding:1px 5px; border-radius:2px;
    background:rgba(80,170,120,0.15);
  }
  .plugin-tile{ position:relative; }
  .plugin-cta{ text-decoration:none; }
  /* o CTA do card de plugins é um link próprio (não o stretched link). */

  /* Pitch shifter: foto do pedal (azul-escuro) com o mesmo gradiente dos restantes */
  .gear-card[data-affiliate="gear_pitch_kicker"]{
    background-image: linear-gradient(to bottom, rgba(16,14,12,0.84) 0%, rgba(16,14,12,0.68) 100%), url('../images/gear/pitch.jpg');
    background-size:cover; background-position:center;
  }




  .gear-disclosure{
    margin:44px auto 8px;
    font-size:0.76rem; color:var(--text-faint);
    max-width:64ch; line-height:1.6;
    text-align:center; text-wrap:balance;
  }

  @media (max-width:720px){
    .gear-card{ padding:15px; }
    /* em touch sem hover: manter leve destaque ao tocar */
    .gear-card:active{
      transform:scale(0.98);
      border-color:var(--ember-dim);
    }
  }
 
  .info{ padding:0 0 64px; margin-top:46px; }
  .info-grid{
    display:grid;
    gap:1px;
    background:var(--line-soft);
    border:1px solid var(--line-soft);
    grid-template-columns:1fr;
  }
  @media (min-width:780px){ .info-grid{ grid-template-columns:repeat(3, 1fr); } }
  .info-card{
    background:var(--bg);
    padding:26px 24px;
  }
  .info-card h3{
    font-family:var(--font-display);
    font-size:1.02rem;
    font-weight:400;
    margin:0 0 10px;
  }
  .info-card p{
    font-size:0.9rem;
    color:var(--text-muted);
    margin:0;
  }
  .info-card b{ color:var(--text); }
 
  input[type="range"]{
    -webkit-appearance:none;
    width:100%;
    height:2px;
    border-radius:2px;
    background:#666666;
    outline:none;
  }
  input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:18px; height:18px; border-radius:50%;
    background:var(--ember);
    border:2px solid var(--bg);
    box-shadow:0 0 0 1px var(--ember-dim);
    cursor:pointer;
  }
  input[type="range"]::-moz-range-thumb{
    width:18px; height:18px; border-radius:50%;
    background:var(--ember); border:2px solid var(--bg);
    cursor:pointer;
  }
 
  .icon-btn{
    flex:0 0 auto;
    width:36px; height:36px;
    min-width:36px;
    aspect-ratio:1 / 1;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--surface-2);
    color:var(--text);
    font-size:1.05rem;
    display:flex; align-items:center; justify-content:center;
  }
  .icon-btn:hover{ border-color:var(--ember-dim); }
 
  .tap-btn{
    background:var(--surface-2);
    border:1px solid var(--line);
    color:var(--text);
    font-size:0.8rem;
    font-weight:400;
    padding:8px 14px;
    border-radius:20px;
  }
  .tap-btn:hover{ border-color:var(--ember-dim); }
 
  .play-btn{
    background:var(--ember);
    color:#121212;
    border:none;
    font-family:var(--font-body);
    font-weight:600;
    font-size:0.9rem;
    letter-spacing:0.02em;
    padding:12px 22px;
    border-radius:30px;
    display:inline-flex;
    align-items:center;
    gap:9px;
  }
  .play-btn .ico{ font-size:0.75rem; }
 
  .beat-row{ display:flex; gap:10px; flex-wrap:wrap; min-height:26px; }
  .beat-dot{
    flex:0 0 auto;
    width:24px; height:24px;
    min-width:24px; min-height:24px;
    aspect-ratio:1 / 1;
    border-radius:50%;
    border:1.5px solid var(--line);
    background:var(--surface-2);
    transition:background 0.06s ease, transform 0.06s ease, border-color 0.06s ease;
  }
  .beat-dot.pulse{
    background:var(--string); border-color:var(--string);
    animation:beatPop 0.22s ease forwards;
  }
  .beat-dot.pulse.accent{
    background:var(--ember); border-color:var(--ember);
    animation:beatPop 0.22s ease forwards;
  }
 
  @media (max-width:720px){
    .hero{ padding:30px 0 0; }
    .hero h1{ font-size:clamp(1.6rem, 7vw, 2.1rem); margin-bottom:12px; }
    .hero p{ font-size:0.92rem; }
    .site-header{ padding:18px 0 14px; }
    .brand-name{ font-size:1.1rem; }
 
    .panel{ padding:16px 14px; border-radius:6px; }
    .controls{ gap:12px; margin-bottom:16px; }
    select{ font-size:0.85rem; padding:9px 30px 9px 10px; }
    .field label, .stepper-label{ font-size:0.75rem; }
    .toggle-group button{ font-size:0.8rem; padding:7px 8px; }
 
    .board-config{ gap:10px 18px; padding-top:12px; }
    .config-hint{ margin-left:0; flex-basis:100%; font-size:0.7rem; }
 
    .legend-row{ gap:10px 14px; padding:12px 0; margin-bottom:12px; }
    .legend-item{ font-size:0.72rem; }
    .chips{
      margin-left:0;
      flex-basis:100%;
      flex-wrap:nowrap;
      overflow-x:auto;
      padding-bottom:4px;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    .chips::-webkit-scrollbar{ display:none; }
    .chip{ font-size:0.72rem; padding:4px 9px; white-space:nowrap; flex:none; }
 
    /* botões das cordas mais baixos que a linha da corda: ficam separados sem mexer no espaçamento das cordas */
    .string-select{ font-size:0.72rem; padding:0 4px; height:calc(100% - 5px); min-height:0; line-height:1; }
    .fret-num-cell{ font-size:0.7rem; }
 
    .board-hint{ font-size:0.72rem; flex-direction:column; gap:3px; }
 
    .metro-dock{ padding:8px 12px; padding-bottom:max(8px, env(safe-area-inset-bottom)); }
    .metro-dock-inner{ gap:10px; }
    .metro-dock .bpm-number{ font-size:1.5rem; }
    .metro-slider{ flex:0 0 auto; min-width:0; }
    .metro-slider input[type="range"]{ display:none; }
    .metro-dock-inner{ flex-wrap:wrap; row-gap:8px; }
    .metro-dock .beat-row{
      flex:1 1 100%; margin-left:0;
      justify-content:center; gap:8px;
    }
    body{ padding-bottom:calc(104px + env(safe-area-inset-bottom)); }
    .metro-siglabel{ display:none; }
    .metro-core{ gap:9px; }
    .info{ padding:0 0 44px; }
    .info-card{ padding:20px 18px; }
  }
 
  @media (max-width:540px){
    .controls{ grid-template-columns:1fr; }
    .board-config{ gap:10px 14px; }
    .stepper-field{ flex:1 1 auto; justify-content:space-between; }
  }
 
  @media (max-width:400px){
    .metro-dock .beat-row{ gap:5px; flex:0 0 auto; }
    /* tudo numa linha a 390 px (com os –/+ maiores no toque); compasso e
       pontos passam juntos para a 2.ª linha só em ecrãs mais estreitos */
    .metro-dock-inner{ gap:6px; }
    .metro-slider{ gap:4px; }
    .metro-sig select{ padding-right:26px; }
    .metro-dock .beat-dot{ width:10px; height:10px; min-width:10px; min-height:10px; }
    .tap-btn{ padding:7px 11px; font-size:0.76rem; }
  }
 
  footer{
    padding:0;
  }
  footer .wrap{
    max-width:var(--maxw-read);
    border-top:1px solid var(--line-soft);
    padding-top:24px; padding-bottom:40px;
    display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
    font-size:0.78rem; color:var(--text-faint);
  }

  /* Reveal — fade + subida ligeira. Só se aplica com JS ativo (classe .js no
     <html>), para que sem JS o conteúdo nunca fique escondido. */
  .js .reveal:not(.is-visible){ opacity:0; transform:translateY(22px); }
  .js .reveal.is-visible:not(.reveal-done){
    transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
    transition-delay:var(--reveal-delay, 0ms);
  }
  .js .reveal-stagger:not(.reveal-done) > *{ opacity:0; transform:translateY(18px); }
  .js .reveal-stagger.is-visible:not(.reveal-done) > *{
    animation:lfRevealUp 0.6s cubic-bezier(0.16,1,0.3,1) both;
    animation-delay:calc(var(--reveal-delay, 0ms) + var(--i, 0) * 70ms);
  }
  @keyframes lfRevealUp{
    from{ opacity:0; transform:translateY(18px); }
    to{ opacity:1; transform:none; }
  }
  @media (prefers-reduced-motion: reduce){
    .js .reveal:not(.is-visible), .js .reveal-stagger:not(.reveal-done) > *{ opacity:1; transform:none; animation:none; }
  }

  /* Links de texto, nota de afiliados e rodapé */
  .text-link{ color:var(--ember); text-decoration:underline; text-underline-offset:2px; }
  .text-link:hover{ color:var(--text); }
  .gear-aff-note{ margin:6px 0 0; font-size:0.72rem; color:var(--text-faint); letter-spacing:0.02em; }
  .footer-links{ display:flex; flex-wrap:wrap; gap:6px 18px; }
  .footer-links a{ color:var(--text-faint); text-decoration:none; }
  .footer-links a:hover{ color:var(--text); text-decoration:underline; text-underline-offset:2px; }

  /* Página legal */
  .legal{ max-width:760px; margin:0 auto; padding:48px 24px 72px; }
  .legal h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(2rem, 5vw, 2.8rem); letter-spacing:0.02em; line-height:1.05; margin:0 0 8px; color:var(--text); }
  .legal .legal-updated{ color:var(--text-faint); font-size:0.8rem; margin:0 0 28px; }
  .legal nav.legal-toc{ display:flex; flex-wrap:wrap; gap:8px 20px; margin:0 0 36px; font-size:0.85rem; }
  .legal nav.legal-toc a{ color:var(--ember); }
  .legal section{ border-top:1px solid var(--line-soft); padding-top:28px; margin-top:28px; scroll-margin-top:24px; }
  .legal h2{ font-family:var(--font-display); font-weight:400; font-size:1.7rem; letter-spacing:0.02em; margin:0 0 14px; color:var(--text); }
  .legal h3{ font-size:0.95rem; margin:22px 0 6px; color:var(--text); }
  .legal p, .legal li{ color:var(--text-muted); font-size:0.92rem; line-height:1.65; }
  .legal ul{ padding-left:20px; }
  .legal a{ color:var(--ember); }
  .legal .todo{ background:rgba(209,170,141,0.14); color:var(--ember); padding:0 4px; border-radius:3px; font-weight:600; }
  .legal .back{ display:inline-block; margin-bottom:24px; font-size:0.85rem; color:var(--text-faint); text-decoration:none; }
  .legal .back:hover{ color:var(--text); }
  body.legal-page{ padding-bottom:0; }

  /* ════════════════════════════════════════════════════════════════
     Micro-interações, hovers e transições
     · só animam transform / opacity / cor / sombra (baratos para o GPU)
     · os hovers ficam em (hover:hover) and (pointer:fine): em ecrãs
       tácteis não "colam" depois do toque; o :active dá o feedback
     · prefers-reduced-motion: ver a regra no topo + o bloco no fim
  ════════════════════════════════════════════════════════════════ */
  :root{
    --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @media (prefers-reduced-motion: no-preference){
    html{ scroll-behavior:smooth; }
  }

  /* ── Notas no braço: hover com mola, clique com "ping" ─────────── */
  .note-dot{
    transition:transform 0.18s var(--ease-spring), box-shadow 0.18s ease,
               background 0.14s ease, opacity 0.22s ease, filter 0.18s ease;
  }
  .note-dot::after{
    content:''; position:absolute; inset:-3px; border-radius:50%;
    border:2px solid var(--ember);
    opacity:0; pointer-events:none;
  }
  .note-dot.ping::after{ animation:notePing 0.55s var(--ease-out); }
  @keyframes notePing{
    0%  { opacity:0.9; transform:scale(0.9); }
    100%{ opacity:0;   transform:scale(1.95); }
  }

  /* ── Grupos de toggle: indicador deslizante (criado em JS) ─────── */
  .toggle-group{ position:relative; }
  .toggle-group > button{
    position:relative; z-index:1;
    transition:color 0.22s var(--ease-out), background-color 0.2s ease, transform 0.14s ease;
  }
  .tg-indicator{
    position:absolute; top:0; left:0; z-index:0;
    border-radius:3px;
    background:var(--ember);
    box-shadow:0 2px 12px rgba(209,170,141,0.28);
    opacity:0; pointer-events:none;
    transition:transform 0.34s var(--ease-out), width 0.34s var(--ease-out),
               height 0.34s var(--ease-out), opacity 0.2s ease;
    will-change:transform;
  }
  /* com o indicador ativo, é ele que pinta o botão selecionado */
  .toggle-group.has-indicator > button.active{ background:transparent; }

  /* ── Pills (Focar bordões, Canhoto) ────────────────────────────── */
  .pill-toggle{
    transition:border-color 0.15s ease, background-color 0.22s ease,
               color 0.22s ease, transform 0.14s ease;
  }
  .pill-toggle:active{ transform:scale(0.96); }
  .pill-dot{ transition:transform 0.3s var(--ease-spring), background-color 0.22s ease; }
  .pill-toggle[aria-pressed="true"] .pill-dot{ transform:scale(1.3); }

  /* ── Steppers e botões redondos ────────────────────────────────── */
  .icon-btn{
    transition:border-color 0.15s ease, background-color 0.15s ease,
               color 0.15s ease, transform 0.18s var(--ease-spring);
  }
  .stepper-value, .bpm-number{ display:inline-block; }
  .bump{ animation:valueBump 0.32s var(--ease-spring); }
  @keyframes valueBump{
    0%  { transform:scale(1); }
    35% { transform:scale(1.3); color:var(--ember); }
    100%{ transform:scale(1); }
  }

  /* ── Metrónomo: play, tap, slider ──────────────────────────────── */
  .play-btn{
    transition:transform 0.18s var(--ease-spring), box-shadow 0.25s ease, filter 0.2s ease;
  }
  .play-btn.is-playing{ box-shadow:0 0 0 4px rgba(209,170,141,0.2); }
  .play-btn .ico{ display:inline-block; }
  .tap-btn{
    transition:border-color 0.15s ease, background-color 0.15s ease,
               transform 0.18s var(--ease-spring);
  }
  .tap-btn:active{ transform:scale(0.93); }
  .tap-btn.tapped{ animation:tapPing 0.42s var(--ease-out); }
  @keyframes tapPing{
    0%  { box-shadow:0 0 0 0 rgba(209,170,141,0.55); border-color:var(--ember); }
    100%{ box-shadow:0 0 0 12px rgba(209,170,141,0); }
  }
  input[type="range"]::-webkit-slider-thumb{ transition:transform 0.18s var(--ease-spring), box-shadow 0.2s ease; }
  input[type="range"]::-moz-range-thumb{ transition:transform 0.18s var(--ease-spring), box-shadow 0.2s ease; }

  /* ── Chips da escala ───────────────────────────────────────────── */
  .chip{
    transition:border-color 0.15s ease, color 0.15s ease, transform 0.18s var(--ease-spring);
  }
  .chip:hover{
    transition:border-color 0.15s ease, color 0.15s ease, transform 0.18s var(--ease-spring);
  }

  /* ── Acordes ───────────────────────────────────────────────────── */
  .chord-btn{
    transition:border-color 0.15s ease, background-color 0.2s ease,
               transform 0.2s var(--ease-out), box-shadow 0.22s ease;
  }
  .chord-btn[aria-pressed="true"]{ animation:chordSelect 0.34s var(--ease-out); }
  @keyframes chordSelect{
    0%  { transform:scale(0.96); }
    60% { transform:scale(1.03); }
    100%{ transform:scale(1); }
  }
  .chord-detail.cd-enter{ animation:cdEnter 0.36s var(--ease-out); }
  @keyframes cdEnter{
    from{ opacity:0; transform:translateY(10px); }
    to  { opacity:1; transform:none; }
  }
  .cd-apply{
    transition:border-color 0.15s ease, background-color 0.2s ease, transform 0.14s ease;
  }
  .cd-note{ transition:transform 0.18s var(--ease-spring), border-color 0.15s ease; }

  /* ── Cards de material: halo que segue o cursor ────────────────── */
  .gear-card{ isolation:isolate; }
  .gear-card::after{
    content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
    opacity:0;
    background:radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
               rgba(209,170,141,0.13), transparent 70%);
    transition:opacity 0.3s ease;
  }

  /* ── Cards de informação ───────────────────────────────────────── */
  .info-card{ position:relative; overflow:hidden; transition:background-color 0.25s ease; }
  .info-card::before{
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, var(--ember), transparent);
    opacity:0; transform:scaleX(0); transform-origin:left;
    transition:transform 0.4s var(--ease-out), opacity 0.25s ease;
  }
  .info-card h3{ transition:color 0.25s ease; }

  /* ── Links: sublinhado que cresce da esquerda ──────────────────── */
  .footer-links a, .legal nav.legal-toc a{
    padding-bottom:2px;
    background:linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition:color 0.18s ease, background-size 0.3s var(--ease-out);
  }
  .footer-links a:focus-visible, .legal nav.legal-toc a:focus-visible{ background-size:100% 1px; }
  .text-link{ transition:color 0.18s ease; }
  a.brand-name{ transition:color 0.2s ease; }
  .legal .back{ transition:color 0.18s ease, transform 0.25s var(--ease-out); }

  /* ── Só com rato: hovers ───────────────────────────────────────── */
  @media (hover:hover) and (pointer:fine){
    .toggle-group > button:not(.active):hover{ color:var(--text); background:rgba(255,255,255,0.06); }
    .icon-btn:not(:disabled):hover{ transform:scale(1.08); }
    .icon-btn.sm:not(:disabled):hover{ color:var(--ember); }
    .play-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(209,170,141,0.28); filter:brightness(1.06); }
    .play-btn.is-playing:hover{ box-shadow:0 0 0 4px rgba(209,170,141,0.2), 0 6px 18px rgba(209,170,141,0.22); }
    .tap-btn:hover{ background:var(--surface-3); }
    input[type="range"]:hover::-webkit-slider-thumb{ transform:scale(1.15); }
    input[type="range"]:hover::-moz-range-thumb{ transform:scale(1.15); }
    .chip:hover{ transform:translateY(-1px); }
    .chord-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,0.35); }
    .cd-apply:hover{ background:rgba(209,170,141,0.12); }
    .cd-note:hover{ transform:translateY(-1px); border-color:var(--ember-dim); }
    .gear-card:hover::after{ opacity:1; }
    .info-card:hover{ background:var(--surface); }
    .info-card:hover::before{ opacity:1; transform:scaleX(1); }
    .info-card:hover h3{ color:var(--ember); }
    .footer-links a:hover{ text-decoration:none; background-size:100% 1px; }
    .legal nav.legal-toc a:hover{ background-size:100% 1px; }
    .legal .back:hover{ transform:translateX(-4px); }
    a.brand-name:hover{ color:var(--ember); }
  }

  /* ── Tablatura do exercício ────────────────────────────────────── */
  .tab-copy{ flex:0 0 auto; }
  .tab-copy.is-copied{ border-color:var(--ember); color:var(--ember); }
  .tab-hint{ font-size:0.75rem; color:var(--text-faint); margin:12px 0 0; }
  .tab-none{ margin:0; font-size:0.9rem; color:var(--text-muted); }
  /* 4 sistemas (sobe, desce, acorde, arpejo): cada caixa parte da largura do
     seu conteúdo e o espaço que sobra é repartido — o acorde, que é só uma
     coluna, não fica numa caixa larga e vazia. Se não couberem, quebram de
     linha; uma tab mais larga do que o ecrã desliza dentro da sua caixa. */
  .tab-systems, .tab-group{ display:flex; flex-wrap:wrap; gap:14px; min-width:0; }
  .tab-group{ flex:1 1 auto; max-width:100%; }
  .tab-systems.tab-enter, .tab-section.tab-enter{ animation:cdEnter 0.32s var(--ease-out); }
  .tab-system{ flex:1 1 auto; min-width:0; max-width:100%; }
  .tab-label-name{ text-transform:none; letter-spacing:0.02em; color:var(--text); }
  .tab-label{
    font-size:0.68rem; font-weight:500; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--label); margin-bottom:6px;
  }
  .tab-scroll{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    /* sem padding horizontal: as cordas alinham com o título do sistema do
       lado esquerdo, e do lado direito a staff estende-se até à borda do card */
    padding:14px 0;
  }
  /* Pauta desenhada: as linhas das cordas atravessam o card inteiro e as
     colunas de notas repartem a largura (sem espaço vazio à direita). Os
     números ficam por cima da linha com o fundo do card a "cortá-la". */
  .tab-staff, .tab-staff *{
    font-family:var(--font-display), 'Bebas Neue', Impact, sans-serif;
    font-weight:400 !important; font-synthesis:none;
    letter-spacing:0.02em;
    font-variant-ligatures:none;
    font-variant-numeric:tabular-nums;
  }
  .tab-staff{
    --line:rgba(255,255,255,0.16);
    --bar:rgba(255,255,255,0.32);
    font-size:1rem; line-height:1;
    --colk:1;   /* fator da largura mínima das colunas (menor no telemóvel) */
    min-width:calc(var(--lw) * 1ch + 10px + var(--cols) * var(--colw) * var(--colk));
  }
  .tab-row{ display:flex; align-items:stretch; height:1.75em; }
  .tab-str{
    flex:0 0 calc(var(--lw) * 1ch + 10px);
    display:flex; align-items:center;
    color:var(--text-faint); font-size:0.92em;
  }
  .tab-track{
    flex:1 1 auto; min-width:0; position:relative;
    display:grid; grid-template-columns:repeat(var(--cols), minmax(calc(var(--colw) * var(--colk)), 1fr));
    border-left:1px solid var(--bar); border-right:1px solid var(--bar);
  }
  .tab-track::before{
    content:''; position:absolute; left:0; right:0; top:50%;
    height:1px; background:var(--line); pointer-events:none;
  }
  .tab-cell{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; }
  .tab-n{
    color:var(--text); font-weight:600; cursor:pointer; border-radius:3px;
    padding:2px 4px; background:var(--surface);
    transition:color 0.15s ease, background-color 0.15s ease;
  }
  .tab-n.is-root{ color:var(--ember); font-weight:700; }
  .tab-tech{ font-size:0.72em; opacity:0.55; margin-right:1px; vertical-align:super; pointer-events:none; }
  .tab-n.ping{ animation:tabPing 0.5s var(--ease-out); }
  @keyframes tabPing{
    0%  { background-color:rgba(209,170,141,0.55); color:#121212; }
    100%{ background-color:var(--surface); }
  }

  /* ── Exercícios: seletor, descrição, play-along ── */
  .tab-actions{ display:flex; flex-wrap:wrap; gap:8px; }
  /* Botão de tocar: borda ember mais firme para o diferenciar do Copiar tab */
  .ex-play{
    display:inline-flex; align-items:center; gap:7px;
    border:1px solid var(--ember); color:var(--ember);
    background:rgba(209,170,141,0.08);
  }
  .ex-play:hover{ background:rgba(209,170,141,0.14); border-color:var(--ember); }
  .ex-play-ico{ font-size:0.7em; line-height:1; }
  .ex-play.is-playing{ background:var(--ember); color:#121212; }
  .ex-play.is-playing .ex-play-ico{ color:#121212; }
  .ex-play:disabled{ opacity:0.45; cursor:not-allowed; }
  .ex-group{ display:inline-flex; flex-wrap:wrap; max-width:100%; }
  .ex-desc{ font-size:0.82rem; line-height:1.5; color:var(--text-muted); margin:10px 0 16px; max-width:68ch; }
  /* início de cada tempo: traço vertical discreto atravessa a pauta */
  .tab-cell.beat::before{
    content:''; position:absolute; left:0; top:0; bottom:0; width:1px;
    background:rgba(255,255,255,0.07); pointer-events:none;
  }
  /* cursor do play-along */
  .tab-cell.is-now{ background:rgba(209,170,141,0.13); }
  .tab-cell.is-now .tab-n{ background:var(--ember); color:#121212; }

  /* nota do braço apontada a partir da tab (ou tocada no play-along) */
  .note-dot.ex-now,
  .note-dot.tab-link{
    transform:scale(1.22); z-index:4;
    box-shadow:0 0 0 3px var(--ember), 0 4px 12px rgba(0,0,0,0.4);
  }
  @media (hover:hover) and (pointer:fine){
    .tab-n:hover{ background:#3b3029; color:#fff; }
  }
  @media (max-width:720px){
    .tab-staff{ font-size:0.78rem; --colk:0.7; }
    .tab-n{ padding:2px 1px; }
  }
  @media (max-width:360px){
    .tab-staff{ --colk:0.6; }
    .tab-scroll{ padding:10px 0; }
  }

  /* ── Premir: depois dos hovers, para ganhar também com rato ───── */
  .toggle-group > button:active{ transform:scale(0.95); }
  .icon-btn:not(:disabled):active{ transform:scale(0.86); }
  .play-btn:active{ transform:scale(0.94); }
  .chord-btn:active{ transform:translateY(0) scale(0.97); }
  .cd-apply:active{ transform:scale(0.96); }
  input[type="range"]:active::-webkit-slider-thumb{ transform:scale(1.25); box-shadow:0 0 0 6px rgba(209,170,141,0.2); }
  input[type="range"]:active::-moz-range-thumb{ transform:scale(1.25); box-shadow:0 0 0 6px rgba(209,170,141,0.2); }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .note-dot.ping::after, .tap-btn.tapped, .bump, .chord-detail.cd-enter,
    .tab-systems.tab-enter, .tab-section.tab-enter, .tab-n.ping,
    .chord-btn[aria-pressed="true"]{ animation:none; }
    .tg-indicator{ transition:none; }
  }

/* ── Ecrãs táteis (telemóvel e tablet) ────────────────────────────────
   Alvos de toque: botões com pelo menos 36 px visíveis (44 px de área nos
   –/+), ligações das listas de produtos em "chips"; selects a 16 px para o
   iOS não fazer zoom à página ao tocar num menu. */
@media (hover:none) and (pointer:coarse){
  select, .lang-switch select, .metro-sig select{ font-size:16px; }
  /* Seletor de cada corda: o <select> fica a 16 px mas transparente; o nome
     da nota é desenhado por cima, ao tamanho de sempre (data-note no JS). */
  .string-label{ position:relative; }
  .string-label .string-select{ font-size:16px; color:transparent; -webkit-text-fill-color:transparent; }
  .string-label .string-select option{ color:var(--text); -webkit-text-fill-color:var(--text); }
  .string-label::after{
    content:attr(data-note);
    position:absolute; inset:0; padding:0 6px 0 2px;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-body); font-size:0.78rem; font-weight:500; letter-spacing:0.02em;
    color:var(--text-muted); pointer-events:none;
  }
  body.lefty-board .string-label::after{ padding:0 2px 0 6px; }

  .icon-btn.sm{ width:36px; height:36px; min-width:36px; position:relative; }
  .icon-btn.sm::after{ content:''; position:absolute; inset:-4px; }
  .icon-btn.sm, .tap-btn, .play-btn{ touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
  .toggle-group button, .toggle-group.sm button, .tap-btn, .pill-toggle, .play-btn.sm{ min-height:36px; }

  .gear-alt{ gap:8px; align-items:center; }
  .gear-sep{ display:none; }
  .gear-alt-link, .guitar-opt-alt-link{
    display:inline-flex; align-items:center; min-height:32px;
    padding:4px 11px; border-radius:999px;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10);
    color:var(--text-muted); text-decoration:none; line-height:1.25;
  }
  .guitar-opt-alt{ gap:6px; align-items:center; }
  .footer-links a, .text-link{ display:inline-block; padding:10px 0; margin:-10px 0; }
}
@media (hover:none) and (pointer:coarse) and (max-width:720px){
  .string-label::after{ font-size:0.72rem; }
}

/* ── Escala tipográfica dos títulos ───────────────────────────────────
   Uma só família para títulos (Bebas Neue) e o tamanho a descer com o nível:
     H1 hero        54 px desktop · 27 px telemóvel   (inalterado)
     H2 secção      32 px · 20 px     Tablatura, Acordes, Material, Aprender…
     H3 subsecção   23 px · 18,4 px     Essencial / Completa o setup
     H4 grupo       18 px · 16 px     Instrumento / Analógico / Digital
     título de card 15,7 px Clarity 500 (todos iguais, incl. listas e guitarras)
   Antes, o H3 (Clarity 16,8 px) era mais pequeno do que o H4 (Bebas 23 px) e
   no telemóvel o H4 era maior do que o H2. O espaço acima de cada nível
   também desce com o nível (H3 64 px, H4 40 px com linha). */
.chords-head h2, .gear-head h2{
  font-size:clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
  line-height:1.05; letter-spacing:0.01em; margin-bottom:8px;
}
.gear-sub{ margin:30px 0 16px; }
.gear-sub-extra{ margin-top:64px; }
.gear-sub h3{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.15rem, 0.9rem + 0.8vw, 1.45rem);
  line-height:1.05; letter-spacing:0.02em; margin:0 0 6px;
}
.gear-group{ margin:40px 0 14px; padding-top:24px; }
.gear-group:first-child{ margin-top:22px; }
.gear-group-h{ font-size:clamp(1rem, 0.88rem + 0.3vw, 1.125rem); letter-spacing:0.04em; }
.info-card h3{ font-size:clamp(1.05rem, 0.95rem + 0.3vw, 1.15rem); letter-spacing:0.02em; line-height:1.1; margin:0 0 10px; }
/* nota "Links para as lojas · Saber mais": metadado, menor do que a descrição
   (a regra .gear-head p tinha mais especificidade e punha-a a 14,7 px) */
.gear-head .gear-aff-note{ font-size:0.78rem; color:var(--text-faint); margin-top:8px; }
/* título só para leitores de ecrã (estrutura da página sem mudar o aspeto) */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


/* ── Sombras dos cards ──────────────────────────────────────────────
   Fundo escuro: a sombra só se lê com um negro mais denso do que o fundo,
   por isso usa duas camadas (contacto curto + difusa, com spread negativo
   para não "sujar" os cards vizinhos) e um brilho interior de 1 px no topo,
   que dá o volume que a sombra sozinha não consegue dar sobre #121212.
   O hover sobe a elevação em vez de a substituir. */
:root{
  --shadow-card:
    0 1px 2px rgba(0,0,0,0.45),
    0 12px 28px -14px rgba(0,0,0,0.85),
    inset 0 1px 0 rgba(255,255,255,0.035);
  --shadow-card-hover:
    0 2px 4px rgba(0,0,0,0.45),
    0 22px 44px -16px rgba(0,0,0,0.9),
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px var(--ember-dim);
  --shadow-tile:
    0 1px 2px rgba(0,0,0,0.4),
    0 6px 14px -8px rgba(0,0,0,0.7);
}
.gear-card, .chord-btn, .chord-detail, .info-grid{ box-shadow:var(--shadow-card); }
.guitar-opt, .plugin-tile{ box-shadow:var(--shadow-tile); }
.plugin-tile{ transition:background 0.18s ease, border-color 0.18s ease, transform 0.14s ease, box-shadow 0.18s ease; }
@media (hover:hover){
  .gear-card:hover{ box-shadow:var(--shadow-card-hover); }
  .chord-btn:hover{ box-shadow:0 2px 4px rgba(0,0,0,0.45), 0 14px 30px -14px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.05); }
  .plugin-tile:hover{ box-shadow:0 2px 4px rgba(0,0,0,0.4), 0 10px 20px -10px rgba(0,0,0,0.8); }
}
/* o acorde escolhido fica "pousado": sombra curta, sem elevação */
.chord-btn[aria-pressed="true"]{ box-shadow:0 1px 2px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05); }

/* ── Ecrãs com pouca altura ─────────────────────────────────────────
   Ecrãs até 920 px de altura (portáteis de 720–900 px, menos ainda com as barras do browser):
   com o espaçamento normal o braço começava abaixo da dobra e só se viam os
   números das casas. Aqui comprime-se o cabeçalho e o hero para o braço,
   que é a ferramenta, aparecer no primeiro ecrã. */
@media (min-width:721px) and (max-height:920px){
  .site-header{ padding:8px 0 6px; }
  .brand-logo img{ height:44px; }
  .hero{ padding-top:6px; }
  .hero h1{ font-size:clamp(1.9rem, 1.2rem + 1.6vw, 2.5rem); margin-bottom:6px; }
  .hero h1 .hero-kicker{ margin-bottom:6px; }
  /* o slogan cabe numa linha: poupa uma linha inteira de título */
  .hero h1 .hero-slogan{ max-width:none; }
  .hero-layout{ gap:10px; }
  .panel{ padding-top:14px; padding-bottom:18px; }
  .controls{ margin-bottom:12px; gap:12px 20px; }
  .board-config{ gap:10px 22px; padding-top:8px; }
  .legend-row{ padding:10px 0; }
}
/* até 800 px de altura a dica "Ajusta cada corda…" sai: em ES/DE ocupava uma
   linha inteira e empurrava o braço para baixo da dobra */
@media (min-width:721px) and (max-height:800px){
  .config-hint{ display:none; }
}
@media (min-width:721px) and (max-height:700px){
  .hero{ padding-top:2px; }
  .hero h1 .hero-kicker{ margin-bottom:4px; }
  .hero h1{ font-size:clamp(1.8rem, 1.1rem + 1.4vw, 2.2rem); }
}
/* telemóvel na horizontal: o dock fica mais baixo para não comer o ecrã */
@media (max-height:500px) and (orientation:landscape){
  .metro-dock{ padding-top:6px; padding-bottom:max(6px, env(safe-area-inset-bottom)); }
  .metro-dock .bpm-number{ font-size:1.4rem; }
  .play-btn.sm{ padding:7px 14px; }
}

/* ── Exercícios em duas linhas: Técnica / Riffs Drop + treino de velocidade ── */
.ex-picker{ display:flex; flex-direction:column; gap:8px; }
.ex-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-width:0; }
.ex-row-label{
  flex:0 0 auto; min-width:6.5rem;
  font-family:var(--font-display); font-weight:400;
  font-size:0.82rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ember);
}
@media (max-width:720px){
  .ex-row{ gap:6px; }
  .ex-row-label{ min-width:0; flex-basis:100%; font-size:0.74rem; }
  /* em telemóvel os botões deslizam na horizontal em vez de partirem em 3 linhas */
  .ex-row .ex-group{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .ex-row .ex-group::-webkit-scrollbar{ display:none; }
  .ex-row .ex-group button{ flex:none; white-space:nowrap; }
}

/* Técnica e Riffs Drop lado a lado (2 colunas); em ecrãs estreitos empilham */
@media (min-width:721px){
  .ex-picker{
    display:grid; grid-template-columns:auto auto; justify-content:start;
    gap:10px 36px; align-items:start;
  }
  .ex-row{ flex-direction:column; align-items:flex-start; gap:6px; flex-wrap:nowrap; }
  .ex-row-label{ min-width:0; }
}
@media (min-width:721px) and (max-width:1000px){
  /* sem espaço para duas colunas: voltam a uma por linha */
  .ex-picker{ grid-template-columns:minmax(0,1fr); }
}

/* ── Treino de velocidade junto ao "Tocar exercício" ─────────────────
   Botão compacto que abre um menu; ligado fica cobre e mostra o ritmo.
   "Copiar tab" afasta-se para o fim: não tem a ver com tocar. */
.tab-actions{ align-items:center; }
.tab-copy{ margin-left:10px; }
.ex-speed-ctl{ position:relative; }
.ex-speed-btn{ display:inline-flex; align-items:center; gap:6px; }
.ex-speed-ico{ font-size:0.85em; line-height:1; filter:grayscale(1) brightness(1.6); }
.ex-speed-caret{ width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg); opacity:0.7; margin-left:2px; transition:transform 0.18s ease; }
.ex-speed-btn[aria-expanded="true"] .ex-speed-caret{ transform:translateY(1px) rotate(-135deg); }
.ex-speed-btn.is-on{ border-color:var(--ember); color:var(--ember); background:rgba(209,170,141,0.08); }
.ex-speed-btn.is-on .ex-speed-ico{ filter:none; }
.ex-speed-val{ font-size:0.78em; color:var(--text); background:rgba(209,170,141,0.16); border-radius:999px; padding:2px 8px;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.ex-speed-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  width:max-content; min-width:230px; max-width:min(300px, calc(100vw - 32px));
  background:var(--surface-3); border:1px solid #333; border-radius:var(--radius);
  box-shadow:var(--shadow-card-hover); padding:12px;
}
.chords-head .ex-speed-title{ margin:0 0 2px; font-family:var(--font-display); font-weight:400; font-size:0.95rem; letter-spacing:0.04em; color:var(--text); }
.chords-head .ex-speed-hint{ margin:0 0 10px; font-size:0.74rem; max-width:none; line-height:1.4; color:var(--text-faint); }
.ex-speed-items{ display:flex; flex-direction:column; gap:2px; }
.ex-speed-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:transparent; border:0; border-radius:var(--radius-sm); padding:8px 10px;
  font-size:0.84rem; color:var(--text-muted); cursor:pointer; min-height:36px;
}
.ex-speed-item::before{ content:''; width:8px; height:8px; border-radius:50%; border:1.5px solid #666; flex:none; }
.ex-speed-item[aria-checked="true"]{ color:var(--text); }
.ex-speed-item[aria-checked="true"]::before{ background:var(--ember); border-color:var(--ember); }
.ex-speed-item:hover, .ex-speed-item:focus-visible{ background:rgba(255,255,255,0.06); color:var(--text); outline:none; }
.chords-head .ex-speed-status{ margin:4px 0 0; font-size:0.8rem; color:var(--ember); font-variant-numeric:tabular-nums; }
@media (max-width:720px){
  .tab-copy{ margin-left:0; }
}

/* Copiar link: logo a seguir ao Copiar tab */
.share-link.is-copied{ border-color:var(--ember); color:var(--ember); }
/* chegada por link com exercício: o botão de tocar pulsa para chamar a atenção */
.ex-play.is-cue{ animation:exCue 0.9s ease-in-out 3; }
@keyframes exCue{
  0%,100%{ box-shadow:0 0 0 0 rgba(209,170,141,0); }
  50%    { box-shadow:0 0 0 6px rgba(209,170,141,0.28); }
}
@media (prefers-reduced-motion:reduce){ .ex-play.is-cue{ animation:none; } }

/* ── Botões de exercício delineados ───────────────────────────── */
.ex-picker .toggle-group.ex-group{
  background:transparent; border:none; padding:0; gap:6px;
}
.ex-picker .tg-indicator{ display:none; }
.ex-picker .toggle-group.ex-group > button{
  border:1px solid #4a4540; border-radius:999px;
  background:transparent; color:var(--text-muted);
  padding:6px 16px; min-height:36px;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}
.ex-picker .toggle-group.ex-group > button:hover{ border-color:var(--ember); color:var(--text); }
.ex-picker .toggle-group.ex-group > button.active,
.ex-picker .toggle-group.has-indicator > button.active{
  background:rgba(209,170,141,0.12); border-color:var(--ember); color:var(--ember);
}
.ex-picker .toggle-group.ex-group > button:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }

/* ── Cordas: sombra bem visível e por cima dos trastes ──────── */
.string-line{ z-index:auto; }
.string-line::before{
  right:-1px; z-index:2;
  box-shadow:0 2px 0 rgba(0,0,0,0.85), 0 3px 4px rgba(0,0,0,0.75), 0 6px 8px rgba(0,0,0,0.4);
}
body.lefty-board .string-line::before{ right:0; left:-1px; }
.string-line .note-dot{ position:relative; z-index:3; }
.string-line::before{
  box-shadow:0 -1px 0 rgba(255,255,255,0.10), 0 2px 0 rgba(0,0,0,0.95), 0 4px 3px rgba(0,0,0,0.85), 0 8px 8px rgba(0,0,0,0.5);
}

/* ── Acorde ativo: separadores ligados ao painel ─────────────────────
   O separador ativo funde-se com o painel (mesma superfície, com as
   curvas de ligação nos cantos) e leva uma barra ember sob o rótulo.
   Forma | Escala | Tudo continuam a escolher o que o braço destaca. */
.cd-tabs{
  display:flex; gap:4px; margin:0; padding:0;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.cd-tabs::-webkit-scrollbar{ display:none; }
.cd-tab-btn{
  position:relative; flex:0 0 auto; min-height:44px; padding:0 22px;
  background:transparent; border:0; border-radius:12px 12px 0 0;
  color:var(--text-muted); font-size:0.88rem; font-weight:500; letter-spacing:0.01em;
  margin-bottom:-1px; z-index:1;
  transition:color .2s ease, background-color .2s ease;
}
.cd-tab-btn:hover{ color:var(--text); }
.cd-tab-btn:focus-visible{ outline:2px solid var(--ember); outline-offset:-2px; }
.cd-tab-btn.active{ background:var(--surface-3); color:var(--text); z-index:2; }
.cd-tab-btn.active::after{
  content:''; position:absolute; left:22px; right:22px; bottom:8px; height:2px;
  border-radius:2px; background:var(--ember);
}
/* curvas de ligação entre o separador ativo e o painel */
.cd-tab-btn.active::before{
  content:''; position:absolute; bottom:0; left:-10px; width:10px; height:10px;
  background:radial-gradient(circle at 0 0, transparent 9.5px, var(--surface-3) 10px);
}
.cd-tab-btn.active:first-child::before{ display:none; }
.cd-panel{
  position:relative; z-index:1;
  background:var(--surface-3); border:1px solid #2a2a2a;
  border-radius:var(--radius); padding:20px;
}
.cd-panel.is-first{ border-top-left-radius:0; }
/* o painel é mais claro do que o cartão: os chips precisam de outro fundo */
.cd-panel .cd-note, .cd-panel .cd-tab-cell{
  background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.09);
}
.cd-panel .cd-note.is-root{ background:var(--ember); border-color:var(--ember); }
.cd-panel .cd-apply{ border-color:#454545; }
.cd-panel .cd-apply:hover{ background:rgba(209,170,141,0.12); border-color:var(--ember); }
@media (min-width:721px){
  /* "Forma sugerida" e "Notas do acorde" lado a lado (cada bloco reparte o
     espaço; se só um dos dois existir — ex.: acordes sem forma tocável —
     esse fica sozinho a ocupar a linha toda). */
  .cd-pair{ display:flex; align-items:flex-start; gap:20px; }
  .cd-pair .cd-block{ flex:1 1 0; min-width:0; }
}
@media (max-width:720px){
  .cd-tab-btn{ padding:0 18px; }
  .cd-tab-btn.active::after{ left:18px; right:18px; }
  .cd-panel{ padding:16px; }
}
@media (prefers-reduced-motion:no-preference){
  .cd-panel.cd-panel-in{ animation:cdPanelIn .28s var(--ease-out); }
  @keyframes cdPanelIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
}

/* ── Cartões dos acordes mais redondos (família dos botões de exercício) ── */
.chord-btn{ border-radius:20px; padding:15px 16px 14px; }
.chord-detail{ border-radius:20px; }
.cd-panel{ border-radius:16px; }
.cd-tab-btn{ border-radius:14px 14px 0 0; }
.cd-panel.is-first{ border-top-left-radius:0; }
@media (max-width:720px){
  .chord-btn{ border-radius:18px; padding:13px 14px 12px; }
  .chord-detail{ border-radius:18px; }
}

/* ── Cartão do acorde ativo = separador do painel ─────────────────────
   O cartão ativo estica até ao painel e funde-se com ele: mesmo fundo, borda
   ember à volta dos dois mas aberta na junção (sem linha no fundo do cartão),
   com curvas de ligação nos cantos. Só quando o cartão encosta ao painel
   (JS: .is-docked, .dock-l, .dock-r). */
.chords{ --cd-r:12px; --cdp:#191919; }
.chord-grid{ --cd-gap:10px; }
@media (max-width:720px){ .chord-grid{ --cd-gap:8px; } }
/* o painel vive dentro da grelha, numa linha própria logo abaixo do cartão ativo */
.chord-grid > .chord-detail{ grid-column:1 / -1; margin-top:0; margin-bottom:8px; }
.chord-detail{ background:var(--surface-3); border:1px solid var(--ember); }
.chord-btn[aria-pressed="true"]{ animation:none; }
.chord-btn.is-docked{
  --fl:var(--cd-r); --fr:var(--cd-r);
  position:relative; z-index:2;
  margin-bottom:calc(var(--cd-gap) * -1);
  border-bottom-width:0; border-radius:20px 20px 0 0;
  box-shadow:none; transform:none;
}
.chord-btn.is-docked:hover, .chord-btn.is-docked:active{ transform:none; box-shadow:none; }
.chord-btn.is-docked.dock-l{ --fl:0px; }
.chord-btn.is-docked.dock-r{ --fr:0px; }
.chord-btn.is-docked::after{
  content:''; position:absolute; pointer-events:none;
  left:calc(var(--fl) * -1); right:calc(var(--fr) * -1);
  top:calc(100% - var(--cd-r)); height:calc(var(--cd-r) + 2px);
  background:
    radial-gradient(circle at 0 0, transparent calc(var(--cd-r) - 1px), var(--ember) calc(var(--cd-r) - 1px), var(--ember) var(--cd-r), var(--surface-3) var(--cd-r)) 0 0 / var(--fl) 100% no-repeat,
    radial-gradient(circle at 100% 0, transparent calc(var(--cd-r) - 1px), var(--ember) calc(var(--cd-r) - 1px), var(--ember) var(--cd-r), var(--surface-3) var(--cd-r)) 100% 0 / var(--fr) 100% no-repeat,
    linear-gradient(var(--surface-3), var(--surface-3)) var(--fl) 0 / calc(100% - var(--fl) - var(--fr)) 100% no-repeat;
}
.chord-detail.dock-l{ border-top-left-radius:0; }
.chord-detail.dock-r{ border-top-right-radius:0; }
/* painel interior mais escuro do que o contentor */
.cd-panel{ background:var(--cdp); border-color:#2c2c2c; }
.cd-tab-btn.active{ background:var(--cdp); }
.cd-tab-btn.active::before{
  background:radial-gradient(circle at 0 0, transparent 9.5px, var(--cdp) 10px);
}
@media (prefers-reduced-motion:no-preference){
  /* só esmaece: se subisse, abria-se uma fresta entre o cartão e o painel */
  .chord-detail.cd-enter{ animation-name:cdFade; }
  @keyframes cdFade{ from{ opacity:0; } to{ opacity:1; } }
}

/* Largura dos cartões independente do painel.
   Com o painel (largura toda) dentro da grelha, o auto-fit deixava de apagar
   as colunas vazias e os cartões encolhiam para 132px. O mínimo passa a ser a
   parte igual da linha por acorde (--n, definido em JS), por isso o nº de
   colunas é o nº de acordes enquanto couberem, e quebra por linhas se não. */
@media (min-width:721px){
  .chord-grid{
    grid-template-columns:repeat(auto-fit, minmax(max(132px, calc((100% - (var(--n, 7) - 1) * var(--cd-gap)) / var(--n, 7) - 0.5px)), 1fr));
  }
}

/* Logo em mobile: 60px de altura */
@media (max-width:719px){
  .brand-logo img{ height:60px; }
}

/* Parágrafo introdutório do hero: oculto visualmente mas mantido no HTML
   (leitores de ecrã e motores de busca continuam a lê-lo). */
.hero-intro > p{
  position:absolute !important; width:1px !important; height:1px !important;
  margin:-1px !important; padding:0 !important; border:0 !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important;
  white-space:nowrap !important;
}

/* Sem saltos nos cartões dos acordes: as linhas de trastes ocupam sempre o
   seu espaço (antes só apareciam em hover/seleção e a linha inteira crescia
   uns 50px, empurrando tudo o que está por baixo). Agora só muda a opacidade. */
.chord-frets,
.chord-btn:hover .chord-frets,
.chord-btn:focus-visible .chord-frets,
.chord-btn[aria-pressed="true"] .chord-frets{
  max-height:none; overflow:visible;
  padding-top:8px; margin-top:2px;
  transition:opacity 0.15s ease;
}
.chord-frets{ opacity:0.55; }
.chord-btn:hover .chord-frets,
.chord-btn:focus-visible .chord-frets,
.chord-btn[aria-pressed="true"] .chord-frets{ opacity:1; }
/* o "pop" de escala ao selecionar também fazia o cartão saltar */
.chord-btn[aria-pressed="true"]{ animation:none; }

/* "Limpar seleção" mantém o seu lugar mesmo escondido: antes, em ecrãs
   estreitos, aparecia numa linha nova e empurrava Densidade e os cartões. */
#clearChord[hidden]{ display:inline-flex !important; visibility:hidden; pointer-events:none; }

/* ════════════════════════════════════════════════════════════════════
   Mobile e ecrãs baixos — o braço (a ferramenta) tem de aparecer cedo.
   ════════════════════════════════════════════════════════════════════ */

/* Telemóvel em vertical: cabeçalho e hero mais compactos; Tónica e Escala
   lado a lado (antes 4 selects empilhados ocupavam ~280 px). */
@media (max-width:720px){
  .site-header{ padding:8px 0; }
  .hero{ padding:12px 0 0; }
  .hero h1{ margin-bottom:6px; }
  .hero h1 .hero-kicker{ margin-bottom:6px; }
  .hero-layout{ gap:10px; margin-bottom:0; }
  .panel{ padding-top:10px; }
}
@media (max-width:540px){
  .controls{ grid-template-columns:minmax(0, 0.8fr) minmax(0, 1.2fr); gap:10px; margin-bottom:12px; }
  .controls > .field:first-child,
  .controls > .field:nth-child(4){ grid-column:1 / -1; }
  .controls .field label{ margin-bottom:4px; }
  .board-config{ padding-top:8px; }
}

/* Ecrãs baixos (portátil pequeno, telemóvel na horizontal): cabeçalho num
   só piso, título numa linha e controlos numa linha. */
@media (max-height:520px){
  .site-header{ padding:4px 0; }
  .brand-logo img{ height:34px; }
  .lang-switch select{ padding:5px 28px 5px 12px; }
  .hero{ padding:4px 0 0; }
  /* a linha descritiva continua no HTML (SEO), só deixa de se ver */
  .hero h1 .hero-kicker{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .hero h1{ font-size:1.35rem; margin-bottom:0; }
  .hero h1 .hero-slogan{ max-width:none; }
  .hero-layout{ gap:4px; margin-bottom:0; }
  .panel{ padding-top:6px; padding-bottom:10px; }
  .controls{ margin-bottom:8px; gap:8px 12px; }
  .board-config{ padding-top:6px; gap:6px 16px; }
  .legend-row{ padding:6px 0; margin-bottom:6px; }
  .config-hint, .board-hint{ display:none; }
}
@media (max-height:520px) and (min-width:560px){
  .controls{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .controls > .field:first-child,
  .controls > .field:nth-child(4){ grid-column:auto; }
  .controls .field label{ margin-bottom:3px; font-size:0.68rem; }
  .controls select{ padding-top:6px; padding-bottom:6px; }
}
/* dock de metrónomo: uma só linha e mais baixo */
@media (max-height:520px){
  .metro-dock{ padding:5px 14px; padding-bottom:max(5px, env(safe-area-inset-bottom)); }
  .metro-dock-inner{ flex-wrap:nowrap; row-gap:0; gap:12px; }
  .metro-dock .beat-row{ flex:0 0 auto; margin:0; gap:6px; }
  .metro-dock .bpm-number{ font-size:1.3rem; }
  .play-btn.sm{ padding:6px 14px; }
  body{ padding-bottom:calc(52px + env(safe-area-inset-bottom)); }
}

/* Telemóvel: "Modo de exibição" numa só linha (rótulo + botões) e botões
   de opção mais baixos — poupa ~80 px antes do braço. */
@media (max-width:540px){
  .controls > .field:nth-child(4){ display:flex; align-items:center; gap:12px; }
  .controls > .field:nth-child(4) label{ margin:0; flex:0 0 auto; }
  .controls > .field:nth-child(4) .toggle-group{ flex:1 1 auto; min-width:0; }
  .board-config .pill-toggle{ padding-top:7px; padding-bottom:7px; flex:1 1 auto; justify-content:center; }
}
@media (max-width:720px) and (max-height:820px){
  .config-hint{ display:none; }
}

@media (max-height:520px){
  .chips{ display:none; }
  .legend-row{ padding:4px 0; margin-bottom:4px; }
  .board-config .pill-toggle{ flex:0 0 auto; padding:5px 12px; font-size:0.74rem; }
  .stepper-field, .view-field{ min-height:0; }
}

/* Metrónomo em telemóvel: os tempos passam de bolas a traços de 2 px colados
   ao fundo do ecrã, repartidos por toda a largura. O dock fica numa só linha. */
@media (max-width:720px){
  .metro-dock{ padding:9px 12px; padding-bottom:max(11px, env(safe-area-inset-bottom)); }
  .metro-dock-inner{ flex-wrap:nowrap; row-gap:0; }
  .metro-dock .beat-row{
    position:absolute; left:0; right:0; bottom:0;
    display:flex; flex-wrap:nowrap; gap:3px;
    margin:0; padding:0 3px; min-height:0;
    flex:none; pointer-events:none;
  }
  .metro-dock .beat-dot{
    flex:1 1 0; width:auto; min-width:0; height:2px; min-height:0;
    aspect-ratio:auto; border:0; border-radius:0;
    background:#3d3d3d;
    transition:background 0.06s ease;
  }
  .metro-dock .beat-dot.pulse{ background:var(--string); animation:none; }
  .metro-dock .beat-dot.pulse.accent{ background:var(--ember); animation:none; }
  body{ padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
}

/* ── Escolha do exercício: botão com menu (como o treino de velocidade) ──
   Os botões de cada família vivem dentro do menu, em lista com ponto de
   seleção; as famílias ficam em duas colunas (uma em ecrãs estreitos). */
.ex-pick-ctl{ position:relative; }
.ex-pick-btn{ display:inline-flex; align-items:center; gap:8px; }
.ex-pick-k{ color:var(--text-faint); font-size:0.9em; }
.ex-pick-v{ color:var(--ember); }
.ex-pick-btn[aria-expanded="true"] .ex-speed-caret{ transform:translateY(1px) rotate(-135deg); }
.ex-pick-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  width:min(560px, calc(100vw - 32px));
  max-height:min(78vh, 700px); overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface-3); border:1px solid #333; border-radius:var(--radius);
  box-shadow:var(--shadow-card-hover); padding:14px 14px 10px;
}
.ex-pick-menu .ex-picker{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px 22px; align-items:start; justify-content:stretch;
}
.ex-pick-menu .ex-picker .ex-row{ display:block; min-width:0; margin-bottom:8px; }
.ex-pick-menu .ex-picker .ex-row-label{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; min-width:0; margin:0 0 4px; padding:0 8px;
  font-size:0.78rem; letter-spacing:0.1em; font-family:inherit; text-align:left;
  background:none; border:0; color:inherit; cursor:default;
}
.ex-row-caret{
  display:none; width:7px; height:7px; flex:none;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); opacity:0.7; transition:transform 0.18s ease;
}
.ex-pick-menu .ex-picker .ex-row .toggle-group.ex-group{
  display:flex; flex-direction:column; flex-wrap:nowrap; gap:1px;
  overflow:visible; background:none; border:0; padding:0; border-radius:0;
}
.ex-pick-menu .ex-picker .ex-row .toggle-group.ex-group > button{
  display:flex; align-items:center; gap:10px; width:100%; min-height:34px;
  text-align:left; white-space:normal;
  background:transparent; border:0; border-radius:var(--radius-sm);
  padding:7px 8px; font-size:0.84rem; font-weight:400; letter-spacing:0;
  color:var(--text-muted); box-shadow:none; transform:none;
}
.ex-pick-menu .ex-picker .ex-row .toggle-group.ex-group > button::before{
  content:''; width:8px; height:8px; border-radius:50%; border:1.5px solid #666; flex:none;
}
.ex-pick-menu .ex-picker .ex-row .toggle-group.ex-group > button.active{ color:var(--text); background:rgba(209,170,141,0.08); }
.ex-pick-menu .ex-picker .ex-row .toggle-group.ex-group > button.active::before{ background:var(--ember); border-color:var(--ember); }
.ex-pick-menu .ex-picker .ex-row .toggle-group.ex-group > button:hover,
.ex-pick-menu .ex-picker .ex-row .toggle-group.ex-group > button:focus-visible{
  background:rgba(255,255,255,0.06); color:var(--text); outline:none;
}
@media (max-width:720px){
  .ex-pick-menu{ width:calc(100vw - 32px); padding:12px 10px 6px; }
  .ex-pick-menu .ex-picker{ grid-template-columns:minmax(0, 1fr); }
}

/* ── Menu de exercícios: largura do container, famílias em colunas ──
   10 famílias, 5 colunas em desktop (grelha 2×5): aquecimento, aranha,
   controlo do mindinho, acordes, acordes+escala, técnica, rítmicos,
   palhetada, riffs drop, groove por estilo. Em mobile, lista numa só
   coluna (ver sistema de acordeão mais abaixo). */
.tab-section .wrap{ position:relative; }
.ex-pick-ctl{ position:static; }
.ex-pick-menu{
  left:0; right:0; width:auto; max-width:none; box-sizing:border-box;
  max-height:min(84vh, 860px); padding:18px 18px 14px;
}
/* O menu dos exercícios usa uma sombra/seta colada ao fundo; para ela chegar
   mesmo à borda, o painel perde o padding inferior (os outros menus não). */
#exPickMenu{ padding-bottom:0; }
/* Cada família é um cartão: dez gavetas soltas numa grelha liam-se como um
   bloco de texto. O cartão dá limite a cada grupo e o cabeçalho separa-o. */
.ex-pick-menu .ex-picker{
  grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px; align-items:start;
  padding-bottom:8px;   /* a última fila não fica debaixo da sombra do fundo */
}
.ex-pick-menu .ex-picker .ex-row{
  margin:0; min-width:0; padding:10px 10px 8px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
}
.ex-pick-menu .ex-picker .ex-row-label{
  padding:0 6px 7px; margin:0 0 4px; border-bottom:0;
  color:var(--text-faint); font-size:.72rem; letter-spacing:.12em;
}
.ex-pick-menu .ex-picker .ex-row .toggle-group.ex-group > button{
  min-height:36px; padding:8px; font-size:.86rem;
}
.ex-pick-menu .ex-picker .ex-row .toggle-group.ex-group > button::before{ width:9px; height:9px; }
.ex-pick-menu .ex-picker .ex-row .toggle-group.ex-group > button.active{ background:rgba(209,170,141,.14); }
/* O cabeçalho (descrição + Tocar) fica colado ao topo, com uma linha a separá-lo */
.ex-pick-menu .ex-menu-bar{ border-bottom:1px solid #2e2e2e; padding-bottom:12px; margin-bottom:14px; }
/* Sombra no fundo: mostra que o painel continua para baixo em vez de cortar a
   última linha a meio (era o aspeto que parecia um erro). */
#exPickMenu::after{
  content:''; position:sticky; bottom:0; z-index:2; display:block;
  height:34px; margin:0 -18px; pointer-events:none;
  opacity:0; transition:opacity .16s ease;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10'%3E%3Cpath d='M1 1l8 8 8-8' fill='none' stroke='%23D1AA8D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center calc(100% - 7px) / 16px 9px no-repeat,
    linear-gradient(rgba(18,18,18,0), rgba(18,18,18,.94));
}
/* a seta só aparece quando ainda há exercícios por baixo (classe posta em app.js) */
#exPickMenu.is-more::after{ opacity:1; }
@media (max-width:1040px){
  .ex-pick-menu .ex-picker{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:720px){
  .ex-pick-menu{ width:auto; padding:12px 10px 14px; max-height:min(78vh, 620px); }
  #exPickMenu{ padding-bottom:0; }
  .ex-pick-menu .ex-picker{ grid-template-columns:minmax(0, 1fr); gap:10px; }
  .ex-pick-menu .ex-picker .ex-row{ padding:12px 12px 8px; border-radius:14px; }
  .ex-pick-menu .ex-picker .ex-row-label{ padding:0 2px 0; margin:0; font-size:.74rem; }
  #exPickMenu::after{ margin:0 -10px; height:28px; background-size:16px 9px, auto; }
  /* acordeão: cada família abre/fecha o seu grupo; a família do exercício
     ativo abre já ao abrir o menu (ver exPickOpen em app.js) */
  .ex-pick-menu .ex-picker .ex-row-label{ cursor:pointer; }
  .ex-pick-menu .ex-picker .ex-row-label:hover,
  .ex-pick-menu .ex-picker .ex-row-label:focus-visible{ color:var(--text); }
  .ex-row-caret{ display:block; }
  .ex-pick-menu .ex-picker .ex-row-label[aria-expanded="true"] .ex-row-caret{ transform:rotate(-135deg); }
  .ex-pick-menu .ex-picker .ex-row .toggle-group.ex-group{ display:none; margin-top:10px; padding-top:8px; border-top:1px solid #2c2c2c; }
  .ex-pick-menu .ex-picker .ex-row.is-open .toggle-group.ex-group{ display:flex; }
}

/* ── Cabeçalho da tab: Play preenchido e botão do exercício como as abas dos acordes ── */
.ex-play{
  background:var(--ember); color:#121212; border-color:var(--ember); font-weight:600;
  box-shadow:0 2px 12px rgba(209,170,141,0.22);
}
.ex-play .ex-play-ico{ color:#121212; }
.ex-play:hover:not(:disabled){ background:#dcb99e; border-color:#dcb99e; }
.ex-play.is-playing{ background:#f0d3bb; border-color:#f0d3bb; }
.ex-pick-btn{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:2px 10px 2px 2px; gap:8px; min-height:36px;
}
.ex-pick-btn:hover{ border-color:var(--ember-dim); }
.ex-pick-k{ padding:0 0 0 10px; font-size:0.78rem; color:var(--text-muted); }
.ex-pick-v{
  display:inline-flex; align-items:center; min-height:28px; padding:0 12px; border-radius:3px;
  background:var(--ember); color:#121212; font-size:0.78rem; font-weight:600;
}

/* ── Botão do exercício = o botão mais importante do site ──
   É o ponto de entrada para todos os exercícios, por isso copia o mesmo
   tratamento do botão "Ver equipamento" (.gear-acc .gx-btn): pílula cheia a
   ember, texto escuro, glow pronunciado por baixo e elevação ligeira no
   hover — em vez de um contorno discreto que se perdia no fundo escuro do
   painel. Aberto: fundo passa a var(--surface-3) para ligar ao painel
   (curvas de junção), com borda ember a toda a volta e o pé reto (fundido
   com o topo do menu) — só o raio de repouso é a pílula.
   */
.ex-pick-btn{
  position:relative; z-index:2; background:var(--ember); border:2px solid var(--ember);
  border-radius:999px; padding:0 16px; min-height:46px; gap:9px;
  box-shadow:0 14px 30px -10px rgba(209,170,141,.6), inset 0 1px 0 rgba(255,255,255,.35);
  transition:border-color .22s ease, background-color .22s ease, border-radius .22s ease, box-shadow .22s ease, transform .22s ease;
}
.ex-pick-btn:hover{
  background:#dcb99e; border-color:#dcb99e; transform:translateY(-2px);
  box-shadow:0 18px 36px -10px rgba(209,170,141,.8), inset 0 1px 0 rgba(255,255,255,.4);
}
.ex-pick-k{ padding:0; font-size:0.78rem; font-weight:700; color:rgba(18,18,18,0.72); transition:color .22s ease; }
.ex-pick-v{
  display:inline; min-height:0; padding:0; background:none; border-radius:0;
  color:#121212; font-size:0.92rem; font-weight:800;
}
.ex-pick-btn .ex-speed-caret{ border-color:#121212; transition:transform .25s var(--ease-out); }
.ex-pick-btn.is-open{
  /* funde-se com o painel: cantos de baixo quadrados para encostar sem
     falha. Em cima, o mesmo raio do painel (18px) em vez da pílula
     completa — fechado fica uma pílula, mas aberto e fundido com um
     retângulo por baixo, a pílula inteira ficava com um ar inchado;
     18px acompanha a curva do painel e lê-se como uma peça só. A borda
     de baixo passa à cor do painel, escondendo a linha de junção. */
  background:var(--surface-3); border-color:var(--ember); border-bottom-color:var(--surface-3);
  border-radius:18px 18px 0 0;
  transform:none;
}
.ex-pick-btn.is-open .ex-pick-k{ color:var(--text-muted); }
.ex-pick-btn.is-open .ex-pick-v{ color:var(--ember); }
.ex-pick-btn.is-open .ex-speed-caret{ border-color:var(--ember); }
.ex-pick-menu{
  border:1px solid var(--ember); border-radius:18px; z-index:60;
  box-shadow:0 18px 40px rgba(0,0,0,0.45);
}
/* junto a uma esquina do ecrã não há espaço para a curva de ligação desse
   lado — o canto do painel fica quadrado em vez de sobrar um recorte. */
.ex-pick-menu.dock-l{ border-top-left-radius:0; }
.ex-pick-menu.dock-r{ border-top-right-radius:0; }
@media (prefers-reduced-motion:no-preference){
  .ex-pick-menu:not([hidden]){ animation:exPickIn .2s ease-out; }
  .ex-pick-menu.is-closing{ animation:exPickOut .15s ease-in forwards; }
  @keyframes exPickIn{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes exPickOut{ from{ opacity:1; } to{ opacity:0; } }
  .ex-pick-menu:not([hidden]) .ex-row{ animation:exRowIn .28s var(--ease-out) backwards; }
  .ex-pick-menu .ex-row:nth-child(2){ animation-delay:.03s; }
  .ex-pick-menu .ex-row:nth-child(3){ animation-delay:.06s; }
  .ex-pick-menu .ex-row:nth-child(4){ animation-delay:.09s; }
  .ex-pick-menu .ex-row:nth-child(5){ animation-delay:.12s; }
  .ex-pick-menu .ex-row:nth-child(6){ animation-delay:.15s; }
  .ex-pick-menu .ex-row:nth-child(7){ animation-delay:.18s; }
  .ex-pick-menu .ex-row:nth-child(8){ animation-delay:.21s; }
  .ex-pick-menu .ex-row:nth-child(9){ animation-delay:.24s; }
  .ex-pick-menu .ex-row:nth-child(10){ animation-delay:.27s; }
  @keyframes exRowIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
  .ex-pick-menu .ex-picker .ex-row .toggle-group.ex-group > button{ transition:background-color .16s ease, color .16s ease; }
  .ex-pick-menu .ex-picker .ex-row .toggle-group.ex-group > button::before{ transition:background-color .16s ease, border-color .16s ease; }
}

/* setas de palhetada (▼ baixo / ▲ cima) por cima da pauta */
.tab-pickrow{ height:1.25em; }
.tab-pickrow .tab-track::before{ display:none; }
.tab-pickrow .tab-cell.is-now .tab-pk{ color:var(--ember); }
.tab-pk{ font-size:0.6em; color:var(--text-faint); line-height:1; transition:color .15s ease; }

/* Cursos de baixo: fotos próprias nos cards */
.gear-card[data-affiliate="course_sbl"]{
  background-image:linear-gradient(to bottom, rgba(16,14,12,0.84) 0%, rgba(16,14,12,0.66) 100%), url('../images/gear/course-bass-sbl.jpg');
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.gear-card[data-affiliate="course_bass_technique"]{
  background-image:linear-gradient(to bottom, rgba(16,14,12,0.84) 0%, rgba(16,14,12,0.66) 100%), url('../images/gear/course-bass-tech.jpg');
  background-size:cover; background-position:center; background-repeat:no-repeat;
}

/* ── Banner do topo: fundo + kicker + logótipo + linha de produtos ──
   Substitui o cabeçalho e o título do hero. O seletor de idioma flutua no
   canto. Tudo escala com a largura (vw com limites) para manter as proporções
   da maquete em qualquer ecrã. */
.site-banner{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(210px, 19.7vw, 420px);
  background:#121212 url('../images/banner.jpg') center / cover no-repeat;
  border-bottom:1px solid var(--line-soft);
}
.banner-inner{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(8px, 1.5vw, 26px); padding:clamp(22px, 3vw, 48px) 16px;
}
.banner-kicker{
  margin:0; font-family:var(--font-display); font-weight:400; line-height:1;
  font-size:clamp(1.1rem, 0.62rem + 1.45vw, 2rem); letter-spacing:0.02em;
  text-transform:uppercase; color:#fff; text-wrap:balance;
}
.banner-logo{ display:block; line-height:0; transition:opacity .2s ease; }
.banner-logo img{ display:block; width:clamp(150px, 16.5vw, 340px); height:auto; }
.banner-logo:hover{ opacity:.85; }
.banner-sub{
  margin:0; font-family:var(--font-body); font-weight:700; line-height:1.3;
  font-size:clamp(0.62rem, 0.44rem + 0.55vw, 1rem); letter-spacing:0.12em;
  text-transform:uppercase; color:var(--ember); text-wrap:balance;
}
.banner-lang{ position:absolute; top:clamp(10px, 1.4vw, 20px); right:clamp(14px, 2.2vw, 30px); z-index:2; }
.banner-lang select{ background:rgba(18,18,18,0.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
/* o h1 passou a ser só para leitores de ecrã e motores de busca */
.hero h1.sr-only{ margin:0; }
.hero{ padding-top:28px; }
@media (max-width:720px){
  .site-banner{ min-height:250px; background-image:url('../images/banner-m.jpg'); }
  .banner-inner{ gap:12px; padding:44px 16px 24px; }
  .banner-kicker{ font-size:1.15rem; }
  .banner-logo img{ width:190px; }
  .banner-sub{ font-size:0.66rem; }
  .hero{ padding-top:18px; }
}
@media (max-height:520px) and (orientation:landscape){
  .site-banner{ min-height:0; }
  .banner-inner{ padding:14px 16px; gap:0; }
  .banner-kicker, .banner-sub{ display:none; }
  .banner-logo img{ width:120px; }
  .hero{ padding-top:10px; }
}

/* Banner: medidas fixas pedidas (altura 360px; kicker 1.5rem; sub 0.8rem) */
.site-banner{ height:360px; min-height:360px; }
.banner-kicker{ font-size:1.5rem; }
.banner-sub{ font-size:0.8rem; }
@media (max-width:720px){
  .site-banner{ height:360px; min-height:360px; }
  .banner-kicker{ font-size:1.5rem; }
  .banner-sub{ font-size:0.8rem; }
}
/* telemóvel na horizontal (ecrã baixo): mantém-se compacto */
@media (max-height:520px) and (orientation:landscape){
  .site-banner{ height:auto; min-height:0; }
}

/* Banner em telemóvel: 200px mais baixo (360 → 160px). Logótipo mais pequeno e
   respiro em cima para o seletor de idioma não tapar o kicker. */
@media (max-width:720px){
  .site-banner{ height:160px; min-height:160px; }
  .banner-inner{ gap:8px; padding:40px 12px 8px; }
  .banner-logo img{ width:110px; }
  .banner-sub{ letter-spacing:0.07em; }
  .banner-lang{ top:8px; right:12px; }
}
@media (max-width:360px){ .banner-sub{ letter-spacing:0.03em; } }
@media (max-height:520px) and (orientation:landscape){
  .site-banner{ height:auto; min-height:0; }
}

/* Banner: regressa às medidas originais (fluidas) + desvanecimento inferior para o fundo do site */
.site-banner{ height:auto; min-height:clamp(210px,19.7vw,420px); border-bottom:0; }
.site-banner::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:55%;
  background:linear-gradient(to bottom, rgba(18,18,18,0) 0%, rgba(18,18,18,.55) 55%, var(--bg) 100%);
  pointer-events:none; z-index:0;
}
.banner-inner, .banner-lang{ position:relative; z-index:1; }
.banner-lang{ position:absolute; }
@media (max-width:720px){
  .site-banner{ height:auto; min-height:250px; }
  .banner-inner{ gap:12px; padding:44px 16px 28px; }
  .banner-kicker{ font-size:1.15rem; }
  .banner-logo img{ width:190px; }
  .banner-sub{ font-size:0.66rem; letter-spacing:0.12em; }
  .banner-lang{ top:10px; right:14px; }
}
@media (max-height:520px) and (orientation:landscape){ .site-banner{ min-height:0; } }

/* Cantos redondos em todos os botões e seletores (exceto o menu de exercícios, que mantém o formato de aba) */
.toggle-group{ border-radius:999px; }
.toggle-group button, .tg-indicator{ border-radius:999px; }
.ex-pick-menu .ex-picker .ex-row .toggle-group.ex-group{ border-radius:0; margin-bottom:2rem; }
.ex-pick-menu .ex-picker .ex-row .toggle-group.ex-group > button{ border-radius:var(--radius-sm); }
.select-wrap select, #tuningSelect, #rootSelect, #scaleSelect, #signatureSelect, .string-select{ border-radius:999px; }
.select-wrap select{ padding-left:16px; }
.plugin-tile, .plugin-tile.is-free{ border-radius:var(--radius); }

/* ── Aba do exercício, afinada ──
   A aba passa por cima do painel (z-index) e tapa a linha de junção; as curvas de
   ligação são SVG (traço nítido, sem serrilhado) e o botão ganha mais ar. */
/* Tamanho igual ao botão "Ver equipamento" (.gear-acc .gx-btn): min-height
   54px, padding 0 28px — reforça que é o botão mais importante do site. */
.ex-pick-btn{ padding:0 28px; gap:10px; min-height:54px; }
.ex-pick-k{ letter-spacing:.01em; }
.ex-pick-v{ font-size:.95rem; }
/* Hover do preenchimento ember sólido (substitui o hover antigo que escurecia
   para var(--surface-3) — com o texto escuro do botão isso ficava tudo preto). */
.ex-pick-btn:not(.is-open):hover{ background:#dcb99e; border-color:#dcb99e; }
.ex-pick-btn:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }
.ex-pick-btn.is-open{ z-index:61; }

/* ── Animação da aba: tudo sincronizado (mesma duração e curva) ──
   Abrir: a aba funde-se com o painel, as curvas surgem em fade e o painel
   desdobra-se a partir da aba. Fechar: o inverso, em simultâneo. */
.ex-pick-ctl{ --ex-dur:.26s; --ex-ease:cubic-bezier(.22,.8,.3,1); }
.ex-pick-btn{
  z-index:61;
  transition:
    border-color var(--ex-dur) var(--ex-ease), background-color var(--ex-dur) var(--ex-ease),
    border-radius var(--ex-dur) var(--ex-ease), border-bottom-width var(--ex-dur) var(--ex-ease),
    padding-bottom var(--ex-dur) var(--ex-ease), box-shadow var(--ex-dur) var(--ex-ease);
}
.ex-pick-btn:active, .ex-pick-btn.tapped{ transform:none; animation:none; }
.ex-pick-btn .ex-speed-caret{ transition:transform var(--ex-dur) var(--ex-ease); }
@media (prefers-reduced-motion:no-preference){
  /* entrada simples e fluida — sem inclinação 3D, desfoque ou overshoot:
     só um esmaecer com um leve deslize, a mesma sensação do acordeão do
     equipamento (.gear-panel / @keyframes gxIn). O botão já faz a sua
     própria transição de cor e forma pelas regras acima, por isso o
     painel só precisa de entrar com naturalidade. */
  .ex-pick-menu:not([hidden]){ animation:exPickIn2 .4s var(--ease-out, cubic-bezier(.22,.8,.3,1)); }
  .ex-pick-menu.is-closing{ animation:exPickOut2 .18s ease-in forwards; }
  @keyframes exPickIn2{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
  @keyframes exPickOut2{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(6px); } }
}
.ex-pick-btn:focus-visible{ outline-width:1.5px; outline-offset:2px; }

/* ── Aba do exercício aberta: peça do painel, sem halo ────────────────────
   Inspirada nas tab bars do iOS: a aba ativa sobe do painel, com os cantos
   de cima redondos e o mesmo fundo do menu. Sem glow, sem curvas de ligação
   (as "orelhas" ficavam cortadas na borda direita); a marca do separador
   ativo é um pequeno traço ember por baixo do texto. Fechada, um pulso muito
   suave chama a atenção sem ficar um halo permanente. */
.ex-pick-btn{ box-shadow:none; }
.ex-pick-btn:hover, .ex-pick-btn:not(.is-open):hover{ box-shadow:none; }
.ex-pick-btn.is-open{
  /* a aba ativa não tem borda: o contorno é o do painel. Fica mais alta
     (min-height + padding em baixo) para o topo do painel cair abaixo da
     linha de subtítulo da secção, sem lhe tapar o texto. */
  background:var(--surface-3);
  border:0;
  border-radius:16px 16px 0 0;
  box-shadow:none;
  min-height:66px;
  padding-bottom:14px;
  transform:translateY(1px);
}
.ex-pick-btn.is-open .ex-pick-k{ color:var(--text-muted); }
.ex-pick-btn.is-open .ex-pick-v{ color:var(--ember); }
.ex-pick-btn.is-open .ex-speed-caret{ border-color:var(--ember); }
.ex-pick-btn.is-open::before{
  content:''; position:absolute; left:50%; bottom:8px; width:26px; height:2px;
  margin-left:-13px; border-radius:2px; background:var(--ember);
}
.ex-pick-btn::after{
  content:''; position:absolute; inset:-2px; border-radius:inherit;
  border:1px solid var(--ember); opacity:0; pointer-events:none;
}
@keyframes exTabPing{
  0%{ transform:scale(1); opacity:.4; }
  70%,100%{ transform:scale(1.12); opacity:0; }
}
.ex-pick-btn:not(.is-open)::after{ animation:exTabPing 4.4s ease-out infinite; }
@media (prefers-reduced-motion:reduce){ .ex-pick-btn:not(.is-open)::after{ animation:none; } }
/* contorno neutro: o ember a toda a volta lia-se como um segundo glow */
.ex-pick-menu{ border:1px solid #3a3a3a; box-shadow:0 20px 44px rgba(0,0,0,.5); }
/* as duas abas ficam com a mesma altura quando a do exercício abre e cresce */
.tab-actions .ex-pick-ctl{ display:flex; }
.tab-actions .ex-pick-btn{ flex:1 1 auto; }
/* a aba inativa assenta na mesma linha do painel (como numa tab bar) */
@media (min-width:721px){ .tab-actions .bt-pick-ctl{ align-self:flex-end; } }

/* Play-along: só as notas do exercício ficam acesas; as outras esbatem-se */
#fretGrid.ex-dim .note-dot:not(.ex-used){
  opacity:.14; filter:grayscale(1) brightness(.8); box-shadow:none; animation:none;
}
#fretGrid.ex-dim .note-dot.ex-used:not(.ex-now){ box-shadow:0 0 0 2px rgba(209,170,141,.4); }
#fretGrid.ex-dim .note-dot.ex-used.is-root:not(.ex-now){ box-shadow:0 0 0 2px rgba(209,170,141,.55); }
#fretGrid.ex-dim .note-dot.ex-now{ opacity:1; }
/* notas tocadas que não pertencem à escala: acendem na mesma (contorno tracejado) */
#fretGrid.ex-dim .note-dot.ex-used{ opacity:1; filter:none; }
#fretGrid .note-dot.ex-extra{
  background:var(--surface-3); color:var(--ember); border:1.5px dashed var(--ember);
  box-shadow:0 0 0 2px rgba(209,170,141,.25); animation:none;
}
#fretGrid .note-dot.ex-extra.is-root{ background:var(--ember); color:#121212; }

/* Cartão do acorde: painel interior com o mesmo raio do exterior */
.cd-panel{ border-radius:20px; }
.cd-panel.is-first{ border-top-left-radius:0; }
@media (max-width:720px){ .cd-panel{ border-radius:18px; } .cd-panel.is-first{ border-top-left-radius:0; } }

/* ── Parallax do banner ──
   A imagem passa para uma camada própria (::before) mais alta que o banner, para
   poder descer mais devagar do que a página sem deixar falhas. */
.site-banner{ background:#121212; --py:0px; --pc:0px; --po:1; }
.site-banner::before{
  content:''; position:absolute; left:0; right:0; top:0; bottom:-190px; z-index:-1;
  background:url('../images/banner.jpg') center top / cover no-repeat;
  transform:translate3d(0, var(--py), 0); will-change:transform; pointer-events:none;
}
.banner-inner{ transform:translate3d(0, var(--pc), 0); opacity:var(--po); will-change:transform, opacity; }
@media (max-width:720px){
  .site-banner{ background-image:none; }
  .site-banner::before{ background-image:url('../images/banner-m.jpg'); bottom:-120px; }
}
@media (prefers-reduced-motion:reduce){
  .site-banner::before, .banner-inner{ transform:none; will-change:auto; }
  .banner-inner{ opacity:1; }
}

/* ── Backing track ── */
.backing{ padding:clamp(28px,4vw,56px) 0 clamp(8px,2vw,24px); }
.backing .chords-head{ align-items:flex-end; }
.backing .ex-play{ flex:0 0 auto; }
/* Linha do tempo da progressão: um cartão por mudança de acorde e a largura
   proporcional à duração (o doom tem dois cartões largos, o blast cinco
   estreitos). */
.bt-chords{ display:flex; flex-wrap:nowrap; gap:10px; margin-top:6px; }
.bt-chip{
  flex:1 1 0; min-width:0;
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center;
  padding:14px 16px; border-radius:20px; background:var(--surface-2); border:1px solid var(--line);
  transition:background-color .22s ease, border-color .22s ease, transform .22s var(--ease-out);
}
.bt-chip-n{ grid-row:1 / span 2; font-family:var(--font-display); font-size:1.35rem; line-height:1; color:var(--text-faint); white-space:nowrap; transition:color .22s ease; }
.bt-chip-r{ font-weight:700; font-size:1rem; color:var(--text); }
.bt-chip-c{ font-size:.82rem; color:var(--text-muted); }
.bt-chip.is-now{ background:var(--surface-3); border-color:var(--ember); transform:translateY(-2px); }
.bt-chip.is-now .bt-chip-n{ color:var(--ember); }
@media (max-width:720px){
  .bt-chords{ flex-wrap:wrap; }
  .bt-chip{ flex:1 1 calc(50% - 5px); padding:12px 14px; border-radius:18px; }
  .backing .chords-head{ align-items:flex-start; flex-direction:column; gap:14px; }
}
/* notas do acorde atual no braço */
#fretGrid .note-dot.bt-now{ transform:scale(1.18); z-index:4; box-shadow:0 0 0 3px var(--ember), 0 4px 12px rgba(0,0,0,.4); }
#fretGrid .note-dot.bt-extra{ background:var(--surface-3); color:var(--ember); border:1.5px dashed var(--ember); animation:none; }
#fretGrid.ex-dim .note-dot.bt-now{ opacity:1; filter:none; }
/* Guia de improvisação: o braço esbate e só o acorde atual fica aceso
   (todas as oitavas em que aparece, não só os bordões). */
#fretGrid.bt-guide .note-dot:not(.bt-now){ opacity:.16; filter:grayscale(1) brightness(.85); box-shadow:none; }
#fretGrid.bt-guide .note-dot.bt-now{ opacity:1; filter:none; }
@media (prefers-reduced-motion:reduce){ .bt-chip.is-now{ transform:none; } }
@media (max-width:720px){
  .backing .tool-field{ width:100%; }
  #btProgGroup{ display:grid; grid-template-columns:1fr 1fr; border-radius:20px; width:100%; }
  #btProgGroup > button{ white-space:nowrap; }
  #btStyleGroup{ width:100%; }
  #btStyleGroup > button{ flex:1; }
}

/* ── Backing track dentro da aba (mesmo formato da aba dos exercícios) ── */
.bt-menu{ padding:18px 18px 14px; }
.bt-menu-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
.bt-menu-head .bt-intro{ flex:1 1 220px; margin:0; }
.bt-menu-head #btWithExBtn, .bt-menu-head #btSpeedBtn{ flex:none; }
.bt-menu-head .ex-speed-status{ flex:1 1 100%; order:5; margin:0; font-size:0.8rem; color:var(--ember); font-variant-numeric:tabular-nums; }
.bt-intro{ margin:0; color:var(--text-muted); font-size:.9rem; max-width:62ch; }
.bt-menu .ex-play{ flex:0 0 auto; }
.bt-tools{ display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; margin-bottom:6px; }
.bt-menu .density-hint{ margin:8px 0 14px; }
/* Volumes da mistura: um slider por instrumento, ao lado do ligar/desligar */
.bt-vols{ display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; }
.bt-vol{ display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--text-muted); white-space:nowrap; }
.bt-vol input[type="range"]{ width:96px; }
/* Opções da improvisação: contagem antes de entrar e guia de notas no braço */
.bt-opts{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 0; }
@media (max-width:720px){
  /* em coluna: "Volumes" fica como título do grupo, senão parecia a etiqueta da bateria */
  .bt-vol-field{ flex-direction:column; align-items:stretch; gap:8px; }
  .bt-vols{ display:grid; gap:8px; }
  .bt-vol{ width:100%; justify-content:space-between; }
  .bt-vol input[type="range"]{ width:auto; flex:1 1 auto; max-width:62%; }
  .bt-opts{ margin-top:12px; }
}
.bt-live{ display:none; width:8px; height:8px; border-radius:50%; background:var(--ember); flex:0 0 auto; }
.bt-pick-btn.is-on .bt-live{ display:inline-block; animation:btLive 1.2s ease-in-out infinite; }
@keyframes btLive{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.7); } }
@media (prefers-reduced-motion:reduce){ .bt-pick-btn.is-on .bt-live{ animation:none; } }
@media (max-width:720px){
  .bt-menu{ padding:14px 12px 10px; }
  .bt-menu-head{ flex-direction:column; align-items:flex-start; gap:12px; }
  .bt-tools{ flex-direction:column; align-items:stretch; gap:12px; }
  .bt-menu .tool-field{ width:100%; }
}

/* ── Abas: Velocidade · Exercício · Backing track ──
   O play e a descrição vivem dentro da aba Exercício; Copiar tab/link vão para baixo. */
.ex-pick-btn.is-cue{ animation:exCue 0.9s ease-in-out 3; }
@media (prefers-reduced-motion:reduce){ .ex-pick-btn.is-cue{ animation:none; } }
.ex-pick-btn.is-on .bt-live, .bt-pick-btn.is-on .bt-live{ display:inline-block; animation:btLive 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .ex-pick-btn.is-on .bt-live{ animation:none; } }
.tab-foot{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.tab-foot .tab-copy, .tab-foot .share-link{ margin-left:0; }
@media (max-width:720px){
  #btStyleGroup{ display:grid; grid-template-columns:repeat(3,1fr); border-radius:20px; width:100%; }
}

/* só a aba aberta passa por cima do painel (as outras ficam por baixo); ao fechar mantém-se até acabar o fade */
.ex-pick-btn{
  z-index:2;
  transition:
    border-color var(--ex-dur) var(--ex-ease), background-color var(--ex-dur) var(--ex-ease),
    border-radius var(--ex-dur) var(--ex-ease), border-bottom-width var(--ex-dur) var(--ex-ease),
    padding-bottom var(--ex-dur) var(--ex-ease), box-shadow var(--ex-dur) var(--ex-ease),
    z-index 0s linear .22s;
}
.ex-pick-btn.is-open{
  z-index:61;
  transition:
    border-color var(--ex-dur) var(--ex-ease), background-color var(--ex-dur) var(--ex-ease),
    border-radius var(--ex-dur) var(--ex-ease), border-bottom-width var(--ex-dur) var(--ex-ease),
    padding-bottom var(--ex-dur) var(--ex-ease), box-shadow var(--ex-dur) var(--ex-ease),
    z-index 0s linear 0s;
}

/* ── Afiliados: CTA que revela o resto do equipamento e dos cursos ───────── */
.gx-more[hidden]{ display:none; }
.gx-more:not([hidden]){ animation:gxIn .5s var(--ease-out, cubic-bezier(.22,.8,.3,1)) both; }
@keyframes gxIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.gx-more-rest{ margin-top:8px; }
.gx-cta{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  margin:44px 0 0; padding:26px 30px;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--line); border-radius:24px;
}
.gx-copy h3{ margin:0 0 6px; font-family:var(--font-display); font-weight:400; font-size:clamp(1.45rem, 1.05rem + 1vw, 1.95rem); line-height:1.05; letter-spacing:.02em; color:var(--text); }
.gx-copy p{ margin:0; color:var(--text-muted); font-size:.9rem; max-width:60ch; }
.gx-btn{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px; border-radius:999px; border:none; cursor:pointer;
  background:var(--ember); color:#121212; font-size:.95rem; font-weight:600; letter-spacing:.01em;
  transition:transform .25s var(--ease-out, ease), background-color .25s ease, box-shadow .25s ease;
}
.gx-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px -10px rgba(209,170,141,.7); }
.gx-btn:active{ transform:scale(.97); }
.gx-btn:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }
.gx-chev{ transition:transform .3s var(--ease-out, ease); }
.gx-btn.is-open .gx-chev{ transform:rotate(180deg); }
.gx-btn.is-open{ background:var(--surface-3); color:var(--text); box-shadow:inset 0 0 0 1px var(--ember-dim); }
.gx-disc-wrap{ padding-bottom:8px; }
.gear-disc-wrap .gear-disclosure{ margin-top:28px; }
@media (max-width:720px){
  .gx-cta{ flex-direction:column; align-items:stretch; text-align:left; gap:16px; padding:22px 20px; border-radius:20px; margin-top:34px; }
  .gx-btn{ justify-content:center; width:100%; padding:15px 20px; }
}
@media (prefers-reduced-motion:reduce){ .gx-more:not([hidden]){ animation:none; } }

/* ── Backing track: BPM por estilo (botões, chip na dock) e exportação MIDI ── */
#btStyleGroup [data-bt-style]::after{
  content:attr(data-bpm); margin-left:7px; font-size:.72em; opacity:.55; font-variant-numeric:tabular-nums;
}
#btStyleGroup [data-bt-style].active::after{ opacity:.75; }
.bpm-style{
  align-self:center; flex:0 0 auto; cursor:pointer;
  padding:5px 11px; border-radius:999px; font-size:.72rem; font-weight:500; letter-spacing:.02em;
  color:var(--text-faint); background:var(--surface-2); border:1px solid var(--line);
  white-space:nowrap; font-variant-numeric:tabular-nums;
  transition:color .25s ease, border-color .25s ease, background-color .25s ease;
}
.bpm-style[hidden]{ display:none; }
.bpm-style.is-match{ color:var(--ember); border-color:var(--ember-dim); }
.bpm-style:not(.is-match)::after{ content:' ↺'; }
.bpm-style:hover{ border-color:var(--ember-dim); color:var(--text); }
.bpm-style:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
.bt-export{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--line);
}
.bt-export-copy{ flex:1 1 280px; min-width:0; }
.bt-export-copy h4{ margin:0 0 3px; font-size:.9rem; font-weight:600; color:var(--text); }
.bt-export-copy p{ margin:0; font-size:.8rem; color:var(--text-faint); line-height:1.5; }
.bt-export-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.bt-export-btns .tap-btn.is-done{ border-color:var(--ember); color:var(--ember); }
@media (max-width:720px){
  .bpm-style{ padding:4px 9px; font-size:.68rem; }
  .bt-export-btns{ width:100%; }
  .bt-export-btns .tap-btn{ flex:1 1 0; justify-content:center; }
}

/* telemóvel: o chip de estilo não cabe na linha da dock, flutua logo acima dela */
@media (max-width:900px){
  .metro-dock .bpm-style{
    position:absolute; left:50%; top:-36px; transform:translateX(-50%);
    padding:6px 13px; font-size:.74rem; background:var(--surface-3);
    border-color:var(--ember-dim); box-shadow:0 6px 18px -8px rgba(0,0,0,.7);
  }
}

/* ecrãs de 320 px: a linha da dock era mais larga do que o ecrã */
@media (max-width:350px){
  .metro-dock .bpm-unit{ display:none; }
  .metro-dock .play-btn.sm{ padding:8px 12px; }
  .metro-dock .tap-btn{ padding:6px 9px; }
  .metro-sig select{ padding-left:8px; padding-right:24px; }
}

/* Backing track: crédito do kit real (licença CC BY exige indicar autor, licença e alterações) */
.bt-kit-credit{ margin:0 0 12px; font-size:.74rem; line-height:1.55; color:var(--text-faint); }
.bt-kit-credit #btKitStatus{ color:var(--ember); }
.bt-kit-credit[data-mode="synth"] #btKitCreditText,
.bt-kit-credit[data-mode="synth"] .text-link,
.bt-kit-credit[data-mode="error"] #btKitCreditText,
.bt-kit-credit[data-mode="error"] .text-link{ display:none; }
.bt-kit-credit[data-mode="synth"]{ display:none; }
.legal section#credits h3{ margin-top:22px; }
.bt-menu .bt-kit-credit{ font-size:.76rem; margin:6px 0 14px; }

/* Banner: a imagem desliza ligeiramente com o rato (só com rato; em toque fica estática).
   A camada fica um pouco maior que o banner para não aparecerem margens ao mexer. */
.site-banner{ --bx:0; --by:0; }
@media (hover:hover) and (pointer:fine){
  .site-banner::before{
    left:-52px; right:-52px; top:-20px;
    transform:translate3d(calc(var(--bx) * 1px), calc(var(--py) + var(--by) * 1px), 0);
  }
}
@media (prefers-reduced-motion:reduce){
  .site-banner::before{ transform:none !important; }
}

/* ── Copiar tab / Copiar link: por baixo dos botões dos exercícios ── */
.tab-side{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; min-width:0; max-width:100%; }
.tab-side .tab-actions{ justify-content:flex-end; }
.tab-side .tab-foot{ margin-top:0; justify-content:flex-end; gap:8px; }
@media (max-width:900px){
  .tab-side{ align-items:flex-start; }
  .tab-side .tab-actions, .tab-side .tab-foot{ justify-content:flex-start; }
}

/* Metalcore: com 7 estilos, o último botão ocupa a linha toda na grelha de 3 colunas (mobile) */
@media (max-width:720px){
  #btStyleGroup > button:last-child:nth-child(3n+1){ grid-column:1 / -1; }
}
@media (max-width:720px){
  #btStyleGroup{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  #btStyleGroup > button{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding-left:4px; padding-right:4px; min-width:0; line-height:1.15; }
  #btStyleGroup [data-bt-style]::after{ margin-left:0; font-size:.68em; }
}
@media (max-width:360px){
  #btStyleGroup > button{ font-size:.8rem; }
}

/* Ouvir (4 opções) e Progressão: em ecrãs estreitos passam a grelha de 2 colunas em vez de cortar */
@media (max-width:720px){
  #btMixGroup, #btProgGroup{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-radius:20px; width:100%; }
  #btMixGroup > button, #btProgGroup > button{ min-width:0; padding-left:8px; padding-right:8px; text-align:center; }
}
@media (max-width:360px){
  #btProgGroup{ grid-template-columns:minmax(0,1fr); }
}

/* ── Menu do exercício: descrição à esquerda; à direita Copiar tab · Copiar link · Velocidade · Tocar ──
   O botão de tocar fica no mesmo sítio que o da Improvisação (canto superior direito). */
.ex-menu-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px;
  padding:0 2px 12px; margin-bottom:12px; border-bottom:1px solid #2c2c2c;
}
.ex-menu-bar .ex-desc{ flex:1 1 260px; margin:0 8px 0 0; max-width:none; text-align:left; }
@media (max-width:1100px){ .ex-menu-bar .ex-desc{ flex:1 1 100%; margin:0 0 4px; } }
.ex-menu-bar .ex-speed-ctl{ display:contents; }
.ex-menu-bar .tap-btn{ flex:0 0 auto; margin-left:0; }
/* o menu de velocidade abre na própria linha, por baixo dos botões (sem ser cortado pelo scroll do painel) */
.ex-menu-bar .ex-speed-menu:not([hidden]){
  position:static; display:block; order:10; flex:1 1 100%;
  width:auto; min-width:0; max-width:none; margin-top:4px; padding:12px;
  background:var(--surface-2); border-color:#2e2e2e; box-shadow:none;
}
.ex-menu-bar .ex-speed-items{ flex-direction:row; flex-wrap:wrap; gap:6px; }
.ex-menu-bar .ex-speed-item{ width:auto; border:1px solid #2e2e2e; border-radius:999px; padding:6px 12px 6px 10px; min-height:34px; }
.ex-menu-bar .ex-speed-item[aria-checked="true"]{ border-color:var(--ember); }
@media (max-width:720px){
  .ex-menu-bar .ex-desc{ flex:1 1 100%; margin:0 0 4px; }
  .ex-menu-bar{ justify-content:flex-start; }
}
@media (max-width:480px){
  /* "Copiar tab", "Copiar link", "Velocidade" e "Tocar" distribuídos pela
     largura toda, numa única linha de 4 colunas iguais. */
  .ex-menu-bar{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
  .ex-menu-bar .ex-desc{ grid-column:1 / -1; }
  .ex-menu-bar .tap-btn{
    width:100%; justify-content:center; padding:0 4px; font-size:.72rem;
    white-space:normal; text-align:center; line-height:1.15;
  }
  .ex-menu-bar .ex-speed-menu:not([hidden]){ grid-column:1 / -1; }
}

/* Improvisação: instrumentos ligados/desligados em simultâneo (3 botões independentes) */
#btMixGroup{ gap:4px; }
#btMixGroup > button[aria-pressed="false"]{ opacity:.6; }
@media (max-width:720px){
  #btMixGroup{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:360px){
  #btMixGroup{ grid-template-columns:auto auto auto; justify-content:space-between; gap:2px; }
  #btMixGroup > button{ padding-left:6px; padding-right:6px; font-size:.74rem; white-space:nowrap; }
}

/* Espaço entre o braço e a secção de exercícios (tablatura): mais curto.
   Antes: 18 (painel) + 34 + 20 (hero) + 46 + 44 = ~144 px; agora ~44 px. */
.tab-section{ margin-top:20px; }
.tab-section .wrap{ padding-top:24px; }
@media (max-width:720px){
  .tab-section{ margin-top:12px; }
  .tab-section .wrap{ padding-top:20px; }
}

/* Link para o blog no canto superior esquerdo do banner (só EN e PT) */
.banner-blog{
  position:absolute; z-index:2; top:clamp(10px, 1.4vw, 20px); left:clamp(14px, 2.2vw, 30px);
  display:inline-flex; align-items:center; box-sizing:border-box; height:31px; padding:0 16px; border-radius:999px; line-height:1;
  background:rgba(18,18,18,0.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid var(--line); color:var(--text); font-size:0.8rem; font-weight:500; letter-spacing:0.02em;
  text-decoration:none; transition:border-color 0.12s ease;
}
.banner-blog:hover, .banner-blog:focus-visible{ border-color:var(--ember-dim); }
.banner-blog:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
@media (max-width:720px){ .banner-blog{ top:10px; left:14px; font-size:0.78rem; } }
@media (max-width:400px){ .banner-blog{ height:28px; padding:0 13px; font-size:0.76rem; } }
@media (pointer:coarse){ .banner-blog{ height:34px; font-size:0.8rem; } }
@media (pointer:coarse) and (max-width:400px){ .banner-blog{ height:32px; padding:0 13px; font-size:0.76rem; } }

/* ── Navegação no telemóvel e tablet (≤900 px) ───────────────────────────
   1) O braço sobe para logo a seguir à afinação/tónica/escala: os controlos
      secundários (cordas, casas, vista, focar, canhoto) passam para baixo.
   2) Barra de secções fixa no topo, que aparece depois do banner, com a
      secção atual destacada (Braço · Exercício · Acordes · Material · Blog).
   3) Aviso "Ver no braço" quando uma ação muda o braço fora do ecrã. */
.sec-nav{ display:none; }
.board-cue{ display:none; }
@media (max-width:720px){
  .panel{ display:flex; flex-direction:column; }
  .panel > .controls{ order:1; }
  .panel > .board-fade{ order:2; }
  .panel > .board-hint{ order:3; }
  .panel > .legend-row{ order:4; margin-top:14px; }
  .panel > .board-config{ order:5; margin-top:14px; margin-bottom:0; }
}
@media (max-width:900px){
  .sec-nav{
    display:block; position:fixed; top:0; left:0; right:0; z-index:55;
    background:rgba(18,18,18,0.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    padding-top:env(safe-area-inset-top);
    transform:translateY(-105%); visibility:hidden;
    transition:transform 0.24s var(--ease-out, ease), visibility 0s linear 0.24s;
  }
  .sec-nav.is-on{ transform:none; visibility:visible; transition:transform 0.24s var(--ease-out, ease), visibility 0s; }
  .sec-nav-row{
    display:flex; gap:6px; align-items:center; overflow-x:auto; overscroll-behavior-x:contain;
    padding:7px 10px; gap:4px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .sec-nav-row::-webkit-scrollbar{ display:none; }
  .sec-nav a{
    flex:0 0 auto; display:inline-flex; align-items:center; height:34px; padding:0 12px; border-radius:999px;
    border:1px solid var(--line); color:var(--text-muted); font-size:0.8rem; font-weight:500; letter-spacing:0.01em;
    text-decoration:none; white-space:nowrap; transition:background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .sec-nav a[hidden]{ display:none; }
  .sec-nav a.is-active{ background:var(--ember); border-color:var(--ember); color:#121212; font-weight:600; }
  .sec-nav a:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
  .sec-nav .sec-nav-blog{ margin-left:auto; color:var(--text); }

  #boardPanel, #tabSection, #chordsSection, #gearSection{ scroll-margin-top:58px; }

  .board-cue{
    display:inline-flex; align-items:center; gap:6px; position:fixed; z-index:56; left:50%;
    bottom:calc(var(--dock-h, 64px) + 12px); transform:translate(-50%, 12px); opacity:0; pointer-events:none;
    height:40px; padding:0 18px; border-radius:999px; border:0; background:var(--ember); color:#121212;
    font-size:0.86rem; font-weight:600; box-shadow:0 6px 24px rgba(0,0,0,0.45); cursor:pointer;
    transition:opacity 0.2s ease, transform 0.24s var(--ease-out, ease);
    -webkit-tap-highlight-color:transparent;
  }
  .board-cue[hidden]{ display:none; }
  .board-cue.is-on{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
  .board-cue:focus-visible{ outline:2px solid var(--text); outline-offset:3px; }
}
@media (max-width:389px){
  .sec-nav-row{ padding:7px 8px; }
  .sec-nav a{ padding:0 7px; font-size:0.74rem; }
}
/* telemóveis baixos (iPhone SE, 667 px ou menos): banner mais compacto para o
   braço caber no primeiro ecrã, acima da barra do metrónomo */
@media (max-width:720px) and (max-height:700px) and (orientation:portrait){
  .site-banner{ min-height:190px; }
  .banner-inner{ gap:7px; padding:50px 16px 14px; }
  .banner-kicker{ font-size:1.05rem; }
  .banner-logo img{ width:136px; }
  .hero{ padding-top:10px; }
}
/* telemóvel na horizontal: o ecrã é baixo, a barra de secções ocuparia espaço do braço */
@media (max-height:520px) and (orientation:landscape){
  .sec-nav{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .sec-nav, .sec-nav.is-on, .board-cue{ transition:none; }
}

/* ── Barra do metrónomo: fica acima dos menus abertos (Exercício, Improvisação,
   escalas…), que antes a tapavam e escondiam o botão de parar. ── */
@media (max-width:900px){
  .metro-dock{ z-index:80; }
}
/* em 351–389 px a linha não cabia (o compasso saía do ecrã): "BPM" passa para
   baixo do número e, em 320 px, os espaços encolhem */
@media (min-width:351px) and (max-width:389px){
  .metro-dock .bpm-readout{ flex-direction:column; align-items:center; gap:2px; }
  .metro-dock .bpm-number{ min-width:0; text-align:center; }
  .metro-dock .bpm-unit{ font-size:.6rem; letter-spacing:.06em; line-height:1; }
  .metro-dock-inner{ gap:4px; }
}
@media (max-width:350px){
  .metro-dock-inner{ gap:4px; }
}

/* ══ Abas Exercício e Improvisação ═════════════════════════════════════════
   1) Telemóvel: os dois botões ocupam metade da largura cada um, com a etiqueta
      por cima e o valor por baixo (com reticências se o texto for grande).
   2) O cabeçalho de cada aba (descrição + botões) fica colado ao topo quando se
      faz scroll dentro do painel.
   3) O Tocar da improvisação fica à direita. ═══════════════════════════════ */
.ex-pick-menu{ --menu-pt:16px; padding-top:0; }
.bt-menu{ --menu-pt:18px; }
@media (max-width:720px){
  .ex-pick-menu{ --menu-pt:12px; }
  .bt-menu{ --menu-pt:14px; }
}
.ex-menu-bar, .bt-menu-head{
  position:sticky; top:0; z-index:6; background:var(--surface-3);
  padding-top:var(--menu-pt); max-height:42vh; overflow-y:auto; overscroll-behavior:contain;
  box-shadow:0 12px 14px -14px rgba(0,0,0,.8);
}
.bt-menu-head{ padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid #2c2c2c; }
/* em janelas mais baixas o painel (e, por vezes, o cabeçalho fixo lá dentro)
   ganham barra de scroll vertical — sem isto ficava a barra branca do
   sistema, destoando do tema escuro. */
.ex-pick-menu, .ex-menu-bar, .bt-menu-head{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent; }
.ex-pick-menu::-webkit-scrollbar, .ex-menu-bar::-webkit-scrollbar, .bt-menu-head::-webkit-scrollbar{ width:8px; }
.ex-pick-menu::-webkit-scrollbar-track, .ex-menu-bar::-webkit-scrollbar-track, .bt-menu-head::-webkit-scrollbar-track{ background:transparent; }
.ex-pick-menu::-webkit-scrollbar-thumb, .ex-menu-bar::-webkit-scrollbar-thumb, .bt-menu-head::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18); border-radius:4px;
}
.ex-pick-menu::-webkit-scrollbar-thumb:hover, .ex-menu-bar::-webkit-scrollbar-thumb:hover, .bt-menu-head::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.3);
}
/* com o menu de velocidade aberto dentro do cabeçalho, ou em ecrãs muito baixos (telemóvel na horizontal), o cabeçalho rola com o resto */
.ex-menu-bar:has(.ex-speed-menu:not([hidden])){ position:static; max-height:none; box-shadow:none; }
@media (max-height:519px){
  .ex-menu-bar, .bt-menu-head{ position:static; max-height:none; box-shadow:none; }
}
@media (max-width:720px){
  .bt-menu-head{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; align-items:start; }
  .bt-menu-head .bt-intro{ font-size:.84rem; line-height:1.45; }
  .bt-menu-head .ex-play{ justify-self:end; min-width:calc(50% - 4px); max-width:100%; justify-content:center; }
  .ex-menu-bar .ex-desc{ font-size:.8rem; line-height:1.45; }
}
@media (min-width:481px) and (max-width:720px){
  .ex-menu-bar{ justify-content:flex-end; }
}
@media (max-width:720px){
  .tab-side{ width:100%; }
  /* auto-fit em vez de duas colunas fixas: hoje só existe o botão do
     Exercício (o de Improvisação deixou de estar no HTML), por isso a
     coluna vazia que sobrava ficava a desperdiçar metade da largura.
     Com auto-fit, uma única pastilha ocupa a largura toda; se um dia
     voltar a haver um segundo botão, voltam a ficar lado a lado. */
  .tab-actions{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:8px; align-items:stretch; width:100%; }
  .tab-actions .ex-pick-ctl{ min-width:0; }
  .tab-actions .ex-pick-btn{
    width:100%; min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto; column-gap:8px; row-gap:1px; align-items:center;
    text-align:left; padding:10px 14px; min-height:60px;
  }
  .tab-actions .ex-pick-k{ grid-column:1; grid-row:1; font-size:.76rem; line-height:1.2; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tab-actions .ex-pick-v{ grid-column:1; grid-row:2; font-size:1.05rem; line-height:1.25; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tab-actions .ex-pick-btn .ex-speed-caret{ grid-column:2; grid-row:1 / span 2; width:9px; height:9px; }
  .tab-actions .ex-pick-btn .bt-live{ position:absolute; top:9px; right:10px; }
}

/* ══ Afiliados (exceto o essencial) dentro de um contentor expansível ═══════
   Cordas, palhetas e afinador ficam sempre à vista; o resto abre com o botão. */
.gear-accs{ display:grid; gap:16px; margin:44px 0 0; }
.gear-acc{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px 24px;
  margin:0; padding:26px 30px;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--line); border-radius:var(--radius);
}
.gear-acc .gx-btn{ margin:0; }
.gear-panel{ grid-column:1 / -1; margin-top:8px; padding-top:4px; border-top:1px solid var(--line); min-width:0; }
.gear-panel[hidden]{ display:none; }
.gear-panel:not([hidden]){ animation:gxIn .5s var(--ease-out, cubic-bezier(.22,.8,.3,1)) both; }
.gear-panel #gearMore > .gear-sub:first-child, .gear-panel > .gear-grid:first-child{ margin-top:18px; }
.gear-panel #gearMoreRest > .gear-sub:first-child{ margin-top:30px; }
@media (max-width:720px){
  .gear-accs{ margin-top:34px; gap:14px; }
  .gear-acc{ grid-template-columns:minmax(0,1fr); padding:22px 16px; border-radius:var(--radius); gap:16px; }
  .gear-acc .gx-btn{ width:100%; justify-content:center; padding:15px 20px; }
}
@media (prefers-reduced-motion:reduce){ .gear-panel:not([hidden]){ animation:none; } }

/* Alemão e espanhol têm "Abspielen"/"Reproducir" no botão de tocar: a linha da barra do
   metrónomo não cabia até 430 px (o botão saía do ecrã). "BPM" passa para baixo do número,
   os espaços encolhem e o botão fica um pouco mais compacto. */
@media (max-width:430px){
  .metro-dock:lang(de) .bpm-readout, .metro-dock:lang(es) .bpm-readout{ flex-direction:column; align-items:center; gap:2px; }
  .metro-dock:lang(de) .bpm-number, .metro-dock:lang(es) .bpm-number{ min-width:0; text-align:center; }
  .metro-dock:lang(de) .bpm-unit, .metro-dock:lang(es) .bpm-unit{ display:block; font-size:.6rem; letter-spacing:.06em; line-height:1; }
  .metro-dock:lang(de) .metro-dock-inner, .metro-dock:lang(es) .metro-dock-inner{ gap:4px; }
  .metro-dock:lang(de) .play-btn.sm, .metro-dock:lang(es) .play-btn.sm{ padding:8px 11px; font-size:.78rem; }
  .metro-dock:lang(de) .metro-slider, .metro-dock:lang(es) .metro-slider{ gap:2px; }
}
@media (max-width:350px){
  .metro-dock:lang(de) .play-btn .ico, .metro-dock:lang(es) .play-btn .ico{ display:none; }
  .metro-dock:lang(de) .play-btn.sm, .metro-dock:lang(es) .play-btn.sm{ padding:8px 9px; font-size:.74rem; }
  .metro-dock:lang(de) .metro-sig select, .metro-dock:lang(es) .metro-sig select{ padding-left:6px; padding-right:22px; }
}

/* ══ Destaques do blog (só EN e PT) ═══════════════════════════════════════════
   1) Chip ao lado do "Blog" no topo do banner: sem altura extra, não mexe no braço.
   2) Bloco "Do blog" com 3 guias por baixo do material. ═══════════════════════ */
.banner-blogrow{
  position:absolute; z-index:2; top:clamp(10px, 1.4vw, 20px); left:clamp(14px, 2.2vw, 30px);
  display:flex; align-items:center; gap:8px; min-width:0;
  max-width:calc(50% - 160px - clamp(14px, 2.2vw, 30px));
}
.banner-blogrow .banner-blog{ position:static; flex:0 0 auto; }
/* Ticker de destaques no fundo do banner: corre sem fim da esquerda para a direita, por baixo do subtítulo.
   Não aumenta o banner (usa a folga de baixo); pára com o rato por cima ou com o foco. */
.blog-ticker{
  position:absolute; z-index:2; left:0; right:0; bottom:0; height:55px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.bt-track{ display:flex; width:max-content; height:100%; animation:btRun 90s linear infinite; will-change:transform; }
.blog-ticker:hover .bt-track, .blog-ticker:focus-within .bt-track{ animation-play-state:paused; }
@keyframes btRun{ from{ transform:translate3d(-50%,0,0); } to{ transform:translate3d(0,0,0); } }
.bt-half, .bt-dup{ display:flex; align-items:center; flex:0 0 auto; }
.bt-item{
  display:inline-flex; align-items:center; gap:8px; height:55px; padding:0 4px; white-space:nowrap; text-decoration:none;
  color:var(--text); font-size:0.8rem; font-weight:500; letter-spacing:0.01em;
}
.bt-title{ font-weight:400; color:#C9C9C9; }
.bt-item:hover .bt-title, .bt-item:focus-visible .bt-title{ color:var(--text); }
.bt-item:hover .bt-title, .bt-item:focus-visible .bt-title{ text-decoration:underline; text-underline-offset:3px; }
.bt-item:focus-visible{ outline:2px solid var(--ember); outline-offset:-2px; border-radius:6px; }
.bt-tag{
  display:inline-flex; align-items:center; box-sizing:border-box; height:20px; padding:0 8px; border-radius:999px;
  background:transparent; border:1px solid var(--ember); color:var(--ember);
  font-size:0.62rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
}
/* "Novo" pisca devagar (≈ 0,7 Hz) para chamar a atenção; "Destaque" fica parado */
.bt-tag.is-new{ animation:btBlink 1.4s ease-in-out infinite; }
@keyframes btBlink{ 0%, 45%{ opacity:1; } 70%, 100%{ opacity:.2; } }
@media (prefers-reduced-motion:reduce){ .bt-tag.is-new{ animation:none; } }
.bt-sep{ flex:0 0 auto; width:5px; height:5px; margin:0 26px; border-radius:50%; background:var(--ember-dim, #8a6a55); opacity:.8; }
/* ecrãs baixos: sem folga no banner, os destaques ficam só no bloco "Do blog" */
@media (max-width:720px) and (max-height:700px) and (orientation:portrait){ .blog-ticker{ display:none; } }
@media (max-height:520px) and (orientation:landscape){ .blog-ticker{ display:none; } }
@media (prefers-reduced-motion:reduce){
  .bt-track{ animation:none; transform:none; }
  .blog-ticker{ overflow-x:auto; scrollbar-width:none; -webkit-mask-image:none; mask-image:none; }
  .blog-ticker::-webkit-scrollbar{ display:none; }
}

.home-blog{ margin-top:56px; }
.hb-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px 24px; margin-bottom:22px; }
.hb-head h2{ margin:0 0 6px; font-family:var(--font-display, inherit); font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); line-height:1.1; letter-spacing:.01em; }
.hb-head p{ margin:0; color:var(--text-muted); font-size:.92rem; max-width:56ch; }
.hb-all{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; min-height:36px; color:var(--ember); font-weight:600; font-size:.88rem; text-decoration:none; white-space:nowrap; }
.hb-all:hover, .hb-all:focus-visible{ text-decoration:underline; text-underline-offset:3px; }
.hb-tools{ flex:0 0 auto; display:flex; align-items:center; gap:14px; }
.hb-nav-group{ display:inline-flex; gap:8px; }
.hb-nav{
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; cursor:pointer;
  border-radius:50%; background:var(--surface-2); border:1px solid var(--line); color:var(--text);
  transition:border-color .15s, color .15s, opacity .15s;
}
.hb-nav:hover:not(:disabled){ border-color:var(--ember-dim); color:var(--ember); }
.hb-nav:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
.hb-nav:disabled{ opacity:.35; cursor:default; }
/* carrossel: o 1.º da esquerda é sempre o guia mais recente; o seguinte espreita à direita */
.hb-grid{
  --hb-gap:16px;
  list-style:none; margin:-6px 0 0; padding:6px 0 4px; display:flex; gap:var(--hb-gap);
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; outline:0;
}
.hb-grid::-webkit-scrollbar{ display:none; }
.hb-grid > li{ flex:0 0 calc((100% - 3 * var(--hb-gap)) / 3.25); scroll-snap-align:start; min-width:0; }
/* cartão inteiro preenchido pela imagem, escurecida, com o texto por cima */
.hb-card{
  position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end;
  height:100%; aspect-ratio:4 / 3; overflow:hidden; text-decoration:none; color:#fff;
  background:#151515; border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .14s ease, transform .14s ease;
}
.hb-card:hover, .hb-card:focus-visible{ border-color:var(--ember-dim); transform:translateY(-2px); }
.hb-card:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
.hb-img{ position:absolute; inset:0; z-index:-2; display:block; background:#1a1a1a; overflow:hidden; }
.hb-img picture, .hb-img img{ display:block; width:100%; height:100%; }
.hb-img img{ object-fit:cover; filter:brightness(.8) saturate(.9); object-position:20% 0; transition:transform .5s ease, filter .3s ease; }
.hb-card:hover .hb-img img, .hb-card:focus-visible .hb-img img{ transform:scale(1.04); filter:brightness(.95) saturate(.95); }
.hb-noimg{ background:radial-gradient(120% 90% at 20% 10%, #3a2d24 0, #1a1a1a 60%); }
.hb-card::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.30) 30%, rgba(0,0,0,.82) 62%, rgba(0,0,0,.92) 100%);
}
.hb-body{ display:flex; flex-direction:column; gap:7px; padding:20px 22px 22px; min-width:0; }
.hb-cat{ color:var(--ember); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.hb-body strong{ font-family:var(--font-display); font-size:clamp(1.45rem, 1.1rem + 0.65vw, 1.75rem); line-height:1.02; font-weight:400; letter-spacing:.012em; text-wrap:balance; text-shadow:0 1px 10px rgba(0,0,0,.55); }
.hb-meta{ color:#D2D2D2; font-size:.78rem; }
@media (max-width:1100px){ .hb-grid > li{ flex-basis:calc((100% - 2 * var(--hb-gap)) / 2.3); } }
/* tablet e telemóvel: deslizar com o dedo; o cartão seguinte espreita à direita */
@media (max-width:900px){
  .hb-grid{
    --hb-gap:12px;
    margin:-6px calc(-1 * clamp(20px, 3vw, 56px)) 0; padding:6px clamp(20px, 3vw, 56px) 8px;
    scroll-padding:0 clamp(20px, 3vw, 56px);
  }
  .hb-grid > li{ flex-basis:min(78%, 360px); }
  .hb-card{ aspect-ratio:4 / 3; }
  .hb-body{ padding:16px 18px 18px; }
  .hb-body strong{ font-size:1.75rem; }
}
@media (max-width:720px){
  .home-blog{ margin-top:40px; }
  .hb-head{ flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:16px; }
  .hb-nav-group{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .hb-card, .hb-img img, .hb-nav{ transition:none; }
  .hb-card:hover{ transform:none; } .hb-card:hover .hb-img img, .hb-card:focus-visible .hb-img img{ transform:none; }
}


/* O bloco do blog tem a mesma largura útil das outras secções em ecrãs largos */
.home-blog .wrap{ max-width:var(--maxw-read); }

/* o ticker precisa de ~9 px a mais no banner para ter respiro em cima e em baixo */
.site-banner:has(.blog-ticker) .banner-sub{ margin-bottom:17px; }
@media (max-width:720px) and (max-height:700px) and (orientation:portrait){ .site-banner:has(.blog-ticker) .banner-sub{ margin-bottom:0; } }
@media (max-height:520px) and (orientation:landscape){ .site-banner:has(.blog-ticker) .banner-sub{ margin-bottom:0; } }
/* computador: o que o banner ganha com o ticker sai do espaço por cima do braço (o braço não desce) */
@media (min-width:721px){ .site-banner:has(.blog-ticker) ~ main .hero{ padding-top:11px; } }
@media (min-width:721px) and (max-width:1100px){ .site-banner:has(.blog-ticker){ min-height:232px; } }
@media (min-width:721px) and (max-height:520px) and (orientation:landscape){ .site-banner:has(.blog-ticker) ~ main .hero{ padding-top:10px; } }

/* ---- Afinação favorita (estrela junto ao seletor) ---- */
.field-tuning{ min-width:0; }
.fav-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  margin-bottom:7px; min-height:1.1em;
}
.controls .fav-head label{ margin:0; flex:0 0 auto; }
.fav-note{
  flex:0 1 auto; min-width:0; max-width:100%;
  font-size:0.7rem; line-height:1.3; letter-spacing:0.02em; color:var(--text-faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right;
}
.fav-back{
  all:unset; box-sizing:border-box; cursor:pointer; max-width:100%;
  display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom;
  font:inherit; color:var(--ember); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:var(--ember-dim); padding:8px 4px; margin:-8px -4px;
}
.fav-back:hover{ text-decoration-color:var(--ember); }
.fav-back:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; border-radius:3px; }
.fav-row{ --fav-s:36px; display:flex; align-items:center; gap:8px; min-width:0; }
@media (max-width:540px){ .fav-row{ --fav-s:34px; } }
.fav-row .select-wrap{ flex:1 1 auto; min-width:0; }
.fav-btn{
  position:relative; flex:0 0 auto; width:var(--fav-s); height:var(--fav-s);
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; cursor:pointer; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text-faint);
  transition:border-color .15s, color .15s, background-color .15s;
  -webkit-tap-highlight-color:transparent;
}
/* área de toque maior (≥44 px) sem aumentar o botão */
.fav-btn::after{ content:''; position:absolute; inset:-5px; }
.fav-btn svg{ width:16px; height:22px; fill:currentColor; stroke:none; transition:transform .15s; }
.fav-btn:hover{ border-color:var(--ember-dim); color:var(--ember); }
.fav-btn:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
.fav-btn.is-on{ color:var(--ember); border-color:var(--ember-dim); }
.fav-btn.is-on{ background:rgba(209,170,141,.12); }
.fav-btn.pop svg{ animation:favPop .38s cubic-bezier(.3,1.6,.5,1); }
@keyframes favPop{ 0%{ transform:scale(.7); } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion:reduce){
  .fav-btn, .fav-btn svg{ transition:none; }
  .fav-btn.pop svg{ animation:none; }
}
@media (max-width:540px){ .fav-head{ margin-bottom:4px; } }
@media (max-height:520px) and (min-width:560px){ .fav-head{ margin-bottom:3px; } .controls .fav-head label{ font-size:0.68rem; } }

/* Ícones das redes sociais no rodapé */
.footer-links a.footer-social{
  display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; margin:0; align-self:center;
  color:var(--text-faint); background-image:none; text-decoration:none;
}
.footer-links a.footer-social + a.footer-social{ margin-left:-6px; }
.footer-links{ align-items:center; }
.footer-links a.footer-social:hover{ color:var(--ember); text-decoration:none; background-size:0 0; }
.footer-links a.footer-social:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; border-radius:6px; }
.footer-links a.footer-social svg{ display:block; }

/* Sombra bem visível nos cartões de equipamento e de cursos (sobre o fundo escuro, uma sombra
   fraca não se vê): uma sombra curta e escura junto à borda + uma longa e difusa por baixo */
:root{
  --shadow-gear:
    0 1px 3px rgba(0,0,0,0.5),
    0 8px 18px -8px rgba(0,0,0,0.75),
    0 18px 32px -18px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-gear-hover:
    0 2px 4px rgba(0,0,0,0.5),
    0 14px 26px -10px rgba(0,0,0,0.85),
    0 26px 44px -20px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px var(--ember-dim);
}
.gear-card{ box-shadow:var(--shadow-gear); }
@media (hover:hover){ .gear-card:hover{ box-shadow:var(--shadow-gear-hover); } }

/* ── Contentores "Além do essencial" e "Cursos": mais volume e um CTA mais forte ──
   Ícone, etiquetas do que há lá dentro, número de sugestões, sombra com elevação e botão
   com brilho. O contentor inteiro (título/ícone) também abre. */
.gear-acc{
  position:relative; isolation:isolate;
  grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px 26px;
  padding:30px 34px;
  background:
    radial-gradient(70% 140% at 0% 0%, rgba(209,170,141,.10), rgba(209,170,141,0) 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid rgba(209,170,141,.16); border-radius:var(--radius);
  box-shadow:
    0 1px 3px rgba(0,0,0,.5),
    0 10px 22px -10px rgba(0,0,0,.75),
    0 22px 40px -22px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.gear-acc::before{
  content:''; position:absolute; top:0; left:28px; right:28px; height:2px; border-radius:2px; z-index:1;
  background:linear-gradient(90deg, var(--ember), rgba(209,170,141,0) 70%); opacity:.7; pointer-events:none;
}
@media (hover:hover){
  .gear-acc:hover{
    border-color:var(--ember-dim); transform:translateY(-2px);
    box-shadow:
      0 2px 4px rgba(0,0,0,.5),
      0 16px 30px -12px rgba(0,0,0,.85),
      0 30px 52px -26px rgba(0,0,0,.65),
      inset 0 1px 0 rgba(255,255,255,.07);
  }
  .gear-acc:has(.gx-btn.is-open):hover{ transform:none; }
}
.gx-copy{ min-width:0; cursor:pointer; }
.gx-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:12px; }
.gx-tags span{
  display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px;
  font-size:.72rem; font-weight:500; letter-spacing:.03em; color:var(--text-muted);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
}
.gx-tags .gx-count{ color:var(--ember); border-color:rgba(209,170,141,.4); background:rgba(209,170,141,.08); font-weight:700; }
.gx-tags .gx-count[hidden]{ display:none; }
.gear-acc .gx-btn{
  min-height:54px; padding:0 28px; font-size:1rem; font-weight:700; letter-spacing:.015em;
  box-shadow:0 14px 30px -10px rgba(209,170,141,.6), inset 0 1px 0 rgba(255,255,255,.35);
}
.gear-acc .gx-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -10px rgba(209,170,141,.8), inset 0 1px 0 rgba(255,255,255,.4); }
.gear-acc .gx-btn.is-open{ background:var(--surface-3); color:var(--text); box-shadow:inset 0 0 0 1px var(--ember-dim); }
.gear-acc .gx-btn.is-open:hover{ box-shadow:inset 0 0 0 1px var(--ember); transform:none; }
@media (max-width:720px){
  .gear-acc{ grid-template-columns:minmax(0,1fr); padding:22px 16px 18px; gap:14px; }
  .gear-acc::before{ left:18px; right:18px; }
  .gear-acc .gx-btn{ grid-column:1 / -1; width:100%; justify-content:center; min-height:52px; }
  .gx-tags{ margin-top:10px; }
}
@media (prefers-reduced-motion:reduce){ .gear-acc, .gear-acc .gx-btn{ transition:none; } .gear-acc:hover, .gear-acc .gx-btn:hover{ transform:none; } }

/* Telemóvel com ticker (ecrãs com mais de 700 px de altura): o ticker ficou 8 px mais alto */
@media (max-width:720px) and (min-height:701px) and (orientation:portrait){ .site-banner:has(.blog-ticker){ min-height:258px; } }

/* ── Sem "saltos" ao tocar/parar ──
   Os botões que trocam "Tocar" ↔ "Parar" reservam a largura do rótulo mais comprido
   (os dois rótulos ficam empilhados, o inativo invisível), e o ícone ▶/❚❚ tem largura fixa.
   Assim a barra do metrónomo e os botões não mudam de tamanho nem se deslocam. */
.lbl-stack{ display:inline-grid; justify-items:center; }
.lbl-stack > *{ grid-area:1 / 1; white-space:nowrap; }
.lbl-ghost{ visibility:hidden; pointer-events:none; }
.play-btn .ico, .ex-play-ico{ display:inline-block; width:1.15em; text-align:center; }
/* o ponto "a tocar" do separador ocupa sempre o seu lugar (só aparece quando toca) */
.ex-pick-btn .bt-live, .bt-pick-btn .bt-live{ display:inline-block; visibility:hidden; animation:none; }
.ex-pick-btn.is-on .bt-live, .bt-pick-btn.is-on .bt-live{ visibility:visible; animation:btLive 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .ex-pick-btn.is-on .bt-live, .bt-pick-btn.is-on .bt-live{ animation:none; } }
/* os menus dos separadores nunca precisam de deslocamento horizontal */
.ex-pick-menu{ overflow-x:hidden; }
/* braço que cabe no ecrã: sem barra horizontal por 1–3 px de bolas na última casa */
.board-scroll.is-fit{ overflow-x:hidden; }

/* ══ Barra fixa do braço (desktop) ══════════════════════════════════════════
   Aparece quando os controlos do braço saem por cima e o braço continua no
   ecrã: monograma, os mesmos controlos e os números das casas alinhados com
   as colunas. Desaparece quando o braço sai do ecrã. No telemóvel não existe
   (a barra de secções já faz esse trabalho e o espaço é curto). */
.board-bar{
  position:fixed; left:0; right:0; top:0; z-index:50;
  display:flex; flex-wrap:wrap; align-items:center; gap:0 5px;
  padding:0 clamp(10px, 2vw, 20px) 0;
  background:rgba(18,18,18,.6);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 8px 20px rgba(0,0,0,.42);
  transform:translateY(-100%); opacity:0; visibility:hidden;
  transition:transform .22s var(--ease-out), opacity .22s ease, visibility 0s linear .22s;
}
.board-bar.has-ruler{ padding-bottom:16px; }
.board-bar.is-on{
  transform:none; opacity:1; visibility:visible;
  transition:transform .22s var(--ease-out), opacity .22s ease, visibility 0s;
}
@media (prefers-reduced-motion:reduce){ .board-bar{ transition:none; } }
@media (max-width:900px){ .board-bar{ display:none; } }
.bb-logo{ flex:0 0 auto; display:flex; align-items:center; height:40px; }
.bb-logo img{ width:auto; height:22px; display:block; opacity:.9; }
.bb-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; flex:1 1 0; height:40px;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
}
.bb-row::-webkit-scrollbar{ display:none; }
.bb-row .select-wrap{ flex:0 0 auto; }
.bb-row .select-wrap select{ min-height:30px; height:30px; padding:4px 26px 4px 9px; font-size:.74rem; }
.bb-row .bb-sel-t select{ max-width:300px; }
.bb-row .bb-sel-s select{ max-width:168px; }
.bb-row .toggle-group{ flex:0 0 auto; }
.bb-row .toggle-group.sm button{ min-height:30px; height:30px; padding:0 7px; font-size:.7rem; }
.bb-row .stepper{ flex:0 0 auto; gap:2px; }
.bb-row .icon-btn.sm{ width:26px; height:26px; min-width:26px; }
.bb-row .stepper-value{ min-width:2.2ch; font-size:.8rem; }
.bb-row .pill-toggle{ flex:0 0 auto; min-height:30px; padding:5px 10px; font-size:.7rem; gap:6px; }
.bb-row .pill-toggle .pill-dot{ width:6px; height:6px; min-width:6px; }
.bb-row .tg-indicator{ display:none; }
/* o indicador deslizante não é clonado; o ativo pinta-se a si próprio para o
   texto escuro não ficar escuro sobre escuro */
.bb-row .toggle-group button.active{ background:var(--ember); color:#121212; border-color:var(--ember); }
.bb-ruler{ display:none; position:absolute; left:0; bottom:0; height:16px; overflow:hidden; pointer-events:none; }
.board-bar.has-ruler .bb-ruler{ display:block; }
.bb-ruler span{
  position:absolute; top:0; font-size:10px; line-height:16px; color:var(--text-faint);
  transform:translateX(-50%); font-variant-numeric:tabular-nums;
}
/* com a barra à vista, o painel do braço não fica debaixo dela ao saltar para o topo */
html.bb-on #boardPanel{ scroll-margin-top:76px; }
/* em portáteis estreitos escondem-se os dois controlos menos usados (continuam
   no painel do braço, um pouco acima) */
@media (min-width:901px) and (max-width:1370px){ .bb-row .bb-lefty{ display:none; } }
@media (min-width:901px) and (max-width:1300px){ .bb-row .bb-frets{ display:none; } }

/* ══ Transição entre páginas ═══════════════════════════════════════════════
   Um véu (body::after) cobre a página no primeiro pint e desvanece; ao clicar
   num link interno volta a fechar-se antes de navegar. Só CSS no que toca ao
   desenho: não esconde conteúdo de leitores de ecrã nem bloqueia cliques. */
@keyframes pgVeilIn{ from{ opacity:1; } to{ opacity:0; } }
@keyframes pgVeilOut{ from{ opacity:0; } to{ opacity:1; } }
body::after{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:var(--bg);
  animation:pgVeilIn .32s ease-out both;
}
html.pg-out body::after{ animation:pgVeilOut .18s ease-in both; }
html.pg-restored body::after{ animation:none; opacity:0; }
@media (prefers-reduced-motion:reduce){
  body::after{ animation:none; opacity:0; }
  html.pg-out body::after{ animation:none; opacity:0; }
}
@media print{ body::after{ display:none; } }

/* ══ Formulário de contacto (página legal) ═════════════════════════════════
   Sem backend: o formulário compõe um email e abre a aplicação de correio.
   Os campos são os clássicos: nome, email e mensagem. */
.contact-form{ display:grid; gap:14px; margin:18px 0 0; max-width:640px; }
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:640px){ .cf-row{ grid-template-columns:1fr; } }
.cf-field{ display:grid; gap:6px; font-size:0.82rem; color:var(--text-muted); }
.cf-field > span{ font-weight:600; letter-spacing:0.02em; }
.cf-field input, .cf-field textarea{
  width:100%; box-sizing:border-box; padding:10px 12px; border-radius:10px;
  border:1px solid #3a3a3a; background:#1b1b1b; color:var(--text);
  font:inherit; font-size:0.9rem;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.cf-field input:focus, .cf-field textarea:focus{ outline:none; border-color:var(--ember); box-shadow:0 0 0 2px rgba(209,170,141,.18); }
.cf-field textarea{ resize:vertical; min-height:120px; }
.cf-foot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.cf-send{
  padding:11px 22px; border-radius:999px; border:1px solid var(--ember); background:var(--ember);
  color:#121212; font-weight:700; font-size:0.88rem;
}
.cf-send:hover{ background:#dcb99e; border-color:#dcb99e; }
.cf-note{ margin:0; max-width:42ch; font-size:0.78rem; color:var(--text-faint); line-height:1.5; }

/* ══ Seletor de idioma fixo (blog, legal, contacto) ═══════════════════════
   Quando o seletor do cabeçalho sai do ecrã, fica um clone compacto no canto
   superior direito, alinhado com o monograma do canto oposto. */
.lang-float{
  position:fixed; z-index:60; top:12px; right:14px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.lang-float.is-on{ opacity:1; visibility:visible; transform:none; transition:opacity .18s ease, transform .18s ease, visibility 0s; }
.lang-float .select-wrap select{
  min-height:38px; background:rgba(18,18,18,.94); border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
}
@media (prefers-reduced-motion:reduce){ .lang-float{ transition:none; } }

/* ══ Página de contacto ═══════════════════════════════════════════════════ */
.contact-page .site-header{ border-bottom:1px solid var(--line-soft); }
.contact-main{ max-width:1080px; margin:0 auto; padding:56px 24px 80px; }
.contact-kicker{
  margin:0 0 10px; color:var(--ember); font-size:0.74rem; font-weight:700;
  letter-spacing:0.16em; text-transform:uppercase;
}
.contact-main h1{
  margin:0 0 14px; font-family:var(--font-display); font-weight:400; line-height:1;
  font-size:clamp(2.6rem, 6vw, 4rem); letter-spacing:0.01em;
}
.contact-lead{ margin:0 0 40px; max-width:56ch; color:var(--text-muted); font-size:1.05rem; line-height:1.65; }
.contact-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,0.75fr); gap:24px; align-items:start; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:minmax(0,1fr); } }
.contact-card{
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:28px; box-shadow:0 24px 50px -34px rgba(0,0,0,.9);
}
.contact-card h2{ margin:0 0 16px; font-family:var(--font-display); font-weight:400; font-size:1.7rem; letter-spacing:0.02em; }
.contact-card .contact-form{ margin:0; max-width:none; }
.contact-aside{ display:grid; gap:18px; }
.contact-info h3{ margin:0 0 6px; font-size:0.76rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-faint); font-weight:700; }
.contact-info p{ margin:0; color:var(--text-muted); font-size:0.94rem; line-height:1.6; }
.contact-info a{ color:var(--ember); text-decoration:none; }
.contact-info a:hover{ text-decoration:underline; }
.contact-list{ margin:10px 0 0; padding:0; list-style:none; display:grid; gap:9px; }
.contact-list li{ display:flex; gap:9px; color:var(--text-muted); font-size:0.9rem; line-height:1.55; }
.contact-list li::before{ content:'—'; color:var(--ember); flex:none; }
.contact-back{
  display:inline-flex; align-items:center; gap:7px; margin:0 0 22px;
  font-size:0.85rem; color:var(--text-muted); text-decoration:none;
}
.contact-back:hover{ color:var(--text); }

/* cabeçalho da página de contacto (o .hdr-tool vive no blog.css, que esta
   página não carrega) */
.contact-page .site-header .hdr-actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.contact-page .hdr-tool{
  display:inline-flex; align-items:center; height:34px; padding:0 15px; border-radius:999px; white-space:nowrap;
  border:1px solid var(--ember-dim); color:var(--ember); font-size:0.82rem; font-weight:600; text-decoration:none;
  transition:background-color .18s ease, color .18s ease;
}
.contact-page .hdr-tool:hover{ background:var(--ember); color:#121212; }
@media (max-width:720px){ .contact-page .hdr-tool{ height:32px; padding:0 11px; font-size:0.76rem; } }
/* a etiqueta comprida ao lado do logótipo desaparece nas páginas editoriais
   (nos artigos fica a categoria) */
.legal-page .brand-tag{ display:none; }
body.blog-page:has(.post-list) .brand-tag{ display:none; }

/* ── Barra fixa: etiquetas e separação do monograma ─────────────────────
   Os controlos clonados passam a trazer o rótulo por cima (era o que faltava
   na barra) e o monograma ganha folga para o focus ring do primeiro select
   nunca lhe tocar. */
.bb-logo{ margin-right:10px; }
.bb-row{ height:auto; min-height:44px; align-items:flex-end; }
.bb-field{ display:flex; flex-direction:column; gap:3px; flex:0 0 auto; min-width:0; }
.bb-label{
  font-size:0.56rem; line-height:1; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-faint); padding:0 0 1px 3px; white-space:nowrap;
}
.bb-field .select-wrap select{ min-height:30px; height:30px; }
.bb-field .toggle-group.sm button,
.bb-field .pill-toggle{ min-height:30px; height:30px; }
.board-bar.has-ruler{ padding-bottom:18px; }
html.bb-on #boardPanel{ scroll-margin-top:104px; }

/* ── Abas Exercício/Improvisação: outline ember; ativa preenchida ────────
   Fechada: fundo transparente e contorno na cor primária. Aberta: cor
   primária no fundo, texto preto, e a base sem borda para fundir no painel. */
.ex-pick-btn{
  background:transparent;
  border:1px solid var(--ember);
  color:var(--text);
}
.ex-pick-btn .ex-pick-k{ color:var(--text-muted); }
.ex-pick-btn .ex-pick-v{ color:var(--ember); }
.ex-pick-btn:not(.is-open):hover{
  background:rgba(209,170,141,.10);
  border-color:var(--ember);
}
.ex-pick-btn.is-open{
  background:var(--ember);
  border:1px solid var(--ember);
  color:#121212;
  box-shadow:none;
  /* o mesmo raio da aba fechada (.tap-btn 20px); a aba desce 6 px para se
     sobrepor ao painel e o fundo ember tapar a junção, em vez de ficar com
     os cantos de baixo direitos */
  border-radius:20px 20px 0 0;
  transform:translateY(1px);
}
.ex-pick-btn.is-open .ex-pick-k{ color:rgba(18,18,18,.66); }
.ex-pick-btn.is-open .ex-pick-v{ color:#121212; }
.ex-pick-btn.is-open .ex-speed-caret{ border-color:#121212; }
.ex-pick-btn.is-open::before{ content:none; }

/* ── Cards do gear: imagens de fundo a preto e branco ────────────────────
   O fundo (gradiente + foto) é herdado por um pseudo que leva o filtro; o
   texto fica por cima, a cores. */
.gear-card{ isolation:isolate; }
.gear-card::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:inherit;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  filter:grayscale(1) contrast(1.02);
  pointer-events:none;
}
/* badge de calibre (cordas/palhetas): pílula ember com texto preto */
.gear-card-badge{
  font-size:0.78rem; font-weight:800; letter-spacing:0.02em;
  padding:5px 12px; border-radius:999px;
}
/* o rótulo do controlo escondido tem de desaparecer com ele */
@media (min-width:901px) and (max-width:1300px){ .bb-row .bb-field:has(.bb-frets){ display:none; } }
@media (min-width:901px) and (max-width:1370px){ .bb-row .bb-field:has(.bb-lefty){ display:none; } }

/* ── Barra fixa: rótulos à esquerda em ecrãs largos ──────────────────────
   A partir de 1400 px a etiqueta fica ao lado do controlo (uma linha só);
   abaixo disso volta a ficar por cima, onde não há largura para as duas
   coisas. Para caber, afinam-se os selects e escondem-se os dois extras
   (foco grave e canhoto), que continuam no painel do braço. */
@media (min-width:1680px){
  .bb-field{ flex-direction:row; align-items:center; gap:5px; }
  .bb-label{ padding:0; }
  .bb-row .bb-sel-t select{ max-width:220px; }
  .bb-row .bb-sel-s select{ max-width:150px; }
  .bb-row .bb-sel-r select{ max-width:60px; }
}

/* afinamento da barra em modo inline (rótulo à esquerda) para caber em EN e
   nas línguas com etiquetas mais longas; frets/foco grave/canhoto ficam no
   painel do braço */
@media (min-width:1680px){
  .bb-row .bb-sel-t select{ max-width:190px; }
  .bb-row .bb-sel-s select{ max-width:145px; }
  .bb-row .bb-sel-r select{ max-width:55px; }
  .bb-label{ font-size:0.54rem; }
}

/* honeypot e confirmação do formulário de contacto */
.cf-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }
.cf-note.is-sent{ color:var(--ember); font-weight:600; }
.cf-send[disabled]{ opacity:.6; cursor:progress; }

/* ── Abas sempre alinhadas em cima ───────────────────────────────────────
   A aba ativa é mais alta (66) para o painel cair abaixo do subtítulo; o
   botão de improvisação fica com o mesmo topo, não centrado nem encostado
   ao fundo. */
.tab-actions{ align-items:flex-start; }
.tab-actions .bt-pick-ctl{ align-self:flex-start; }

/* ── Menu de exercícios: sem cartão escuro, com separadores finos ────────
   O fundo #1D1D1D de cada família saiu (ficava um bloco mais escuro que o
   painel); a lista passa a ser separada por linhas de 1 px. */
.ex-pick-menu .ex-picker .ex-row{
  background:transparent;
  border:0;
  padding:0;
  margin:0 0 10px;
}
.ex-pick-menu .ex-picker .ex-group > button{ position:relative; }
.ex-pick-menu .ex-picker .ex-group > button + button::after{
  content:''; position:absolute; left:6px; right:6px; top:-1px; height:1px;
  background:rgba(255,255,255,.06); pointer-events:none;
}
.ex-pick-menu .ex-picker .ex-row-label{ padding:0 6px; margin-bottom:2px; }
.ex-pick-menu .ex-picker .ex-group > button{ padding-left:6px; padding-right:6px; }

/* ── Em tablet, os botões da tab distribuem-se pela largura ──────────────*/
@media (min-width:721px) and (max-width:1100px){
  .ex-menu-bar{ gap:8px; }
  .ex-menu-bar .ex-desc{ flex:1 1 100%; margin:0 0 6px; }
  .ex-menu-bar .tap-btn,
  .ex-menu-bar .ex-speed-ctl{ flex:1 1 0; min-width:0; }
  .ex-menu-bar .ex-speed-ctl{ display:flex; }
  .ex-menu-bar .ex-speed-btn{ width:100%; justify-content:center; }
  .ex-menu-bar .ex-play{ flex:1 1 0; min-width:0; justify-content:center; }
}

/* badge do gear em Bebas Neue */
.gear-card-badge{
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:500;
  letter-spacing:0.03em;
}

/* abaixo de 950 px as quatro ações da tab preenchem a largura (2 colunas) */
@media (max-width:950px){
  .ex-menu-bar{ gap:8px; }
  .ex-menu-bar .ex-desc{ flex:1 1 100%; margin:0 0 6px; }
  .ex-menu-bar .tap-btn,
  .ex-menu-bar .ex-speed-ctl,
  .ex-menu-bar .ex-play{ flex:1 1 0; min-width:0; }
  .ex-menu-bar .ex-speed-ctl{ display:flex; }
  .ex-menu-bar .ex-speed-btn{ width:100%; justify-content:center; }
  .ex-menu-bar .ex-play{ justify-content:center; }
}
@media (max-width:720px){
  .ex-menu-bar{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .ex-menu-bar .ex-desc{ grid-column:1 / -1; margin:0; }
  .ex-menu-bar .tap-btn,
  .ex-menu-bar .ex-speed-ctl,
  .ex-menu-bar .ex-play{ width:100%; min-width:0; }
  .ex-menu-bar .ex-speed-ctl{ display:flex; }
  .ex-menu-bar .ex-speed-btn{ width:100%; justify-content:center; }
  .ex-menu-bar .ex-play{ justify-content:center; }
}

/* ── Barra fixa: todos os controlos com a mesma altura e centrados ───────
   Antes os grupos (38 px), os steppers (34), os selects (30) e as pílulas
   (30) tinham alturas diferentes e as etiquetas ficavam desencontradas.
   Fica tudo a 32 px (2px de padding + 1 de borda + 26 de conteúdo). */
.bb-row .select-wrap select{ height:32px; min-height:32px; }
.bb-row .toggle-group{ padding:2px; }
.bb-row .toggle-group button{ height:26px; min-height:26px; }
.bb-row .stepper{ padding:2px; align-items:center; }
.bb-row .icon-btn.sm{ width:26px; height:26px; min-width:26px; }
.bb-row .pill-toggle{ height:32px; min-height:32px; padding:0 12px; }
.bb-field{ justify-content:flex-end; }
.bb-row .toggle-group.sm button{ height:26px; min-height:26px; }

/* ── Logo da barra alinhado com os controlos ─────────────────────────────
   A barra centra o logo na altura toda (etiquetas + controlos); como os
   controlos ocupam os 32 px de baixo, o logo ficava 7 px acima. Passa a ter
   a altura de um controlo e a assentar no fundo, ficando centrado neles. */
.bb-logo{ height:32px; align-self:flex-end; }
.bb-logo img{ width:auto; height:22px; }

/* ── Rodapé: as duas linhas de texto à esquerda, alinhadas ───────────────*/
/* uma linha: monograma + copyright à esquerda, «Sem cookies…» ao centro,
   links à direita */
footer .wrap{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  grid-template-areas:"m a b c";
  align-items:center;
  gap:0 20px;
}
footer .wrap > span:nth-of-type(1){ grid-area:a; }
footer .wrap > span:nth-of-type(2){ grid-area:b; text-align:center; }
footer .wrap > .footer-links{ grid-area:c; justify-content:flex-end; }
footer .wrap > .foot-mark{ grid-area:m; align-self:center; display:inline-flex; text-decoration:none; }

.foot-mark img{ width:auto; height:28px; display:block; opacity:.9; transition:opacity .18s ease; }
.foot-mark:hover img{ opacity:1; }
@media (max-width:1100px){
  footer .wrap{ grid-template-columns:auto minmax(0,1fr); grid-template-areas:"m a" "m b" "c c"; gap:4px 14px; }
  footer .wrap > span:nth-of-type(2){ text-align:left; }
  footer .wrap > .footer-links{ justify-content:flex-start; }
}

/* aba inativa com raio de 16 px (a ativa mantém os cantos de cima) */
.ex-pick-btn:not(.is-open){ border-radius:16px; }

/* validação do formulário de contacto */
.cf-field .cf-err{ color:#e2795f; font-size:0.74rem; line-height:1.35; }
.cf-field input.is-invalid, .cf-field textarea.is-invalid{
  border-color:#c96a4f;
  box-shadow:0 0 0 2px rgba(201,106,79,.16);
}

/* com a barra fixa à vista, os controlos do painel (que a barra clona)
   escondem-se: ficavam a espreitar por baixo da barra, por cima da legenda.
   O espaço mantém-se (visibility) para não haver saltos de layout. */
html.bb-on #boardPanel .controls,
html.bb-on #boardPanel .board-config{ visibility:hidden; }


/* a legenda fica acima da grelha; com a barra à vista é escondida para não
   espreitar por baixo dela (o espaço mantém-se) */
html.bb-on #boardPanel .legend-row{ visibility:hidden; }

/* respiro no interior do escolhedor de exercícios */
.ex-pick-menu .ex-picker{ padding:1rem; box-sizing:border-box; }

/* rodapé sem o limite do wrap: ocupa a largura toda (a borda também) */
footer .wrap{ max-width:none; }

/* hover dos cartões de artigo: a foto passa a preto e branco */
.post-card.has-img:hover .post-card-img img,
.post-card.has-img:focus-visible .post-card-img img{ filter:grayscale(1) brightness(.95); }
.hb-card:hover .hb-img img,
.hb-card:focus-visible .hb-img img{ filter:grayscale(1) brightness(.95); }

/* a linha da barra cortava o anel de foco dos selects (overflow-y:hidden do
   scroll horizontal); um pouco de padding vertical dá-lhe espaço */
.bb-row{ padding:4px 0; }


/* 30 px entre o rodapé e o fundo da página */
footer .wrap{ padding-bottom:30px; }

/* nota de privacidade por baixo do botão do formulário de contacto */
.cf-privacy{ margin:2px 0 0; font-size:0.74rem; line-height:1.5; color:var(--text-faint); }
.cf-privacy a{ color:var(--text-muted); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.cf-privacy a:hover, .cf-privacy a:focus-visible{ color:var(--ember); }

/* barra fixa: controlos escondidos pelo encaixe automático (app.js, fit) */
.board-bar .bb-fit-hide{ display:none !important; }
.board-bar.bb-tight .bb-sel-t select{ max-width:150px; text-overflow:ellipsis; }

/* ── Botão Exercício: repouso preenchido, hover escuro ───────────────────
   Repouso: pílula ember cheia, texto escuro (legível e com peso de CTA).
   Hover: fundo escuro tingido de ember, contorno ember, texto branco; a seta
   passa a branco para não se perder (antes ficava #121212 sobre fundo escuro).
   O ponto "a tocar" sai do fluxo: antes reservava espaço à esquerda e o texto
   ficava descentrado. Aberto mantém as regras da aba (ember cheio). */
.ex-pick-btn:not(.is-open){ background:var(--ember); border-color:var(--ember); color:#121212; }
.ex-pick-btn:not(.is-open) .ex-pick-k{ color:rgba(18,18,18,.9); }
.ex-pick-btn:not(.is-open) .ex-pick-v{ color:#121212; transition:color .22s ease; }
.ex-pick-btn:not(.is-open) .ex-speed-caret{ border-color:#121212; opacity:.85; }
.ex-pick-btn:not(.is-open):hover{ background:rgba(209,170,141,.12); border-color:var(--ember); transform:none; }
.ex-pick-btn:not(.is-open):hover .ex-pick-k,
.ex-pick-btn:not(.is-open):hover .ex-pick-v{ color:var(--text); }
.ex-pick-btn:not(.is-open):hover .ex-speed-caret{ border-color:var(--text); opacity:.9; }
.ex-pick-btn .ex-speed-caret{ transition:transform var(--ex-dur) var(--ex-ease), border-color .22s ease; }
.ex-pick-btn:not(.is-open) .bt-live{ background:#121212; }
.ex-pick-btn:not(.is-open):hover .bt-live{ background:var(--ember); }
.ex-pick-btn.is-open .bt-live{ background:#121212; }
@media (min-width:721px){
  .ex-pick-btn .bt-live{ position:absolute; left:12px; top:50%; margin-top:-4px; }
}

/* ── Botão Exercício: sem pulso, com sombra ─────────────────────────────
   O anel que pulsava (exTabPing) e o pulso de chegada por link (exCue) saem;
   o destaque passa a ser uma sombra fixa: escura por baixo (assenta o botão)
   e um halo ember curto (lê-se sobre o fundo escuro). No hover a sombra recua
   com o fundo escuro; aberto (aba ligada ao painel) não tem sombra. */
.ex-pick-btn::after, .ex-pick-btn:not(.is-open)::after{ animation:none; display:none; }
.ex-pick-btn.is-cue{ animation:none; }
.ex-pick-btn:not(.is-open){ box-shadow:0 8px 18px -6px rgba(0,0,0,.75), 0 12px 30px -12px rgba(209,170,141,.55); }
.ex-pick-btn:not(.is-open):hover{ box-shadow:0 6px 14px -6px rgba(0,0,0,.7), 0 8px 22px -12px rgba(209,170,141,.35); }
.ex-pick-btn.is-open{ box-shadow:none; }

/* ══ Tapping: nota da mão direita ═════════════════════════════════════
   Forma diferente (quadrado escuro com contorno ember e «t»), não só cor:
   lê-se ao lado das notas da mão esquerda (círculos) e sem depender da cor. */
#fretGrid .note-dot.ex-rh{
  border-radius:28%;
  background:#121212; color:var(--ember);
  border:2px solid var(--ember);
  box-shadow:0 0 0 3px rgba(18,18,18,.9), 0 0 0 5px var(--string), 0 6px 16px rgba(0,0,0,.5);
  transform:scale(1.28); z-index:5; opacity:1; filter:none;
  animation:none;
}
#fretGrid .note-dot.ex-rh::before{
  content:'t'; position:absolute; top:-9px; right:-9px;
  width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--string); color:#121212;
  font-size:10px; font-weight:700; line-height:1; letter-spacing:0;
  box-shadow:0 0 0 2px #121212; pointer-events:none;
}
/* tablatura: o «t» e o número percutido com a mesma linguagem */
.tab-tech.is-tap{ opacity:1; color:var(--ember); font-weight:700; }
.tab-n.is-tap{ box-shadow:inset 0 0 0 1px rgba(209,170,141,.55); border-radius:3px; }
.tab-cell.is-now .tab-n.is-tap{ background:#121212; color:var(--ember); box-shadow:inset 0 0 0 2px var(--ember); }
/* legenda dos exercícios de tapping */
.ex-tap-legend{ display:flex; align-items:center; gap:10px; margin:8px 0 0; font-size:0.8rem; line-height:1.45; color:var(--text-faint); max-width:68ch; }
.ex-tap-swatch{
  flex:0 0 auto; position:relative; width:20px; height:20px; border-radius:28%;
  background:#121212; border:2px solid var(--ember); color:var(--ember);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; line-height:1;
}
@media (prefers-reduced-motion:reduce){ #fretGrid .note-dot.ex-rh{ transition:none; } }

/* ── ligações ao círculo das quintas (secção Acordes e por baixo do braço) ── */
.chords-head-act{ display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-left:auto; }
.cof-cta{ display:inline-flex; align-items:center; gap:6px; padding:8px 15px; border:1px solid var(--ember-dim); border-radius:999px;
  color:var(--ember); text-decoration:none; font-size:.84rem; font-weight:600; white-space:nowrap;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease; }
.cof-cta:hover{ border-color:var(--ember); background:rgba(209,170,141,.08); color:var(--text); }
.bh-end{ display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap; }
.cof-why{ color:var(--ember); text-decoration:none; border-bottom:1px solid var(--ember-dim); }
.cof-why:hover{ border-color:var(--ember); }

/* telemóvel: cartões do blog na página inicial mais largos e ao alto (4:5); a 4:3 o título
   de 4–5 linhas não cabia e tapava a categoria */
@media (max-width:720px){
  .chords-head-act{ width:100%; }
  .hb-grid > li{ flex-basis:86%; }
  .hb-card{ height:auto; aspect-ratio:4 / 5; }
  .hb-body strong{ font-size:1.6rem; }
}

/* ── Rodapé (todas as páginas): título grande e contacto à esquerda, colunas à
   direita, linha final com o © e o botão «Topo». Marcador ▸ na página atual. ── */
footer.lf-foot{ margin-top:auto; padding:0; border-top:1px solid var(--line-soft); background:#0f0f0f; color:var(--text-faint); }
/* fundo de aresta a aresta, conteúdo na mesma grelha das outras secções (o rodapé antigo já era assim) */
.lf-foot-in{ width:100%; max-width:var(--maxw-read); margin:0 auto; padding:64px clamp(20px, 3vw, 56px) 28px; }
.lf-foot-grid{ display:grid; grid-template-columns:minmax(0, 1.7fr) repeat(3, minmax(0, .62fr)); gap:40px 32px; align-items:start; }
.lf-foot-lead{ min-width:0; }
.lf-mark{ display:inline-flex; margin-bottom:26px; }
.lf-mark img{ display:block; height:30px; width:auto; opacity:.9; transition:opacity .18s ease; }
.lf-mark:hover img{ opacity:1; }
.lf-foot-title{ margin:0 0 18px; font-family:var(--font-display); font-weight:400; font-size:clamp(2.2rem, 1.5rem + 2.1vw, 3.6rem);
  line-height:.95; letter-spacing:.01em; color:var(--text); text-transform:uppercase; }
.lf-foot-text{ margin:0 0 22px; max-width:42ch; font-size:.86rem; line-height:1.6; color:var(--text-faint); }
.lf-foot-title .lf-acc{ color:var(--ember); font-family:var(--font-display); }  /* o * global punha a Clarity City no span */
.lf-foot-ctas{ display:flex; align-items:baseline; flex-wrap:wrap; gap:10px 26px; }
.lf-foot-part{ color:var(--text-faint); text-decoration:none; font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  border-bottom:1px solid var(--ember-dim); padding-bottom:2px; transition:color .15s ease, border-color .15s ease; }
.lf-foot-part:hover, .lf-foot-part:focus-visible{ color:var(--text); border-color:var(--ember); }
.lf-foot-mail{ display:inline-flex; align-items:center; gap:10px; color:var(--text); text-decoration:none;
  font-size:clamp(1.15rem, 1rem + .5vw, 1.45rem); letter-spacing:.01em; }
.lf-foot-mail span{ transition:transform .2s ease; }
.lf-foot-mail:hover{ color:var(--ember); }
.lf-foot-mail:hover span{ transform:translateX(4px); }
.lf-foot-col{ min-width:0; padding-top:56px; }            /* alinha as colunas com o título, não com o monograma */
.lf-foot-col h3{ margin:0 0 14px; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text); }
.lf-foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.lf-foot-col a{ position:relative; display:inline-flex; align-items:center; gap:6px; color:var(--text-faint); text-decoration:none;
  font-size:.8rem; transition:color .15s ease; }
.lf-foot-col a:hover, .lf-foot-col a:focus-visible{ color:var(--text); }
.lf-foot-nav{ padding-top:56px; }
.lf-foot-nav a{ font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.lf-foot-col .is-current a{ color:var(--text); }
.lf-foot-col .is-current a::before{ content:'▸'; position:absolute; left:-14px; font-size:.7em; color:var(--ember); }
.lf-ext{ font-size:.9em; color:var(--ember); }
.lf-foot-bottom{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px 24px; margin-top:56px; }
.lf-foot-bottom p{ margin:0; font-size:.72rem; line-height:1.6; color:var(--text-faint); }
.lf-foot .amp-desktop-note{ display:none; font-size:.72rem; }
.lf-top{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:5px; width:64px; height:64px; border:1px solid #3a3a3a; border-radius:50%;
  color:var(--text); text-decoration:none; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  transition:border-color .18s ease, color .18s ease, transform .18s ease; }
.lf-top:hover, .lf-top:focus-visible{ border-color:var(--ember); color:var(--ember); transform:translateY(-2px); }
@media (max-width:1000px){
  .lf-foot-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .lf-foot-lead{ grid-column:1 / -1; }
  .lf-foot-col, .lf-foot-nav{ padding-top:0; }
}
@media (max-width:720px){
  .lf-foot-in{ padding-top:44px; padding-bottom:22px; }
  .lf-foot-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:32px 20px; }
  .lf-foot-nav{ grid-column:1 / -1; }
  .lf-foot-nav ul{ flex-direction:row; flex-wrap:wrap; gap:12px 22px; }
  .lf-foot-col .is-current a::before{ position:static; margin-right:2px; }
  .lf-foot-bottom{ margin-top:40px; flex-wrap:wrap; }
  .lf-foot-bottom p{ flex:1 1 220px; }
  .lf-sep{ display:none; }
  .lf-foot-bottom p > span:last-child{ display:block; }
  .lf-foot .amp-desktop-note{ display:block; flex:1 1 100%; order:2; }
  .lf-top{ width:56px; height:56px; }
}
@media (max-width:720px), (pointer:coarse) and (max-height:500px){
  .lf-foot .amp-desktop-note{ display:block; }
}

/* formulário de contacto: seletor de assunto alinhado com os campos */
.cf-field .select-wrap{ display:block; }
.cf-field .select-wrap select{ width:100%; box-sizing:border-box; padding:10px 34px 10px 12px; border-radius:10px;
  border:1px solid #3a3a3a; background:#1b1b1b; color:var(--text); font-size:0.9rem; line-height:1.5;
  transition:border-color .16s ease, box-shadow .16s ease; }
.cf-field .select-wrap select:focus{ outline:none; border-color:var(--ember); box-shadow:0 0 0 2px rgba(209,170,141,.18); }

/* ── Ecrãs largos mas baixos: o banner das ferramentas ───────────────
   O bloco de 920px acima comprime o cabeçalho antigo (.site-header), que
   continua a ser o das 28 páginas de blog e do círculo. As páginas de
   ferramenta usam .site-banner, que se dimensiona SÓ pela largura (min-height
   e logo em vw): num 1440x790 dava o banner mais alto no ecrã mais baixo e o
   braço ficava cortado.
   Em vez de encolher e esconder texto, o que falta é altura e o que sobra é
   largura: o kicker passa para a esquerda do logótipo e o subtítulo para a
   direita (lockup horizontal). O logótipo cresce e o banner fica mais baixo.
   O ticker é position:absolute no fundo do banner, por isso encolhê-lo não
   liberta altura — a padding inferior é que o limpa. */
@media (min-width:721px) and (max-height:860px){
  .site-banner, .site-banner:has(.blog-ticker){ min-height:30vh; }
  .banner-inner{
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    column-gap:clamp(20px, 3vw, 48px); gap:0 clamp(20px, 3vw, 48px);
    width:100%; padding:14px clamp(16px, 11vw, 190px) 48px;
  }
  .banner-kicker{
    grid-column:1; grid-row:1; justify-self:end; text-align:right;
    font-size:clamp(1.15rem, 0.6rem + 1.1vw, 1.65rem);
    /* o kicker é mais curto do que o subtítulo e, sem isto, ficava numa só linha
       enquanto o subtítulo (mais comprido) quebrava em duas: o lockup ficava
       descompensado. O max-width força as duas colunas a quebrar da mesma forma. */
    max-width:10ch; text-wrap:balance;
  }
  .banner-logo{ grid-column:2; grid-row:1; }
  .banner-logo img{ width:auto; height:min(19vh, 172px); }
  .banner-sub,
  .site-banner:has(.blog-ticker) .banner-sub{
    grid-column:3; grid-row:1; justify-self:start; text-align:left; margin:0;
    font-size:clamp(0.72rem, 0.32rem + 0.48vw, 0.96rem);
    max-width:20ch; text-wrap:balance;
  }
  .blog-ticker{ height:42px; }
}
/* Larguras médias (ex. 1024×768): a almofada de 11vw + o logótipo deixava as
   colunas do kicker/subtítulo com uns 224px só — estreito demais para o
   subtítulo (mais longo, sobretudo em PT) quebrar em exatamente duas linhas,
   por mais que max-width permitisse mais: a coluna do grid é que manda. Isto
   só se aperta até 1100px de largura e com altura > 740px, onde o kicker e o
   subtítulo já ficam bem abaixo do seletor de idioma (sem risco de colidir
   com ele ao ganharem mais largura). Abaixo de 740px o texto sobe para perto
   do seletor e a almofada generosa continua a ser precisa. */
@media (min-width:721px) and (max-width:1100px) and (min-height:741px) and (max-height:860px){
  .banner-inner{
    padding-inline: clamp(16px, 7vw, 150px);
    column-gap: clamp(14px, 2vw, 40px); gap:0 clamp(14px, 2vw, 40px);
  }
}
/* abaixo de 740px de altura: mesmo lockup, logótipo um pouco menor e ticker
   mais baixo — o que sobra de altura é só o necessário para o braço caber */
@media (min-width:721px) and (max-height:740px){
  .banner-inner{ padding-top:10px; padding-bottom:42px; }
  .banner-logo img{ height:min(13vh, 104px); }
  .blog-ticker{ height:34px; }
  .board-scroll{ padding-bottom:8px; }
}
/* Ecrãs muito largos de altura média (1920x900, 1680x900): aqui a altura do
   banner vem da largura (19.7vw dá 378px a 1920) e volta a empurrar o braço
   para fora do ecrã, mesmo com 900px de altura. Corte suave: o kicker e o
   subtítulo ficam, só se apertam as margens e o logótipo. */
@media (min-width:1500px) and (min-height:861px) and (max-height:980px){
  .site-banner, .site-banner:has(.blog-ticker){ min-height:min(clamp(210px, 19.7vw, 420px), 34vh); }
  .banner-inner{ gap:14px; padding:24px 16px 50px; }
  .banner-logo img{ width:auto; height:min(15vh, 172px); }
}

/* Botões das cordas (D4, A3…) em ecrã largo: o <select> tem 37px de altura por
   causa do padding, mas a linha do braço varia entre 30 e 44px conforme a
   altura livre do ecrã e o nº de cordas (as afinações de 7/8 cordas, muito
   usadas em Drop, dão linhas bem mais baixas — até 30px). Com a linha abaixo
   de 37px os botões sobrepunham-se. Só encolher a altura não chega: a forma
   em pílula (raio 999px) fica esticada numa linha baixa e parece gorda e
   colada à seguinte. Por isso o raio passa a fixo (deixa de ser pílula) e o
   intervalo entre botões aumenta. O telemóvel já tinha a sua regra. */
@media (min-width:721px){
  .string-label .string-select{
    height:min(37px, calc(100% - 6px)); min-height:0;
    padding-top:0; padding-bottom:0; line-height:1;
    border-radius:9px;
  }
}
@media (min-width:721px) and (hover:none) and (pointer:coarse){
  .string-label .string-select{ height:min(40px, calc(100% - 6px)); }
}

/* ══ Perguntas frequentes (home) ═════════════════════════════════════════
   Mesmo contentor das outras secções (1450 px). Em ecrãs largos: título à
   esquerda, perguntas à direita; abaixo de 980 px, uma só coluna. */
.home-faq{ padding:0 0 72px; }
.home-faq .wrap{ max-width:var(--maxw-read); }
.hf-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:18px 56px; align-items:start; }
@media (min-width:980px){ .hf-grid{ grid-template-columns:minmax(0,1fr) minmax(0,2fr); } }
.hf-kicker{ margin:0 0 8px; color:var(--ember); font-size:0.72rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; }
.hf-head h2{ font-family:var(--font-display); font-size:clamp(1.3rem, 3vw, 1.7rem); font-weight:400; margin:0 0 8px; }
.hf-head p:last-child{ margin:0; color:var(--text-muted); font-size:0.9rem; max-width:40ch; }
.hf-item{ border-top:1px solid var(--line-soft); }
.hf-item:last-child{ border-bottom:1px solid var(--line-soft); }
.hf-item summary{
  cursor:pointer; list-style:none; position:relative; padding:17px 36px 17px 0;
  font-weight:600; font-size:0.96rem; color:var(--text);
}
.hf-item summary::-webkit-details-marker{ display:none; }
.hf-item summary::after{ content:'+'; position:absolute; right:6px; top:12px; font-size:1.35rem; line-height:1.2; color:var(--ember); transition:transform .2s ease; }
.hf-item[open] summary::after{ transform:rotate(45deg); }
.hf-item summary:hover{ color:var(--ember); }
.hf-item summary:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; border-radius:2px; }
.hf-item p{ margin:0 0 18px; color:var(--text-muted); font-size:0.92rem; line-height:1.65; max-width:72ch; }
.hf-item b{ color:var(--text); font-weight:600; }
@media (max-width:720px){ .home-faq{ padding-bottom:48px; } }
@media (prefers-reduced-motion:reduce){ .hf-item summary::after{ transition:none; } }

/* ══ Página 404 ══════════════════════════════════════════════════════════ */
.nf-links{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.nf-links a{ display:inline-flex; align-items:center; min-height:40px; padding:0 18px; border:1px solid var(--ember-dim); border-radius:999px; color:var(--text); text-decoration:none; font-size:0.92rem; }
.nf-links a:hover{ border-color:var(--ember); color:var(--ember); }
.nf-alt{ margin-top:36px; color:var(--text-muted); font-size:0.9rem; }
.nf-alt a{ color:var(--ember); }