@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* ---------- view: home ---------- */
.view-home .hero { position: relative; background: var(--noite); }
.view-home .slides { display: grid; }
.view-home .slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); height: clamp(540px, 74vh, 780px); background: var(--bg); color: var(--fg); opacity: 0; visibility: hidden; transition: opacity 600ms var(--ease), visibility 0s linear 600ms; }
.view-home .slide.is-active { opacity: 1; visibility: visible; transition: opacity 600ms var(--ease), visibility 0s; }
.view-home .slide-text { display: grid; align-content: end; gap: 1.1rem; padding: clamp(1.5rem, 4vw, 3.5rem); padding-bottom: clamp(2rem, 4.5vw, 3.8rem); }
.view-home .slide-text .eyebrow { opacity: .9; }
.view-home .slide-text h2 { font-size: var(--fs-4xl); font-stretch: 76%; line-height: .84; letter-spacing: -0.03em; }
.view-home .slide-text p.lede { font-size: var(--fs-md); max-width: 34ch; line-height: 1.45; }
.view-home .slide-text .btn { justify-self: start; margin-top: .4rem; }
.view-home .slide-media { position: relative; overflow: hidden; background: var(--noite-2); }
.view-home .slide-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 7s linear; }
.view-home .slide.is-active .slide-media img { transform: scale(1); }
.view-home .hero-bar { background: var(--noite); border-top: 1px solid var(--noite-3); }
.view-home .hero-bar .wrap { display: flex; align-items: stretch; gap: 1rem; }
.view-home .tabs { display: flex; flex: 1; overflow-x: auto; scrollbar-width: none; }
.view-home .tabs::-webkit-scrollbar { display: none; }
.view-home .tab { flex: 1 0 auto; position: relative; min-height: 58px; padding: 0 1rem; background: none; border: 0; cursor: pointer; text-align: left; font-weight: 700; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--claro-2); white-space: nowrap; }
.view-home .tab:hover, .view-home .tab[aria-selected="true"] { color: var(--claro); }
.view-home .tab::before { content: ""; position: absolute; left: 1rem; right: 1rem; top: 0; height: 3px; background: #3A3632; }
.view-home .tab .bar { position: absolute; left: 1rem; right: 1rem; top: 0; height: 3px; transform-origin: left; transform: scaleX(0); background: var(--laranja); }
.view-home .tab[aria-selected="true"] .bar { transform: scaleX(1); }
.view-home .hero.is-playing .tab[aria-selected="true"] .bar { animation: fill 7s linear forwards; }
.view-home .hero.is-holding .tab[aria-selected="true"] .bar { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.view-home .hero.is-playing .tab[aria-selected="true"] .bar { animation-duration: 7s !important; }
}
.view-home .hero-controls { display: flex; align-items: center; gap: .35rem; }
.view-home .icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: transparent; border: 1px solid #4A4540; cursor: pointer; color: var(--claro); }
.view-home .icon-btn:hover { border-color: var(--claro); }
.view-home .icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.view-home .live .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 5vw, 5rem); }
.view-home .live .shows { border-top: 2px solid var(--tinta); }
.view-home .live-links { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; margin-top: 1.5rem; }
.view-home .player { position: relative; aspect-ratio: 16 / 9; background: var(--noite); overflow: hidden; border-radius: 4px; }
.view-home .player .poster { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.view-home .player img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.view-home .player .poster:hover img { transform: scale(1.03); }
.view-home .play { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; background: var(--laranja); display: grid; place-items: center; box-shadow: 0 6px 30px rgba(0,0,0,.35); }
.view-home .play::after { content: ""; margin-left: 7px; border-left: 25px solid var(--tinta); border-top: 15px solid transparent; border-bottom: 15px solid transparent; }
.view-home .embed-note { position: absolute; inset: 0; display: grid; place-content: center; gap: .5rem; text-align: center; padding: 1.5rem; color: var(--claro); background: var(--noite-2); }
.view-home .embed-note b { font-family: var(--f-display); font-stretch: 85%; font-size: var(--fs-lg); }
.view-home .feat-meta { display: grid; gap: .3rem; margin-top: 1rem; }
.view-home .feat-meta .eyebrow { color: var(--semente); }
.view-home .feat-meta h3 { font-size: var(--fs-xl); font-stretch: 88%; line-height: 1.05; }
.view-home .thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.view-home .thumb { display: grid; gap: .5rem; align-content: start; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; }
.view-home .thumb .ti { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--noite); border-radius: 4px; outline: 3px solid transparent; outline-offset: 2px; }
.view-home .thumb img { width: 100%; height: 100%; object-fit: cover; }
.view-home .thumb[aria-pressed="true"] .ti { outline-color: var(--laranja); }
.view-home .thumb .tl { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--semente); }
.view-home .thumb .tt { font-size: var(--fs-base); line-height: 1.3; font-weight: 600; }
.view-home .thumb .now { font-size: var(--fs-xs); font-weight: 700; color: var(--tinta-2); }
@media (max-width: 1080px) {
.view-home .live .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
.view-home .slide { grid-template-columns: 1fr; grid-template-rows: 60vw auto; height: auto; }
.view-home .slide-media { grid-row: 1; }
.view-home .slide-text { grid-row: 2; align-content: start; }
}
@media (max-width: 600px) {
.view-home .thumbs { gap: .6rem; }
.view-home .thumb .tt { font-size: var(--fs-sm); }
}

/* ---------- view: novo ---------- */
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .nova-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: clamp(560px, 80vh, 820px); background: var(--noite); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .nova-hero .ph { position: relative; overflow: hidden; background: #3A3632; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .nova-hero .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 30%; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .nova-hero .tx { display: grid; align-content: end; gap: 1.2rem; padding: clamp(1.5rem, 4vw, 3.5rem); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .nova-hero .eyebrow { color: var(--laranja); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .nova-hero h1 { font-size: var(--fs-5xl); font-stretch: 70%; line-height: .78; letter-spacing: -0.04em; color: var(--laranja); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .nova-hero .by { font-family: var(--f-display); font-weight: 800; font-stretch: 88%; font-size: var(--fs-lg); line-height: 1; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .nova-hero .lede { font-size: var(--fs-md); max-width: 38ch; line-height: 1.45; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .nova-hero .actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .concept { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .concept .portrait { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; position: sticky; top: 140px; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .concept .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .concept h2 { font-size: var(--fs-3xl); margin-bottom: 1.8rem; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .concept .body { display: grid; gap: 1.2rem; font-size: var(--fs-md); line-height: 1.55; max-width: 38em; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .concept .body p:first-child { font-size: 1.2em; font-weight: 500; line-height: 1.45; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) details.release { margin-top: 2rem; border-top: 2px solid var(--tinta); border-bottom: 1px solid var(--linha-clara); max-width: 38em; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) details.release summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 60px; font-weight: 700; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) details.release summary::-webkit-details-marker { display: none; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) details.release summary::after { content: "+"; font-size: var(--fs-lg); font-weight: 400; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) details.release[open] summary::after { content: "−"; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) details.release .rel { padding-bottom: 1.4rem; display: grid; gap: .9rem; color: var(--tinta-2); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .listen { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .cover { border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .platforms { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .platforms a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1.5px solid #4A4540; text-decoration: none; font-weight: 700; font-size: var(--fs-sm); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .platforms a:hover { border-color: var(--laranja); color: var(--laranja); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .tracks { border-top: 2px solid var(--claro); counter-reset: none; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .track { display: grid; grid-template-columns: 2.4rem 44px minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: center; padding-block: .75rem; border-bottom: 1px solid var(--noite-3); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .track .no { font-variant-numeric: tabular-nums; color: var(--claro-2); font-weight: 600; font-size: var(--fs-sm); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .track .pv { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #5A554F; background: none; color: var(--claro); cursor: pointer; display: grid; place-items: center; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .track .pv:hover { border-color: var(--laranja); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .track .pv svg { width: 16px; height: 16px; fill: currentColor; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .track .pv[aria-pressed="true"] { background: var(--laranja); border-color: var(--laranja); color: var(--tinta); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .track .tt { font-family: var(--f-display); font-weight: 750; font-stretch: 90%; font-size: var(--fs-md); line-height: 1.15; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .track .cr { font-size: var(--fs-sm); color: var(--claro-2); line-height: 1.35; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .track .cr a { color: var(--areia); text-underline-offset: .2em; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .track .du { font-variant-numeric: tabular-nums; color: var(--claro-2); font-size: var(--fs-sm); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .track.is-playing .tt { color: var(--laranja); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .trio-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .trio-top .ph { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .trio-top .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .trio-top p { font-size: var(--fs-md); line-height: 1.55; max-width: 40ch; }
/* As três colunas precisam ter a MESMA largura. Antes o primeiro bloco não tinha recuo
   à esquerda (para o texto encostar na margem) e os outros dois tinham: a diferença era
   invisível enquanto era só texto, que reflui, e ficou gritante quando cada integrante
   ganhou retrato — a foto do Hamilton saía 1,3rem maior que as outras duas. Agora o
   respiro é a calha da grade, igual para todos, e o risco separador mora dentro dela. */
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .members { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.6rem; border-top: 2px solid var(--tinta); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .member { padding: 1.3rem 0 1.5rem; display: grid; gap: .3rem; align-content: start; position: relative; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .member + .member::before { content: ""; position: absolute; left: -1.3rem; top: 0; bottom: 0; border-left: 1px solid rgba(18,17,16,.25); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .member .nm { font-family: var(--f-display); font-weight: 800; font-stretch: 82%; font-size: var(--fs-xl); line-height: 1; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .member .ins { font-weight: 700; font-size: var(--fs-sm); color: var(--semente); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .member p { font-size: var(--fs-base); line-height: 1.45; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .subhead { font-size: var(--fs-xl); margin: clamp(3rem, 6vw, 4.5rem) 0 1.2rem; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .guests { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .guest { background: var(--tinta); color: var(--papel); border-radius: 14px; padding: 1.2rem; display: grid; gap: .5rem; align-content: start; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .guest .nm { font-family: var(--f-display); font-weight: 800; font-stretch: 85%; font-size: var(--fs-lg); line-height: 1.02; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .guest .ins { font-weight: 700; font-size: var(--fs-sm); color: var(--laranja); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .guest p { font-size: var(--fs-sm); line-height: 1.45; color: var(--claro-2); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .guest a { color: var(--papel); font-weight: 700; font-size: var(--fs-sm); text-underline-offset: .2em; margin-top: .2rem; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .players { columns: 3 260px; column-gap: 2rem; border-top: 2px solid var(--tinta); padding-top: .5rem; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .players li { break-inside: avoid; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem 1rem; padding-block: .7rem; border-bottom: 1px solid rgba(18,17,16,.2); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .players .nm { font-weight: 700; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .players .ins { color: var(--tinta-2); font-size: var(--fs-sm); text-align: right; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .players .on { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--tinta-2); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .quote .wrap { padding-block: clamp(3.5rem, 8vw, 6.5rem); display: grid; gap: 1.4rem; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .quote blockquote { margin: 0; font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-size: var(--fs-3xl); line-height: .95; letter-spacing: -0.02em; max-width: 18ch; text-wrap: balance; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .quote figcaption { font-weight: 700; font-size: var(--fs-base); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vid-layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 1.5rem; align-items: start; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vplayer { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--noite-2); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vplayer .poster { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vplayer img { width: 100%; height: 100%; object-fit: cover; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vplayer .play { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: var(--laranja); display: grid; place-items: center; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vplayer .play::after { content: ""; margin-left: 7px; border-left: 26px solid var(--tinta); border-top: 16px solid transparent; border-bottom: 16px solid transparent; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vplayer .embed-note { position: absolute; inset: 0; display: grid; place-content: center; gap: .5rem; text-align: center; padding: 1.5rem; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vplayer .embed-note b { font-family: var(--f-display); font-stretch: 85%; font-size: var(--fs-lg); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vmeta { margin-top: .9rem; display: grid; gap: .25rem; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vmeta .eyebrow { color: var(--laranja); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vmeta h3 { font-size: var(--fs-xl); font-stretch: 88%; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vlist { display: grid; gap: .3rem; max-height: 560px; overflow-y: auto; padding-right: .3rem; scrollbar-color: #5A554F transparent; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vitem { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: .8rem; align-items: center; padding: .45rem; border-radius: 10px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vitem:hover { background: var(--noite-2); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vitem[aria-pressed="true"] { background: var(--noite-3); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vitem .th { aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: var(--noite-3); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vitem .th img { width: 100%; height: 100%; object-fit: cover; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vitem .k { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--laranja); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vitem .t { font-weight: 600; font-size: var(--fs-base); line-height: 1.3; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .diary-tabs { margin-bottom: 1.4rem; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .diary { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .diary .ph { border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--papel-2); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .diary .ph img { width: 100%; height: 100%; object-fit: cover; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .diary .city { font-size: var(--fs-3xl); font-stretch: 72%; margin-bottom: .9rem; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .diary p { font-size: var(--fs-md); line-height: 1.55; max-width: 38ch; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .media-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .press-feature { display: grid; gap: 1rem; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .press-feature .ph { border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .press-feature .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 55%; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .press-feature .src { font-weight: 700; color: var(--laranja); letter-spacing: .08em; text-transform: uppercase; font-size: var(--fs-xs); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .press-feature h3 { font-size: var(--fs-2xl); font-stretch: 82%; line-height: 1; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .audios { border-top: 2px solid var(--claro); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .audio { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1rem; align-items: center; padding-block: 1rem; border-bottom: 1px solid var(--noite-3); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .audio .k { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--areia); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .audio .t { font-weight: 600; font-size: var(--fs-base); line-height: 1.35; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .gallery { columns: 4 240px; column-gap: 8px; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .gallery button { display: block; width: 100%; margin: 0 0 8px; padding: 0; border: 0; background: var(--noite-2); cursor: zoom-in; border-radius: 6px; overflow: hidden; break-inside: avoid; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .gallery img { width: 100%; height: auto; transition: transform 500ms var(--ease); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .gallery button:hover img { transform: scale(1.03); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .lightbox { background: var(--noite); color: var(--claro); width: min(1100px, calc(100% - 2rem)); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .lightbox img { width: 100%; max-height: 78vh; object-fit: contain; background: #000; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .lightbox .cap { padding: 1rem 1.2rem 1.3rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .lightbox .sheet-close { background: var(--claro); color: var(--tinta); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .kit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .file { border: 1.5px solid var(--tinta); border-radius: 14px; padding: 1.2rem; display: grid; gap: .5rem; align-content: start; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .file .ty { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; color: var(--semente); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .file .nm { font-family: var(--f-display); font-weight: 750; font-stretch: 90%; font-size: var(--fs-md); line-height: 1.1; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .file .sz { color: var(--tinta-2); font-size: var(--fs-sm); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .file .lock { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); font-weight: 700; color: var(--tinta-2); margin-top: .4rem; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .file .lock svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .unlock { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: end; justify-content: space-between; margin-top: 1.6rem; padding: 1.3rem; border-radius: 14px; background: var(--papel-2); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .unlock p { max-width: 48ch; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .unlock form { display: flex; gap: .5rem; align-items: end; flex-wrap: wrap; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .credits { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; margin: 0; border-top: 2px solid var(--claro); max-width: 720px; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .credits dt, :is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .credits dd { margin: 0; padding-block: .8rem; border-bottom: 1px solid var(--noite-3); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .credits dt { font-weight: 700; padding-right: 2rem; color: var(--claro-2); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .credits dd { font-weight: 600; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .credits .tbd { color: var(--claro-2); font-weight: 500; font-style: italic; }
@media (max-width: 1100px) {
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .guests { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .kit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .nova-hero, :is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .concept, :is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .listen, :is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .trio-top, :is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vid-layout, :is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .diary, :is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .media-grid { grid-template-columns: 1fr; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .nova-hero .ph { aspect-ratio: 4 / 3; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .concept .portrait { position: static; max-width: 460px; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .listen .cover { max-width: 340px; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .members { grid-template-columns: 1fr; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .members { column-gap: 0; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .member + .member { padding-left: 0; border-left: 0; border-top: 1px solid rgba(18,17,16,.25); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .member + .member::before { content: none; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vlist { max-height: none; }
}
@media (max-width: 600px) {
/* minmax(0, 1fr) e não 1fr: sem o zero, a coluna cresce até o min-content do cartão
   e a grade estoura o container — era o que empurrava a página do Choro para o lado. */
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .guests { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .kit { grid-template-columns: 1fr; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .track { grid-template-columns: 1.8rem 44px minmax(0, 1fr); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .track .du { grid-column: 3; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vitem { grid-template-columns: 96px minmax(0, 1fr); }
}

/* ---------- view: agenda ---------- */
.view-agenda .ag-hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 2rem 4rem; }
/* Abertura de "Próximos shows": a foto dos refletores em largura total, título em branco por cima (Marcos, 04/10/2026). */
.view-agenda .ag-shows { padding-top: 0; }
.view-agenda .ag-abre { position: relative; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); background: #0b0a09; color: #fff; min-height: clamp(300px, 62vh, 640px); display: grid; align-content: end; overflow: hidden; }
.view-agenda .ag-abre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.view-agenda .ag-abre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.7) 100%); pointer-events: none; }
.view-agenda .ag-abre-tx { position: relative; z-index: 1; padding-bottom: 1.2rem; display: grid; gap: .5rem; }
.view-agenda .ag-abre-tx .eyebrow { color: var(--laranja); }
.view-agenda .ag-abre-tx h2 { color: #fff; font-size: var(--fs-2xl); max-width: 11ch; line-height: .92; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.view-agenda .ag-abre-cred { margin: .2rem 0 0; font-size: var(--fs-xs, .75rem); color: rgba(255,255,255,.78); }
@media (max-width: 600px) { .view-agenda .ag-abre img { object-position: 70% 40%; } }
.view-agenda .next { background: var(--laranja); color: var(--tinta); border-radius: 18px; padding: clamp(1.3rem, 2.6vw, 2rem); display: grid; gap: 1rem; }
.view-agenda .next-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.view-agenda .next .count { font-weight: 700; font-size: var(--fs-sm); }
.view-agenda .next-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4rem 1.4rem; align-items: end; }
.view-agenda .next .big-d { font-family: var(--f-display); font-weight: 850; font-stretch: 70%; font-size: var(--fs-4xl); line-height: .78; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.view-agenda .next .big-m { font-family: var(--f-display); font-weight: 800; font-stretch: 80%; font-size: var(--fs-lg); line-height: 1; }
.view-agenda .next .place { font-family: var(--f-display); font-weight: 800; font-stretch: 85%; font-size: var(--fs-xl); line-height: 1; }
.view-agenda .next .venue { font-size: var(--fs-base); margin-top: .3rem; }
.view-agenda .next .actions { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; }
.view-agenda .toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); gap: 1rem 2rem; align-items: center; padding-bottom: 1.4rem; border-bottom: 2px solid var(--tinta); }
.view-agenda .month { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 2.2rem; padding-bottom: .5rem; border-bottom: 1px solid var(--linha-clara); }
.view-agenda .month h3 { font-size: var(--fs-xl); text-transform: capitalize; }
.view-agenda .month span { font-size: var(--fs-sm); color: var(--tinta-2); font-weight: 600; }
.view-agenda .empty { padding: 2.5rem 0; font-size: var(--fs-md); }
.view-agenda .empty a { font-weight: 700; }
.view-agenda .agenda-list .show-row { grid-template-columns: 5.2rem minmax(0, 1.2fr) minmax(0, 1fr) auto; }
.view-agenda .agenda-list .show-row .where { grid-column: 2 / 4; }
:is(.view-agenda, .view-hamilton) .tunnel-wrap { position: relative; }
:is(.view-agenda, .view-hamilton) .tunnel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 340px); gap: 1rem; overflow-x: auto; padding-bottom: 1.2rem; scroll-snap-type: x mandatory; scrollbar-color: var(--laranja) var(--noite-2); }
:is(.view-agenda, .view-hamilton) .tunnel:focus-visible { outline-offset: 6px; }
:is(.view-agenda, .view-hamilton) .stop { scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; background: var(--noite-2); border-radius: 14px; overflow: hidden; }
:is(.view-agenda, .view-hamilton) .stop .ph { aspect-ratio: 4 / 3; background: var(--noite-3); overflow: hidden; }
:is(.view-agenda, .view-hamilton) .stop .ph img { width: 100%; height: 100%; object-fit: cover; }
:is(.view-agenda, .view-hamilton) .stop .ph.type { display: grid; place-items: center; background: var(--semente); }
:is(.view-agenda, .view-hamilton) .stop .ph.type span { font-family: var(--f-display); font-weight: 850; font-stretch: 70%; font-size: var(--fs-3xl); color: #F6EDE6; line-height: 1; }
:is(.view-agenda, .view-hamilton) .stop .tx { padding: 1.1rem 1.2rem 1.3rem; display: grid; gap: .35rem; align-content: start; }
:is(.view-agenda, .view-hamilton) .stop .yr { font-family: var(--f-display); font-weight: 850; font-stretch: 75%; font-size: var(--fs-2xl); line-height: .9; color: var(--laranja); }
:is(.view-agenda, .view-hamilton) .stop h3 { font-size: var(--fs-md); font-stretch: 88%; line-height: 1.1; }
:is(.view-agenda, .view-hamilton) .stop p { color: var(--claro-2); font-size: var(--fs-base); line-height: 1.45; }
:is(.view-agenda, .view-hamilton) .tunnel-ctrl { display: flex; gap: .5rem; }
.view-agenda .round { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid #4A4540; background: none; color: var(--claro); cursor: pointer; display: grid; place-items: center; }
.view-agenda .round:hover { border-color: var(--claro); }
.view-agenda .round svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.view-agenda .baile .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: center; }
.view-agenda .baile-photo { aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; }
.view-agenda .baile-photo img { width: 100%; height: 100%; object-fit: cover; }
.view-agenda .baile h2 { font-size: var(--fs-3xl); }
.view-agenda .baile .copy { display: grid; gap: 1.1rem; }
.view-agenda .baile .copy p { font-size: var(--fs-md); max-width: 44ch; }
.view-agenda .baile .when { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-weight: 700; }
.view-agenda .baile .when .date .d { font-size: var(--fs-2xl); }
.view-agenda .two-up { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); }
.view-agenda .form { display: grid; gap: 1rem; max-width: 560px; }
.view-agenda .form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.view-agenda fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
.view-agenda legend { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; margin-bottom: .4rem; }
.view-agenda .check { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .95rem; border: 1.5px solid var(--tinta); border-radius: 999px; cursor: pointer; font-weight: 600; font-size: var(--fs-sm); }
.view-agenda .check input { width: 18px; height: 18px; accent-color: var(--semente); margin: 0; }
.view-agenda .check:has(input:checked) { background: var(--tinta); color: var(--papel); }
.view-agenda .check:has(input:focus-visible) { outline: 3px solid var(--laranja); outline-offset: 3px; }
.view-agenda .form .hint { font-size: var(--fs-sm); color: var(--tinta-2); max-width: 52ch; }
.view-agenda .form .error { color: #A1262A; font-weight: 700; font-size: var(--fs-sm); }
.view-agenda .done { border-radius: 14px; background: var(--tinta); color: var(--papel); padding: 1.2rem 1.3rem; font-size: var(--fs-base); }
.view-agenda .done b { font-family: var(--f-display); font-stretch: 88%; font-size: var(--fs-lg); display: block; margin-bottom: .25rem; }
.view-agenda .city-card { aspect-ratio: 1; max-width: 420px; width: 100%; position: relative; border-radius: 16px; overflow: hidden; background: var(--laranja); color: var(--tinta); }
.view-agenda .city-card img { position: absolute; top: 0; right: 0; width: 58%; height: 100%; max-width: none; object-fit: cover; }
.view-agenda .city-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #FF6A00 0%, #FF6A00 42%, rgba(255,106,0,0) 62%); }
.view-agenda .city-card .cc { position: absolute; inset: 0; z-index: 1; padding: 1.4rem; display: grid; align-content: space-between; }
.view-agenda .city-card .cc-top { font-weight: 700; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; }
.view-agenda .city-card .want { font-family: var(--f-display); font-weight: 850; font-stretch: 72%; font-size: var(--fs-xl); line-height: .9; max-width: 62%; }
.view-agenda .city-card .cname { display: block; font-size: var(--fs-2xl); overflow-wrap: anywhere; }
.view-agenda .city-card .cc-foot { font-weight: 700; font-size: var(--fs-sm); background: var(--tinta); color: var(--laranja); justify-self: start; padding: .35rem .7rem; border-radius: 999px; }
.view-agenda .city-tools { display: grid; gap: 1rem; align-content: start; }
.view-agenda .city-tools .actions { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 1000px) {
.view-agenda .ag-hero .wrap, .view-agenda .baile .wrap, .view-agenda .two-up { grid-template-columns: 1fr; }
.view-agenda .agenda-list .show-row { grid-template-columns: 5.2rem minmax(0, 1fr) auto; }
.view-agenda .agenda-list .show-row .where { grid-column: 2; }
}
@media (max-width: 700px) {
.view-agenda .toolbar { grid-template-columns: 1fr; }
.view-agenda .form .row { grid-template-columns: 1fr; }
.view-agenda .agenda-list .show-row { grid-template-columns: 5rem minmax(0, 1fr); }
.view-agenda .agenda-list .show-row .act { grid-column: 2; justify-content: start; }
}

/* ---------- view: musica ---------- */
.view-musica .stats { display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin-top: 1rem; padding-top: 1.2rem; border-top: 1px solid var(--noite-3); }
.view-musica .stat { display: grid; gap: .1rem; }
.view-musica .stat b { font-family: var(--f-display); font-weight: 850; font-stretch: 72%; font-size: var(--fs-2xl); line-height: .9; color: var(--laranja); font-variant-numeric: tabular-nums; }
.view-musica .stat span { font-size: var(--fs-sm); color: var(--claro-2); font-weight: 600; }
:is(.view-musica, .view-projetos) .gcover { position: relative; aspect-ratio: 1; background: var(--cbg); color: var(--cfg); display: grid; grid-template-rows: auto 1fr auto; padding: 8%; overflow: hidden; container-type: inline-size; }
:is(.view-musica, .view-projetos) .gcover .gy { font-family: var(--f-display); font-weight: 850; font-stretch: 70%; font-size: 22cqi; line-height: .8; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; opacity: .95; }
:is(.view-musica, .view-projetos) .gcover .gt { align-self: end; font-family: var(--f-display); font-weight: 800; font-stretch: 78%; line-height: .95; letter-spacing: -0.01em; font-size: var(--gts, 11cqi); overflow-wrap: break-word; hyphens: manual; }
:is(.view-musica, .view-projetos) .gcover .ga { font-size: 5.2cqi; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-top: 4cqi; opacity: .9; }
.view-musica .cover-img { aspect-ratio: 1; overflow: hidden; background: var(--noite-2); }
.view-musica .cover-img img { width: 100%; height: 100%; object-fit: cover; }
.view-musica .latest { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.view-musica .latest .art { border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.view-musica .latest h2 { font-size: var(--fs-4xl); font-stretch: 72%; color: var(--laranja); margin: .4rem 0 .6rem; }
.view-musica .latest .form { font-family: var(--f-display); font-weight: 750; font-stretch: 88%; font-size: var(--fs-lg); }
.view-musica .latest .actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0 2rem; }
.view-musica .tl { border-top: 2px solid var(--claro); columns: 2 260px; column-gap: 2rem; }
.view-musica .tl li { break-inside: avoid; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .1rem .6rem; padding-block: .6rem; border-bottom: 1px solid var(--noite-3); }
.view-musica .tl .n { color: var(--claro-2); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); padding-top: .1rem; }
.view-musica .tl .t { font-weight: 700; line-height: 1.3; }
.view-musica .tl .c { grid-column: 2; font-size: var(--fs-sm); color: var(--claro-2); line-height: 1.35; }
.view-musica .recent { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-top: 2.4rem; }
.view-musica .recent button { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; display: grid; gap: .45rem; }
.view-musica .recent .ci { border-radius: 6px; overflow: hidden; outline: 3px solid transparent; outline-offset: 3px; }
.view-musica .recent button[aria-pressed="true"] .ci { outline-color: var(--laranja); }
.view-musica .recent .rt { font-weight: 700; font-size: var(--fs-sm); line-height: 1.25; }
.view-musica .recent .ry { font-size: var(--fs-xs); color: var(--claro-2); }
.view-musica .disco-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) auto; gap: 1rem 1.5rem; align-items: end; padding-bottom: 1.4rem; border-bottom: 2px solid var(--tinta); }
.view-musica .field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.4rem; }
.view-musica .decade { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 2.2rem 0 .4rem; border-bottom: 1px solid var(--linha-clara); }
.view-musica .decade h3 { font-size: var(--fs-2xl); font-stretch: 72%; }
.view-musica .decade span { font-weight: 600; color: var(--tinta-2); font-size: var(--fs-sm); }
.view-musica .albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.8rem 1.2rem; }
.view-musica .album { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; display: grid; gap: .55rem; align-content: start; }
.view-musica .album .ci { border-radius: 6px; overflow: hidden; transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.view-musica .album:hover .ci { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(18,17,16,.22); }
.view-musica .album .at { font-family: var(--f-display); font-weight: 750; font-stretch: 90%; font-size: var(--fs-md); line-height: 1.12; }
.view-musica .album .am { font-size: var(--fs-sm); color: var(--tinta-2); line-height: 1.35; }
.view-musica .album .badge { justify-self: start; }
.view-musica .count-line { margin-top: 1rem; font-weight: 600; color: var(--tinta-2); }
.view-musica .empty { padding: 2.5rem 0; font-size: var(--fs-md); }
.view-musica .sheet-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; padding: clamp(1.2rem, 3vw, 2.2rem); clear: both; }
.view-musica .sheet-body .ci { border-radius: 8px; overflow: hidden; }
.view-musica .sheet-body h2 { font-size: var(--fs-2xl); font-stretch: 80%; margin: .3rem 0 .5rem; }
.view-musica .sheet-body .meta { color: var(--tinta-2); font-weight: 600; }
.view-musica .sheet-body h3 { font-size: var(--fs-lg); margin: 1.6rem 0 .6rem; }
.view-musica .sheet-body .tl { border-top-color: var(--tinta); columns: 1; }
.view-musica .sheet-body .tl li { border-bottom-color: var(--linha-clara); }
.view-musica .sheet-body .tl .n, .view-musica .sheet-body .tl .c { color: var(--tinta-2); }
.view-musica .ficha { margin: 0; display: grid; gap: .1rem; border-top: 2px solid var(--tinta); }
.view-musica .ficha div { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: 1rem; padding-block: .6rem; border-bottom: 1px solid var(--linha-clara); }
.view-musica .ficha dt { font-weight: 700; }
.view-musica .ficha dd { margin: 0; color: var(--tinta-2); }
.view-musica .singles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.4rem; margin-top: 1.4rem; }
.view-musica .single { display: grid; gap: .5rem; align-content: start; }
.view-musica .single .ci { border-radius: 6px; overflow: hidden; }
.view-musica .single .st { font-family: var(--f-display); font-weight: 800; font-stretch: 85%; font-size: var(--fs-md); line-height: 1.05; }
.view-musica .single .sm { font-size: var(--fs-sm); color: var(--tinta-2); }
.view-musica .appear { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.view-musica .appear .ci { border-radius: 10px; overflow: hidden; }
.view-musica .appear h3 { font-size: var(--fs-2xl); font-stretch: 82%; margin: .4rem 0 .8rem; }
.view-musica .appear dl { margin: 1.2rem 0 0; display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; }
.view-musica .appear dt { color: var(--claro-2); font-weight: 600; }
.view-musica .appear dd { margin: 0; font-weight: 600; }
@media (max-width: 900px) {
.view-musica .latest, .view-musica .sheet-body, .view-musica .appear { grid-template-columns: 1fr; }
.view-musica .latest .art { max-width: 380px; }
.view-musica .disco-tools { grid-template-columns: 1fr 1fr; }
.view-musica .disco-tools .chips { grid-column: 1 / -1; }
.view-musica .recent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.view-musica .disco-tools { grid-template-columns: 1fr; }
.view-musica .albums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem .9rem; }
.view-musica .singles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.view-musica .ficha div { grid-template-columns: 1fr; gap: .1rem; }
}

/* ---------- view: hamilton ---------- */
.view-hamilton .hh-hero { background: var(--noite); color: var(--claro); }
.view-hamilton .hh-hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: end; padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.view-hamilton .hh-hero h1 { font-size: var(--fs-5xl); font-stretch: 72%; line-height: .8; letter-spacing: -0.035em; }
.view-hamilton .hh-hero .lede { font-size: var(--fs-lg); max-width: 34ch; line-height: 1.4; margin-top: 1.4rem; }
.view-hamilton .hh-hero .ph { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; }
.view-hamilton .hh-hero .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.view-hamilton .facts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--noite-3); }
.view-hamilton .fact { padding: 1.2rem 1rem 1.4rem 0; display: grid; gap: .3rem; align-content: start; }
.view-hamilton .fact b { font-family: var(--f-display); font-weight: 850; font-stretch: 72%; font-size: var(--fs-2xl); line-height: .9; color: var(--laranja); font-variant-numeric: tabular-nums; }
.view-hamilton .fact span { font-size: var(--fs-sm); color: var(--claro-2); font-weight: 600; line-height: 1.3; }
.view-hamilton .bio { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.view-hamilton .bio aside { position: sticky; top: 140px; display: grid; gap: .6rem; }
.view-hamilton .bio aside .ph { border-radius: 14px; overflow: hidden; aspect-ratio: 2 / 3; max-width: 360px; }
.view-hamilton .bio aside .ph img { width: 100%; height: 100%; object-fit: cover; }
.view-hamilton .bio aside small { color: var(--tinta-2); font-size: var(--fs-sm); }
.view-hamilton .bio-text { display: grid; gap: 1.3rem; font-size: var(--fs-md); line-height: 1.65; max-width: 40em; }
.view-hamilton .bio-text p:first-child { font-family: var(--f-display); font-weight: 700; font-stretch: 90%; font-size: var(--fs-xl); line-height: 1.25; letter-spacing: -0.005em; }
.view-hamilton .bio-text b { font-weight: 700; }
.view-hamilton .decades { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 2rem; }
.view-hamilton .life { position: relative; display: grid; gap: 0; }
.view-hamilton .life::before { content: ""; position: absolute; left: calc(9rem + 11px); top: 0; bottom: 0; width: 2px; background: var(--noite-3); }
.view-hamilton .moment { display: grid; grid-template-columns: 9rem 24px minmax(0, 1fr); gap: 0 1.6rem; padding-block: 1.6rem; scroll-margin-top: 150px; }
.view-hamilton .moment .yr { font-family: var(--f-display); font-weight: 850; font-stretch: 70%; font-size: var(--fs-2xl); line-height: .85; text-align: right; font-variant-numeric: tabular-nums; }
.view-hamilton .moment.hl .yr { color: var(--laranja); }
.view-hamilton .moment .dot { width: 24px; height: 24px; border-radius: 50%; background: var(--noite); border: 3px solid #5A554F; margin-top: .35rem; position: relative; z-index: 1; }
.view-hamilton .moment.hl .dot { border-color: var(--laranja); background: var(--laranja); }
.view-hamilton .moment .body { display: grid; gap: .45rem; max-width: 46em; }
.view-hamilton .moment .cat { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--areia); }
.view-hamilton .moment h3 { font-size: var(--fs-xl); font-stretch: 86%; line-height: 1.02; }
.view-hamilton .moment p { color: var(--claro-2); font-size: var(--fs-base); line-height: 1.55; }
.view-hamilton .moment .ph { border-radius: 12px; overflow: hidden; max-width: 460px; aspect-ratio: 16 / 10; margin-top: .6rem; }
.view-hamilton .moment .ph img { width: 100%; height: 100%; object-fit: cover; }
.view-hamilton .moment details { margin-top: .2rem; }
.view-hamilton .moment summary { cursor: pointer; font-weight: 700; color: var(--laranja); min-height: 44px; display: inline-flex; align-items: center; }
.view-hamilton .moment details p { color: var(--claro); }
:is(.view-hamilton, .view-premios) .aw-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 2rem; }
:is(.view-hamilton, .view-premios) .aw-stat { background: var(--tinta); color: var(--papel); border-radius: 14px; padding: 1.2rem 1.3rem 1.4rem; display: grid; gap: .3rem; align-content: start; }
:is(.view-hamilton, .view-premios) .aw-stat b { font-family: var(--f-display); font-weight: 850; font-stretch: 72%; font-size: var(--fs-3xl); line-height: .85; color: var(--laranja); }
:is(.view-hamilton, .view-premios) .aw-stat span { font-weight: 600; color: var(--claro-2); line-height: 1.3; }
:is(.view-hamilton, .view-premios) .aw-stat a { color: var(--papel); font-weight: 700; font-size: var(--fs-sm); margin-top: .3rem; }
:is(.view-hamilton, .view-premios) .aw-tools { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: end; padding-bottom: 1.2rem; border-bottom: 2px solid var(--tinta); }
:is(.view-hamilton, .view-premios) .aw-list li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: .3rem 1.2rem; align-items: center; padding-block: 1rem; border-bottom: 1px solid var(--linha-clara); }
:is(.view-hamilton, .view-premios) .aw-list .y { font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-size: var(--fs-lg); line-height: 1; font-variant-numeric: tabular-nums; }
:is(.view-hamilton, .view-premios) .aw-list .n { font-weight: 700; font-size: var(--fs-base); line-height: 1.35; }
:is(.view-hamilton, .view-premios) .aw-list .a { color: var(--tinta-2); font-size: var(--fs-base); }
:is(.view-hamilton, .view-premios) .aw-list .proof { font-weight: 700; font-size: var(--fs-sm); text-underline-offset: .2em; }
:is(.view-hamilton, .view-premios) .status { display: inline-flex; align-items: center; min-height: 32px; padding: 0 .8rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
:is(.view-hamilton, .view-premios) .status.won { background: var(--tinta); color: var(--papel); }
:is(.view-hamilton, .view-premios) .status.nom { border: 1.5px solid var(--tinta); }
.view-hamilton .note-line { margin-top: 1rem; color: var(--tinta-2); font-size: var(--fs-sm); }
.view-bandolim .md-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.view-bandolim .md-intro h2 { font-size: var(--fs-4xl); font-stretch: 72%; }
.view-bandolim .md-intro p { font-size: var(--fs-md); line-height: 1.55; }
.view-bandolim .strings { background: var(--noite); color: var(--claro); border-radius: 18px; padding: clamp(1.2rem, 3vw, 2.2rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 3rem; }
.view-bandolim .strings figure { margin: 0; display: grid; gap: .9rem; }
.view-bandolim .strings svg { width: 100%; height: auto; display: block; }
.view-bandolim .strings figcaption { display: grid; gap: .25rem; }
.view-bandolim .strings figcaption b { font-family: var(--f-display); font-weight: 800; font-stretch: 82%; font-size: var(--fs-lg); line-height: 1; }
.view-bandolim .strings figcaption span { color: var(--claro-2); line-height: 1.45; }
.view-bandolim .cols2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 4rem); margin-block: clamp(2.5rem, 5vw, 4rem); }
.view-bandolim .cols2 h3 { font-size: var(--fs-xl); margin-bottom: .8rem; }
.view-bandolim .cols2 p { font-size: var(--fs-base); line-height: 1.6; margin-bottom: .9rem; max-width: 40em; }
.view-bandolim .steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--tinta); }
.view-bandolim .step { padding: 1.1rem 1.1rem 1.2rem 0; display: grid; gap: .35rem; align-content: start; }
.view-bandolim .step + .step { padding-left: 1.1rem; border-left: 1px solid rgba(18,17,16,.25); }
.view-bandolim .step .y { font-family: var(--f-display); font-weight: 850; font-stretch: 72%; font-size: var(--fs-2xl); line-height: .85; color: var(--semente); }
.view-bandolim .step b { font-weight: 700; line-height: 1.3; }
.view-bandolim .step p { font-size: var(--fs-base); line-height: 1.45; color: #3F3B36; }
.view-bandolim .luthiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.view-bandolim .luthier { background: var(--papel); border-radius: 14px; padding: 1.2rem; display: grid; gap: .4rem; align-content: start; }
.view-bandolim .luthier .r { font-size: var(--fs-xs); font-weight: 700; color: var(--semente); }
.view-bandolim .luthier .nm { font-family: var(--f-display); font-weight: 800; font-stretch: 85%; font-size: var(--fs-lg); line-height: 1.02; }
.view-bandolim .luthier p { font-size: var(--fs-base); line-height: 1.45; color: var(--tinta-2); }
.view-bandolim .rozini { margin-top: 1rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; background: var(--tinta); color: var(--papel); border-radius: 14px; padding: 1.4rem 1.5rem; }
.view-bandolim .rozini b { font-family: var(--f-display); font-weight: 800; font-stretch: 85%; font-size: var(--fs-lg); line-height: 1.05; display: block; margin-top: .2rem; }
.view-bandolim .rozini .eyebrow { color: var(--laranja); }
.view-bandolim .rozini .links { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 1000px) {
.view-hamilton .hh-hero .wrap, .view-hamilton .bio, .view-bandolim .md-intro, .view-bandolim .strings, .view-bandolim .cols2 { grid-template-columns: 1fr; }
.view-hamilton .hh-hero .ph { max-width: 460px; }
.view-hamilton .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.view-hamilton .bio aside { position: static; }
:is(.view-hamilton, .view-premios) .aw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.view-bandolim .steps { grid-template-columns: 1fr; }
.view-bandolim .step + .step { padding-left: 0; border-left: 0; border-top: 1px solid rgba(18,17,16,.25); }
.view-bandolim .luthiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.view-hamilton .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.view-hamilton .life::before { left: 11px; }
.view-hamilton .moment { grid-template-columns: 24px minmax(0, 1fr); gap: .3rem 1rem; }
.view-hamilton .moment .yr { grid-column: 2; text-align: left; font-size: var(--fs-2xl); }
.view-hamilton .moment .dot { grid-row: 1; grid-column: 1; margin-top: .6rem; }
.view-hamilton .moment .body { grid-column: 2; }
:is(.view-hamilton, .view-premios) .aw-list li { grid-template-columns: 3.4rem minmax(0, 1fr); }
:is(.view-hamilton, .view-premios) .aw-list .status { grid-column: 2; justify-self: start; }
.view-bandolim .luthiers { grid-template-columns: 1fr; }
}

/* Round 2: Home "Ao vivo" banner as the next-show announcement */
.view-home .slide-show .show-date { display: flex; align-items: flex-end; gap: .8rem; line-height: .8; }
.view-home .slide-show .show-date b { font-family: var(--f-display); font-weight: 850; font-stretch: 68%; font-size: var(--fs-4xl); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.view-home .slide-show .show-date span { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: var(--fs-md); line-height: 1.2; padding-bottom: .5em; }
.view-home .slide-show h2 { font-size: var(--fs-3xl); }
.view-home .slide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-top: .4rem; }
.view-home .slide-actions .textlink { color: inherit; }
.view-home .soon.on-slide { color: inherit; border-color: currentColor; }
.view-home .soldout.on-slide { background: var(--laranja); color: var(--tinta); }
/* Round 2: Música singles groups */
.view-musica .single-group + .single-group { margin-top: clamp(2rem, 4vw, 3rem); }
.view-musica .single-h { display: flex; align-items: baseline; gap: .6rem; margin-top: 1.6rem; padding-bottom: .5rem; border-bottom: 2px solid var(--tinta); font-size: var(--fs-xl); font-stretch: 80%; }
.view-musica .single-h span { font-size: var(--fs-sm); font-weight: 700; color: var(--tinta-2); }
.view-musica .single h4.st { font-family: var(--f-display); font-weight: 800; font-stretch: 85%; font-size: var(--fs-md); line-height: 1.05; }
.view-musica .single-go .brand-link { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; font-weight: 700; font-size: var(--fs-sm); color: var(--tinta); text-underline-offset: .2em; }
.view-musica .disco-tools .decade-toggle { align-self: end; min-height: 48px; }

/* =========================================================
   Projetos (loaded after views.css, so it can refine NOVA's shared rules)
   ========================================================= */
.view-projetos .pj-intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 1.5rem clamp(2rem, 5vw, 5rem); }
.view-projetos .pj-intro-tx { display: grid; gap: 1.2rem; }
.view-projetos .pj-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; border-top: 2px solid var(--claro); padding-top: 1rem; }
.view-projetos .pj-stats b { display: block; font-family: var(--f-display); font-weight: 850; font-stretch: 72%; font-size: var(--fs-3xl); line-height: .9; color: var(--laranja); font-variant-numeric: tabular-nums; }
.view-projetos .pj-stats span { display: block; margin-top: .35rem; font-size: var(--fs-sm); line-height: 1.3; color: var(--claro-2); }

.view-projetos .pj-browse { padding-top: clamp(1.5rem, 3vw, 2.2rem); }
.view-projetos .pj-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) auto; gap: 1rem; align-items: end; margin-bottom: 1.1rem; }
.view-projetos .pj-tools .btn { min-height: 48px; }
.view-projetos .pj-tools .field { min-width: 0; }
.view-projetos .pj-tools select { width: 100%; min-width: 0; text-overflow: ellipsis; }
.view-projetos .pj-tools .field label { color: var(--claro-2); }
.view-projetos .pj-medium { margin-top: .5rem; }
.view-projetos .pj-medium .chip { min-height: 36px; font-size: var(--fs-sm); }
.view-projetos .pj-count { margin: 1.3rem 0 .8rem; color: var(--claro-2); font-size: var(--fs-base); }
.view-projetos .pj-none { padding: 2rem 0; font-size: var(--fs-md); line-height: 1.5; }
.view-projetos .pj-none .textlink { color: var(--laranja); background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 700; text-decoration: underline; }
.view-projetos .pj-more { display: flex; justify-content: center; margin-top: 1.6rem; }

/* Mosaic: gap-free blocks, each one a guillotine cut of the grid */
.view-projetos .pj-mosaic { display: grid; gap: 6px; }
.view-projetos .pj-block { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); gap: 6px; aspect-ratio: var(--cols) / var(--rows); }
.view-projetos .pj-tile { position: relative; overflow: hidden; display: block; container-type: size; background: var(--tbg); color: var(--tfg); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.view-projetos .pj-tile:focus-visible { outline: 3px solid var(--laranja); outline-offset: -7px; }
.view-projetos .pj-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.view-projetos .pj-tile.has-cover { color: #FFFFFF; }
.view-projetos .pj-tile.has-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,17,16,0) 38%, rgba(18,17,16,.9) 100%); }
.view-projetos .pj-tile:hover img { transform: scale(1.045); }
.view-projetos .pj-yr { position: absolute; left: max(12px, 6cqi); top: max(10px, 5cqi); font-family: var(--f-display); font-weight: 850; font-stretch: 68%; font-size: min(24cqi, 26cqh); line-height: .8; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; opacity: .92; }
.view-projetos .pj-tx { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: .35rem; padding: max(12px, 6cqi); }
.view-projetos .pj-tt { justify-self: start; font-family: var(--f-display); font-weight: 800; font-stretch: 76%; line-height: .94; letter-spacing: -0.01em; font-size: clamp(15px, calc(var(--k) * 1cqi), 22cqh); overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.view-projetos .pj-tile:hover .pj-tt { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; }
.view-projetos .pj-mt { font-size: clamp(.8125rem, 3.2cqi, .86rem); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.view-projetos .pj-fm { font-size: clamp(.8rem, 3.4cqi, .98rem); font-weight: 500; line-height: 1.3; max-width: 36ch; }
@container (max-width: 260px) { .view-projetos .pj-fm { display: none; } }
@container (max-height: 190px) { .view-projetos .pj-yr, .view-projetos .pj-fm { display: none; } }

/* Project page: hero */
.view-projetos .pj-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); min-height: clamp(520px, 78vh, 780px); background: var(--noite); color: var(--claro); }
.view-projetos .pj-hero .tx { display: grid; align-content: end; gap: 1.1rem; padding: clamp(1.5rem, 4vw, 3.5rem); }
.view-projetos .pj-back { justify-self: start; color: var(--claro); margin-bottom: auto; }
.view-projetos .pj-hero .eyebrow { color: var(--laranja); }
.view-projetos .pj-hero h1 { font-size: var(--fs-4xl); font-stretch: 70%; line-height: .82; letter-spacing: -0.035em; color: var(--laranja); overflow-wrap: break-word; }
.view-projetos .pj-hero h1.is-long { font-size: var(--fs-3xl); line-height: .86; }
.view-projetos .pj-hero h1.is-xlong { font-size: var(--fs-3xl); line-height: .9; }
.view-projetos .pj-hero .by { font-family: var(--f-display); font-weight: 800; font-stretch: 88%; font-size: var(--fs-lg); line-height: 1.1; }
.view-projetos .pj-hero .lede { font-size: var(--fs-md); max-width: 42ch; line-height: 1.45; }
.view-projetos .pj-hero .actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .3rem; }
.view-projetos .pj-art { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--cbg); background: color-mix(in srgb, var(--cbg) 72%, #000); color: var(--cfg); padding: clamp(2rem, 6vw, 5rem); }
.view-projetos .pj-bigyear { position: absolute; right: -.05em; bottom: -.14em; font-family: var(--f-display); font-weight: 850; font-stretch: 66%; font-size: var(--fs-5xl); line-height: .8; letter-spacing: -0.04em; opacity: .16; pointer-events: none; }
.view-projetos .pj-cover { position: relative; width: min(100%, 470px); border-radius: 6px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .42); }
.view-projetos .pj-cover img, .view-projetos .listen .cover img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

/* About */
.view-projetos .concept.no-portrait { grid-template-columns: minmax(0, 1fr); }
.view-projetos .concept.no-portrait h2 { max-width: 16ch; }
.view-projetos .pj-text { display: grid; gap: 1.2rem; }
/* Small headings inside the official album texts (song titles, "Curiosidades"). */
.view-projetos .pj-h { font: 800 .85rem/1.3 var(--f-display); letter-spacing: .06em; text-transform: uppercase; margin: 1.4rem 0 -.6rem; }
.view-projetos .pj-h + p { margin-top: .8rem; }
.view-projetos .pj-text .pj-h:first-child, .view-projetos .rel > div > .pj-h:first-child { margin-top: 0; }
.view-projetos .pj-moments { display: grid; margin-top: 1.4rem; border-top: 2px solid var(--tinta); max-width: 46em; }
.view-projetos .pj-moments li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .1rem 1.2rem; padding-block: 1rem .4rem; border-bottom: 1px solid var(--linha-clara); }
.view-projetos .pj-moments .y { grid-row: span 2; font-family: var(--f-display); font-weight: 850; font-stretch: 72%; font-size: var(--fs-lg); line-height: 1; color: var(--semente); }
.view-projetos .pj-moments p { font-size: var(--fs-base); line-height: 1.5; }
.view-projetos .pj-moments .textlink { justify-self: start; }

/* Listen */
.view-projetos .pj-tracks { border-top: 2px solid var(--claro); }
.view-projetos .pj-tracks.is-long { columns: 2 300px; column-gap: 2.5rem; }
/* No celular, uma coluna só; e o texto para leitor de tela (.sr-only, absoluto) fica preso à própria faixa —
   numa lista em colunas ele ia parar a 1.800 px da tela e abria rolagem lateral (Caprichos, 24 faixas). */
.view-projetos .pj-tracks li { position: relative; }
@media (max-width: 699px) { .view-projetos .pj-tracks.is-long { columns: auto; } }
.view-projetos .pj-tracks li { break-inside: avoid; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .15rem .8rem; padding-block: .75rem; border-bottom: 1px solid var(--noite-3); }
.view-projetos .pj-tracks .no { grid-row: span 2; padding-top: .2rem; font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--fs-sm); color: var(--claro-2); }
.view-projetos .pj-tracks .tt { font-family: var(--f-display); font-weight: 750; font-stretch: 90%; font-size: var(--fs-md); line-height: 1.15; }
.view-projetos .pj-tracks .cr { font-size: var(--fs-sm); line-height: 1.35; color: var(--claro-2); }
.view-projetos .pj-tracks li.is-target .tt { color: var(--laranja); }

/* Who plays */
.view-projetos .pj-lineup { font-family: var(--f-display); font-weight: 850; font-stretch: 72%; font-size: var(--fs-3xl); line-height: .9; letter-spacing: -0.025em; max-width: 17ch; margin: .8rem 0 clamp(2rem, 4vw, 3rem); overflow-wrap: break-word; }
.view-projetos .members { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.view-projetos .members { column-gap: 1.6rem; }
.view-projetos .member + .member { border-left: 0; padding-left: 0; }
.view-projetos .member + .member::before { content: none; }
.view-projetos .member { padding-right: 0; border-bottom: 1px solid rgba(18,17,16,.2); }
.view-projetos .guests { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Videos */
:is(.view-projetos, .view-baile) .pj-vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.6rem .8rem; }
/* Small video tiles that grow under the cursor, like the wall of covers. */
:is(.view-projetos, .view-baile) .pj-vid { transition: transform 240ms var(--ease), box-shadow 240ms var(--ease); transform-origin: center; }
@media (hover: hover) and (pointer: fine) {
  :is(.view-projetos, .view-baile) .pj-vid:hover, :is(.view-projetos, .view-baile) .pj-vid:focus-visible { transform: scale(1.5); z-index: 4; position: relative; }
  :is(.view-projetos, .view-baile) .pj-vid:hover .th, :is(.view-projetos, .view-baile) .pj-vid:focus-visible .th { box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
}
:is(.view-projetos, .view-baile) .pj-vid .t { font-size: var(--fs-sm); }
:is(.view-projetos, .view-baile) .pj-vid .pl { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
:is(.view-projetos, .view-baile) .pj-vid .pl::after { margin-left: 3px; border-left-width: 12px; border-top-width: 7px; border-bottom-width: 7px; }
:is(.view-projetos, .view-baile) .pj-vid { display: grid; gap: .45rem; align-content: start; color: var(--claro); text-decoration: none; }
:is(.view-projetos, .view-baile) .pj-vid .th { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--noite-3); }
:is(.view-projetos, .view-baile) .pj-vid img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
:is(.view-projetos, .view-baile) .pj-vid:hover img { transform: scale(1.04); }
:is(.view-projetos, .view-baile) .pj-vid .pl { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: var(--laranja); display: grid; place-items: center; }
:is(.view-projetos, .view-baile) .pj-vid .pl::after { content: ""; margin-left: 5px; border-left: 17px solid var(--tinta); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
:is(.view-projetos, .view-baile) .pj-vid .k { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--laranja); }
:is(.view-projetos, .view-baile) .pj-vid .t { font-family: var(--f-display); font-weight: 750; font-stretch: 88%; font-size: var(--fs-md); line-height: 1.12; }
:is(.view-projetos, .view-baile) .pj-vid:hover .t { text-decoration: underline; text-underline-offset: .15em; }
/* Fora do fundo escuro (Baile › Bailinho) o título do vídeo ficava branco sobre o claro (12/10/2026). */
:is(.view-projetos, .view-baile) .sec:not(.on-noite):not(.era-noite):not(.cap-noite):not(.cap-sec) .pj-vid { color: var(--tinta); }

/* Credits + hire */
.view-projetos .pj-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2.5rem 4rem; align-items: start; }
.view-projetos .pj-ficha h2 { font-size: var(--fs-2xl); margin-bottom: 1.2rem; }
.view-projetos .credits dd { font-weight: 500; line-height: 1.45; }
.view-projetos .credits dt { line-height: 1.35; }
.view-projetos .pj-hire { display: grid; gap: 1rem; align-content: start; }
.view-projetos .pj-hire .eyebrow { color: var(--laranja); }
.view-projetos .pj-hire h2 { margin-bottom: 0; }
.view-projetos .pj-hire p { max-width: 42ch; font-size: var(--fs-base); line-height: 1.45; }
.view-projetos .pj-hire .btn { justify-self: start; }

/* Pager */
.view-projetos .pj-pager-in { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.view-projetos .pj-pager .sec-head h2 { font-size: var(--fs-2xl); }
.view-projetos .pj-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.view-projetos .pj-pn a { display: grid; gap: .25rem; padding: 1rem 1.2rem; border-radius: 12px; background: #FFFFFF; border: 1px solid var(--linha-clara); color: var(--tinta); text-decoration: none; }
.view-projetos .pj-pn a:hover { border-color: var(--tinta); }
.view-projetos .pj-pn span { font-size: var(--fs-sm); font-weight: 700; color: var(--semente); }
.view-projetos .pj-pn b { font-family: var(--f-display); font-stretch: 86%; font-size: var(--fs-lg); line-height: 1.1; }
.view-projetos .pj-pn .r { text-align: right; }
.view-projetos .pj-same { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.view-projetos .pj-mini { display: grid; gap: .45rem; align-content: start; color: var(--tinta); text-decoration: none; }
.view-projetos .pj-mini .ci { border-radius: 6px; overflow: hidden; }
.view-projetos .pj-mini .ci img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.view-projetos .pj-mini .t { font-family: var(--f-display); font-weight: 750; font-stretch: 88%; font-size: var(--fs-md); line-height: 1.12; }
.view-projetos .pj-mini:hover .t { text-decoration: underline; text-underline-offset: .15em; }
.view-projetos .pj-mini .y { font-size: var(--fs-sm); line-height: 1.35; color: var(--tinta-2); }
.view-projetos .pj-edit { display: flex; flex-wrap: wrap; gap: .2rem .8rem; align-items: center; padding-top: 1.2rem; border-top: 1px solid var(--linha-clara); color: var(--tinta-2); }

@media (max-width: 1000px) {
  .view-projetos .pj-intro { grid-template-columns: 1fr; }
  .view-projetos .pj-tools { grid-template-columns: minmax(0, 1fr) auto; }
  .view-projetos .pj-tools .search { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .view-projetos .pj-hero { grid-template-columns: 1fr; min-height: 0; }
  .view-projetos .pj-art { grid-row: 1; padding: 2rem 1.25rem; }
  .view-projetos .pj-cover { width: min(70vw, 340px); }
  .view-projetos .pj-back { margin-bottom: 0; }
  .view-projetos .pj-same { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .view-projetos .pj-stats b { font-size: var(--fs-xl); }
  .view-projetos .pj-tools { grid-template-columns: minmax(0, 1fr) auto; gap: .7rem; }
  .view-projetos .pj-tools .field label[for="pjOrder"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .view-projetos .pj-tools .btn { padding-inline: 1rem; }
  .view-projetos .pj-browse .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
  .view-projetos .pj-browse .chips::-webkit-scrollbar { display: none; }
  .view-projetos .pj-browse .chip { flex: none; }
  .view-projetos .pj-pn { grid-template-columns: 1fr; }
  .view-projetos .pj-pn .r { text-align: left; }
  .view-projetos .pj-moments li { grid-template-columns: 1fr; }
  .view-projetos .pj-moments .y { grid-row: auto; }
}

/* Round 2: award badge on tiles, decade grouping, hero flag */
.view-projetos .pj-aw { justify-self: start; display: inline-flex; align-items: center; gap: .3rem; min-height: 26px; padding: 0 .55rem 0 .4rem; border-radius: 999px; background: var(--tinta); color: var(--papel); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.view-projetos .pj-aw.is-won { background: var(--laranja); color: var(--tinta); }
.view-projetos .pj-aw svg { width: 13px; height: 13px; fill: currentColor; }
@container (max-width: 150px) { .view-projetos .pj-aw { font-size: 0; gap: 0; padding: 0 .35rem; } }
.view-projetos .pj-viewbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: 1.2rem 0 .8rem; }
.view-projetos .pj-viewbar .pj-count { margin: 0; }
.view-projetos .pj-decade { display: grid; gap: 6px; }
.view-projetos .pj-decade + .pj-decade { margin-top: clamp(1.5rem, 3vw, 2.4rem); }
.view-projetos .pj-decade h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .5rem; margin-bottom: .4rem; border-bottom: 1px solid var(--noite-3); font-size: var(--fs-2xl); font-stretch: 72%; }
.view-projetos .pj-decade h3 span { font-family: var(--f-body, inherit); font-size: var(--fs-sm); font-weight: 600; color: var(--claro-2); }
.view-projetos .pj-hero #pjAwFlag .aw-flag { color: var(--claro); }
.view-projetos .pj-hero #pjAwFlag .aw-flag.is-won { color: var(--tinta); }

/* =========================================================
   Round 3
   ========================================================= */
/* Back buoy: blue, so it never reads as a call to action */
/* A boia: o jeito de voltar, sempre no canto de baixo à esquerda.
   Ela flutua sobre seções claras e escuras na mesma rolagem, então a cor da seção
   não serve de fundo — pintada de amarelo sobre o amarelo do Contrate, ela some.
   Fica a tinta da casa, quase preta, com um fio claro em volta: destaca no claro
   pela massa e no escuro pelo fio. A cor da página entra no disco da seta, que é
   onde o olho vai primeiro. Discreta de propósito: é mobília, não chamada. */
.boia { position: fixed; left: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); z-index: 44; display: inline-flex; align-items: center; gap: .55rem; max-width: min(320px, calc(100vw - 24px)); min-height: 46px; padding: .35rem .95rem .35rem .35rem; border-radius: 999px; background: var(--noite); color: var(--claro); text-decoration: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .34), 0 8px 24px rgba(0, 0, 0, .34); transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.boia:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 12px 30px rgba(0, 0, 0, .42); }
.boia:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }
.boia-ar { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--laranja); color: var(--noite); font-weight: 800; font-size: var(--fs-base); }
/* O disco da seta veste a cor da página, quando a página tem uma. */
body.sec-color.has-sec .boia-ar { background: var(--sec); color: var(--sec-fg); }
.boia-tx { display: grid; line-height: 1.15; min-width: 0; }
.boia-tx b { font-size: var(--fs-base); }
.boia-tx span { font-size: var(--fs-xs); opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.is-locked .boia { display: none; }
@media (max-width: 899px) { .boia { bottom: calc(72px + env(safe-area-inset-bottom)); } }
@media print { .boia { display: none; } }
.view .jump .jump-back { background: var(--azul); color: #FFFFFF; font-weight: 700; }
.view .jump .jump-back:hover { background: #FFFFFF; color: var(--azul); }

/* Segmented view switch */
.seg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1.5px solid currentColor; }
.seg button { min-height: 40px; padding: 0 1rem; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; font-weight: 700; font-size: var(--fs-sm); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.on-noite .seg button[aria-pressed="true"], .pj-browse .seg button[aria-pressed="true"] { background: var(--claro); color: var(--tinta); }
.view-musica .disco-tools .seg { align-self: end; }

/* Awards: neutral, never orange (orange is for actions) */
.aw-flag, .aw-flag.is-won { background: transparent; border: 1.5px solid currentColor; color: inherit; }
.aw-flag .aw-star { fill: var(--areia); }
.on-papel .aw-flag .aw-star, .view-novo .nova-hero .aw-flag .aw-star { fill: var(--semente); }
.view-projetos .pj-hero #pjAwFlag .aw-flag, .view-projetos .pj-hero #pjAwFlag .aw-flag.is-won { color: var(--claro); }
.view-projetos .pj-aw, .view-projetos .pj-aw.is-won { background: rgba(18, 17, 16, .82); color: #F2F1EE; }
.view-projetos .pj-aw svg { fill: var(--areia); }

/* Projetos: tracks with duration, per-track musicians, full lineup */
.view-projetos .pj-tracks .tt { display: flex; justify-content: space-between; gap: 1rem; }
.view-projetos .pj-tracks .du { flex: none; font-family: var(--f-body, inherit); font-weight: 500; font-size: var(--fs-sm); color: var(--claro-2); font-variant-numeric: tabular-nums; }
.view-projetos .pj-tracks .pj-disc { display: block; padding: 1.2rem 0 .4rem; border-bottom: 1px solid var(--claro-2); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--laranja); }
.view-projetos .pj-who { grid-column: 2; margin-top: .2rem; }
.view-projetos .pj-who summary { cursor: pointer; width: max-content; min-height: 32px; display: inline-flex; align-items: center; font-size: var(--fs-sm); font-weight: 700; color: var(--areia); }
.view-projetos .pj-who p { font-size: var(--fs-sm); line-height: 1.45; color: var(--claro-2); padding: .2rem 0 .4rem; }
.view-projetos .member .on, .view-projetos .guest .on { font-size: var(--fs-sm); line-height: 1.4; }
.view-projetos .member .on a, .view-projetos .players .on a { color: inherit; text-underline-offset: .2em; }
.view-projetos .guest .on a { color: var(--papel); }
.view-projetos .pj-orch { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem 2rem; border-top: 2px solid var(--tinta); padding-top: 1rem; }
.view-projetos .pj-orch h4 { font-family: var(--f-display); font-weight: 800; font-stretch: 86%; font-size: var(--fs-md); }
.view-projetos .pj-orch h4 span { font-size: var(--fs-sm); font-weight: 600; color: var(--tinta-2); }
.view-projetos .pj-orch p { font-size: var(--fs-sm); line-height: 1.45; }
.view-projetos .pj-source { margin-top: 1.6rem; font-size: var(--fs-sm); color: var(--tinta-2); }

/* Mídia: team highlights + archive wall of mini thumbs that grow on hover */
.view-midia .md-sub { font-family: var(--f-display); font-weight: 800; font-stretch: 86%; font-size: var(--fs-lg); margin: 1.4rem 0 .9rem; }
.view-midia .md-acervo { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1rem; border-top: 1px solid var(--noite-3); }
.view-midia .md-acervo-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; }
.view-midia .md-acervo-head .md-sub { margin: 0; }
.view-midia .md-acervo-hint { font-size: var(--fs-sm); color: var(--claro-2); }
.view-midia .md-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 5px; padding: 1rem 0 2rem; }
.view-midia .md-wall.is-video { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.view-midia .mw-item { position: relative; display: block; aspect-ratio: 1; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: var(--noite-3); cursor: pointer; transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); }
.view-midia .md-wall.is-video .mw-item { aspect-ratio: 16 / 10; }
.view-midia .mw-item img { width: 100%; height: 100%; object-fit: cover; }
.view-midia .mw-t { position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem .35rem .25rem; background: linear-gradient(180deg, rgba(18,17,16,0), rgba(18,17,16,.92)); color: #FFFFFF; font-size: var(--fs-2xs); font-weight: 700; line-height: 1.2; text-align: left; opacity: 0; transition: opacity 200ms; }
.view-midia .mw-item:hover, .view-midia .mw-item:focus-visible { transform: scale(2.3); z-index: 5; box-shadow: 0 14px 40px rgba(0,0,0,.6); outline: none; }
.view-midia .mw-item:hover .mw-t, .view-midia .mw-item:focus-visible .mw-t { opacity: 1; }
.view-midia .mw-item:focus-visible { box-shadow: 0 0 0 1px var(--laranja), 0 14px 40px rgba(0,0,0,.6); }
.view-midia .mw-item.is-on { box-shadow: inset 0 0 0 3px var(--laranja); }
@media (hover: none) { .view-midia .mw-item:hover { transform: none; } .view-midia .mw-t { opacity: 1; font-size: var(--fs-2xs); } }
@media (prefers-reduced-motion: reduce) { .view-midia .mw-item { transition: none; } }

/* O choro pra mim */
.view-choro .ch-hero-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: end; }
.view-choro .ch-hero-tx { display: grid; gap: 1.2rem; }
.view-choro .ch-hero h1 { font-size: var(--fs-4xl); line-height: .82; }
.view-choro .ch-hero h1 span { display: block; color: var(--laranja); }
.view-choro .ch-photo { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 560px; }
.view-choro .ch-photo img { width: 100%; height: 100%; object-fit: cover; }
.view-choro .ch-words h2 { font-size: var(--fs-3xl); margin: .6rem 0 2rem; max-width: 16ch; }
.view-choro .ch-texts { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.view-choro .ch-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; border-top: 2px solid var(--tinta); padding-top: 1.4rem; }
.view-choro .ch-text:has(.ch-text-ph) { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.view-choro .ch-text-ph { margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5; }
.view-choro .ch-text-ph img { width: 100%; height: 100%; object-fit: cover; }
.view-choro .ch-kind { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--semente); }
.view-choro .on-noite .ch-kind { color: var(--laranja); }
.view-choro .ch-text h3 { font-size: var(--fs-2xl); margin: .3rem 0 1rem; }
.view-choro .ch-body { display: grid; gap: 1rem; font-size: var(--fs-md); line-height: 1.7; max-width: 66ch; }
.view-choro .ch-inside { display: grid; border-top: 2px solid var(--claro); }
.view-choro .ch-inside li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1.2rem; padding-block: 1.4rem; border-bottom: 1px solid var(--noite-3); }
.view-choro .ch-inside .y { font-family: var(--f-display); font-weight: 850; font-stretch: 70%; font-size: var(--fs-2xl); line-height: .9; color: var(--laranja); }
.view-choro .ch-inside h3 { font-size: var(--fs-lg); margin-bottom: .4rem; }
.view-choro .ch-inside p { max-width: 62ch; line-height: 1.55; color: var(--claro-2); }
.view-choro .ch-masters { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.view-choro .ch-master { display: grid; gap: .4rem; align-content: start; padding: 1.1rem; border-radius: 14px; background: var(--tinta); color: var(--papel); }
.view-choro .ch-master img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; margin-bottom: .4rem; }
.view-choro .ch-master .nm { font-family: var(--f-display); font-weight: 800; font-stretch: 85%; font-size: var(--fs-lg); line-height: 1.02; }
.view-choro .ch-master .ins { font-weight: 700; font-size: var(--fs-sm); color: var(--laranja); }
.view-choro .ch-master p { font-size: var(--fs-sm); line-height: 1.45; color: var(--claro-2); }
.view-choro .ch-discs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.6rem 1.1rem; }
.view-choro .ch-disc { display: grid; gap: .4rem; align-content: start; color: var(--tinta); text-decoration: none; }
.view-choro .ch-disc .ci { display: block; aspect-ratio: 1; border-radius: 6px; overflow: hidden; }
.view-choro .ch-disc img { width: 100%; height: 100%; object-fit: cover; }
.view-choro .ch-gc { display: grid; grid-template-rows: auto 1fr; height: 100%; padding: 10%; background: var(--cbg); color: var(--cfg); container-type: inline-size; }
.view-choro .ch-gc b { font-family: var(--f-display); font-weight: 850; font-stretch: 70%; font-size: 22cqi; line-height: .8; }
.view-choro .ch-gc span { align-self: end; font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-size: 11cqi; line-height: .95; }
.view-choro .ch-disc .t { font-family: var(--f-display); font-weight: 750; font-stretch: 88%; font-size: var(--fs-md); line-height: 1.1; }
.view-choro .ch-disc:hover .t { text-decoration: underline; text-underline-offset: .15em; }
.view-choro .ch-disc .y { font-size: var(--fs-sm); line-height: 1.35; color: var(--tinta-2); }
.view-choro .ch-listen { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.view-choro .ch-link { display: grid; gap: .5rem; align-content: start; padding: 1.2rem; border-radius: 14px; border: 1px solid var(--noite-3); }
.view-choro .ch-link h3 { font-size: var(--fs-lg); }
.view-choro .ch-link .brand-link { display: inline-flex; align-items: center; gap: .45rem; justify-self: start; min-height: 40px; font-weight: 700; color: var(--claro); }
@media (max-width: 860px) {
  .view-choro .ch-hero-in, .view-choro .ch-text:has(.ch-text-ph) { grid-template-columns: 1fr; }
  .view-choro .ch-photo { max-width: 420px; aspect-ratio: 4 / 3; }
  .view-choro .ch-inside li { grid-template-columns: 1fr; gap: .4rem; }
}

/* Booking agents */
.view-contrate .ct-phones { display: grid; gap: .15rem; margin: .2rem 0; }
.view-contrate .ct-phones li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 .6rem; font-size: var(--fs-sm); }
.view-contrate .ct-phones span { color: var(--tinta-2); }
.view-contrate .ct-partner a { overflow-wrap: anywhere; }

/* =========================================================
   Round 4 — design pass: orange only for action, calmer hierarchy,
   quieter provisional covers, rhythm, motion with purpose
   ========================================================= */
/* 1. Orange is for action. Labels, numbers and names on dark go sand or light. */
.page-hero .eyebrow, .on-noite .sec-head .eyebrow,
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .nova-hero .eyebrow, .view-projetos .pj-hero .eyebrow,
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vmeta .eyebrow, .view-midia .mv-meta .eyebrow, .view-bandolim .rozini .eyebrow { color: var(--areia); }
.on-noite .nc-cat, .on-noite .ec-meta, :is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .press-feature .src, :is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vitem .k,
.view-projetos .pj-vid .k, :is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .guest .ins, .view-choro .ch-master .ins, .view-contrate .ct-direct-l b,
.view-projetos .pj-tracks .pj-disc, .view-choro .on-noite .ch-kind, .view-hamilton .moment summary { color: var(--areia); }
.view-projetos .pj-stats b, .view-musica .stat b, .view-hamilton .fact b, :is(.view-hamilton, .view-premios) .aw-stat b,
.view-agenda .stop .yr, .view-hamilton .stop .yr, .view-hamilton .moment.hl .yr, .view-choro .ch-inside .y, .mini-moment .yr { color: var(--claro); }
.view-musica .latest h2, .view-projetos .pj-hero h1, :is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .nova-hero h1 { color: var(--claro); }
.view-hamilton .moment.hl .dot { border-color: var(--areia); background: var(--areia); }
.on-noite .status.won, .on-noite .soldout, .view-home .soldout.on-slide { background: var(--claro); color: var(--tinta); }
.tag-pill.nova { background: var(--tinta); color: var(--papel); }
.on-noite .tag-pill.nova { background: var(--claro); color: var(--tinta); }
.tag-pill.last, .on-noite .tag-pill.last { background: transparent; color: inherit; border: 1.5px solid currentColor; }
.header-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--claro); }
.menu-grid h2 a:hover, .menu-grid h2 a[aria-current="page"] { color: var(--areia); }
.link-row a:hover { color: inherit; }
.view-midia .mv-tag:hover, :is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .platforms a:hover { color: inherit; border-color: var(--claro); }
@media (max-width: 899px) { .tabbar [aria-current="page"] { color: var(--claro); box-shadow: inset 0 2px 0 var(--claro); } }

/* 2. Hierarchy: giant type only for page heroes and one moment per page */
.sec-head h2 { font-size: var(--fs-2xl); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .concept h2 { font-size: var(--fs-2xl); }
.view-projetos .pj-lineup { font-size: var(--fs-2xl); }
.view-musica .latest h2 { font-size: var(--fs-3xl); }
.view-choro .ch-words h2 { font-size: var(--fs-2xl); }
.view-blog .bg-empty h2, .view-blog .bg-sub h2 { font-size: var(--fs-2xl); }
.view-contrate .ct-contact-intro h2 { font-size: var(--fs-2xl); }
.view-projetos .pj-ficha h2, .view-projetos .pj-hire h2 { font-size: var(--fs-2xl); }

/* 3. Quieter provisional covers, so real covers stand out */
:is(.view-musica, .view-projetos) .gcover { background: color-mix(in srgb, var(--cbg) 16%, #ECE9E3); color: var(--tinta); box-shadow: inset 0 6px 0 var(--cbg); }
:is(.view-musica, .view-projetos) .gcover .gy { opacity: .55; }
.view-choro .ch-gc { background: color-mix(in srgb, var(--cbg) 16%, #ECE9E3); color: var(--tinta); box-shadow: inset 0 6px 0 var(--cbg); }
.view-choro .ch-gc b { opacity: .55; }
.view-projetos .pj-tile:not(.has-cover) { background: color-mix(in srgb, var(--tbg) 22%, #1A1816); color: var(--claro); box-shadow: inset 0 4px 0 var(--tbg), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.view-projetos .pj-tile:not(.has-cover) .pj-yr { opacity: .4; }
.view-projetos .pj-art { background: color-mix(in srgb, var(--cbg) 30%, #121110); }

/* 4. Rhythm: light sections between dark ones, a full-bleed photo breath */
.on-papel .credits { border-top-color: var(--tinta); }
.on-papel .credits dt { color: var(--tinta-2); }
.on-papel .credits dt, .on-papel .credits dd { border-color: var(--linha-clara); }
.on-papel .pj-hire .eyebrow { color: var(--semente); }
.view-projetos .pj-ficha-sec .pj-hire .muted { color: var(--tinta-2); }
.view-projetos .pj-pager .pj-edit { border-top-color: rgba(18, 17, 16, .25); }
.md-breath { position: relative; margin: 0; height: clamp(260px, 52vw, 620px); overflow: hidden; background: var(--noite); }
.md-breath img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.md-breath figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding-block: 1.2rem; color: #FFFFFF; font-weight: 700; background: linear-gradient(180deg, rgba(18,17,16,0), rgba(18,17,16,.75)); }
.md-breath figcaption span { font-weight: 500; opacity: .8; margin-left: .5rem; }

/* 5. Motion with purpose: the mosaic composes itself; album cover morphs between pages */
@keyframes tileIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.mosaic .tile, .view-projetos .pj-tile { animation: tileIn 520ms var(--ease) both; animation-delay: calc(var(--i, 0) * 32ms); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; }
::view-transition-group(pj-art) { animation-duration: 520ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) {
  .mosaic .tile, .view-projetos .pj-tile { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* 6. Home: the mosaic right after the highlights */
.mosaic-sec.is-home { padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); }

/* 7. Mobile: "Voltar" lives in the header instead of floating over content */
.hdr-back { display: none; }
@media (max-width: 899px) {
  .boia { display: none !important; }
  .hdr-back:not([hidden]) { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-right: .5rem; border-radius: 50%; background: var(--azul); color: #FFFFFF; font-weight: 800; font-size: var(--fs-md); text-decoration: none; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
  .site-header .wrap { justify-content: flex-start; }
  .site-header .header-actions { margin-left: auto; }
  .hdr-back:not([hidden]) + .brand { font-size: var(--fs-base); }
}

/* NOVA: 7 special guests sit better in four columns */
@media (min-width: 1101px) { .view-novo .guests { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* =========================================================
   Round 5 — Educacional, Loja, Lançados lá fora
   ========================================================= */
/* Educacional */
.view-educacional .ed-hero-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: end; }
.view-educacional .ed-hero-in > div { display: grid; gap: 1.2rem; }
.view-educacional .ed-hero h1 { font-size: var(--fs-4xl); line-height: .84; }
.view-educacional .ed-hero h1 span { display: block; color: var(--areia); }
.view-educacional .ed-photo { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 520px; }
.view-educacional .ed-photo img { width: 100%; height: 100%; object-fit: cover; }
.view-educacional .ed-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 4vw, 3.5rem); border-top: 2px solid var(--tinta); }
.view-educacional .ed-values li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem; padding-block: 1.4rem; border-bottom: 1px solid var(--linha-clara); }
.view-educacional .ed-values .n { font-family: var(--f-display); font-weight: 850; font-stretch: 70%; font-size: var(--fs-xl); line-height: .9; color: var(--semente); }
.view-educacional .ed-values h3 { font-size: var(--fs-xl); margin-bottom: .4rem; }
.view-educacional .ed-values p { font-size: var(--fs-base); line-height: 1.55; max-width: 46ch; }
.view-educacional .ed-values .ed-draft { grid-column: 1 / -1; display: block; border: 0; padding-top: 1rem; }
.view-educacional .ed-tips { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; counter-reset: none; }
.view-educacional .ed-tips li { display: grid; gap: .5rem; align-content: start; padding: 1.3rem; border-radius: 14px; border: 1px solid var(--noite-3); }
.view-educacional .ed-tips .n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--areia); color: var(--areia); font-weight: 800; }
.view-educacional .ed-tips h3 { font-size: var(--fs-lg); }
.view-educacional .ed-tips p { color: var(--claro-2); line-height: 1.5; }
.view-educacional .ed-tips .pill { margin-top: .4rem; }
.view-educacional .ed-sub { font-size: var(--fs-xl); margin: clamp(2.5rem, 5vw, 3.5rem) 0 1rem; }
.view-educacional .ed-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.view-educacional .ed-books li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 1rem; align-items: start; }
.view-educacional .ed-books img, .view-educacional .ed-book-ph { width: 72px; aspect-ratio: 2 / 3; border-radius: 4px; object-fit: cover; }
.view-educacional .ed-book-ph { display: grid; place-items: center; background: var(--noite-3); font-family: var(--f-display); font-weight: 850; font-size: var(--fs-lg); }
.view-educacional .ed-books h4 { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-md); }
.view-educacional .ed-books .au { color: var(--areia); font-size: var(--fs-sm); font-weight: 700; }
.view-educacional .ed-scores { display: grid; border-top: 2px solid var(--tinta); }
.view-educacional .ed-scores li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding-block: 1rem; border-bottom: 1px solid rgba(18,17,16,.25); }
.view-educacional .ed-scores h3 { font-size: var(--fs-lg); }
.view-educacional .ed-scores .meta { font-size: var(--fs-sm); color: var(--tinta-2); }
.view-educacional .ed-courses { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.2rem; align-items: stretch; }
.view-educacional .ed-course { display: grid; gap: .8rem; align-content: start; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 18px; background: var(--claro); color: var(--tinta); }
.view-educacional .ed-course.is-soon { background: transparent; color: var(--claro); border: 1.5px dashed #5A554F; }
.view-educacional .ed-course .eyebrow { color: var(--semente); }
.view-educacional .ed-course.is-soon .eyebrow { color: var(--areia); }
.view-educacional .ed-course h3 { font-size: var(--fs-2xl); line-height: .95; }
.view-educacional .ed-course .linha { font-size: var(--fs-md); line-height: 1.45; max-width: 44ch; }
.view-educacional .ed-facts { display: grid; gap: .35rem; margin: .2rem 0 .4rem; }
.view-educacional .ed-facts li { padding-left: 1.3rem; position: relative; line-height: 1.4; }
.view-educacional .ed-facts li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; color: var(--semente); }
.view-educacional .ed-course .para { font-size: var(--fs-sm); color: var(--tinta-2); }
.view-educacional .ed-course .btn { justify-self: start; margin-top: .4rem; }
@media (max-width: 900px) {
  .view-educacional .ed-hero-in, .view-educacional .ed-courses, .view-educacional .ed-values { grid-template-columns: 1fr; }
  .view-educacional .ed-photo { max-width: 420px; aspect-ratio: 4 / 3; }
}

/* Loja */
.view-loja .lj-cats { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .4rem; }
.view-loja .lj-cats .chip { color: var(--claro); border-color: #5A554F; text-decoration: none; }
.view-loja .lj-cats .chip:hover { border-color: var(--claro); }
.view-loja .lj-soon-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.view-loja .lj-soon-in p { font-size: var(--fs-base); max-width: 56ch; }
.view-loja .lj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.4rem 1.1rem; }
.view-loja .lj-card { display: grid; grid-template-rows: auto 1fr; border-radius: 14px; overflow: hidden; background: #FFFFFF; color: var(--tinta); border: 1px solid var(--linha-clara); }
.view-loja .on-noite .lj-card { border-color: transparent; }
.view-loja .lj-ph { display: block; aspect-ratio: 1; background: var(--papel-2); overflow: hidden; }
.view-loja .lj-ph img { width: 100%; height: 100%; object-fit: cover; }
/* Produto sem foto. O quadrado grande era desenho para uma loja com poucas partituras;
   com 38 na prateleira a página virava uma parede de retângulos bege iguais e o título
   de cada partitura sumia. Vira uma tarja fina: diz o tipo e devolve o espaço ao texto. */
.view-loja .lj-ph.is-type { display: grid; place-items: center start; aspect-ratio: auto; padding: .55rem .9rem;
  background: var(--papel-2); }
.view-loja .lj-ph.is-type b { font-family: var(--f-display); font-weight: 850; font-stretch: 72%; font-size: var(--fs-sm);
  letter-spacing: .06em; text-transform: uppercase; line-height: 1; color: var(--semente); }
.view-loja .lj-tx { display: grid; gap: .35rem; align-content: start; padding: 1rem 1.1rem 1.2rem; }
.view-loja .lj-kind { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--semente); }
.view-loja .lj-card h3 { font-size: var(--fs-md); line-height: 1.1; }
.view-loja .lj-card p { font-size: var(--fs-sm); line-height: 1.45; color: var(--tinta-2); }
.view-loja .lj-buy { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .5rem; }
.view-loja .lj-price { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-md); }
.view-loja .lj-inst { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.view-loja .lj-inst-art { display: grid; place-content: center; aspect-ratio: 1; border-radius: 18px; background: color-mix(in srgb, var(--semente) 40%, #121110); text-align: center; }
.view-loja .lj-inst-art span { font-family: var(--f-display); font-weight: 850; font-stretch: 66%; font-size: var(--fs-5xl); line-height: .8; color: var(--claro); }
.view-loja .lj-inst-art small { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--areia); }
/* Com a foto do instrumento (fundo branco de catálogo), o quadro vira a moldura da foto. */
.view-loja .lj-inst-art.has-foto { display: block; overflow: hidden; background: #FFFFFF; }
.view-loja .lj-inst-art.has-foto img { display: block; width: 100%; height: 100%; object-fit: contain; }
.view-loja .lj-inst-tx { display: grid; gap: .8rem; }
.view-loja .lj-inst .lj-kind { color: var(--areia); }
.view-loja .lj-inst h3 { font-size: var(--fs-2xl); line-height: .95; }
.view-loja .lj-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; border-top: 2px solid var(--claro); }
.view-loja .lj-specs div { display: grid; gap: .1rem; padding-block: .6rem; border-bottom: 1px solid var(--noite-3); }
.view-loja .lj-specs dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--claro-2); }
.view-loja .lj-specs dd { margin: 0; font-weight: 600; }
.view-loja .lj-inst .textlink { color: var(--claro); }
@media (max-width: 860px) { .view-loja .lj-inst { grid-template-columns: 1fr; } .view-loja .lj-inst-art { max-width: 320px; } }

/* Música: released abroad */
.view-musica .la-fora { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; }
.view-musica .lf-item { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.view-musica .lf-item .ci { border-radius: 6px; overflow: hidden; }
.view-musica .lf-item .eyebrow { color: var(--semente); }
.view-musica .lf-item h3 { font-size: var(--fs-xl); margin: .3rem 0 .6rem; }
.view-musica .lf-item .tl { margin-bottom: .6rem; }
@media (max-width: 520px) { .view-musica .lf-item { grid-template-columns: 1fr; } .view-musica .lf-item .ci { max-width: 200px; } }

.view-musica .lf-note { color: var(--tinta-2); margin: -.3rem 0 .6rem; }

/* Direct contact chips (Contrate hero and the hire band) */
.contact-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.contact-chips a { display: inline-flex; align-items: center; gap: .7rem; min-height: 54px; padding: .4rem 1.1rem .4rem .45rem; border-radius: 999px; background: var(--tinta); color: var(--papel); text-decoration: none; transition: transform 180ms var(--ease), background 180ms var(--ease); }
.contact-chips a:hover { transform: translateY(-2px); background: #000000; }
.contact-chips a:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.contact-chips .cc-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--papel); color: var(--tinta); }
.contact-chips .cc-ic svg { width: 21px; height: 21px; }
.contact-chips .cc-tx { display: grid; gap: .1rem; line-height: 1.15; min-width: 0; }
.contact-chips small { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .72; }
.contact-chips b { font-size: var(--fs-sm); font-weight: 700; overflow-wrap: anywhere; }
.view-contrate .ct-hero-direct { margin-top: .4rem; }
.hire .contact-chips { margin-top: 1.1rem; }
@media (max-width: 600px) { .contact-chips li { flex: 1 1 100%; } .contact-chips a { width: 100%; } }

/* Contact lines with icons */
.cl { display: inline-flex; align-items: center; gap: .55rem; min-height: 40px; color: inherit; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.cl:hover span:not(.cl-ic):not(.sr-only) { text-decoration: underline; text-underline-offset: .2em; }
.cl-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--tinta); color: var(--papel); }
.cl-ic svg { width: 17px; height: 17px; }
.on-noite .cl-ic { background: var(--claro); color: var(--tinta); }
.view-contrate .ct-cl { display: grid; gap: .1rem; margin-top: .3rem; }
.view-contrate .ct-ph { display: grid; }
.view-contrate .ct-ph-who { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-2); margin-top: .35rem; }
.view-contrate .ct-manager { margin-bottom: 1.2rem; }
.view-contrate .ct-manager-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 1.2rem 1.4rem; border-radius: 16px; background: var(--tinta); color: var(--papel); }
.view-contrate .ct-manager-in .eyebrow { color: var(--areia); }
.view-contrate .ct-manager-n { font-family: var(--f-display); font-weight: 850; font-stretch: 80%; font-size: var(--fs-2xl); line-height: 1; margin-top: .3rem; }
.view-contrate .ct-manager-r { color: var(--claro-2); font-weight: 600; }
.view-contrate .ct-manager-in .ct-cl { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0; }
.view-contrate .ct-manager-in .cl-ic { background: var(--papel); color: var(--tinta); }
.view-contrate .ct-direct #ctDirectChips { margin-top: .3rem; }
.view-midia #prContact .cl { margin-top: .2rem; }

/* Home: "Ao vivo" with two dates and a photo in between; + Novo with the album cover */
/* The album cover is shown whole: never cropped, with room around it, on its own cream */
/* The cover's own cream margin bleeds into the panel: the egg and the title (12–88% wide, 13–96% tall in the artwork) always stay inside */
.view-home .slide-media.is-cover, .view-novo .nova-hero .ph.is-cover { position: relative; overflow: hidden; background: #FAF2DE; --pad: clamp(1rem, 3vw, 2.4rem); --h: calc((100% - 2 * var(--pad)) / .83); }
.view-home .slide-media.is-cover img, .view-novo .nova-hero .ph.is-cover img { position: absolute; left: 50%; bottom: calc(var(--pad) - var(--h) * .04); height: var(--h); width: auto; aspect-ratio: 1; max-width: none; object-fit: cover; translate: -50% 0; transform: none !important; transition: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 97%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 97%, transparent 100%); mask-composite: intersect; }

.view-contrate .ct-partner { align-content: start; }

/* Home "Ao vivo" as a gig poster: full-bleed crowd, two tickets on top */
.view-home .slide.slide-show { display: block; position: relative; background: var(--noite); color: var(--claro); }
.view-home .slide-show .slide-media { position: absolute; inset: 0; }
.view-home .slide-show .slide-media img { object-position: 50% 42%; }
.view-home .slide-show .slide-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,17,16,.62) 0%, rgba(18,17,16,.12) 40%, rgba(18,17,16,.12) 60%, rgba(18,17,16,.62) 100%), linear-gradient(0deg, rgba(18,17,16,.72) 0%, rgba(18,17,16,0) 55%); }
.view-home .show-stage { position: relative; z-index: 1; height: 100%; display: grid; grid-template-columns: minmax(0, 390px) minmax(0, 1fr) minmax(0, 390px); grid-template-rows: auto minmax(0, 1fr) auto; gap: 1rem 1.5rem; padding: clamp(1.2rem, 3vw, 2.6rem); }
.view-home .show-kicker { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: .6rem; min-height: 38px; padding: 0 1rem 0 .8rem; border-radius: 999px; background: rgba(18,17,16,.72); color: #FFFFFF; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.view-home .live-dot { width: 10px; height: 10px; border-radius: 50%; background: #FF3B30; box-shadow: 0 0 0 0 rgba(255,59,48,.55); animation: livePulse 1.8s ease-out infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(255,59,48,.55); } 80%, 100% { box-shadow: 0 0 0 12px rgba(255,59,48,0); } }
.view-home #showSlide { grid-column: 1; grid-row: 2 / 4; align-self: end; }
.view-home #showSlide2 { grid-column: 3; grid-row: 2 / 4; align-self: end; }
.view-home .show-all { grid-column: 2; grid-row: 3; justify-self: center; align-self: end; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: #FFFFFF; font-weight: 700; text-underline-offset: .25em; }
.view-home .slide-show.is-single #showSlide2 { display: none; }
.view-home .slide-show.is-single .show-all { grid-column: 3; justify-self: end; }

/* The ticket: side notches and a perforated stub */
.view-home .show-card { --stub: 74px; position: relative; display: grid; gap: .3rem; align-content: start; padding: 1.3rem 1.4rem calc(var(--stub) + .9rem); border-radius: 18px; background: var(--papel); color: var(--tinta);
  -webkit-mask: radial-gradient(circle 13px at 0 calc(100% - var(--stub)), #0000 96%, #000 100%) left / 51% 100% no-repeat, radial-gradient(circle 13px at 100% calc(100% - var(--stub)), #0000 96%, #000 100%) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 13px at 0 calc(100% - var(--stub)), #0000 96%, #000 100%) left / 51% 100% no-repeat, radial-gradient(circle 13px at 100% calc(100% - var(--stub)), #0000 96%, #000 100%) right / 51% 100% no-repeat; }
.view-home .show-card.is-dark { background: rgba(18,17,16,.92); color: var(--claro); }
.view-home .show-card .sc-label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--semente); }
.view-home .show-card.is-dark .sc-label { color: var(--areia); }
.view-home .show-card .sc-date { display: flex; align-items: flex-end; gap: .7rem; margin-top: .3rem; line-height: .8; }
.view-home .show-card .sc-date b { font-family: var(--f-display); font-weight: 850; font-stretch: 66%; font-size: var(--fs-3xl); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.view-home .show-card .sc-date span { padding-bottom: .5em; font-size: var(--fs-sm); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.25; }
.view-home .slide-show .show-card h2.sc-city { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; margin-top: .5rem; font-size: var(--fs-2xl); line-height: .95; letter-spacing: -0.02em; }
.view-home .show-card .sc-city small { font-family: var(--f-body, inherit); font-size: var(--fs-base); font-weight: 700; letter-spacing: .02em; opacity: .7; }
.view-home .show-card .sc-venue { font-weight: 600; line-height: 1.35; }
.view-home .show-card .sc-project { font-size: var(--fs-sm); opacity: .72; }
.view-home .show-card .sc-stub { position: absolute; left: 0; right: 0; bottom: 0; height: var(--stub); display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: 0 1.4rem; border-top: 2px dashed rgba(18,17,16,.28); }
.view-home .show-card.is-dark .sc-stub { border-top-color: rgba(242,241,238,.28); }
.view-home .show-card .sc-stub .textlink { color: inherit; min-height: 40px; }
.view-home .show-card .sc-pill { display: inline-flex; align-items: center; min-height: 34px; padding: 0 .85rem; border-radius: 999px; border: 1.5px solid currentColor; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.view-home .show-card .sc-pill.is-sold { border-color: var(--semente); background: var(--semente); color: #F6EDE6; }
.view-home .show-card.is-dark .sc-pill.is-sold { border-color: var(--claro); background: var(--claro); color: var(--tinta); }
@media (prefers-reduced-motion: reduce) { .view-home .live-dot { animation: none; } }

@media (max-width: 860px) {
  .view-home .slide.slide-show { height: auto; }
  .view-home .slide-show .slide-media { position: relative; height: 52vw; }
  .view-home .show-stage { position: static; height: auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: .8rem; padding: 0 1rem 1.4rem; margin-top: -3rem; }
  .view-home #showSlide2 .sc-project, .view-home #showSlide2 .sc-venue { display: none; }
  .view-home #showSlide2 .sc-date b { font-size: var(--fs-2xl); }
  .view-home #showSlide2 h2.sc-city { font-size: var(--fs-lg); }
  .view-home .show-kicker { position: absolute; top: 1rem; left: 1rem; z-index: 2; }
  .view-home #showSlide, .view-home #showSlide2, .view-home .show-all { grid-column: 1; grid-row: auto; align-self: auto; position: relative; z-index: 1; }
  .view-home .show-all, .view-home .slide-show.is-single .show-all { justify-self: start; grid-column: 1; }
  .view-home .show-card { --stub: 68px; }
  .view-home .show-card .sc-date b { font-size: var(--fs-2xl); }
}

/* Header, reduced to the essentials: brand, languages and the menu */
.site-header .header-actions { margin-left: auto; gap: .8rem; }
.site-header .lang { display: flex; }
.site-header .lang a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 .5rem; }
@media (max-width: 600px) {
  .site-header .menu-btn { width: 44px; padding: 0; justify-content: center; }
  .site-header .menu-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-header .header-actions { gap: .3rem; }
  .site-header .lang a { padding: 0 .35rem; }
}

/* NOVA special guests with a photo slot */
.view-novo .guest { padding: .7rem .7rem 1.1rem; }
.view-novo .guest > :not(.g-ph) { margin-inline: .5rem; }
.view-novo .guest .g-ph { display: grid; place-items: center; aspect-ratio: 4 / 5; margin-bottom: .5rem; border-radius: 10px; overflow: hidden; background: #2A2724; }
.view-novo .guest .g-ph img { width: 100%; height: 100%; object-fit: cover; }
.view-novo .guest .g-ph.is-empty { width: 56px; aspect-ratio: 1; margin: .5rem .5rem .3rem; border-radius: 50%; border: 1.5px dashed #5A554F; background: #24211E; font-family: var(--f-display); font-weight: 850; font-stretch: 76%; font-size: var(--fs-md); color: var(--areia); }
.view-novo .guest .g-cred { font-size: var(--fs-xs); color: var(--claro-2); }

/* NOVA hotsite hero with the album cover */
.view-novo .nova-hero .ph.is-cover img { object-position: 50% 50%; }
/* ===== Playlist Hamilton: page, turntable deck, site-wide mini-player ===== */
.view-playlist .pl-hero { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 85% 40%, #2A2622 0%, var(--noite) 62%); color: var(--claro); padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 6vw, 5rem); }
.view-playlist .pl-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.view-playlist .pl-intro h1 { font-family: var(--f-display); font-size: var(--fs-3xl); line-height: .95; letter-spacing: -.02em; margin: .4rem 0 1rem; }
.view-playlist .pl-intro .lede { color: var(--claro-2); max-width: 34ch; font-size: var(--fs-md); }
.view-playlist .pl-lists { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; }
.view-playlist .pl-lists .chip { min-height: 44px; }
.view-playlist .pl-lists .chip .n { opacity: .6; font-variant-numeric: tabular-nums; margin-left: .2rem; }

/* The turntable: a warm plinth so the black record doesn't disappear into the dark page */
.view-playlist .pl-deck { position: relative; display: grid; justify-items: center; gap: 1.4rem; padding: clamp(1.2rem, 3vw, 2.2rem); border-radius: 22px; background: linear-gradient(155deg, #453C33 0%, #2A2420 45%, #1C1815 100%); box-shadow: 0 30px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.06); }
.view-playlist .pl-deck::before { content: ""; position: absolute; inset: 10px; border-radius: 16px; border: 1px solid rgba(255,255,255,.06); pointer-events: none; }
.view-playlist .pl-record { position: relative; width: min(380px, 72vw); aspect-ratio: 1; border-radius: 50%; background:
  repeating-radial-gradient(circle at 50% 50%, #121110 0 2px, #1D1A18 2px 4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.1), 0 0 0 10px rgba(255,255,255,.04); }
/* A light sheen turning with the record reads as vinyl */
.view-playlist .pl-grooves { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, rgba(255,255,255,.16) 0deg, transparent 40deg 160deg, rgba(255,255,255,.1) 200deg, transparent 240deg 330deg, rgba(255,255,255,.14) 360deg); mix-blend-mode: screen; }
.view-playlist .pl-label { position: absolute; inset: 29%; border-radius: 50%; background: var(--laranja) center / cover no-repeat; box-shadow: 0 0 0 3px #0A0909, 0 4px 16px rgba(0,0,0,.5); }
.view-playlist .pl-spindle { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: linear-gradient(#F2F1EE, #9A958C); box-shadow: 0 0 0 3px #0A0909; }
.view-playlist .pl-record { animation: plSpin 3.2s linear infinite; animation-play-state: paused; }
.view-playlist .pl-record.is-spinning { animation-play-state: running; }
@keyframes plSpin { to { transform: rotate(360deg); } }
.view-playlist .pl-arm { position: absolute; top: 8%; right: 7%; width: 11px; height: 42%; border-radius: 6px; background: linear-gradient(#EDE7DD, #8F887D); transform-origin: 50% 6%; transform: rotate(10deg); transition: transform 700ms var(--ease); box-shadow: 0 10px 22px rgba(0,0,0,.5); }
.view-playlist .pl-arm::before { content: ""; position: absolute; top: -14px; left: 50%; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #57504A, #2A2622); box-shadow: inset 0 0 0 5px #7C746A, 0 4px 10px rgba(0,0,0,.4); }
.view-playlist .pl-arm::after { content: ""; position: absolute; bottom: -10px; left: -6px; width: 22px; height: 28px; border-radius: 4px; background: linear-gradient(#2A2622, #15120F); }
.view-playlist .pl-deck:has(.is-spinning) .pl-arm { transform: rotate(26deg); }
.view-playlist .pl-now { width: min(420px, 100%); text-align: center; }
.view-playlist .pl-now-k { font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--areia); margin: 0; }
.view-playlist .pl-now-t { font-family: var(--f-display); font-size: var(--fs-xl); margin: .3rem 0 .2rem; line-height: 1.05; }
.view-playlist .pl-now-s { color: var(--claro-2); margin: 0; min-height: 1.4em; }
.view-playlist .pl-ctrl, .mp-ctrl { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.view-playlist .pl-ctrl { margin-top: 1.2rem; }
.pl-btn, .mp-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: transparent; color: var(--claro); cursor: pointer; transition: background 160ms var(--ease), transform 160ms var(--ease); }
.pl-btn svg, .mp-btn svg { width: 20px; height: 20px; fill: currentColor; }
.pl-btn:hover, .mp-btn:hover { background: rgba(255,255,255,.1); }
.pl-btn.is-main { width: 70px; height: 70px; border: 0; background: var(--laranja); color: #fff; box-shadow: 0 10px 30px rgba(255,106,0,.45); }
.pl-btn.is-main svg { width: 26px; height: 26px; }
.pl-btn.is-main:hover { transform: scale(1.06); background: var(--laranja); }
.view-playlist .pl-note { margin: 1rem auto 0; max-width: 40ch; font-size: var(--fs-sm); color: var(--claro-2); }

.view-playlist .pl-tracks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--noite-3); }
.view-playlist .pl-track { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; padding: .55rem .4rem; border-bottom: 1px solid var(--noite-3); transition: background 160ms var(--ease); }
.view-playlist .pl-track:hover { background: rgba(255,255,255,.03); }
.view-playlist .pl-track.is-on { background: rgba(255,255,255,.06); }
.view-playlist .pl-tbtn { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: transparent; color: var(--claro); cursor: pointer; font-variant-numeric: tabular-nums; }
.view-playlist .pl-tbtn .ic { position: absolute; opacity: 0; font-size: var(--fs-sm); }
.view-playlist .pl-tbtn .n { color: var(--claro-2); font-size: var(--fs-base); }
.view-playlist .pl-track:hover .pl-tbtn .n, .view-playlist .pl-tbtn:focus-visible .n, .view-playlist .pl-track.is-on .pl-tbtn .n { opacity: 0; }
.view-playlist .pl-track:hover .pl-tbtn .ic, .view-playlist .pl-tbtn:focus-visible .ic, .view-playlist .pl-track.is-on .pl-tbtn .ic { opacity: 1; }
.view-playlist .pl-track.is-on .pl-tbtn { background: var(--laranja); color: #fff; }
.view-playlist .pl-ttx .t { margin: 0; font-weight: 600; }
.view-playlist .pl-track.is-on .pl-ttx .t { color: #fff; }
.view-playlist .pl-ttx .s { margin: .1rem 0 0; font-size: var(--fs-sm); color: var(--claro-2); }
.view-playlist .pl-track .d { color: var(--claro-2); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.view-playlist .pl-soon { font-size: var(--fs-xs); color: var(--claro-2); white-space: nowrap; }
.view-playlist .pl-soon:empty { display: none; }
.view-playlist .pl-track .brand-link, .view-playlist .pl-track a { white-space: nowrap; }
@media (max-width: 899px) {
  .view-playlist .pl-hero-in { grid-template-columns: minmax(0, 1fr); }
  .view-playlist .pl-record { width: min(300px, 72vw); }
  .view-playlist .pl-arm { height: 40%; right: calc(50% - min(300px, 72vw) / 2 - 18px); }
  .view-playlist .pl-track { grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; }
  .view-playlist .pl-track .d { display: none; }
}
@media (prefers-reduced-motion: reduce) { .view-playlist .pl-record { animation: none; } .view-playlist .pl-arm { transition: none; } }

/* Site-wide player: one dock for own audio, Spotify and YouTube. Bottom-right on desktop (the boia lives bottom-left), above the tab bar on mobile. */
.mp { position: fixed; right: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); z-index: 46; display: grid; gap: .5rem; width: min(560px, calc(100vw - 24px)); padding: .55rem; border-radius: 22px; background: linear-gradient(180deg, rgba(34,31,28,.97), rgba(14,13,12,.98)); color: var(--claro); box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); backdrop-filter: blur(12px); animation: mpIn 360ms var(--ease) both; }
@keyframes mpIn { from { transform: translateY(24px); opacity: 0; } }
.mp-main { position: relative; display: flex; align-items: center; gap: .75rem; min-width: 0; }

/* The record: the cover as the label of a spinning vinyl */
.mp-disc { position: relative; flex: none; width: 64px; height: 64px; border-radius: 50%; text-decoration: none; }
.mp-vinyl { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; background: repeating-radial-gradient(circle at 50% 50%, #0b0a09 0 1.5px, #1d1b19 1.5px 3px); box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 8px 20px rgba(0,0,0,.5); animation: mpSpin 3.2s linear infinite; animation-play-state: paused; }
.mp-vinyl::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 20%, rgba(255,255,255,.12) 25%, transparent 32% 70%, rgba(255,255,255,.08) 75%, transparent 82%); pointer-events: none; }
.mp-vinyl img { width: 56%; height: 56%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #0b0a09; }
.mp-vinyl::before { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #0b0a09; z-index: 1; }
.mp.is-playing .mp-vinyl { animation-play-state: running; }
@keyframes mpSpin { to { transform: rotate(360deg); } }
.mp-disc:focus-visible { outline-offset: 4px; }

.mp-tx { flex: 1; min-width: 0; }
.mp-tx p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-k { font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--areia); }
.mp-t { font-weight: 700; font-size: var(--fs-base); line-height: 1.25; margin-top: .1rem !important; }
.mp-s { font-size: var(--fs-xs); color: var(--claro-2); }

/* Seek bar with times */
.mp-seek { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; }
.mp-time { flex: none; min-width: 2.4em; font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; color: var(--claro-2); }
.mp-time:last-child { text-align: right; }
.mp-seek input { --p: 0%; flex: 1; min-width: 0; height: 18px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.mp-seek input:disabled { cursor: default; opacity: .4; }
.mp-seek input::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--laranja) var(--p), rgba(255,255,255,.16) var(--p)); }
.mp-seek input::-moz-range-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--laranja) var(--p), rgba(255,255,255,.16) var(--p)); }
.mp-seek input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%; background: #fff; border: 0; transform: scale(0); transition: transform 160ms var(--ease); }
.mp-seek input::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; transform: scale(0); transition: transform 160ms var(--ease); }
.mp:hover .mp-seek input:not(:disabled)::-webkit-slider-thumb, .mp-seek input:focus-visible::-webkit-slider-thumb { transform: scale(1); }
.mp:hover .mp-seek input:not(:disabled)::-moz-range-thumb, .mp-seek input:focus-visible::-moz-range-thumb { transform: scale(1); }
.mp-seek input:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; border-radius: 4px; }
.mp[data-engine="none"] .mp-seek { display: none; }

.mp-btn { width: 40px; height: 40px; border: 0; }
.mp-btn.is-main { width: 48px; height: 48px; background: var(--laranja); color: var(--tinta); box-shadow: 0 8px 22px rgba(255,106,0,.35); }
.mp-btn.is-main:hover { background: var(--laranja); transform: scale(1.06); }
.mp-btn[hidden] { display: none; }

/* "Ouça no seu app" */
.mp-apps { position: relative; flex: none; }
.mp-app-btn { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: 0 .75rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: transparent; color: var(--claro); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; }
.mp-app-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mp-app-btn:hover, .mp-app-btn[aria-expanded="true"] { background: rgba(255,255,255,.1); }
.mp[data-engine="none"] .mp-app-btn { background: var(--laranja); border-color: var(--laranja); color: var(--tinta); }
.mp-app-list { position: absolute; right: 0; bottom: calc(100% + 12px); z-index: 2; width: 230px; margin: 0; padding: .45rem; list-style: none; border-radius: 16px; background: #1d1b19; box-shadow: 0 20px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.1); }
.mp-app-list li { margin: 0; }
.mp-app-h { padding: .35rem .6rem .45rem; font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--areia); }
.mp-app-list .brand-link { display: flex; align-items: center; gap: .6rem; min-height: 42px; padding: 0 .6rem; border-radius: 10px; color: var(--claro); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; }
.mp-app-list .brand-link:hover, .mp-app-list .brand-link:focus-visible { background: rgba(255,255,255,.08); }
.mp-app-list .brand-ic { width: 20px; height: 20px; }

.mp-close { flex: none; width: 30px; height: 40px; border: 0; background: none; color: var(--claro-2); font-size: var(--fs-lg); cursor: pointer; }
.mp-close:hover { color: #fff; }

/* The platform's own window: Spotify strip or YouTube video, always visible while it plays */
.mp-win { position: relative; border-radius: 14px; overflow: hidden; background: #000; }
.mp-win > div { display: none; }
.mp-win.is-spotify .mp-sp { display: block; height: 80px; }
.mp-win.is-youtube .mp-yt { display: block; aspect-ratio: 16 / 9; max-height: 240px; margin-inline: auto; }
.mp-sp iframe, .mp-yt iframe { display: block; width: 100%; height: 100%; border: 0; }
.mp-win.is-spotify { background: #121212; }

body.is-locked .mp { display: none; }
@media (max-width: 899px) {
  .mp { left: 8px; right: 8px; width: auto; bottom: calc(68px + env(safe-area-inset-bottom)); padding: .45rem; border-radius: 18px; gap: .4rem; }
  .mp-main { gap: .55rem; }
  .mp-disc { width: 48px; height: 48px; }
  .mp #mpPrev, .mp-time { display: none; }
  .mp-seek { position: absolute; left: 56px; right: 0; bottom: -6px; margin: 0; }
  .mp-seek input { height: 10px; }
  .mp-t { font-size: var(--fs-sm); }
  .mp-app-btn { width: 40px; padding: 0; justify-content: center; }
  .mp-app-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mp-btn.is-main { width: 44px; height: 44px; }
  .mp-win.is-youtube .mp-yt { max-height: 200px; }
  /* With Spotify, its strip already shows the track and a pause button: our row keeps only the list and navigation. */
  .mp[data-engine="spotify"] .mp-disc, .mp[data-engine="spotify"] .mp-t, .mp[data-engine="spotify"] .mp-s, .mp[data-engine="spotify"] .mp-seek, .mp[data-engine="spotify"] #mpPlay { display: none; }
  .mp[data-engine="spotify"] .mp-main { padding-left: .45rem; }
  .mp[data-engine="spotify"] .mp-btn, .mp[data-engine="spotify"] .mp-app-btn { width: 36px; height: 36px; min-height: 36px; }
  body.has-player-win .boia { bottom: calc(210px + env(safe-area-inset-bottom)); }
  body.has-player .boia { bottom: calc(150px + env(safe-area-inset-bottom)); }
  body.has-player-win .boia { bottom: calc(240px + env(safe-area-inset-bottom)); }
}
@media (min-width: 900px) { body.has-player .view > :last-child { padding-bottom: 7rem; } body.has-player-win .view > :last-child { padding-bottom: 13rem; } }
@media print { .mp { display: none; } }
@media (prefers-reduced-motion: reduce) { .mp, .mp-vinyl { animation: none; } }
.toast:not(.is-on) { visibility: hidden; transition: transform 300ms var(--ease), visibility 0s 300ms; }
body.has-player .toast { bottom: 6.2rem; }
@media (max-width: 899px) { body.has-player .toast { bottom: calc(150px + env(safe-area-inset-bottom)); } body.has-player-win .toast { bottom: calc(240px + env(safe-area-inset-bottom)); } }
body.has-player-win .toast { bottom: 13rem; }

/* Projetos: filter tiles stay album-sized; titles are capped so they never run into the year */
.view-projetos .pj-tt { font-size: clamp(15px, min(calc(var(--k) * 1cqi), 15cqh), 4.2rem); -webkit-line-clamp: 3; }
.view-projetos .pj-tile:not(.has-cover) .pj-yr { font-size: min(24cqi, 22cqh, 7rem); }
.view-projetos .pj-medium { display: flex; align-items: center; }
.view-projetos .pj-medium::before { content: "Registro"; margin-right: .3rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--areia); }

/* Contrate: one person for every booking */
.view-contrate .ct-boss { display: grid; gap: .8rem; margin-top: .6rem; padding: 1.1rem 1.2rem 1.2rem; border-radius: 18px; background: rgba(255,255,255,.55); border: 1px solid var(--linha-clara); max-width: 640px; }
.view-contrate .ct-boss-k { margin: 0; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.view-contrate .ct-boss-id { display: flex; align-items: center; gap: .9rem; }
.view-contrate .ct-boss-mono { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--tinta); color: var(--papel); font-family: var(--f-display); font-weight: 850; font-size: var(--fs-md); letter-spacing: .02em; }
.view-contrate .ct-boss-n { margin: 0; font-family: var(--f-display); font-weight: 850; font-stretch: 80%; font-size: var(--fs-xl); line-height: 1; }
.view-contrate .ct-boss-r { margin: .2rem 0 0; color: var(--tinta-2); font-weight: 600; font-size: var(--fs-base); }
.view-contrate .ct-boss .contact-chips a { min-height: 50px; }
.view-contrate .ct-manager-in { align-items: flex-end; padding: clamp(1.3rem, 3vw, 2rem); }
.view-contrate .ct-manager-in > div:first-child { max-width: 46ch; }
.view-contrate .ct-manager-r { margin-top: .5rem; line-height: 1.45; }
.view-contrate .ct-manager-act { display: grid; gap: 1rem; justify-items: start; }
.view-contrate .ct-regions-k { margin: 2rem 0 .8rem; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.view-contrate .ct-regions { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
@media (max-width: 600px) { .view-contrate .ct-boss { padding: 1rem; } }
.view-contrate .ct-manager-in .ct-manager-act .ct-cl { display: grid; gap: .15rem; }
.view-contrate .ct-manager-in .ct-manager-act { flex: 0 1 auto; min-width: 0; }
@media (max-width: 420px) { .view-contrate .ct-boss .contact-chips b, .contact-chips .cl-mail b { font-size: var(--fs-xs); } .view-contrate .ct-boss .contact-chips a { padding-right: .8rem; } }

/* Agenda: international dates take the "Internacional" blue */
.show-row.is-intl .date .d { color: var(--azul); }
.on-noite .show-row.is-intl .date .d, .is-dark .show-row.is-intl .date .d { color: #8FB0F2; }
.view-home .show-card.is-intl .sc-date b { color: var(--azul); }
.view-home .show-card.is-dark.is-intl .sc-date b { color: #8FB0F2; }

/* Home: Novidades lives in the banner */
.view-home .slide-news .slide-text h2 { font-size: var(--fs-3xl); line-height: .92; font-stretch: 80%; max-width: 18ch; }
.view-home .slide-news .slide-text h2 a { color: inherit; text-decoration: none; }
.view-home .slide-news .slide-text h2 a:hover { text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .12em; }
.view-home .slide-news .lede { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.view-home .slide-news .ns-more { list-style: none; margin: .2rem 0 .4rem; padding: 0; display: grid; gap: 0; max-width: 46ch; border-top: 1px solid rgba(255,255,255,.18); }
.view-home .slide-news .ns-more a { display: grid; gap: .15rem; padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.18); color: inherit; text-decoration: none; font-weight: 600; line-height: 1.3; }
.view-home .slide-news .ns-more a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: .2em; }
.view-home .slide-news .ns-cat { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--areia); }
@media (max-width: 899px) { .view-home .slide-news .ns-more li:nth-child(2) { display: none; } }

/* Home videos: three groups of four small thumbs that grow on hover */
.view-home .vgroups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.view-home .vg-l { margin: 0 0 .5rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--semente); }
.view-home .vg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.view-home .vt { position: relative; aspect-ratio: 16 / 10; padding: 0; border: 0; border-radius: 3px; overflow: hidden; background: var(--noite); cursor: pointer; transform-origin: left center; transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); z-index: 1; }
.view-home .vt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.view-home .vt-t { position: absolute; inset: auto 0 0 0; padding: 1.2rem .45rem .35rem; background: linear-gradient(transparent, rgba(0,0,0,.85)); color: #FFFFFF; font-size: var(--fs-2xs); font-weight: 700; line-height: 1.2; text-align: left; opacity: 0; }
.view-home .vt[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--laranja); }
/* No zoom over the neighbours: the hovered thumb lifts, the others dim, and the big player shows the preview */
@media (hover: hover) {
  /* The thumb never moves (moving it made it flicker under the cursor); the picture zooms inside its frame */
  .view-home .vt { transition: filter 260ms var(--ease), box-shadow 160ms var(--ease); }
  .view-home .vt img { transition: transform 360ms var(--ease); }
  .view-home .vgroups:has(.vg-grid:hover) .vt:not(:hover) { filter: grayscale(1) brightness(.6); }
  .view-home .vt:hover { box-shadow: 0 0 0 2px var(--tinta); }
  .view-home .vt:hover img { transform: scale(1.12); }
  .view-home .vt[aria-pressed="true"]:hover { box-shadow: 0 0 0 3px var(--laranja); }
}
.view-home .vt:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.view-home .player img { transition: opacity 200ms var(--ease); }
.view-home .player.is-preview::after { content: "Prévia"; position: absolute; left: .8rem; top: .8rem; z-index: 2; padding: .3rem .6rem; border-radius: 999px; background: rgba(18,17,16,.8); color: #FFFFFF; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
@media (max-width: 899px) {
  .view-home .vgroups { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .view-home .vg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .view-home .vt { transition: none; } }

/* Every page except Contrate closes with two buttons instead of the full hire band */
.hire-strip { background: var(--noite); color: var(--claro); }
.hire-strip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem; padding-block: clamp(2.4rem, 5vw, 3.6rem) clamp(.6rem, 1.5vw, 1rem); }
.view-home .hire-strip .wrap { padding-block: clamp(2.4rem, 5vw, 3.6rem) 0; }
/* The primary call: a big orange pill whose arrow disc turns on hover */
.hc-cta { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 1.2rem; min-width: min(300px, 100%); min-height: 60px; padding: .4rem .45rem .4rem 1.5rem; border-radius: 999px; background: var(--laranja); color: var(--tinta); text-decoration: none; overflow: hidden; isolation: isolate; box-shadow: 0 14px 40px rgba(255, 106, 0, .3); transition: transform 260ms var(--ease), box-shadow 260ms var(--ease); }
.hc-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--claro); transform: translateX(-101%); transition: transform 420ms var(--ease); }
.hc-cta-t { font-family: var(--f-display); font-weight: 850; font-stretch: 80%; font-size: var(--fs-lg); letter-spacing: -0.01em; line-height: 1; }
.hc-cta-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--tinta); color: var(--laranja); font-size: var(--fs-lg); transition: transform 420ms var(--ease), background 260ms var(--ease), color 260ms var(--ease); }
.hc-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 48px rgba(255, 106, 0, .4); }
.hc-cta:hover::before { transform: none; }
.hc-cta:hover .hc-cta-ic { transform: rotate(-45deg); background: var(--laranja); color: var(--tinta); }
.hc-cta:focus-visible { outline: 3px solid var(--claro); outline-offset: 4px; }
.hc-link { color: var(--claro); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--noite-3); padding-bottom: .2rem; transition: border-color 200ms var(--ease), color 200ms var(--ease); }
.hc-link:hover { color: #FFFFFF; border-color: var(--laranja); }
@media (max-width: 600px) {
  .hc-cta { width: 100%; min-height: 58px; }
  .hc-cta-ic { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .hc-cta, .hc-cta::before, .hc-cta-ic { transition: none; } }

/* Contrate: Marcos opens the region cards */
.view-contrate .ct-role { margin: 0 0 .1rem; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.view-contrate .ct-region.is-manager { box-shadow: inset 0 4px 0 var(--laranja); }
@media (min-width: 1100px) { .view-contrate .ct-regions[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.view-home .vt[data-noimg] { background: linear-gradient(135deg, var(--noite-3), var(--noite)); }
.view-home .vt[data-noimg] .vt-t { opacity: 1; background: none; inset: 0; display: flex; align-items: flex-end; }

/* Contrate abre com o nome, como todas as outras páginas, e só depois com quem fecha o
   show. A faixa amarela segue uma só, do título até os cartões de contato: por isso o
   bloco dos contatos entra com respiro curto em cima, para não abrir um vão de cor. */
.view-contrate .ct-top { padding-top: clamp(.6rem, 1.6vw, 1.2rem); }
.view-contrate .ct-top h2 { font-size: var(--fs-2xl); line-height: .9; font-stretch: 78%; letter-spacing: -0.02em; }
.view-contrate .ct-abre + .ct-top { border-top: 0; }
.view-contrate .ct-top .lead { max-width: 62ch; }
.view-contrate .ct-top .lead b { font-weight: 700; }
.view-contrate .ct-hero h2 { font-size: var(--fs-3xl); line-height: .86; font-stretch: 76%; letter-spacing: -0.03em; }
.view-contrate .ct-partner > p:not(.ct-agency):not(.ct-role) { font-size: var(--fs-sm); color: var(--tinta-2); }
.view-contrate .ct-top .sec-head > div { flex: 1 1 100%; max-width: none; }

/* Mosaic "holofote": when the cursor enters, the hovered tile keeps its color and the rest go black and white, dimmed */
@media (hover: hover) {
  .mosaic .tile, .view-projetos .pj-tile { transition: filter 380ms var(--ease), opacity 380ms var(--ease); }
  .mosaic:has(.tile:hover) .tile:not(:hover),
  .view-projetos .pj-mosaic:has(.pj-tile:hover) .pj-tile:not(:hover) { filter: grayscale(1) brightness(.5); }
  .mosaic .tile:hover img, .view-projetos .pj-tile:hover img { transform: scale(1.07); }
  .mosaic .tile-title { padding-bottom: .12em; background: linear-gradient(var(--laranja), var(--laranja)) left bottom / 0 .09em no-repeat; transition: background-size 380ms var(--ease), transform 380ms var(--ease); }
  .mosaic .tile:hover .tile-title { background-size: 100% .09em; }
  .mosaic .tile.is-color .tile-title { background-image: linear-gradient(var(--tfg), var(--tfg)); }
  .mosaic .tile:hover .tile-title { transform: translateY(-3px); }
  .mosaic .tile:not(.has-photo):hover { box-shadow: inset 0 0 0 3px var(--tfg); }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .mosaic .tile:hover .tile-title { transform: none; }
  .mosaic .tile:hover img, .view-projetos .pj-tile:hover img { transform: none; }
}
.view-contrate .ct-people { display: grid; gap: .9rem; align-content: start; }
.view-contrate .ct-people .ct-partner { padding-top: .8rem; }
.view-contrate .ct-agency-foot .ct-role { margin-bottom: .2rem; }

/* =========================================================
   Menu: section names on the left, the hovered section's pages open right next to the name,
   at the same height, with its photo beside them. Short trips for mouse and trackpad.
   ========================================================= */
.menu-stage { --mgap: clamp(1.4rem, 3vw, 3rem); position: relative; padding-block: clamp(1.2rem, 3.5vh, 2.6rem); min-height: calc(100vh - 170px); }
.menu-list { list-style: none; margin: 0; padding: 0; width: max-content; max-width: 45%; }
.mi-row { position: relative; display: flex; align-items: baseline; gap: .8rem; }
.mi-n { flex: none; width: 1.6rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; color: var(--claro-2); font-variant-numeric: tabular-nums; opacity: .55; transition: opacity 180ms var(--ease), color 180ms var(--ease); }
.mi-name { position: relative; display: inline-block; font-family: var(--f-display); font-weight: 850; font-stretch: 78%; letter-spacing: -0.02em; line-height: 1.04; font-size: clamp(1.9rem, min(6.2vh, 3.6vw), 3.6rem); color: rgba(242, 241, 238, .42); text-decoration: none; transition: color 180ms var(--ease); }
/* A little arrow after the active name points to its pages */
.mi-name::after { content: "→"; position: absolute; left: 100%; top: 50%; margin-left: .35em; font-size: .5em; transform: translate(-6px, -50%); opacity: 0; color: var(--laranja); transition: opacity 180ms var(--ease), transform 180ms var(--ease); }
.mi.is-active .mi-name { color: var(--laranja); }
.mi.is-active .mi-name::after { opacity: 1; transform: translate(0, -50%); }
.mi.is-active .mi-n { opacity: 1; color: var(--laranja); }
.mi-name:focus-visible { outline: 3px solid var(--claro); outline-offset: 4px; border-radius: 4px; }
/* Where the visitor is: a small dot, no strikethrough */
.mi.is-here .mi-row::before { content: ""; position: absolute; left: -14px; top: 50%; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: var(--claro); }
.mi-tg { display: none; }
.mi-panel { display: none; position: absolute; left: var(--mi-left, 45%); width: min(760px, calc(100% - var(--mi-left, 45%) - var(--pad))); top: var(--mi-top, 0); grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); grid-template-rows: auto auto auto 1fr; gap: .6rem var(--mgap); align-items: start; padding: 1rem 1.2rem 1.1rem; border-radius: 14px; background: var(--noite-2); border: 1px solid var(--noite-3); }
.mi.is-active .mi-panel { display: grid; animation: miPanel 240ms var(--ease) both; }
@keyframes miPanel { from { opacity: 0; transform: translateX(-8px); } }
.mi-k { grid-column: 1; margin: 0; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--areia); }
.mi-sub { grid-column: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mi-sub.is-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; }
.mi-groups { grid-column: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem; align-items: start; }
.mi-grp { display: grid; gap: .2rem; }
.mi-gh { display: block; padding: .35rem .5rem; margin-inline: -.5rem; border-radius: 8px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--laranja); text-decoration: none; }
.mi-gh:hover, .mi-gh:focus-visible { background: var(--noite-3); }
.mi-grp .mi-sub { border-left: 1px solid var(--noite-3); padding-left: .8rem; margin-left: .1rem; }
@media (max-width: 899px) { .mi-groups { grid-template-columns: minmax(0, 1fr); } }
.mi-sub a { display: block; padding: .45rem .5rem; margin-inline: -.5rem; border-radius: 8px; color: var(--claro); text-decoration: none; font-size: var(--fs-base); font-weight: 500; line-height: 1.25; transition: background 150ms var(--ease), color 150ms var(--ease); }
.mi-sub a:hover, .mi-sub a:focus-visible { background: var(--noite-3); color: var(--laranja); }
.mi-go { grid-column: 1; justify-self: start; margin-top: .2rem; color: var(--claro); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--laranja); padding-bottom: .1rem; }
.mi-go:hover { color: var(--laranja); }
.mi-ph { grid-column: 2; grid-row: 1 / span 4; position: relative; aspect-ratio: 4 / 5; max-height: 46vh; border-radius: 10px; overflow: hidden; background: var(--noite-3); }
.mi-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mi.is-active .mi-ph img { animation: miPhoto 650ms var(--ease) both; }
@keyframes miPhoto { from { filter: grayscale(1) brightness(.55); transform: scale(1.05); } }
@media (max-width: 1100px) and (min-width: 900px) { .mi-ph { display: none; } .mi-panel { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 899px) {
  .menu-stage { min-height: 0; padding-block: 1rem 1.6rem; }
  .menu-list { width: auto; max-width: none; }
  .mi { border-bottom: 1px solid var(--noite-3); }
  .mi-row { align-items: center; gap: .7rem; }
  .mi-n { opacity: 1; }
  .mi-name { flex: 1; font-size: var(--fs-2xl); padding-block: .45rem; color: var(--claro); }
  .mi-name::after { display: none; }
  .mi.is-active .mi-name, .mi.is-active .mi-n { color: var(--claro); }
  .mi-tg { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--noite-3); background: none; color: var(--claro); font-size: var(--fs-lg); cursor: pointer; transition: transform 220ms var(--ease); }
  .mi-tg[aria-expanded="true"] { transform: rotate(45deg); border-color: var(--claro-2); }
  .mi-panel, .mi.is-active .mi-panel { display: none; position: static; width: auto; padding: 0; border: 0; background: none; animation: none; }
  .mi.is-here .mi-row::before { left: -10px; }
  .mi.is-open .mi-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; padding: 0 0 1rem 2.3rem; }
  .mi-ph, .mi-k { display: none; }
  .mi-sub.is-2col { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .mi.is-active .mi-panel, .mi.is-active .mi-ph img { animation: none; } .mi-n, .mi-name, .mi-name::after { transition: none; } }

/* Show rows: a long project name never runs into the ticket button */
.show-row .tag-pill { max-width: 100%; white-space: normal; line-height: 1.2; padding-block: .25rem; text-align: left; }
/* Home agenda sits in a narrow column: the action goes under the text, aligned with the city */
.view-home .live .show-row { grid-template-columns: 4.6rem minmax(0, 1fr); align-items: start; row-gap: .7rem; }
.view-home .live .show-row .act { grid-column: 2; justify-content: start; }
.view-home .live .show-row .date { align-self: start; padding-top: .15rem; }


/* Hotsite: team credits sit on the sand Trio section */
.view-novo .team-credits { border-top-color: var(--tinta); max-width: none; }
.view-novo .nova-gravado { margin: 1.4rem 0 0; max-width: 62ch; color: var(--tinta-2); }
.view-novo .team-credits dt, .view-novo .team-credits dd { border-bottom-color: rgba(18,17,16,.2); }
.view-novo .team-credits dt { color: var(--tinta-2); }
.view-novo .team-credits .tbd { color: var(--tinta-2); font-style: italic; }
.view-novo #novoTeam { margin-top: 1.4rem; }

/* Project videos: the list runs horizontally under the player */
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vid-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vlist { display: flex; gap: .7rem; max-height: none; overflow-x: auto; overflow-y: hidden; padding: .2rem .1rem .6rem; scroll-snap-type: x proximity; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vitem { flex: 0 0 clamp(200px, 22%, 260px); grid-template-columns: minmax(0, 1fr); gap: .45rem; align-content: start; scroll-snap-align: start; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vitem .th { width: 100%; }
/* Project videos: the filter chips sit in one horizontal row under the title */
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) #videos .sec-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) #videos .sec-head .chips { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: .5rem; width: 100%; max-width: none; }

/* Home videos: title and label keep a fixed height, so previews never push the thumbs under the cursor (that caused the flicker) */
.view-home .feat-meta .eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.view-home .feat-meta h3 { min-height: 2.1em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.view-home .vt:hover img { transform: scale(1.08); }

/* Footer: Redes and Ouça start on the same line */
.foot-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 3rem; row-gap: .7rem; align-items: center; }
.foot-main .brand { grid-row: 1 / span 2; margin-right: 0; }
.foot-main .link-row { grid-column: 2; }
.foot-main .link-row .eyebrow { display: inline-block; width: 3.4rem; margin-right: .2rem; }
@media (max-width: 899px) { .foot-main { grid-template-columns: minmax(0, 1fr); } .foot-main .brand { grid-row: auto; } .foot-main .link-row { grid-column: 1; } }

/* Hotsite: official release as a direct download */
.view-novo .release-dl { display: inline-flex; align-items: center; gap: .9rem; margin-top: 1.4rem; padding: .55rem 1.3rem .55rem .55rem; border: 1.5px solid var(--tinta); border-radius: 999px; background: none; color: var(--tinta); cursor: pointer; text-align: left; font: inherit; transition: background 180ms var(--ease), color 180ms var(--ease); }
.view-novo .release-dl .rd-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tinta); color: var(--papel); font-size: var(--fs-md); }
.view-novo .release-dl b { display: block; font-weight: 700; }
.view-novo .release-dl small { display: block; font-size: var(--fs-xs); color: var(--tinta-2); }
.view-novo .release-dl:hover { background: var(--tinta); color: var(--papel); }
.view-novo .release-dl:hover small { color: var(--claro-2); }
.view-novo .release-dl:hover .rd-ic { background: var(--laranja); color: var(--tinta); }

/* Tracks: no audio, no play symbol */
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .tracks.is-silent .track { grid-template-columns: 2.4rem minmax(0, 1fr) auto; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .tracks.is-silent .pv-none { display: none; }
@media (max-width: 899px) { :is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .tracks.is-silent .track { grid-template-columns: 1.8rem minmax(0, 1fr); } }
.view-playlist .pl-tbtn.is-static { cursor: default; }
.view-playlist .pl-track.no-audio:hover { background: none; }
.view-playlist .pl-track.no-audio .pl-tbtn .n { opacity: 1 !important; }

/* Contrate opens straight on the cards */
.view-contrate .ct-top { padding-top: clamp(2rem, 4vw, 3rem); }
/* Project videos: small thumbnails, many in view */
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vitem { flex: 0 0 clamp(128px, 12.5%, 168px); padding: .3rem; gap: .3rem; border-radius: 8px; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vitem .th { border-radius: 5px; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vitem .k { font-size: var(--fs-2xs); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vitem .t { font-size: var(--fs-xs); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vitem br { display: none; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .vitem .k { display: block; }

/* Projetos: note for a format coming from the menu */
.view-projetos .pj-fmt-note { margin-top: .8rem; color: var(--claro-2); font-size: var(--fs-base); }
.view-projetos .pj-fmt-note b { color: var(--claro); }
.view-projetos .pj-fmt-note .textlink { margin-left: .5rem; }

/* Contrate: Fale conosco without the form */
.view-contrate .ct-fale { max-width: 70ch; }
.view-contrate .ct-prod, .view-contrate .ct-formlink { margin-top: 1rem; font-size: var(--fs-base); line-height: 1.5; }
.view-contrate .ct-prod a, .view-contrate .ct-formlink a { font-weight: 700; overflow-wrap: anywhere; }
.view-contrate #ctDirectChips { margin-top: 1.2rem; }

/* Singles: the filter chips run horizontally under the title */
.view-musica #singles .sec-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
.view-musica #singles .sec-head .chips { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: .5rem; width: 100%; max-width: none; }

/* Fale conosco: one address, big */
.view-contrate #ctProdMail .cl { font-size: var(--fs-md); font-weight: 700; }
.view-contrate #ctProdMail .cl-ic { width: 42px; height: 42px; }

/* NOVA: ficha técnica, sessões de gravação e agradecimentos */
.view-novo .sessions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .1rem 2rem; }
.view-novo .sessions li { display: grid; gap: .1rem; padding: .8rem 0; border-bottom: 1px solid rgba(18,17,16,.2); }
.view-novo .ss-n { font-weight: 700; }
.view-novo .ss-i { font-size: var(--fs-sm); color: var(--tinta-2); }
.view-novo .ss-s { font-size: var(--fs-sm); }
.view-novo .ss-b { font-size: var(--fs-sm); color: var(--tinta-2); }
.view-novo .thanks { margin-top: 2.2rem; max-width: 80ch; }
.view-novo .thanks h3 { font-family: var(--f-display); font-weight: 800; font-stretch: 86%; font-size: var(--fs-md); margin-bottom: .5rem; }
.view-novo .thanks p { font-size: var(--fs-base); line-height: 1.6; color: var(--tinta-2); }
.view-novo .motto { text-transform: uppercase; margin-top: 1.8rem; font-family: var(--f-display); font-weight: 850; font-stretch: 80%; font-size: var(--fs-xl); letter-spacing: -0.01em; }

/* A capa já traz o nome do disco: no mosaico, o título escrito só aparece nos quadros sem capa */
.view-projetos .pj-tile.has-cover .pj-tt { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.view-projetos .pj-tile.has-cover .pj-tx { gap: .15rem; }
.view-projetos .pj-tile.has-cover .pj-mt { font-size: .8125rem; }
.view-projetos .pj-tile.has-cover::after { background: linear-gradient(180deg, rgba(18,17,16,0) 45%, rgba(18,17,16,.82) 100%); }

/* =========================================================
   Selo de premiação nos heróis dos projetos e do hotsite
   ========================================================= */
.aw-seal { --seal-a: #F1DDA6; --seal-b: #C79A45; --seal-ink: #1A1510; justify-self: start; display: inline-flex; align-items: center; gap: 1rem; max-width: 100%; padding: .35rem 1.2rem .35rem .35rem; border-radius: 999px; color: inherit; text-decoration: none; background: rgba(18,17,16,.28); box-shadow: inset 0 0 0 1px rgba(242,241,238,.16); backdrop-filter: blur(6px); transition: background 220ms var(--ease), box-shadow 220ms var(--ease); }
.on-papel .aw-seal { background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(18,17,16,.12); }
.aw-seal:hover { box-shadow: inset 0 0 0 1px currentColor; }
.aw-seal:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }
.aw-disc { flex: none; width: 92px; height: 92px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.aw-disc svg { width: 100%; height: 100%; display: block; overflow: visible; }
.aw-ring { fill: transparent; }
.aw-seal.is-won .aw-ring { fill: var(--seal-b); }
.aw-seal.is-won .aw-disc svg { background: radial-gradient(circle at 35% 30%, var(--seal-a), var(--seal-b) 70%); border-radius: 50%; }
.aw-seal.is-won .aw-ring { fill: transparent; stroke: rgba(255,255,255,.55); stroke-width: 1.2; }
.aw-seal.is-won .aw-inner { fill: rgba(26,21,16,.08); stroke: rgba(26,21,16,.35); stroke-width: 1; }
.aw-seal.is-won .aw-ringtx, .aw-seal.is-won .aw-year { fill: var(--seal-ink); }
.aw-seal.is-nom .aw-ring { fill: transparent; stroke: currentColor; stroke-width: 1.6; }
.aw-seal.is-nom .aw-inner { fill: transparent; stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
.aw-seal.is-nom .aw-ringtx, .aw-seal.is-nom .aw-year { fill: currentColor; }
.aw-ringtx { font: 800 9.2px "Hanken Grotesk", system-ui, sans-serif; letter-spacing: 1.2px; }
.aw-year { font: 850 25px Archivo, system-ui, sans-serif; font-stretch: 72%; letter-spacing: -.5px; }
.aw-spin { transform-origin: 60px 60px; animation: awSpin 28s linear infinite; }
.aw-seal:hover .aw-spin { animation-duration: 7s; }
@keyframes awSpin { to { transform: rotate(360deg); } }
.aw-tx { display: grid; gap: .15rem; min-width: 0; }
.aw-k { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.aw-seal.is-won .aw-k { color: #E3C27A; }
.on-papel .aw-seal.is-won .aw-k { color: #8A6420; }
.aw-n { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-md); line-height: 1.1; }
.aw-more { font-size: var(--fs-sm); font-weight: 600; opacity: .78; }
.aw-seal:hover .aw-more { opacity: 1; text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 600px) { .aw-disc { width: 72px; height: 72px; } .aw-n { font-size: var(--fs-base); } .aw-seal { padding-right: .9rem; gap: .75rem; } }
@media (prefers-reduced-motion: reduce) { .aw-spin { animation: none; } }

/* Prêmios e indicações: cartões com o selo */
.aw-sec .sec-head { margin-bottom: 1.4rem; }
.aw-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1rem; }
.aw-card { display: flex; align-items: center; gap: 1.1rem; padding: 1rem 1.3rem 1rem 1rem; border-radius: 18px; background: rgba(242,241,238,.04); box-shadow: inset 0 0 0 1px rgba(242,241,238,.1); }
.aw-card.is-won { background: linear-gradient(135deg, rgba(227,194,122,.14), rgba(227,194,122,.03)); box-shadow: inset 0 0 0 1px rgba(227,194,122,.35); }
.aw-card .aw-disc { width: 96px; height: 96px; }
.aw-card.is-won .aw-disc svg { background: radial-gradient(circle at 35% 30%, #F1DDA6, #C79A45 70%); border-radius: 50%; }
.aw-card.is-won .aw-ring { fill: transparent; stroke: rgba(255,255,255,.55); stroke-width: 1.2; }
.aw-card.is-won .aw-inner { fill: rgba(26,21,16,.08); stroke: rgba(26,21,16,.35); stroke-width: 1; }
.aw-card.is-won .aw-ringtx, .aw-card.is-won .aw-year { fill: #1A1510; }
.aw-card.is-nom .aw-ring { fill: transparent; stroke: currentColor; stroke-width: 1.6; }
.aw-card.is-nom .aw-inner { fill: transparent; stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
.aw-card.is-nom .aw-ringtx, .aw-card.is-nom .aw-year { fill: currentColor; }
.aw-card:hover .aw-spin { animation-duration: 7s; }
.aw-card-tx { display: grid; gap: .2rem; min-width: 0; }
.aw-card-tx p { margin: 0; }
.aw-card.is-won .aw-k { color: #E3C27A; }
.aw-card .aw-n { font-size: var(--fs-md); }
.aw-a { font-size: var(--fs-sm); color: var(--claro-2); }
@media (max-width: 600px) { .aw-card .aw-disc { width: 76px; height: 76px; } }

/* Outros projetos antes do Explore */
.more-pj { padding-block: clamp(2.4rem, 5vw, 3.6rem); border-top: 1px solid var(--noite-3); }
.more-pj-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.4rem); }
.more-pj-grid a { display: grid; gap: .45rem; color: var(--claro); text-decoration: none; }
.more-pj-grid .mp-cv { display: block; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--noite-2); box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.more-pj-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms var(--ease); }
.more-pj-grid a:hover img { transform: scale(1.05); }
.more-pj-grid .mp-t { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-md); line-height: 1.1; }
.more-pj-grid a:hover .mp-t { color: var(--laranja); }
.more-pj-grid .mp-y { font-size: var(--fs-sm); color: var(--claro-2); line-height: 1.3; }
.more-pj-grid a:focus-visible { outline: 3px solid var(--laranja); outline-offset: 4px; border-radius: 6px; }
@media (max-width: 760px) { .more-pj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Revisão iPad e celular ===== */
/* Toque (iPad deitado incluso): o menu usa o "+" para abrir as páginas, como no celular, porque não existe cursor */
@media (hover: none), (pointer: coarse) {
  .menu-stage { min-height: 0; padding-block: 1rem 1.6rem; }
  .menu-list { width: auto; max-width: 760px; }
  .mi { border-bottom: 1px solid var(--noite-3); }
  .mi-row { align-items: center; gap: .7rem; }
  .mi-n { opacity: 1; }
  .mi-name { flex: 1; font-size: var(--fs-2xl); padding-block: .45rem; color: var(--claro); }
  .mi-name::after { display: none; }
  .mi.is-active .mi-name, .mi.is-active .mi-n { color: var(--claro); }
  .mi-tg { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--noite-3); background: none; color: var(--claro); font-size: var(--fs-lg); cursor: pointer; transition: transform 220ms var(--ease); }
  .mi-tg[aria-expanded="true"] { transform: rotate(45deg); border-color: var(--claro-2); }
  .mi-panel, .mi.is-active .mi-panel { display: none; position: static; width: auto; padding: 0; border: 0; background: none; animation: none; }
  .mi.is-open .mi-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; padding: 0 0 1rem 2.3rem; }
  .mi-ph, .mi-k { display: none; }
  .mi-sub a { padding-block: .55rem; }
}

/* Agenda no celular: o cartão "Quero na minha cidade" não empurra a página para o lado */
@media (max-width: 760px) {
  .view-agenda .two-up { grid-template-columns: minmax(0, 1fr) !important; }
  .view-agenda .city-tools, .view-agenda .city-tools .field, .view-agenda .city-tools input { min-width: 0; max-width: 100%; }
  .view-agenda .city-card { max-width: 100%; }
}

/* Página de projeto no celular: nome e selo primeiro, capa logo abaixo e menor */
@media (max-width: 899px) {
  .view-projetos .pj-hero .tx { grid-row: 1; padding-top: 1.4rem; padding-bottom: 1.2rem; }
  .view-projetos .pj-hero .pj-art { grid-row: 2; padding: .4rem 1.25rem 2rem; }
  .view-projetos .pj-hero .pj-art > * { width: min(100%, 300px); }
  .view-projetos .pj-hero .pj-back { margin-bottom: .2rem; }
}

/* Textos mínimos legíveis no toque */
@media (max-width: 899px) {
  .view-projetos .pj-mt { font-size: var(--fs-xs); }
  .view-projetos .pj-fm { font-size: var(--fs-xs); }
  .vt-t, .view-home .vg-l, .aw-k, .mp-k { font-size: max(.8125rem, 13px); }
}

/* A boia não cobre a barra de abas do banner nem a barra do celular */
body.hero-in-view .boia { transform: translateY(-64px); }

/* ---------- Play buttons tied to the site player ---------- */
.play-ic { width: 1em; height: 1em; fill: currentColor; vertical-align: -.12em; }
.btn .play-ic { margin-right: .15rem; }
.view-home .slide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; }
.btn-listen { display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: 0 1.1rem 0 .3rem; border: 0; border-radius: 999px; background: transparent; color: var(--fg, var(--tinta)); font: inherit; font-weight: 700; cursor: pointer; }
.btn-listen .bl-ic { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid currentColor; transition: transform 240ms var(--ease), background 240ms var(--ease), color 240ms var(--ease); }
.btn-listen svg { width: 18px; height: 18px; fill: currentColor; }
.btn-listen .z, .btn-listen.is-on .p { display: none; }
.btn-listen.is-on .z { display: inline; }
.btn-listen:hover .bl-ic { transform: scale(1.08); background: var(--fg, var(--tinta)); color: var(--bg, var(--laranja)); }
.btn-listen.is-on .bl-ic::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: blPulse 1.8s ease-out infinite; }
@keyframes blPulse { from { transform: scale(.85); opacity: .6; } to { transform: scale(1.3); opacity: 0; } }
[data-play-album].is-on, [data-play-list].btn.is-on { box-shadow: 0 0 0 3px rgba(255,255,255,.25); }

/* Singles: play straight from the cover */
.view-musica .single .ci { position: relative; }
.single-play { position: absolute; right: .6rem; bottom: .6rem; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--laranja); color: var(--tinta); box-shadow: 0 8px 20px rgba(0,0,0,.35); cursor: pointer; transition: transform 220ms var(--ease); }
.single-play .play-ic { width: 20px; height: 20px; }
.single-play:hover { transform: scale(1.08); }
@media (hover: hover) and (pointer: fine) { .single-play { opacity: 0; transform: translateY(6px); } .single:hover .single-play, .single-play:focus-visible { opacity: 1; transform: none; } }

/* Playlist: tracks without a player source point to the listener's app */
.view-playlist .pl-apps { flex: none; min-height: 36px; padding: 0 .8rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: transparent; color: var(--claro); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; }
.view-playlist .pl-apps:hover { background: rgba(255,255,255,.08); }

/* ---------- End of page: pastel ruler of sections (no photos) ---------- */
.ruler-sec { background: var(--noite); color: var(--claro); padding-block: clamp(3rem, 6vw, 5rem) clamp(1rem, 2vw, 1.5rem); }
.ruler ol { display: flex; gap: 4px; height: clamp(260px, 30vw, 340px); margin: 0; padding: 0; list-style: none; border-radius: 16px; overflow: hidden; }
.ruler li { flex: 1 1 0; min-width: 0; display: flex; background: var(--rt); transition: flex-grow 520ms var(--ease); }
.ruler a { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 1rem .9rem 1.1rem; color: var(--rf, #1A1512); text-decoration: none; overflow: hidden; }
.ruler .rl-n { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; color: color-mix(in srgb, currentColor 62%, transparent); font-variant-numeric: tabular-nums; }
.ruler .rl-t { font-family: var(--f-display); font-weight: 800; font-stretch: 82%; font-size: var(--fs-md); line-height: 1; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); align-self: flex-start; }
.ruler .rl-d { position: absolute; left: .9rem; right: 2.6rem; bottom: 1.1rem; font-size: var(--fs-sm); line-height: 1.35; color: color-mix(in srgb, currentColor 86%, transparent); opacity: 0; transform: translateY(8px); transition: opacity 260ms var(--ease), transform 260ms var(--ease); }
.ruler .rl-ar { position: absolute; right: .9rem; bottom: 1rem; font-size: var(--fs-md); opacity: 0; transition: opacity 260ms var(--ease), transform 260ms var(--ease); }
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .ruler li:hover, .ruler li:focus-within { flex-grow: 4.5; }
  .ruler li:hover .rl-t, .ruler li:focus-within .rl-t { writing-mode: horizontal-tb; transform: none; font-size: var(--fs-2xl); white-space: normal; }
  .ruler li:hover .rl-d, .ruler li:focus-within .rl-d, .ruler li:hover .rl-ar, .ruler li:focus-within .rl-ar { opacity: 1; transform: none; }
  .ruler li:hover .rl-t, .ruler li:focus-within .rl-t { margin-bottom: auto; margin-top: .6rem; }
}
.ruler a:focus-visible { outline: 3px solid currentColor; outline-offset: -6px; border-radius: 10px; }
/* Touch screens and narrow windows: horizontal bars, name and line always visible */
@media (hover: none), (pointer: coarse), (max-width: 760px) {
  .ruler ol { flex-direction: column; height: auto; gap: 3px; }
  .ruler a { flex-direction: row; align-items: center; gap: .8rem; min-height: 56px; padding: .7rem 1rem; }
  .ruler .rl-t { writing-mode: horizontal-tb; transform: none; font-size: var(--fs-md); flex: none; align-self: center; }
  .ruler .rl-d { position: static; opacity: 1; transform: none; flex: 1; min-width: 0; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ruler .rl-ar { position: static; opacity: .6; }
}
@media (hover: none) and (min-width: 761px), (pointer: coarse) and (min-width: 761px) { .ruler ol { display: grid; grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .ruler li, .ruler .rl-d, .ruler .rl-ar { transition: none; } }

/* ---------- Contrate: Fale conosco as a slim band ---------- */
.ct-fale-strip { background: var(--noite-2); color: var(--claro); border-top: 1px solid rgba(255,255,255,.08); }
.ct-fale-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: clamp(1.4rem, 3vw, 2rem); }
.ct-fale-tx .eyebrow { color: var(--areia); margin: 0 0 .3rem; }
.ct-fale-tx h2 { font-size: var(--fs-lg); line-height: 1.1; }
.view-contrate .ct-fale-strip .ct-prod { margin: 0; font-size: var(--fs-base); }
.ct-fale-strip .cl { display: inline-flex; align-items: center; gap: .7rem; min-height: 52px; padding: .35rem 1.2rem .35rem .35rem; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--claro); text-decoration: none; font-weight: 700; overflow-wrap: anywhere; transition: background 200ms var(--ease); }
.ct-fale-strip .cl:hover { background: rgba(255,255,255,.14); }
.ct-fale-strip .cl-ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--laranja); color: var(--tinta); }
.ct-fale-strip .cl-ic svg { width: 20px; height: 20px; }
@media (max-width: 560px) { .ct-fale-strip .cl { font-size: var(--fs-sm); } }

/* ---------- Painel: send the budget form ---------- */
.p-orc { padding-block: 0 1rem; }
.p-orc-card { display: grid; gap: .9rem; padding: clamp(1rem, 2.4vw, 1.5rem); border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--linha-clara); }
.p-orc-tx h2 { font-size: var(--fs-md); }
.p-orc-tx p { margin-top: .3rem; color: var(--tinta-2); font-size: var(--fs-base); max-width: 62ch; }
.p-orc-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.p-orc-row input { flex: 1 1 260px; min-height: 48px; padding: 0 1rem; border: 1px solid var(--linha-clara); border-radius: 10px; background: var(--papel); font-size: var(--fs-base); color: var(--tinta); }
.p-orc-row input:focus-visible { outline: 3px solid var(--laranja); outline-offset: 1px; }
.p-orc-err { color: #A1262A; font-size: var(--fs-sm); font-weight: 600; }

/* ---------- Section color on the page header (same color as the section in the ruler) ---------- */
body.sec-color.has-sec .page-hero,
body.sec-color.has-sec .view-playlist .pl-hero,
body.sec-color.has-sec .view-hamilton .hh-hero,
body.sec-color.has-sec .view-novo .nova-hero,
body.sec-color.has-sec .view-contrate .ct-top {
  --claro: var(--sec-fg); --claro-2: color-mix(in srgb, var(--sec-fg) 74%, transparent); --areia: var(--sec-fg); --laranja: var(--sec-fg);
  --linha-clara: color-mix(in srgb, var(--sec-fg) 28%, transparent); --noite-3: color-mix(in srgb, var(--sec-fg) 18%, transparent);
  background: var(--sec); color: var(--sec-fg); border-bottom-color: transparent;
}
body.sec-color.has-sec :is(.page-hero, .hh-hero, .nova-hero, .ct-top) .eyebrow { color: var(--sec-fg) !important; opacity: .78; }
/* The main button inside a colored header: ink on color, inverted */
body.sec-color.has-sec :is(.page-hero, .hh-hero, .nova-hero, .ct-top, .pl-hero) .btn.orange { background: var(--sec-fg); border-color: var(--sec-fg); color: var(--sec); }
/* Contrate: the colored band carries the title; the contact cards stay white */
body.sec-color.has-sec .view-contrate .ct-top { --tinta: var(--sec-fg); --tinta-2: color-mix(in srgb, var(--sec-fg) 78%, transparent); }
body.sec-color.has-sec .page-hero ::selection { background: var(--sec-fg); color: var(--sec); }
/* Cards that sit inside a colored header keep the site's own dark look */
body.sec-color.has-sec .page-hero :is(.next, .door, .ct-door),
body.sec-color.has-sec .view-playlist .pl-deck {
  --claro: #F2F1EE; --claro-2: #BDB8B0; --areia: #D9C1AE; --laranja: #FF6A00; --linha-clara: #CFCBC4; --noite-3: #2A2724; --tinta: #F2F1EE;
  background: #121110; color: #F2F1EE;
}
body.sec-color.has-sec .page-hero .next .btn { --tinta: #121110; }
body.sec-color.has-sec .page-hero .door .door-a { background: var(--laranja); color: #121110; }

/* ---------- O que a crítica diz ---------- */
.cr-intro { max-width: 62ch; margin-top: .4rem; color: var(--claro-2); }
.cr-feat, .cr-list { list-style: none; margin: 0; padding: 0; }
.cr-feat { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.cr-card { position: relative; display: flex; flex-direction: column; gap: .55rem; padding: 1.2rem 1.25rem 1rem; border-radius: 16px; background: var(--noite-2); box-shadow: 0 0 0 1px rgba(255,255,255,.07); }
.cr-q { margin: 0; font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-md); line-height: 1.12; color: var(--claro); text-wrap: balance; }
.cr-card.is-big .cr-q { font-size: var(--fs-xl); color: #F4C542; }
.cr-t { font-weight: 700; font-size: var(--fs-base); line-height: 1.3; }
.cr-about { font-size: var(--fs-sm); line-height: 1.45; color: var(--claro-2); }
.cr-src { margin-top: auto !important; padding-top: .3rem; font-size: var(--fs-sm); color: var(--claro-2); }
.cr-src b { color: var(--claro); }
.cr-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; padding-top: .6rem; border-top: 1px solid rgba(255,255,255,.08); font-size: var(--fs-xs); }
.cr-kind { color: var(--areia); letter-spacing: .06em; text-transform: uppercase; font-size: var(--fs-2xs); font-weight: 700; }
.cr-disc a { color: var(--claro); text-underline-offset: 2px; }
.cr-go { margin-left: auto; color: var(--claro); font-weight: 700; text-decoration: none; white-space: nowrap; padding: .6rem 0 .6rem .6rem; margin-block: -.6rem; }   /* área de toque maior sem mudar o desenho */
.cr-go:hover { text-decoration: underline; }
.cr-all .cr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .8rem; margin-top: 2rem; }
.cr-year { grid-column: 1 / -1; margin-top: .8rem; font-family: var(--f-display); font-weight: 800; font-stretch: 80%; font-size: var(--fs-lg); color: var(--areia); }
.cr-more { margin-top: 1.4rem; }
.cr-note { margin-top: 1.2rem; font-size: var(--fs-xs); color: var(--claro-2); }
/* On a project page: light cards on paper */
.on-papel .cr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .8rem; margin-bottom: 1.6rem; }
.on-papel .cr-card { background: #fff; box-shadow: 0 0 0 1px var(--linha-clara); }
.on-papel .cr-q { color: var(--tinta); }
.on-papel .cr-about, .on-papel .cr-src { color: var(--tinta-2); }
.on-papel .cr-src b, .on-papel .cr-go { color: var(--tinta); }
.on-papel .cr-kind { color: var(--semente); }
.on-papel .cr-foot { border-top-color: var(--linha-clara); }

/* ---------- Agenda: últimos shows with set list ---------- */
.past-list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1rem; }
.past-show { border-radius: 18px; background: var(--noite-2); box-shadow: 0 0 0 1px rgba(255,255,255,.07); overflow: hidden; }
.ps-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; padding: 1.2rem 1.3rem; }
.ps-head time { display: grid; line-height: 1; }
.ps-head time b { font-family: var(--f-display); font-weight: 850; font-stretch: 72%; font-size: var(--fs-2xl); color: var(--laranja); }
.ps-head time span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; color: var(--claro-2); }
.ps-head > div { flex: 1 1 220px; }
.ps-city { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-lg); line-height: 1.05; }
.ps-venue { font-size: var(--fs-sm); color: var(--claro-2); margin-top: .2rem; }
.setlist { border-top: 1px solid rgba(255,255,255,.08); }
.setlist summary { cursor: pointer; list-style: none; padding: .9rem 1.3rem; font-weight: 700; font-size: var(--fs-sm); display: flex; align-items: center; gap: .5rem; }
.setlist summary::-webkit-details-marker { display: none; }
.setlist summary::after { content: "+"; margin-left: auto; font-size: var(--fs-md); line-height: 1; color: var(--claro-2); }
.setlist[open] summary::after { content: "−"; }
.setlist ol { list-style: none; margin: 0; padding: 0 1.3rem 1.2rem; columns: 2 300px; column-gap: 2rem; }
.setlist li { display: grid; grid-template-columns: 1.8rem 1fr auto; grid-template-rows: auto auto; column-gap: .5rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.06); break-inside: avoid; }
.sl-n { grid-row: 1 / 3; font-size: var(--fs-xs); color: var(--claro-2); font-variant-numeric: tabular-nums; }
.sl-t { font-weight: 700; }
.sl-a { grid-column: 2; font-size: var(--fs-xs); color: var(--claro-2); }
.sl-play { grid-column: 3; grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--laranja); color: var(--tinta); cursor: pointer; }
.sl-play .play-ic { width: 14px; height: 14px; }
.setlist li.sl-bis { display: block; border: 0; padding: .9rem 0 .2rem; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--areia); }

/* ---------- Bandolim de 10 cordas: own page ---------- */
.view-bandolim .bd-hero h1 { font-size: var(--fs-4xl); }
.view-bandolim .bd-hero .lede { max-width: 52ch; }
.view-bandolim #como-funciona .cols2 { margin-bottom: 0; }
.view-bandolim #historia .steps { margin-bottom: clamp(2rem, 4vw, 3rem); }
.bd-discs { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 1.2rem; }
.bd-disc { position: relative; display: grid; gap: .6rem; }
.bd-cv { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--noite-3); box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.bd-cv img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.bd-cv:hover img { transform: scale(1.04); }
.bd-cv-ph { text-decoration: none; display: grid; place-items: center; height: 100%; padding: 1rem; text-align: center; font-family: var(--f-display); font-weight: 800; font-size: var(--fs-md); color: var(--claro); }
.bd-dt { display: grid; gap: .15rem; padding-right: 3.2rem; }
.bd-dt a { color: var(--claro); text-decoration: none; }
.bd-dt b { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-md); line-height: 1.1; }
.bd-dt span { font-size: var(--fs-sm); color: var(--claro-2); }
/* Fora do fundo escuro (Dois de Ouro e Quinteto, seções claras) o nome do disco ficava branco sobre o claro (12/10/2026). */
.sec:not(.on-noite):not(.era-noite) .bd-dt a { color: var(--tinta); }
.sec:not(.on-noite):not(.era-noite) .bd-dt span:not(.bd-note) { color: var(--tinta-2); }
.bd-play { position: absolute; right: 0; top: calc(100% - 3rem); display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--laranja); color: var(--tinta); cursor: pointer; }
.bd-play .play-ic { width: 18px; height: 18px; }
.bd-cap-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.bd-cap-art img { width: 100%; border-radius: 10px; box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.bd-caprichos h2 { font-size: var(--fs-3xl); margin: .3rem 0 .8rem; }
.bd-caprichos .actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; margin-top: 1.2rem; }
@media (max-width: 760px) { .bd-cap-in { grid-template-columns: 1fr; } .bd-cap-art { max-width: 280px; } }
/* Hamilton page: a short card leads to the new page */
.bd-teaser-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.bd-teaser-in > div { flex: 1 1 420px; max-width: 60ch; }
.bd-teaser h2 { font-size: var(--fs-2xl); margin: .3rem 0 .7rem; }
.bd-teaser p { font-size: var(--fs-base); line-height: 1.55; }

/* ---------- Galleries: film strip, one row, captions under the photos ---------- */
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .gallery { columns: auto; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); padding-bottom: .8rem; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .gallery button { flex: none; display: grid; gap: .5rem; width: auto; margin: 0; background: none; border-radius: 0; overflow: visible; scroll-snap-align: start; text-align: left; color: var(--claro-2); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .gallery img { height: clamp(220px, 30vw, 380px); width: auto; max-width: 80vw; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .gallery button:hover img { transform: none; filter: brightness(1.08); }
.fs-cap { display: block; max-width: 34ch; font-size: var(--fs-sm); line-height: 1.35; }
.fs-cap:empty { display: none; }
.fs-nav { display: flex; justify-content: flex-end; gap: .5rem; margin: -2.6rem 0 1rem; }
.fs-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: transparent; color: var(--claro); font-size: var(--fs-md); cursor: pointer; }
.fs-btn:hover { background: rgba(255,255,255,.1); }
@media (hover: none), (pointer: coarse) { .fs-nav { display: none; } }
/* Galeria escondida (disco sem fotos): as setas somem junto. Antes elas ficavam e, com a margem negativa, subiam
   para cima do último vídeo (Sinfônica de Santo André, print do Marcos de 08/10/2026: "Seta dando zica"). */
.fs-nav:has(+ [hidden]), .fs-nav:has(+ :empty) { display: none; }

/* ---------- Contrate: special encounters and reference project ---------- */
.ct-fm-grid > .ct-fm-block:has(.ct-partners), .ct-fm-grid > .ct-fm-block:has(.ct-feature) { grid-column: 1 / -1; }
.ct-partners { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: .7rem; }
.ct-partners a, .ct-partners li > div, .ct-feature { display: grid; grid-template-columns: 72px 1fr; gap: .9rem; align-items: center; height: 100%; padding: .6rem; border-radius: 14px; background: color-mix(in srgb, currentColor 5%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); color: inherit; text-decoration: none; transition: background 200ms var(--ease), transform 200ms var(--ease); }
.ct-partners a:hover, .ct-feature:hover { background: color-mix(in srgb, currentColor 11%, transparent); transform: translateY(-2px); }
.ct-pt-cv { display: block; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--noite-3); }
.ct-pt-cv img { width: 100%; height: 100%; object-fit: cover; }
.ct-pt-tx { display: grid; gap: .15rem; min-width: 0; }
.ct-pt-tx b { font-family: var(--f-display); font-weight: 800; font-stretch: 86%; font-size: var(--fs-md); line-height: 1.05; }
.ct-pt-tx > span { font-size: var(--fs-sm); opacity: .72; }
.ct-pt-tx > .ct-pt-al { opacity: 1; font-weight: 700; color: var(--laranja); }
.ct-feature { max-width: 560px; grid-template-columns: 88px 1fr; }
.ct-feature .ct-pt-cv { width: 88px; height: 88px; }

/* ---------- Reader window ---------- */
.reader { width: min(1100px, calc(100vw - 32px)); height: min(900px, calc(100dvh - 32px)); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: var(--noite-2); color: var(--claro); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.reader[open] { display: grid; grid-template-rows: auto 1fr; }
.reader::backdrop { background: rgba(10,9,8,.72); backdrop-filter: blur(4px); }
.rd-bar { display: flex; align-items: center; gap: 1rem; padding: .7rem .8rem .7rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.rd-tx { flex: 1; min-width: 0; }
.rd-k { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--areia); }
.rd-t { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-open { flex: none; color: var(--claro); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; padding: .55rem .9rem; border-radius: 999px; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.rd-open:hover { background: rgba(255,255,255,.1); }
.rd-x { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--laranja); color: var(--tinta); font-size: var(--fs-lg); line-height: 1; cursor: pointer; }
.rd-body { position: relative; background: #fff; }
.rd-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
.rd-wait { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .8rem; color: #57534D; font-size: var(--fs-base); }
.rd-wait span { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #E6E4DF; border-top-color: var(--laranja); animation: rdSpin 900ms linear infinite; }
@keyframes rdSpin { to { transform: rotate(360deg); } }
.rd-fb { position: absolute; inset: 0; display: grid; place-content: center; justify-items: start; gap: 1rem; max-width: 56ch; margin: auto; padding: 2rem; background: var(--noite-2); color: var(--claro); }
.rd-img { position: absolute; inset: 0; overflow: auto; background: var(--noite-2); padding: 1.5rem; }
.rd-img[hidden] { display: none; }
.rd-img img { display: block; margin: 0 auto; width: min(100%, 480px); height: auto; }
.rd-fb-k { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--areia); }
.rd-fb-s { font-family: var(--f-display); font-weight: 800; font-stretch: 86%; font-size: var(--fs-xl); line-height: 1.15; }
.rd-fb-s:empty { display: none; }
body.is-reading { overflow: hidden; }
@media (max-width: 760px) { .reader { width: 100vw; height: 100dvh; border-radius: 0; } .rd-open span[aria-hidden] ~ * { display: none; } .rd-open { padding: .5rem .7rem; font-size: var(--fs-xs); } }
@media (prefers-reduced-motion: reduce) { .rd-wait span { animation: none; } }
.cr-note-i { font-size: var(--fs-xs); line-height: 1.4; padding: .35rem .6rem; border-radius: 8px; background: color-mix(in srgb, var(--laranja) 14%, transparent); }
.rd-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ---------- Mobile "ver mais" ---------- */
.fold.is-folded { max-height: var(--fold-max); overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 160px), transparent); mask-image: linear-gradient(#000 calc(100% - 160px), transparent); }
.fold-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; max-width: 420px; min-height: 52px; margin: 1rem auto 0; padding: 0 1.4rem; border-radius: 999px; border: 1.5px solid currentColor; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; grid-column: 1 / -1; }
.fold-btn:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.fold-btn[hidden] { display: none; }
@media (min-width: 900px) { .fold-btn { display: none !important; } }
@media (max-width: 560px) { .bd-discs { grid-template-columns: 1fr 1fr; gap: 1rem .8rem; } .bd-disc { container-type: inline-size; } .bd-dt { padding-right: 0; } .bd-play { top: calc(100cqw - 48px); right: 8px; width: 40px; height: 40px; } }

/* ==========================================================================
   Unification pass (19/09/2026): one card shape, one cover shape, readable small text
   ========================================================================== */
:root { --r-card: 16px; --r-cover: 8px; --card-line-dark: rgba(255,255,255,.08); }
.news-card, .cr-card, .past-show, .aw-card, .guest, .view-bandolim .luthier, .view-contrate .ct-card, .view-contrate .ct-region,
.ct-partners a, .ct-partners li > div, .ct-feature, .p-orc-card, .mp-app-list { border-radius: var(--r-card); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .guest { border-radius: var(--r-card); }
.on-noite .news-card, .cr-card, .past-show { box-shadow: 0 0 0 1px var(--card-line-dark); border-color: var(--card-line-dark); }
.bd-cv, .ct-pt-cv, .more-pj-grid .mp-cv, .cr-disc img, .bd-cap-art img { border-radius: var(--r-cover); }
/* Small labels never below 12px on phones */
@media (max-width: 899px) {
  .view-projetos .pj-mt, .view-midia .mw-t, .cr-kind, .tag-pill, .sl-bis, .view-novo .vitem .k, .mp-k, .rd-k { font-size: max(.8125rem, 13px) !important; }
}
@media (max-width: 899px) { .view-home .ns-cat, .view-home .vt-t { font-size: max(.8125rem, 13px) !important; } }

/* ---------- Phones: card rows swipe sideways ---------- */
@media (max-width: 899px) {
  .swipe-m { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; gap: 12px !important; grid-template-columns: none !important; columns: auto !important;
    margin-inline: calc(-1 * var(--pad)); padding: 0 var(--pad) .8rem; scroll-padding-inline: var(--pad); scrollbar-width: none; }
  .swipe-m::-webkit-scrollbar { display: none; }
  .swipe-m > * { flex: 0 0 min(80vw, 330px) !important; width: auto !important; max-width: none !important; margin: 0 !important; scroll-snap-align: start; }
  .swipe-m > .cr-year { display: none; }
}
@media (max-width: 899px) {
  .view-novo #conceito .portrait { max-height: 280px; overflow: hidden; border-radius: var(--r-card); }
  .view-novo #conceito .portrait img { width: 100%; height: 280px; object-fit: cover; object-position: 50% 25%; }
}

/* ==========================================================================
   Versão nova (body.v2) — can be switched off in the prototype strip
   ========================================================================== */
.proto-btn.is-v2 { background: var(--laranja); color: var(--tinta); }
/* One action color: every main button is orange (dark buttons on orange banners stay dark) */
body.v2 .btn.dark:not(.slide .btn) { background: var(--laranja); border-color: var(--laranja); color: var(--tinta); }
body.v2 .btn.dark:not(.slide .btn):hover { filter: brightness(1.07); }
/* NOVA: concept and tracks in one block */
.nv-concept { margin: 1.6rem 0 1.4rem; }
.nv-concept .eyebrow { color: var(--areia) !important; margin-bottom: .5rem !important; }
.nv-concept h2 { font-size: var(--fs-xl); line-height: 1.02; margin-bottom: .8rem; }
.nv-concept .body p { font-size: var(--fs-base); line-height: 1.6; color: var(--claro-2); margin-bottom: .7rem; }
.view-novo .nv-concept .release-dl { border-color: var(--claro); color: var(--claro); margin-top: .6rem; }
.view-novo .nv-concept .release-dl .rd-ic { background: var(--laranja); color: var(--tinta); }
.view-novo .nv-concept .release-dl small { color: var(--claro-2); }
/* Mídia: press room on its own page */
body.v2 .view-midia:not(.is-sala) #imprensa { display: none; }
body.v2 .view-midia.is-sala > section:not(.md-hero):not(#imprensa):not(.ruler-sec):not(.hire-strip), body.v2 .view-midia.is-sala > nav.jump, body.v2 .view-midia.is-sala .doors { display: none; }
.md-pt-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2.5rem; }
.md-pt-in h2 { font-size: var(--fs-2xl); margin: .2rem 0 .4rem; }
.md-pt-in p { color: var(--tinta-2); }
/* Contrate: Corporativo and Curadoria as tabs */
.ct-evtabs { background: var(--noite); color: var(--claro); padding-top: clamp(2.2rem, 5vw, 3.5rem); }
.ct-evtabs .eyebrow { color: var(--areia); margin-bottom: .8rem; }
.ct-evtabs-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.ct-evtabs-row button { display: grid; gap: .2rem; text-align: left; padding: .9rem 1.1rem; border-radius: var(--r-card); border: 1.5px solid rgba(255,255,255,.2); background: transparent; color: var(--claro); font: inherit; font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-md); cursor: pointer; }
.ct-evtabs-row button span { font-family: var(--f-body); font-weight: 500; font-stretch: 100%; font-size: var(--fs-sm); color: var(--claro-2); }
.ct-evtabs-row button[aria-selected="true"] { background: var(--laranja); border-color: var(--laranja); color: var(--tinta); }
.ct-evtabs-row button[aria-selected="true"] span { color: color-mix(in srgb, var(--tinta) 75%, transparent); }
body.v2 .view-contrate #corporativo, body.v2 .view-contrate #curadoria { padding-top: 1.6rem; }
body.v2 .view-contrate #curadoria { border-top: 0; }
.ct-evtabs { padding-bottom: 1.2rem; }
@media (max-width: 760px) { .ct-evtabs-row { grid-template-columns: 1fr 1fr; } .ct-evtabs-row button { font-size: var(--fs-md); padding: .75rem .9rem; } }
.ct-how .ct-steps { margin-top: 1.4rem; }
.ct-how h2 { font-size: var(--fs-2xl); margin-top: .3rem; }
body.v2 .view-contrate #evento { padding-top: clamp(1.6rem, 3vw, 2.4rem); }

/* ---------- Discografia: smaller covers in Singles and Apareceu em, growing on hover ---------- */
.view-musica .singles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.6rem 1.4rem; }
.view-musica .single h4.st, .view-musica .single .st { font-size: var(--fs-base); line-height: 1.1; }
.view-musica .single .sm { font-size: var(--fs-sm); line-height: 1.35; }
.view-musica .single .ci, .view-musica .appear .ci { position: relative; z-index: 0; transform-origin: 50% 92%; transition: transform 320ms var(--ease), box-shadow 320ms var(--ease); }
.view-musica .single-play { width: 38px; height: 38px; right: .45rem; bottom: .45rem; }
.view-musica .single-play .play-ic { width: 16px; height: 16px; }
.view-musica .appear { grid-template-columns: 200px minmax(0, 1fr); align-items: start; }
.view-musica .appear h3 { font-size: var(--fs-xl); }
.view-musica .appear p { font-size: var(--fs-base) !important; }
@media (hover: hover) and (pointer: fine) {
  .view-musica .single:hover .ci, .view-musica .single:focus-within .ci, .view-musica .appear:hover .ci { transform: scale(1.1); z-index: 2; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
}
@media (max-width: 760px) {
  .view-musica .singles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem .8rem; }
  .view-musica .single h4.st, .view-musica .single .st { font-size: var(--fs-sm); }
  .view-musica .single .sm { font-size: var(--fs-xs); }
  .view-musica .single .single-go { display: none; }
  .view-musica .single-play { width: 32px; height: 32px; opacity: 1 !important; transform: none !important; }
  .view-musica .appear { grid-template-columns: 110px minmax(0, 1fr); gap: 1rem; }
  .view-musica .appear h3 { font-size: var(--fs-md); }
}
@media (prefers-reduced-motion: reduce) { .view-musica .single .ci, .view-musica .appear .ci { transition: none; } }

/* ---------- Contrate: who answers (opened by every consult button) ---------- */
.ct-pick { width: min(560px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--r-card); background: var(--papel); color: var(--tinta); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.ct-pick::backdrop { background: rgba(10,9,8,.7); backdrop-filter: blur(3px); }
.ct-pick-in { position: relative; padding: clamp(1.3rem, 4vw, 2rem); display: grid; gap: .8rem; }
.ct-pick .eyebrow { color: var(--semente); padding-right: 3rem; }
.ct-pick h2 { font-size: var(--fs-xl); line-height: 1; }
.ct-pick-lead { color: var(--tinta-2); line-height: 1.5; }
.ct-pick-x { position: absolute; top: .9rem; right: .9rem; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--tinta); color: var(--papel); font-size: var(--fs-lg); cursor: pointer; }
.ct-pick-people { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .8rem; }
.ct-pick-people li { display: grid; gap: .25rem; padding: 1rem; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--linha-clara); }
.ct-pick-people b { font-family: var(--f-display); font-weight: 800; font-stretch: 86%; font-size: var(--fs-md); }
.ct-pick-people span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.ct-pick-acts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.ct-pick-mail { font-size: var(--fs-sm); color: var(--tinta-2); overflow-wrap: anywhere; }
.ct-pick-kit { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: .8rem; margin-top: .4rem; padding: .8rem 1rem .8rem .8rem; border-radius: 12px; background: var(--tinta); color: var(--papel); text-decoration: none; transition: transform 200ms var(--ease); }
.ct-pick-kit:hover { transform: translateY(-2px); }
.ct-pick-kit-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--laranja); color: var(--tinta); font-size: var(--fs-md); }
.ct-pick-kit b { display: block; font-family: var(--f-display); font-weight: 800; font-stretch: 86%; font-size: var(--fs-md); }
.ct-pick-kit small { display: block; font-size: var(--fs-xs); color: color-mix(in srgb, var(--papel) 75%, transparent); line-height: 1.35; }

/* ---------- Mídia (versão nova): one Destaques block for videos and photos ---------- */
.md-feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
#mdFeat > .mv-grid, #mdFeat > .mf-grid { display: contents !important; }
#mdFeat .md-empty { display: none; }
#mdFeat .mv-card, #mdFeat .mf-item { display: grid; align-content: start; gap: .45rem; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: var(--claro); text-align: left; cursor: pointer; }
#mdFeat .mv-th, #mdFeat .mf-item img { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-cover); overflow: hidden; object-fit: cover; }
#mdFeat .mv-th img { width: 100%; height: 100%; object-fit: cover; }
#mdFeat .mv-th { position: relative; }
#mdFeat .mv-th::after { content: "▶"; position: absolute; left: .6rem; bottom: .6rem; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--laranja); color: var(--tinta); font-size: var(--fs-xs); }
#mdFeat .mf-item { position: relative; }
#mdFeat .mf-item::before { content: "Foto"; position: absolute; left: .6rem; top: .6rem; z-index: 1; padding: .2rem .55rem; border-radius: 999px; background: rgba(18,17,16,.75); color: var(--claro); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
#mdFeat .mv-k { left: .6rem; top: .6rem; bottom: auto; }
#mdFeat .mf-cap, #mdFeat .mv-t { position: static; display: block; padding: 0; background: none; font-weight: 700; font-size: var(--fs-base); line-height: 1.3; color: var(--claro); }
#mdFeat .mv-m { font-size: var(--fs-xs); color: var(--claro-2); }
#mdFeat .mv-card[aria-pressed="true"] .mv-th { box-shadow: 0 0 0 3px var(--laranja); }
@media (hover: hover) and (pointer: fine) { #mdFeat .mv-th, #mdFeat .mf-item img { transition: transform 300ms var(--ease); } #mdFeat .mv-card:hover .mv-th, #mdFeat .mf-item:hover img { transform: translateY(-3px); } }
.md-sub.is-moved { display: none; }
#mdFeat .mf-cap { display: block !important; opacity: 1 !important; transform: none !important; }
#mdFeat .is-extra { display: none !important; }
.md-feat-more { margin-top: 1.4rem; }
@media (max-width: 899px) { #mdFeat .is-extra { display: grid !important; } .md-feat-more { display: none !important; } }
#mdFeat .is-dup { display: none !important; }

/* ---------- Mídia (versão nova): Destaques, Vídeos and Fotos as tabs ---------- */
.is-tab-off { display: none !important; }
.md-tabs { padding-bottom: .6rem; }
.md-tabs .ct-evtabs-row { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; }
@media (max-width: 560px) { .md-tabs .ct-evtabs-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md-tabs .ct-evtabs-row button span { display: none; } }
body.v2 .view-midia #destaques, body.v2 .view-midia #videos, body.v2 .view-midia #fotos { padding-top: 1.4rem; }
body.v2 .view-midia.is-sala .md-tabs { display: none; }

/* ---------- Section tabs (Hamilton and later pages) ---------- */
.sec-tabs { padding-bottom: .6rem; }
.sec-tabs .ct-evtabs-row { max-width: 900px; }
@media (max-width: 560px) { .sec-tabs .ct-evtabs-row button span { display: none; } .sec-tabs .ct-evtabs-row button { font-size: var(--fs-base); } }
body.v2 .view-hamilton #vida, body.v2 .view-hamilton #tunel, body.v2 .view-hamilton #premios { padding-top: 1.4rem; }

/* ---------- Home only: 10-string mandolin seal ---------- */
.bd-seal { position: absolute; z-index: 6; right: clamp(1rem, 3vw, 2.4rem); top: clamp(1rem, 3vw, 2rem); width: clamp(96px, 10vw, 132px); aspect-ratio: 1; border-radius: 50%; color: #1A1512; filter: drop-shadow(0 12px 26px rgba(0,0,0,.35)); transition: transform 300ms var(--ease); }
.bd-seal svg { display: block; width: 100%; height: 100%; }
/* Os três selos numa família só (Marcos, 09/10/2026: "Ok para as cores do Botão unificadas"): aro claro,
   miolo escuro, desenho em laranja; ao passar o mouse, o aro inteiro fica laranja. */
.bd-seal .bs-ring { fill: #F2F1EE; transition: fill 250ms var(--ease); }
.bd-seal:hover .bs-ring, .bd-seal:focus-visible .bs-ring { fill: #FF6A00; }
.bd-seal .bs-core { fill: #1A1512; }
.bd-seal .bs-tx { font: 800 9.6px "Hanken Grotesk", system-ui, sans-serif; letter-spacing: 1.1px; fill: #1A1512; }
.bd-seal .bs-10 { font: 900 34px "Archivo", "Arial Narrow", sans-serif; font-stretch: 70%; fill: #FF6A00; letter-spacing: -1px; }
.bd-seal .bs-spin { transform-origin: 60px 60px; animation: awSpin 26s linear infinite; }
.bd-seal:hover { transform: scale(1.06) rotate(-6deg); }
.bd-seal:hover .bs-spin { animation-duration: 6s; }
.bd-seal:focus-visible { outline: 3px solid #FF6A00; outline-offset: 4px; }
@media (max-width: 899px) { .bd-seal { width: 84px; top: auto; bottom: 5.2rem; right: 1rem; } }
@media (prefers-reduced-motion: reduce) { .bd-seal .bs-spin { animation: none; } }

/* ---------- Crítica by decade ---------- */
.cr-dec { margin-top: 1.4rem; }
.cr-dec + .cr-feat { margin-top: 1.2rem; }

/* ---------- Baile do Almeidinha ---------- */
.view-baile .bl-hero-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: end; }
.view-baile .bl-hero-tx { display: grid; gap: 1.2rem; }
.view-baile .bl-hero h1 { font-size: var(--fs-4xl); line-height: .84; }
.view-baile .bl-hero h1 .bl-mk2 { color: inherit; }
body.sec-color .view-baile .bl-hero figcaption { color: inherit; opacity: .8; }
.view-baile .bl-photo { margin: 0; }
.view-baile .bl-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; display: block; }
.view-baile figcaption { font-size: var(--fs-xs); color: var(--tinta-2); margin-top: .5rem; }
.view-baile .bl-disc { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: center; }
.view-baile .bl-cover { display: block; border-radius: 10px; overflow: hidden; box-shadow: 0 18px 50px rgba(26, 21, 18, .22); max-width: 440px; }
.view-baile .bl-cover img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; transition: transform .4s; }
.view-baile .bl-cover:hover img { transform: scale(1.04); }
.view-baile .bl-disc-tx { display: grid; gap: 1rem; }
.view-baile .bl-disc-tx h2 { font-size: var(--fs-2xl); }
.view-baile .bl-band { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem 1.2rem; }
.view-baile .bl-band li { display: grid; border-top: 1px solid var(--linha-clara, rgba(0,0,0,.12)); padding-top: .45rem; }
.view-baile .bl-band span { font-size: var(--fs-sm); color: var(--tinta-2); }
.view-baile .bl-actions { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; }
.view-baile .bl-nights { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.2rem; }
.view-baile .bl-night { display: grid; border-radius: var(--r-card); overflow: hidden; background: var(--noite-2); }
.view-baile .bl-night figure { margin: 0; }
.view-baile .bl-night img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.view-baile .bl-night figcaption { color: var(--claro-2); padding: 0 1.4rem; }
.view-baile .bl-night .tx { display: grid; gap: .6rem; padding: 1.2rem 1.4rem 1.5rem; align-content: start; justify-items: start; }
.view-baile .bl-night .eyebrow { color: #7FD4C4; }
.view-baile .bl-night h3 { font-size: var(--fs-2xl); }
.view-baile .bl-night.no-ph { background: #1F978F; color: #1A1512; }
.view-baile .bl-night.no-ph .eyebrow { color: #1A1512; }
.view-baile .bl-night.no-ph .tx { align-content: end; min-height: 100%; padding: 2rem 1.6rem; }
.view-baile .bl-night.no-ph h3 { font-size: var(--fs-2xl); line-height: .9; }
.view-baile .bl-wide img { width: 100%; max-height: 70vh; object-fit: cover; display: block; }
.view-baile .bl-wide figcaption { padding-top: .6rem; padding-bottom: .6rem; }
.view-baile .bl-now { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem 4rem; align-items: center; }
.view-baile .bl-now-show { display: grid; gap: 1.1rem; }
.view-baile .bl-now .when { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-weight: 700; }
.view-baile .bl-now .when .date .d { font-size: var(--fs-2xl); }
@media (max-width: 899px) {
  .view-baile .bl-hero-in, .view-baile .bl-disc, .view-baile .bl-nights, .view-baile .bl-now { grid-template-columns: 1fr; }
  .view-baile .bl-cover { max-width: 300px; }
}

/* The house phrase, closing every record's page. */
.view-projetos .pj-motto { text-transform: uppercase; margin: 0; padding: clamp(2.4rem, 5vw, 4rem) 6vw; text-align: center; background: var(--noite); color: var(--laranja); font-family: var(--f-display); font-weight: 850; font-stretch: 80%; font-size: var(--fs-2xl); letter-spacing: -0.01em; }

/* Quem toca / NOVA: the group that recorded stays on show; the rest lives in file-folder tabs. */
.who-tabs { display: flex; gap: .25rem; margin: 2.2rem 0 0; padding: 0 .2rem; overflow-x: auto; scrollbar-width: none; }
.who-tabs::-webkit-scrollbar { display: none; }
.who-tab { position: relative; display: inline-flex; align-items: baseline; gap: .45rem; padding: .7rem 1.2rem .8rem; border: 1.5px solid var(--tinta); border-bottom: 0; border-radius: 12px 12px 0 0; background: color-mix(in srgb, var(--tinta) 8%, transparent); color: var(--tinta); font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-base); white-space: nowrap; cursor: pointer; transition: background 160ms var(--ease), transform 160ms var(--ease); }
.who-tab .n { font-family: var(--f-body); font-weight: 600; font-stretch: 100%; font-size: var(--fs-xs); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.who-tab:hover { background: color-mix(in srgb, var(--tinta) 14%, transparent); }
.who-tab[aria-selected="true"] { background: var(--papel); transform: translateY(-2px); box-shadow: 0 -6px 18px rgba(26, 21, 18, .07); }
.who-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1.5px; height: 3px; background: var(--papel); }
.who-tab:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
.who-panel { background: var(--papel); border: 1.5px solid var(--tinta); border-radius: 0 14px 14px 14px; padding: clamp(1.2rem, 2.5vw, 2rem); }
.who-tabs + .who-panel { margin-top: -1.5px; }
.who-panel > .subhead { margin-top: 0; }
.who-panel > * + * { margin-top: 1.2rem; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .who-panel .players { border-top: 0; padding-top: 0; }
@media (max-width: 560px) { .who-tab { font-size: var(--fs-base); padding: .6rem .9rem .7rem; } .who-panel { border-radius: 0 12px 12px 12px; } }

/* Home: the 10-string seal sits beside the Contrate call, not floating over the hero. */
.hire-strip .bd-seal { position: static; width: clamp(88px, 9vw, 116px); flex: none; }
@media (max-width: 899px) { .hire-strip .bd-seal { width: 96px; bottom: auto; right: auto; } }
.bd-dt .bd-note { color: #DDA15E; font-weight: 600; }

/* "Moderno é tradição": the house phrase and the day it was born. */
.lema-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: center; }
.lema-tx { display: grid; gap: 1.1rem; }
.lema-sec h2 { font-size: var(--fs-3xl); line-height: .86; }
.lema-sec h2 br + * , .lema-sec h2 { color: var(--claro); }
.lema-sec .lead { max-width: 52ch; }
.lema-body h3 { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-lg); margin-bottom: .5rem; }
.lema-body p { max-width: 52ch; }
.lema-body p + p { margin-top: .8rem; }
.lema-q { margin: 0; padding-left: 1.1rem; border-left: 3px solid var(--laranja); font-family: var(--f-display); font-weight: 700; font-stretch: 88%; font-size: var(--fs-lg); line-height: 1.25; }
.lema-sig { margin-top: .5rem; font-size: var(--fs-sm); color: var(--claro-2); }
.lema-where { font-size: var(--fs-sm); color: var(--claro-2); }
.lema-where a { color: var(--laranja); }
.lema-ph { margin: 0; }
.lema-ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; display: block; }
.lema-ph figcaption { margin-top: .5rem; font-size: var(--fs-xs); color: var(--claro-2); }
.view-novo .motto a, .view-projetos .pj-motto a { color: inherit; text-decoration: none; }
.view-novo .motto a:hover, .view-projetos .pj-motto a:hover { text-decoration: underline; text-underline-offset: .18em; }
@media (max-width: 899px) { .lema-in { grid-template-columns: 1fr; } }
/* Without the photo, the text takes the whole width. */
.lema-in:has(.lema-ph[hidden]) { grid-template-columns: 1fr; }
.lema-text { max-width: 58ch; font-size: var(--fs-base); line-height: 1.62; }
.lema-text p + p { margin-top: .9rem; }
.lema-text b { font-weight: 700; color: var(--laranja); }
.lema-pull { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-xl); line-height: 1.12; color: var(--claro); margin-block: 1.4rem !important; }
.lema-in:has(.lema-ph:not([hidden])) .lema-ph { position: sticky; top: 120px; }

/* Dia Nacional do Choro: the date as a mark. */
.ch-day { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.6rem clamp(1.8rem, 4vw, 3.4rem); align-items: center; }
.ch-day-mark { display: grid; place-items: center; align-content: center; width: clamp(130px, 16vw, 190px); aspect-ratio: 1; border-radius: 50%; background: var(--semente); color: var(--claro); text-align: center; }
.ch-day-mark b { font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-size: var(--fs-3xl); line-height: .8; }
.ch-day-mark span { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-base); margin-top: .3rem; }
.ch-day-tx { display: grid; gap: .9rem; }
.ch-day-tx h2 { font-size: var(--fs-2xl); line-height: .95; }
.ch-day-tx p { max-width: 62ch; }
.ch-day-note { font-size: var(--fs-sm); }
@media (max-width: 600px) { .ch-day { grid-template-columns: 1fr; justify-items: start; } }

/* O choro pra mim, in Hamilton's own words. */
.ch-own { max-width: 66ch; margin-top: 1.6rem; font-size: var(--fs-base); line-height: 1.62; }
.ch-own p + p { margin-top: .9rem; }
.ch-own-pull { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-xl); line-height: 1.12; color: var(--semente); margin-block: 1.4rem !important; }
.ch-own-sig { margin-top: 1.1rem !important; font-family: var(--f-display); font-weight: 800; font-stretch: 84%; color: var(--tinta-2); }
.ch-day-marks { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .5rem; }
.ch-day-marks li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: .9rem; align-items: baseline; border-top: 1px solid var(--linha-clara); padding-top: .5rem; }
.ch-day-marks b { font-family: var(--f-display); font-weight: 900; font-stretch: 78%; font-size: var(--fs-lg); color: var(--semente); }
.ch-day-marks span { font-size: var(--fs-base); }
.ch-day-vids { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem; margin-top: 1.4rem; }
.ch-vid { display: grid; gap: .6rem; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.ch-vid .th { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--noite); }
.ch-vid .th img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.ch-vid:hover .th img { transform: scale(1.05); }
.ch-vid .pl { position: absolute; inset: auto auto 10px 10px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--laranja); color: var(--noite); }
.ch-vid .pl svg { width: 18px; height: 18px; }
.ch-vid .k { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }
.ch-vid .t { display: block; font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-base); line-height: 1.15; margin-top: .15rem; }
.ch-story { max-width: 66ch; margin-top: clamp(1.8rem, 4vw, 2.6rem); font-size: var(--fs-base); line-height: 1.62; }
.ch-story p + p { margin-top: .8rem; }
.ch-story .eyebrow { margin-bottom: .8rem; }
.ch-dlg { font-family: var(--f-display); font-weight: 700; font-stretch: 88%; font-size: var(--fs-md); color: var(--semente); padding-left: 1rem; }
.ch-law { margin: 1.3rem 0; padding: 1rem 1.2rem; border-left: 3px solid var(--semente); background: color-mix(in srgb, var(--semente) 7%, transparent); font-family: var(--f-display); font-weight: 700; font-stretch: 88%; font-size: var(--fs-md); line-height: 1.3; }
.ch-day-marks { margin-top: clamp(1.6rem, 3vw, 2.2rem); max-width: 720px; }
.ch-day-note { margin-top: 1.4rem; max-width: 66ch; font-size: var(--fs-base); color: var(--tinta-2); }
.ch-day-more { margin-top: 1rem; }
.view-hamilton .hh-own { margin-top: clamp(1.8rem, 4vw, 2.6rem); border-top: 1px solid var(--linha-clara); padding-top: 1.4rem; }
.view-hamilton .hh-own .ch-own-pull { color: var(--laranja); }
.view-hamilton .hh-own #hhOwnMore { margin-top: 1rem; }

/* Baile: Hamilton's words, the Bailinho and the list of editions. */
.view-baile .bl-kids { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.6rem clamp(2rem, 5vw, 4rem); align-items: start; }
.view-baile .bl-kids h2 { font-size: var(--fs-2xl); line-height: .95; }
.view-baile .bl-kids-tx { margin-top: 0; }
.view-baile .bl-kids-press { margin-top: 1rem; font-size: var(--fs-sm); color: var(--tinta-2); max-width: 52ch; }
.view-baile .bl-kids-vid { margin-top: 1.2rem; grid-template-columns: minmax(0, 1fr); max-width: 420px; }
.view-baile .ch-own-pull { color: #1F978F; }
.bl-eds { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .1rem; }
.bl-ed { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) minmax(0, 12rem); gap: .3rem 1.2rem; padding: .7rem 0; border-top: 1px solid var(--linha-clara); align-items: baseline; }
.bl-ed .d { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; }
.bl-ed .g { font-size: var(--fs-base); }
.bl-ed .g.is-none { color: var(--tinta-2); }
.bl-ed .p { font-size: var(--fs-sm); color: var(--tinta-2); text-align: right; }
@media (max-width: 760px) { .view-baile .bl-kids { grid-template-columns: 1fr; } .bl-ed { grid-template-columns: 1fr; } .bl-ed .p { text-align: left; } }

/* ---- Baile, 04/10/2026 (pedido do Marcos) ---- */
/* Abertura: a foto do palco ocupa tudo; o nome vai em branco, sem asteriscos, por cima. */
body.sec-color.has-sec .view-baile .page-hero.bl-hero-foto, .view-baile .page-hero.bl-hero-foto { position: relative; overflow: hidden; padding: 0; background: #0b0a09; color: #fff; border-bottom: 0; min-height: clamp(380px, 74vh, 780px); display: grid; align-content: end; }
.view-baile .bl-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
@media (max-width: 600px) { .view-baile .bl-hero-img { object-position: 60% 42%; } }
.view-baile .bl-hero-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(0,0,0,.72) 100%); pointer-events: none; }
.view-baile .bl-hero-foto .bl-hero-in { position: relative; z-index: 1; display: block; padding-bottom: .4rem; }
.view-baile .bl-mark-claro, .view-baile .bl-mark-claro * { color: #fff !important; }
.view-baile .bl-hero-foto h1.bl-mark { text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.view-baile .bl-hero-foto .bl-mk1 { font-size: clamp(1.6rem, 4.4vw, 3.4rem); }
.view-baile .bl-hero-foto .bl-mk2 { font-size: clamp(3rem, 11vw, 9rem); line-height: .86; }
.view-baile .bl-hero-cred { position: relative; z-index: 1; margin: 0; padding-top: .3rem; padding-bottom: 1rem; font-size: var(--fs-xs, .75rem); color: rgba(255,255,255,.78); }

/* "O Baile": o texto da antiga abertura e as palavras do Hamilton, na cor e com a foto da abertura. */
.view-baile .bl-sobre { background: #1F978F; color: #1A1512; }
body.sec-color.has-sec .view-baile .bl-sobre { background: var(--sec); color: var(--sec-fg); }
.view-baile .bl-sobre-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: start; }
.view-baile .bl-sobre h2 { font-size: var(--fs-3xl); line-height: .9; margin: .2rem 0 1rem; }
.view-baile .bl-sobre .eyebrow, .view-baile .bl-sobre .ch-own-sig, .view-baile .bl-sobre .ch-own-pull { color: inherit; }
.view-baile .bl-sobre .ch-own-pull { opacity: 1; }
.view-baile .bl-sobre figcaption { color: inherit; opacity: .8; margin-top: .5rem; font-size: var(--fs-sm); }
.view-baile .bl-sobre .bl-photo { position: sticky; top: 7rem; }
@media (max-width: 899px) { .view-baile .bl-sobre-in { grid-template-columns: 1fr; } .view-baile .bl-sobre .bl-photo { position: static; } }

/* Carrossel de fotos do baile: ocupa a faixa onde ficava a foto do Hermeto. */
.view-baile .bl-galeria { position: relative; background: #0b0a09; color: #fff; }
.view-baile .bl-gal-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline: none; }
.view-baile .bl-gal-track::-webkit-scrollbar { display: none; }
.view-baile .bl-gal-slide { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.view-baile .bl-gal-slide img { width: 100%; height: clamp(320px, 70vh, 760px); object-fit: cover; display: block; }
.view-baile .bl-gal-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: .2rem 1rem; align-items: baseline; padding-top: 3rem; padding-bottom: 2.6rem; background: linear-gradient(180deg, transparent, rgba(0,0,0,.75)); font-size: var(--fs-sm); color: rgba(255,255,255,.85); }
.view-baile .bl-gal-slide figcaption b { color: #fff; font-size: var(--fs-base); font-weight: 700; flex-basis: 100%; }
.view-baile .bl-galeria .lb-nav { top: calc(50% - 1rem); z-index: 2; }
.view-baile .bl-gal-dots { position: absolute; left: 0; right: 0; bottom: .3rem; display: flex; justify-content: center; gap: 0; z-index: 2; }
/* O botão é a área de toque (24 × 32 px, para o dedo acertar no celular); o pontinho de 9 px é desenhado dentro dele. */
.view-baile .bl-gal-dots button { width: 24px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.view-baile .bl-gal-dots button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.45); }
.view-baile .bl-gal-dots button[aria-current="true"]::before { background: var(--laranja); transform: scale(1.25); }

/* Almeidinha */
.view-baile .bl-alm { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.6rem clamp(2rem, 5vw, 4rem); align-items: start; }
.view-baile .bl-alm h2 { font-size: var(--fs-3xl); line-height: .9; }
.view-baile .bl-alm-tx { max-width: 62ch; font-size: var(--fs-base); line-height: 1.62; }
.view-baile .bl-alm-tx p + p { margin-top: .9rem; }
.view-baile .bl-alm-mais p { margin-top: .9rem; }
.view-baile .bl-alm-hh { margin-top: 1.6rem !important; padding-top: 1rem; border-top: 1px solid var(--linha-clara, rgba(0,0,0,.14)); font-family: var(--f-display); font-weight: 750; font-stretch: 88%; font-size: var(--fs-md); }
.view-baile .bl-alm-tx .btn { margin-top: 1.2rem; }
.view-baile .bl-alm .lead { margin-top: 1rem; max-width: 40ch; }
@media (max-width: 760px) { .view-baile .bl-alm { grid-template-columns: 1fr; } }

/* Release do próximo baile, embaixo de "Hoje" */
.view-baile .bl-release { margin-top: clamp(1.8rem, 4vw, 2.8rem); padding-top: clamp(1.4rem, 3vw, 2rem); border-top: 1px solid var(--linha-clara, rgba(0,0,0,.14)); max-width: 72ch; margin-left: auto; margin-right: auto; }
.view-baile .bl-release h3 { font-family: var(--f-display); font-weight: 850; font-stretch: 84%; font-size: var(--fs-xl); line-height: 1.05; text-transform: uppercase; margin: .3rem 0 1rem; }
.view-baile .bl-release p + p { margin-top: .8rem; }
.view-baile .bl-release[hidden] { display: none; }

/* "Noites de baile" saiu do fundo preto: aba com fundo escuro dentro de seção clara confundia (regra do Marcos, 04/10/2026). */
.view-baile #noites .bl-eds-box .bl-ed { border-top-color: var(--linha-clara, rgba(0,0,0,.14)); }
.view-baile #noites .bl-night:not(.no-ph) { color: var(--claro, #F2F1EE); }
.view-baile #noites .bl-night:not(.no-ph) h3 { color: var(--claro, #F2F1EE); }

/* The 10-string seal needs air next to the Contrate call. */
.hire-strip .wrap { gap: 1rem clamp(2rem, 6vw, 5rem); }
.hire-strip .bd-seal { margin-left: clamp(0rem, 2vw, 1.5rem); }

/* Bandolim: who came before and alongside. */
.bd-cast { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; }
.bd-fig { border: 1.5px solid rgba(255,255,255,.18); border-radius: var(--r-card); padding: 1.2rem 1.3rem 1.4rem; display: grid; }
.bd-fig .tx { display: grid; gap: .5rem; justify-items: start; align-content: start; }
.bd-fig .r { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: #DDA15E; }
.bd-fig h3 { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-lg); line-height: 1.05; }
.bd-fig p { font-size: var(--fs-base); }
.bd-cast-note { margin-top: 1.2rem; font-size: var(--fs-sm); }
.view-baile .bl-eds-box { margin-top: clamp(2rem, 4vw, 3rem); }
.view-baile .bl-eds-box h3 { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-lg); }
.view-baile .bl-eds-box .bl-ed { border-top-color: rgba(255,255,255,.18); }
.view-baile .bl-players { list-style: none; margin: 1.6rem 0 0; padding: 0; columns: 3 240px; column-gap: 2rem; }
.view-baile .bl-players li { break-inside: avoid; display: grid; padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.view-baile .bl-players b { font-weight: 700; }
.view-baile .bl-players span { font-size: var(--fs-sm); color: var(--claro-2); }
.view-baile #formacao-original .bl-band { margin-top: 1.6rem; }

/* ---------- Quinteto Brasilianos ---------- */
.view-quinteto .qt-hero-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: end; }
.view-quinteto .qt-hero-tx { display: grid; gap: 1.2rem; }
.view-quinteto .qt-hero h1 { font-size: var(--fs-4xl); line-height: .86; }
.view-quinteto .qt-hero h1 br + * { color: #C9A24B; }
.view-quinteto .qt-ph { margin: 0; max-width: 360px; justify-self: end; }
.view-quinteto .qt-ph img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; border-radius: 12px; box-shadow: 0 18px 50px rgba(26, 21, 18, .25); }
.view-quinteto .qt-sym { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: center; }
.view-quinteto .qt-sym-tx { display: grid; gap: 1rem; }
.view-quinteto .qt-sym-tx h2 { font-size: var(--fs-2xl); line-height: .98; }
.view-quinteto .qt-band { margin-top: 1.6rem; }
.view-quinteto .cr-list { margin-top: 1.8rem; }
@media (max-width: 899px) {
  .view-quinteto .qt-hero-in, .view-quinteto .qt-sym { grid-template-columns: 1fr; }
  .view-quinteto .qt-ph { max-width: 260px; justify-self: start; }
}
body.sec-color .view-quinteto .qt-hero h1 br + * { color: color-mix(in srgb, var(--tinta) 62%, transparent); }
.view-baile .bl-orig { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 1rem; list-style: none; margin: 1.8rem 0 0; padding: 0; }
.view-baile .bl-players-note { margin-top: .4rem; max-width: 52ch; font-size: var(--fs-sm); }
.view-baile .bl-players { margin-top: 1rem; }
.view-baile #blPlayersHead { margin-top: 2.2rem; }
.view-baile .bl-out-lead { max-width: 62ch; margin-bottom: 1.8rem; }
.view-baile .bl-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1.6rem clamp(1.6rem, 4vw, 3rem); align-items: start; }
.view-baile .bl-out-g h3 { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-md); padding-bottom: .5rem; border-bottom: 2px solid var(--tinta); }
.view-baile .bl-chips { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .4rem; }
.view-baile .bl-chips li { display: flex; flex-wrap: wrap; gap: .1rem .5rem; align-items: baseline; }
.view-baile .bl-chips b { font-weight: 700; }
.view-baile .bl-chips span { font-size: var(--fs-sm); color: var(--tinta-2); }
.view-baile .bl-out-g.is-world { grid-column: span 2; }
.view-baile .bl-world { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .9rem; }
.view-baile .bl-world li { border-left: 3px solid #1F978F; padding-left: .9rem; }
.view-baile .bl-world h4 { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-md); }
.view-baile .bl-world .p { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); }
.view-baile .bl-world p { font-size: var(--fs-base); max-width: 56ch; }
.view-baile .bl-out-more { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin-top: 1.6rem; }
@media (max-width: 760px) { .view-baile .bl-out-g.is-world { grid-column: auto; } }

/* The Baile mark, after the banner that hangs on the Circo Voador stage. */
.bl-mark { display: grid; justify-items: start; gap: .1rem; line-height: .88; }
.bl-mark .bl-mk1 { display: inline-flex; align-items: baseline; gap: .5em; font-size: var(--fs-2xl); font-weight: 800; font-stretch: 100%; letter-spacing: .03em; }
.bl-mark .bl-mk1 .w { text-transform: uppercase; }
.bl-mark .bl-mk1 .d { text-transform: lowercase; font-weight: 500; letter-spacing: .01em; }
.bl-mark .bl-mk1 i { font-style: normal; font-size: .8em; color: #1F978F; }
.bl-mark .bl-mk2 { font-size: var(--fs-3xl); font-weight: 900; font-stretch: 88%; letter-spacing: .012em; text-transform: uppercase; }
body.sec-color .bl-mark .bl-mk1 i { color: var(--claro); }

/* Quinteto: the stage lists reuse the Baile's two-column blocks. */
.view-quinteto .qt-stage-lead { max-width: 62ch; margin-bottom: 1.6rem; }
.view-quinteto .bl-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.6rem clamp(1.6rem, 4vw, 3rem); align-items: start; }
.view-quinteto .bl-out-g h3 { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-md); padding-bottom: .5rem; border-bottom: 2px solid var(--tinta); }
.view-quinteto .bl-world { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .9rem; }
.view-quinteto .bl-world li { border-left: 3px solid #C9A24B; padding-left: .9rem; }
.view-quinteto .bl-world h4 { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-md); }
.view-quinteto .bl-world p { font-size: var(--fs-base); max-width: 56ch; }

/* People blocks: the whole card opens the mini bio. */
.guest.is-open { position: relative; cursor: pointer; transition: transform .2s var(--ease); }
.guest.is-open:hover { transform: translateY(-2px); }
.guest.is-open::after { content: "i"; position: absolute; top: .8rem; right: .8rem; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; font-family: var(--f-display); font-weight: 800; font-size: var(--fs-xs); opacity: .5; }
.guest .g-hit { position: absolute; inset: 0; z-index: 1; border: 0; background: transparent; cursor: pointer; border-radius: inherit; }
.guest .g-hit:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
.guest a, .guest button:not(.g-hit) { position: relative; z-index: 2; }
.person-sheet .sheet-body { padding: clamp(1.4rem, 4vw, 2.6rem); display: grid; gap: 1.2rem; }
.ps-head { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }
.ps-ph { display: block; width: 110px; height: 110px; border-radius: 50%; overflow: hidden; flex: none; }
.ps-ph img { width: 100%; height: 100%; object-fit: cover; }
.ps-head h2 { font-size: var(--fs-2xl); line-height: 1.02; }
.ps-role { color: var(--tinta-2); font-weight: 600; }
.ps-from { font-size: var(--fs-sm); color: var(--tinta-2); }
.ps-bio p { max-width: 62ch; }
.ps-bio p + p { margin-top: .7rem; }
.view-choro .ch-people { margin-top: 1.8rem; }
.view-choro .ch-people-note { margin-top: 1.2rem; font-size: var(--fs-sm); }
.view-bandolim .bd-cast { margin-top: 1.8rem; }

/* ---------- Hamilton pelo mundo ---------- */
.view-mapa .mp-hero h1 { font-size: var(--fs-3xl); line-height: .9; }
.view-mapa .mp-tools { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.view-mapa .mp-wrap { border-radius: var(--r-card); background: color-mix(in srgb, var(--claro) 6%, transparent); padding: clamp(.6rem, 2vw, 1.4rem); }
/* O mapa é recortado pelo próprio quadro. Com overflow visível, a câmera da turnê
   aproximava o mundo e o desenho vazava por cima do cabeçalho e da página inteira. */
.view-mapa .mp-canvas svg { display: block; width: 100%; height: auto; overflow: hidden; }
.view-mapa .mp-land { fill: color-mix(in srgb, var(--claro) 34%, transparent); }
.view-mapa .mp-halo { fill: var(--laranja); opacity: 0; transition: opacity .2s var(--ease); }
.view-mapa .mp-dot { fill: var(--laranja); stroke: var(--noite); stroke-width: .4; cursor: pointer; }
.view-mapa .mp-pin.is-next .mp-dot { fill: #7FE7D6; }
.view-mapa .mp-pin.is-next .mp-halo { fill: #7FE7D6; opacity: .28; animation: mpPulse 2.6s ease-out infinite; }
.view-mapa .mp-pin:hover .mp-halo, .view-mapa .mp-pin:focus-visible .mp-halo { opacity: .5; }
.view-mapa .mp-pin:focus-visible { outline: none; }
.view-mapa .mp-pin:focus-visible .mp-dot { stroke: var(--claro); stroke-width: .8; }
@keyframes mpPulse { 0% { r: 2.2; opacity: .5; } 100% { r: 7; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .view-mapa .mp-pin.is-next .mp-halo { animation: none; } }
.view-mapa .mp-note { margin-top: .9rem; font-size: var(--fs-sm); }
.view-mapa .mp-list { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .1rem 1.6rem; }
.view-mapa .mp-row button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 1rem; width: 100%; padding: .75rem 0; border: 0; border-top: 1px solid var(--linha-clara); background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.view-mapa .mp-row .c { grid-column: 1; grid-row: 1; font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-md); }
.view-mapa .mp-row .p { grid-column: 1; grid-row: 2; font-size: var(--fs-sm); color: var(--tinta-2); }
.view-mapa .mp-row .t { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: var(--fs-sm); color: var(--tinta-2); text-align: right; }
.view-mapa .mp-row.is-next .t { color: var(--semente); font-weight: 700; }
.view-mapa .mp-row button:hover .c { text-decoration: underline; text-underline-offset: .18em; }
.mp-ph { margin: 0 0 1rem; border-radius: 12px; overflow: hidden; }
.mp-ph img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.mp-ph figcaption { padding: .4rem .6rem; font-size: .8125rem; color: var(--muted); }
.mp-ev { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.mp-ev li { border-top: 1px solid var(--linha-clara); padding-top: .8rem; display: grid; gap: .2rem; justify-items: start; }
.mp-ev .tag { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }
.mp-ev .d { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-base); }
.mp-ev p { max-width: 56ch; }
/* Cidade com muitos shows: os que já aconteceram, por ano, em blocos que abrem e fecham (08/10/2026). */
.mp-ja { margin-top: 1.4rem; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }
.mp-ano { border-top: 1px solid var(--linha-clara); }
.mp-ano summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mp-ano summary::-webkit-details-marker { display: none; }
.mp-ano summary b { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-md); }
.mp-ano summary span { margin-left: auto; font-size: var(--fs-sm); color: var(--tinta-2); }
.mp-ano summary::after { content: "+"; font-weight: 400; font-size: var(--fs-lg); line-height: 1; color: var(--laranja); }
.mp-ano[open] summary::after { content: "−"; }
.mp-ano > .mp-ev { padding-bottom: 1rem; }

/* On a phone the whole world in 340px is unreadable: the map scrolls sideways, big enough to tap. */
@media (max-width: 760px) {
  .view-mapa .mp-wrap { overflow-x: auto; scrollbar-width: none; }
  .view-mapa .mp-wrap::-webkit-scrollbar { display: none; }
  .view-mapa .mp-canvas { min-width: 620px; }
  .view-mapa .mp-dot { r: 2.6; }
  .view-mapa .mp-note::after { content: " Arraste o mapa para o lado para ver o mundo inteiro."; }
}
/* The second seal: the world map. */
.bd-seal.is-mapa .bs-core { fill: #1A1512; }
.bd-seal.is-mapa .bs-tx { fill: #1A1512; }
.bd-seal.is-mapa .bs-globe { fill: none; stroke: #FF6A00; stroke-width: 1.6; }
.bd-seal.is-mapa .bs-pin { fill: #F2F1EE; }

/* The map: the next show, and the route through the dates ahead. */
.view-mapa .mp-route { fill: none; stroke: #F4C542; stroke-width: .5; stroke-linejoin: round; stroke-dasharray: 2 2.4; opacity: .75; animation: mpDash 6s linear infinite; }
@keyframes mpDash { to { stroke-dashoffset: -44; } }
.view-mapa .mp-pin.is-now .mp-dot { fill: #F4C542; stroke-width: .5; }
.view-mapa .mp-pin.is-now .mp-halo { fill: #F4C542; opacity: .5; animation: mpPulseNow 1.5s ease-out infinite; }
@keyframes mpPulseNow { 0% { r: 2.4; opacity: .7; } 100% { r: 10; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .view-mapa .mp-route { animation: none; } .view-mapa .mp-pin.is-now .mp-halo { animation: none; opacity: .35; } }
.view-mapa .mp-legend { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: var(--fs-sm); color: var(--claro-2); }
.view-mapa .mp-legend li { display: inline-flex; align-items: center; gap: .45rem; }
.view-mapa .mp-legend i { width: 11px; height: 11px; border-radius: 50%; }
.view-mapa .mp-legend .is-now { background: #F4C542; }
.view-mapa .mp-legend .is-next { background: #7FE7D6; }
.view-mapa .mp-legend .is-past { background: var(--laranja); }
.view-mapa .mp-legend .is-route { width: 22px; height: 0; border-radius: 0; border-top: 2px dashed #F4C542; }
.view-mapa .mp-row.is-now .t { color: #A57C00; }

/* Take the date to your own calendar. */
.cal-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: inherit; cursor: pointer; opacity: .6; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.cal-btn:hover { opacity: 1; transform: translateY(-1px); }
.cal-btn:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; opacity: 1; }
.cal-all { white-space: nowrap; }
.view-agenda .toolbar { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; }
.view-agenda .toolbar .field.search { flex: 1 1 260px; }

/* Where a musician appears. */
.ps-albums h3 { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-md); margin-bottom: .8rem; }
.ps-disc { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ps-disc a { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: .8rem; align-items: center; color: inherit; text-decoration: none; padding: .35rem; border-radius: 10px; }
.ps-disc a:hover { background: color-mix(in srgb, var(--tinta) 7%, transparent); }
.ps-disc img, .ps-disc .ph { width: 46px; height: 46px; border-radius: 6px; object-fit: cover; background: var(--papel-2); display: block; }
.ps-disc b { display: block; font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-base); line-height: 1.1; }
.ps-disc small { color: var(--tinta-2); font-size: var(--fs-sm); }
.view-agenda .ag-filters { margin-top: .9rem; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: .2rem; }
.view-agenda .ag-filters::-webkit-scrollbar { display: none; }
.view-mapa .mp-pin.is-pais .mp-dot { fill: none; stroke: var(--laranja); stroke-width: .9; r: 2; }
.view-mapa .mp-paises { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .75rem; }
.view-mapa .mp-paises li { padding: .35rem .8rem; border: 1.5px solid currentColor; border-radius: 999px; font-weight: 600; font-size: var(--fs-sm); }
.mp-empty { max-width: 52ch; color: var(--tinta-2); }
.view-mapa .mp-tour-box { margin-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.16); padding-top: 1rem; }
.view-mapa .mp-tour { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .1rem; }
.view-mapa .mp-tour li { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) minmax(0, 1fr); gap: .2rem 1.2rem; padding: .6rem 0; border-top: 1px solid rgba(255,255,255,.1); align-items: baseline; }
.view-mapa .mp-tour .d { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; color: #F4C542; }
.view-mapa .mp-tour .v { color: var(--claro-2); font-size: var(--fs-sm); }
@media (max-width: 700px) { .view-mapa .mp-tour li { grid-template-columns: 1fr; } }
.view-mapa .mp-row.is-br .c { color: #1F978F; }
.view-mapa .mp-row.is-fora .c { color: #1E2F9E; }
.view-mapa .mp-row.is-now .c { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.view-mapa .mp-list-key { font-size: var(--fs-sm); }
.view-mapa .mp-list-key .k-br { color: #1F978F; }
.view-mapa .mp-list-key .k-fora { color: #1E2F9E; }
.view-mapa .mp-pin.is-hist .mp-dot { r: 1.25; opacity: .8; }
.view-mapa .mp-pin.is-hist:hover .mp-dot { r: 2; opacity: 1; }
.view-mapa .mp-regioes { margin-top: 1.6rem; }
.view-mapa .mp-regioes .who-tab { display: grid; gap: .1rem; }
.view-mapa .mp-regioes .fl { font-size: var(--fs-md); line-height: 1; }
.view-mapa .mp-list-box { background: var(--papel); border: 1.5px solid var(--tinta); border-radius: 0 14px 14px 14px; margin-top: -1.5px; padding: clamp(1rem, 2.4vw, 1.8rem); }
.view-mapa .mp-regioes .who-tab { justify-items: start; text-align: left; padding: .6rem 1rem .7rem; font-size: var(--fs-base); }
.view-mapa .mp-regioes .who-tab span:not(.fl) { font-family: var(--f-body); font-weight: 500; font-stretch: 100%; font-size: var(--fs-xs); color: var(--tinta-2); }
.view-mapa .mp-regioes .who-tab[aria-selected="true"] span:not(.fl) { color: color-mix(in srgb, var(--tinta) 70%, transparent); }
.view-mapa .mp-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); padding: 1.2rem 0; margin-bottom: 1.6rem; }
.view-mapa .mp-nums .fact { display: grid; gap: .2rem; align-content: start; }
.view-mapa .mp-nums b { font-family: var(--f-display); font-weight: 850; font-stretch: 72%; font-size: var(--fs-3xl); line-height: .88; color: var(--laranja); font-variant-numeric: tabular-nums; }
.view-mapa .mp-nums span { font-size: var(--fs-sm); color: var(--claro-2); font-weight: 600; }

/* ---------- Projetos: em cartaz + históricos ---------- */
.view-projetos .ph-hero h1 { font-size: var(--fs-4xl); line-height: .86; }
.view-projetos .ph-list { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1.2rem; }
.view-projetos .ph-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; border-radius: var(--r-card); overflow: hidden; background: var(--noite); color: var(--claro); }
.view-projetos .ph-card:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.view-projetos .ph-card:nth-child(even) .ph-img { order: 2; }
.view-projetos .ph-img { display: block; min-height: 220px; }
.view-projetos .ph-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.view-projetos .ph-tx { display: grid; gap: .8rem; align-content: center; padding: clamp(1.4rem, 3vw, 2.4rem); }
.view-projetos .ph-tx h3 { font-family: var(--f-display); font-weight: 850; font-stretch: 78%; font-size: var(--fs-2xl); line-height: .9; }
.view-projetos .ph-tx p { max-width: 52ch; color: var(--claro-2); }
.view-projetos .ph-act { display: flex; flex-wrap: wrap; gap: .6rem 1.3rem; align-items: center; margin-top: .3rem; }
.view-projetos .ph-act .textlink { color: var(--claro); }
.view-projetos .ph-act .btn svg { width: 14px; height: 14px; vertical-align: -2px; }
.view-projetos .ph-past { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1.2rem; }
.view-projetos .ph-pastcard { display: grid; gap: .35rem; color: inherit; text-decoration: none; }
.view-projetos .ph-pastcard .ph-img { aspect-ratio: 4 / 3; min-height: 0; border-radius: var(--r-card); overflow: hidden; }
.view-projetos .ph-pastcard .ph-img img { transition: transform .4s var(--ease); }
.view-projetos .ph-pastcard:hover .ph-img img { transform: scale(1.04); }
.view-projetos .ph-pastcard .w { margin-top: .5rem; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }
.view-projetos .ph-pastcard b { font-family: var(--f-display); font-weight: 850; font-stretch: 80%; font-size: var(--fs-lg); line-height: 1; }
.view-projetos .ph-pastcard .l { font-size: var(--fs-base); max-width: 40ch; }
@media (max-width: 760px) {
  .view-projetos .ph-card, .view-projetos .ph-card:nth-child(even) { grid-template-columns: 1fr; }
  .view-projetos .ph-card:nth-child(even) .ph-img { order: 0; }
  .view-projetos .ph-img { aspect-ratio: 16 / 10; min-height: 0; }
}

/* ---------- Dois de Ouro ---------- */
.view-dois-de-ouro .do-hero-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: end; }
.view-dois-de-ouro .do-hero-tx { display: grid; gap: 1.2rem; }
.view-dois-de-ouro .do-hero h1 { font-size: var(--fs-4xl); line-height: .86; }
.view-dois-de-ouro .do-ph { margin: 0; max-width: 340px; justify-self: end; }
.view-dois-de-ouro .do-ph img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; box-shadow: 0 18px 50px rgba(26, 21, 18, .25); }
.view-dois-de-ouro .do-band { margin-top: 1.6rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 1rem; list-style: none; padding: 0; }
.view-dois-de-ouro .do-marks { max-width: 760px; }
.view-dois-de-ouro .do-marks li { border-top-color: rgba(255,255,255,.16); }
.view-dois-de-ouro .do-marks b { color: #DDA15E; }
@media (max-width: 899px) { .view-dois-de-ouro .do-hero-in { grid-template-columns: 1fr; } .view-dois-de-ouro .do-ph { justify-self: start; max-width: 240px; } }
.view-projetos #projetos-abas .ct-evtabs-row { max-width: 820px; }

/* ---------- Header mark: the 10-string mandolin beside the name ---------- */
.brand { display: inline-flex; align-items: center; gap: .5rem; }
.brand .brand-mark { width: 1.35em; height: 1.35em; color: var(--laranja); flex: none; transition: transform .3s var(--ease); }
.brand:hover .brand-mark { transform: rotate(-12deg); }

/* ---------- Back to the top ---------- */
.to-top { position: fixed; right: clamp(.8rem, 2.4vw, 1.6rem); bottom: clamp(1rem, 3vw, 1.8rem); z-index: 60; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--noite); color: var(--claro); display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 28px rgba(26, 21, 18, .35); outline: 1.5px solid rgba(255,255,255,.18); transition: transform .2s var(--ease); }
.to-top:hover { transform: translateY(-3px); }
.to-top:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
.to-top svg { width: 20px; height: 20px; }
@media (max-width: 1180px) { .to-top { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
body.is-reading .to-top { display: none; }

/* ---------- Home banner: the text lines up with the site's left edge ---------- */
.view-home .slide-text { padding-left: max(clamp(1.5rem, 4vw, 3.5rem), calc((100vw - var(--wrap)) / 2 + var(--pad))); }

/* ---------- Discografia: the album's own page as the main call ---------- */
.view-musica .hs-cta { display: inline-flex; align-items: center; gap: .55rem; }
.view-musica .hs-cta svg { width: 20px; height: 20px; transition: transform .5s var(--ease); }
.view-musica .hs-cta:hover svg { transform: rotate(180deg); }

/* ---------- Agenda: the upcoming shows in folder tabs ---------- */
.view-agenda .ag-tabs { margin-top: 1.4rem; }
.view-agenda .ag-panel { background: var(--papel); border: 1.5px solid var(--tinta); border-radius: 0 14px 14px 14px; margin-top: -1.5px; padding: clamp(.8rem, 2vw, 1.6rem); }

/* ---------- Pelo mundo: the list slides sideways with dots; flags on the countries ---------- */
.view-mapa .mp-list-box { display: grid; grid-auto-flow: column; grid-template-rows: repeat(6, auto); grid-auto-columns: minmax(220px, calc((100% - 3.2rem) / 3)); column-gap: 1.6rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.view-mapa .mp-list-box::-webkit-scrollbar { display: none; }
.view-mapa .mp-list-box > li { scroll-snap-align: start; }
/* Snap to the box's inner margin, not its border: the first column no longer starts cut on the left. */
.view-mapa .mp-list-box { scroll-padding-inline: clamp(1rem, 2.4vw, 1.8rem); }
@media (max-width: 760px) { .view-mapa .mp-list-box { grid-auto-columns: calc(100% - 2.4rem); column-gap: 1.2rem; } }
.view-mapa .mp-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }
.view-mapa .mp-dotnav { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: color-mix(in srgb, var(--tinta) 25%, transparent); cursor: pointer; transition: width .25s var(--ease), background .25s; }
.view-mapa .mp-dotnav.is-on { width: 26px; border-radius: 6px; background: var(--laranja); }
.view-mapa .mp-paises .fl { margin-right: .4rem; }

/* Short native clips (album pages, Baile) */
.clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.2rem; align-items: start; margin: 0 0 1.6rem; }
.clips[hidden] { display: none; }
.clip { margin: 0; display: grid; gap: .55rem; }
.clip video { display: block; width: 100%; aspect-ratio: var(--ar, 16/9); max-height: 70vh; object-fit: cover; background: #000; border-radius: 12px; }
.clip figcaption { display: grid; gap: .15rem; }
.clip .k { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.clip .t { font-weight: 700; line-height: 1.3; }
#blClips { margin-top: 2rem; }

/* Home carousel on phones: the three tabs share the row with the pause button only (the tabs already pick a slide). */
@media (max-width: 599px) {
  .view-home .hero-bar .wrap { gap: .4rem; }
  .view-home .tabs { overflow: visible; }
  .view-home .tab { flex: 1 1 0; min-width: 0; padding: .55rem .45rem; font-size: var(--fs-2xs); letter-spacing: .06em; white-space: normal; line-height: 1.2; }
  .view-home .tab::before, .view-home .tab .bar { left: .45rem; right: .45rem; }
  .view-home .hero-controls [aria-label="Destaque anterior"], .view-home .hero-controls [aria-label="Próximo destaque"] { display: none; }
}

/* The open menu covers the page: its floating buttons step aside. */
#menu:not([hidden]) ~ :is(#toTop, #boia) { display: none; }

/* Hamilton: the six numbers use the whole width, each one centered in its column (the year no longer runs into the next number). */
.view-hamilton .hh-hero .wrap:has(> .facts) { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
.view-hamilton .facts .fact { justify-items: center; text-align: center; padding: 1.2rem .6rem 1.4rem; }
.view-hamilton .facts .fact + .fact { box-shadow: -1px 0 0 var(--noite-3); }

/* ---------- Contrate · Formatos as folder tabs (dark version: the section is on the night background) ---------- */
#formatos .who-tabs, #formatos .who-panel { --tinta: #F2F1EE; --tinta-2: #BDB8B0; --papel: #1C1A18; }
#formatos .who-tabs { margin-top: 1rem; }
#formatos .who-tab[aria-selected="true"] { color: var(--laranja); box-shadow: none; }
#formatos .ct-fm-tabs { margin-bottom: 0; }
#formatos .who-panel.ct-fm { margin-top: -1.5px; }
#formatos .who-panel > * + * { margin-top: 0; }
.view-contrate .ct-fm-body > .ct-fm-block:has(.ct-shows) { margin-top: .6rem; }
.view-contrate .ct-shows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: .8rem; }
.view-contrate .ct-shows li > :is(a, div) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; height: 100%; padding: 1rem; border-radius: 14px; background: var(--noite-3, #2A2724); color: var(--claro); text-decoration: none; }
.view-contrate .ct-shows li > a:hover { background: #34302C; }
.view-contrate .ct-shows li > a:hover b { text-decoration: underline; text-underline-offset: .18em; }
.view-contrate .ct-sh-cv { width: 64px; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #000; }
.view-contrate .ct-sh-cv img { width: 100%; height: 100%; object-fit: cover; }
.view-contrate .ct-shows li > :is(a, div):not(:has(.ct-sh-cv)) { grid-template-columns: minmax(0, 1fr); }
.view-contrate .ct-sh-tx { display: grid; gap: .3rem; align-content: start; }
.view-contrate .ct-sh-tx b { font-family: var(--f-display); font-weight: 800; font-stretch: 86%; font-size: var(--fs-md); line-height: 1.1; }
.view-contrate .ct-sh-tx > span:not(.ct-sh-k):not(.ct-sh-go) { font-size: var(--fs-sm); line-height: 1.45; color: var(--claro-2); }
.view-contrate .ct-sh-k { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--laranja); }
.view-contrate .ct-sh-go { font-size: var(--fs-sm); font-weight: 700; margin-top: .2rem; }
.view-contrate .ct-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.view-contrate .ct-photos li { display: grid; gap: .3rem; }
.view-contrate .ct-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.view-contrate .ct-photos span { font-size: var(--fs-xs); color: var(--claro-2); }
.view-contrate .ct-photos span:empty { display: none; }
@media (max-width: 600px) { .view-contrate .ct-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Hamilton · Bio download, Embaixador, Bandolim solidário ---------- */
.view-hamilton .bio-dl { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--linha-clara); display: grid; gap: .7rem; }
.view-hamilton .bio-dl-row { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; }
.view-hamilton .hh-emb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.view-hamilton .hh-emb-card { display: grid; gap: .45rem; align-content: start; padding: 1.3rem 1.3rem 1.4rem; border-radius: 16px; background: var(--claro, #F2F1EE); color: var(--tinta); text-decoration: none; border: 1.5px solid var(--tinta); }
.view-hamilton .hh-sol .hh-emb-card { background: #fff; }
.view-hamilton a.hh-emb-card:hover b { text-decoration: underline; text-underline-offset: .18em; }
.view-hamilton .hh-emb-card .k { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--semente); }
.view-hamilton .hh-emb-card b { font-family: var(--f-display); font-weight: 850; font-stretch: 80%; font-size: var(--fs-xl); line-height: 1; }
.view-hamilton .hh-emb-card.is-map b { font-size: var(--fs-2xl); color: var(--semente); }
.view-hamilton .hh-emb-card > span:not(.k):not(.go) { line-height: 1.5; }
.view-hamilton .hh-emb-card .go { font-weight: 700; margin-top: .3rem; }
.view-hamilton .hh-emb-names { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.view-hamilton .hh-emb-names li { padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--tinta); font-size: var(--fs-sm); font-weight: 600; }
.view-hamilton .hh-emb-q { margin: 2rem 0 0; max-width: 60ch; }
.view-hamilton .hh-emb-q blockquote { font-family: var(--f-display); font-weight: 800; font-stretch: 86%; font-size: var(--fs-xl); line-height: 1.15; }
.view-hamilton .hh-emb-q figcaption { margin-top: .6rem; font-size: var(--fs-sm); }
.view-hamilton #embMore { margin-top: 1.2rem; }
@media (max-width: 899px) { .view-hamilton .hh-emb-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Discografia opens on the covers: album covers the same size as the singles ---------- */
body.v2 .view-musica .albums { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.6rem 1.4rem; }
body.v2 .view-musica .album .at { font-size: var(--fs-base); line-height: 1.1; }
body.v2 .view-musica .album .am { font-size: var(--fs-sm); line-height: 1.35; }
@media (max-width: 760px) { body.v2 .view-musica .albums { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem .8rem; } body.v2 .view-musica .album .at { font-size: var(--fs-sm); } body.v2 .view-musica .album .am { font-size: var(--fs-xs); } }
@media (max-width: 560px) { body.v2 .view-musica .albums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Compact header so the covers show on the first screen: title, one line and the count side by side. */
body.v2 .view-musica .page-hero .wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .6rem 2rem; padding-block: clamp(1.4rem, 3vw, 2.4rem) clamp(1rem, 2vw, 1.4rem); }
body.v2 .view-musica .page-hero .eyebrow { grid-column: 1 / -1; }
body.v2 .view-musica .page-hero h1 { font-size: var(--fs-3xl); grid-column: 1; }
body.v2 .view-musica .page-hero .lede { grid-column: 1; grid-row: 3; font-size: var(--fs-base); }
body.v2 .view-musica .page-hero .stats { grid-column: 2; grid-row: 2 / span 2; margin: 0; padding: 0; border: 0; }
body.v2 .view-musica #discos-abas .wrap { padding-top: .9rem; }
@media (max-width: 560px) {
  body.v2 .view-musica .page-hero .wrap { grid-template-columns: minmax(0, 1fr); }
  body.v2 .view-musica .page-hero .lede { display: none; }
  body.v2 .view-musica .page-hero .stats { grid-column: 1; grid-row: 3; }
  body.v2 .view-musica .stat { display: flex; align-items: baseline; gap: .5rem; }
  body.v2 .view-musica .stat b { font-size: var(--fs-lg); }
}
/* The "Todos" tab already names the block: straight to the search and the covers. */
body.v2 .view-musica #discografia > .wrap > .sec-head { display: none; }
body.v2 .view-musica #discografia { padding-top: clamp(1.2rem, 2.4vw, 1.8rem); }
/* Tab bars with four or more tabs scroll sideways on phones instead of squeezing the labels. */
@media (max-width: 600px) {
  .sec-tabs .ct-evtabs-row:has(> button:nth-of-type(4)) { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scroll-padding-inline: var(--pad); }
  .sec-tabs .ct-evtabs-row:has(> button:nth-of-type(4))::-webkit-scrollbar { display: none; }
  .sec-tabs .ct-evtabs-row:has(> button:nth-of-type(4)) > button { flex: 0 0 auto; max-width: 11rem; }
}

/* ---------- Projetos · Em cartaz as folder tabs (same projects as Contrate · Formatos) ---------- */
.view-projetos .ec-panel { display: grid; gap: 1.8rem; }
.view-projetos .ec-panel > * + * { margin-top: 0; }
.view-projetos .ec-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.4rem clamp(1.4rem, 3.5vw, 3rem); align-items: start; }
.view-projetos .ec-ph { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--noite-2); }
.view-projetos .ec-ph img { width: 100%; height: 100%; object-fit: cover; }
.view-projetos .ec-tx { display: grid; gap: .8rem; align-content: start; }
.view-projetos .ec-tx h3 { font-size: var(--fs-2xl); font-stretch: 74%; line-height: .9; }
.view-projetos .ec-line { font-family: var(--f-display); font-weight: 700; font-stretch: 90%; font-size: var(--fs-lg); line-height: 1.2; color: var(--semente); }
.view-projetos .ec-tx > p:not(.ec-line) { line-height: 1.6; max-width: 60ch; }
.view-projetos .ec-act { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; margin-top: .4rem; }
.view-projetos .ec-block { display: grid; gap: .7rem; align-content: start; }
.view-projetos .ec-block h4 { font-size: var(--fs-xs); font-family: var(--f-body); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--semente); }
.view-projetos .ec-shows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: .8rem; }
.view-projetos .ec-shows li > :is(a, div) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; height: 100%; padding: 1rem; border-radius: 14px; border: 1.5px solid var(--tinta); background: #fff; color: var(--tinta); text-decoration: none; }
.view-projetos .ec-shows li > :is(a, div):not(:has(.ec-cv)) { grid-template-columns: minmax(0, 1fr); }
.view-projetos .ec-shows li > a:hover b { text-decoration: underline; text-underline-offset: .18em; }
.view-projetos .ec-cv { width: 64px; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--noite-2); }
.view-projetos .ec-cv img { width: 100%; height: 100%; object-fit: cover; }
.view-projetos .ec-stx { display: grid; gap: .3rem; align-content: start; }
.view-projetos .ec-stx .k { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--semente); }
.view-projetos .ec-stx b { font-family: var(--f-display); font-weight: 800; font-stretch: 86%; font-size: var(--fs-md); line-height: 1.1; }
.view-projetos .ec-stx > span:last-child:not(.k) { font-size: var(--fs-sm); line-height: 1.45; color: var(--tinta-2); }
.view-projetos .ec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2rem; }
.view-projetos .ec-grid:empty { display: none; }
.view-projetos .ec-list { display: grid; border-top: 1px solid var(--linha-clara); }
.view-projetos .ec-list li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .55rem; border-bottom: 1px solid var(--linha-clara); }
.view-projetos .ec-list span { color: var(--tinta-2); text-align: right; font-size: var(--fs-sm); }
.view-projetos .ec-list a { font-weight: 600; }
.view-projetos .ec-discs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1rem; }
.view-projetos .ec-discs a { display: grid; gap: .3rem; text-decoration: none; color: inherit; }
.view-projetos .ec-discs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.view-projetos .ec-discs b { font-size: var(--fs-sm); line-height: 1.2; }
.view-projetos .ec-discs span { font-size: var(--fs-xs); color: var(--tinta-2); }
@media (max-width: 760px) { .view-projetos .ec-top, .view-projetos .ec-grid { grid-template-columns: minmax(0, 1fr); } .view-projetos .ec-discs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Singles: Todos / Autorais / Intérprete / Outros as folder tabs */
.view-musica #scats { margin-top: 1.4rem; }
.view-musica #singleGrid.is-one .single-h { display: none; }
.view-musica #singleGrid .single-group + .single-group { margin-top: 2rem; }
.view-musica #singleGrid .singles { margin-top: .8rem; }

body.v2 .view-midia.is-sala #midia-abas { display: none; }

/* ---------- The dancing figure: brand icon beside the name, and a way back to the start at the end of every page ---------- */
.brand .brand-boneco { width: auto; height: 2.5em; margin-block: -.6em; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); transform-origin: 50% 90%; }
.brand:hover .brand-boneco { transform: rotate(-8deg); }
.hs-boneco { display: grid; justify-items: center; gap: .3rem; flex: none; color: var(--claro); text-decoration: none; }
.hs-boneco img { width: auto; height: clamp(120px, 12vw, 170px); transform-origin: 50% 95%; transition: transform .35s var(--ease); filter: drop-shadow(0 12px 22px rgba(0,0,0,.35)); }
.hs-boneco span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--claro-2); }
.hs-boneco:hover img, .hs-boneco:focus-visible img { transform: rotate(-6deg) translateY(-4px); }
.hs-boneco:hover span { color: var(--laranja); }
.hs-boneco:focus-visible { outline: 3px solid var(--laranja); outline-offset: 6px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .hs-boneco img, .brand .brand-boneco { transition: none; } }
@media (max-width: 599px) { .hs-boneco img { height: 110px; } }
/* On a phone: Contrate on its own line, then the figure and the two round marks side by side. */
@media (max-width: 699px) {
  .hire-strip .wrap { gap: 1.2rem 1.4rem; align-items: end; }
  .hire-strip .hc-cta { order: -1; flex-basis: 100%; }
  .hire-strip .bd-seal { width: 88px; margin-left: 0; }
}

/* The full figure at the foot of the menu, like at the end of every page. */
.menu-stage .menu-boneco img { height: clamp(120px, 20vh, 190px); }
@media (min-width: 900px) { .menu-stage .menu-boneco { position: absolute; right: 0; bottom: clamp(1rem, 3vh, 2rem); } }
@media (max-width: 899px) { .menu-stage .menu-boneco { margin-top: 1.4rem; } }

/* Player: a clear close button on the video window, and the back-to-top button always above the player. */
.mp-win-x { position: absolute; top: .4rem; right: .4rem; z-index: 2; display: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(18,17,16,.82); color: #fff; font-size: var(--fs-lg); line-height: 1; cursor: pointer; }
.mp-win.is-youtube .mp-win-x { display: grid; place-items: center; }
.mp-win-x:hover { background: var(--laranja); color: #121110; }
.mp-win-x:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
.mp-close { width: 40px; font-size: var(--fs-lg); }
body.has-player .to-top { bottom: calc(var(--mp-h, 0px) + clamp(12px, 2vw, 24px) + 12px); }
@media (max-width: 899px) { body.has-player .to-top { bottom: calc(var(--mp-h, 0px) + 68px + 12px + env(safe-area-inset-bottom, 0px)); } }

/* Pelo mundo · the list goes page by page: only whole columns, never a name cut at the edge. */
.view-mapa .mp-list-box { overflow: visible; scroll-snap-type: none; grid-auto-flow: column; grid-template-columns: repeat(var(--mp-cols, 3), minmax(0, 1fr)); grid-template-rows: repeat(var(--mp-rows, 6), auto); grid-auto-columns: minmax(0, 1fr); column-gap: 1.6rem; touch-action: pan-y; }
@media (max-width: 760px) { .view-mapa .mp-list-box { grid-auto-columns: minmax(0, 1fr); column-gap: 1.2rem; } }

/* ---------- Continue ouvindo: a wall of small covers that grow under the cursor ---------- */
.more-wall { list-style: none; margin: 0; padding: 1rem 0 2.6rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .6rem; }
.more-wall li { position: relative; }
.more-wall a { position: relative; display: block; aspect-ratio: 1; border-radius: var(--r-cover, 6px); color: var(--claro); text-decoration: none; transition: transform 260ms var(--ease), box-shadow 260ms var(--ease); transform-origin: 50% 60%; }
.more-wall img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: var(--noite-2); }
/* The name: a small label under the grown cover, only while it is grown. */
.more-wall .mw-tip { position: absolute; left: 50%; top: 100%; z-index: 1; display: grid; gap: .1rem; width: max-content; max-width: 180px; margin-top: .35rem; padding: .35rem .55rem; border-radius: 8px; background: #F2F1EE; color: #121110; font-size: var(--fs-2xs); line-height: 1.25; text-align: center; transform: translateX(-50%) scale(.72); transform-origin: 50% 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms var(--ease); }
.more-wall .mw-tip b { font-size: var(--fs-2xs); }
.more-wall a:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; z-index: 3; }
.more-wall a:focus-visible .mw-tip { opacity: 1; visibility: visible; }
@media (hover: hover) and (pointer: fine) {
  .more-wall a:hover { transform: scale(1.7); z-index: 3; box-shadow: 0 16px 34px rgba(0,0,0,.55); }
  .more-wall a:hover .mw-tip { opacity: 1; visibility: visible; }
  /* Covers at the row ends grow inward, so they never go past the page edge. */
  .more-wall li:first-child a:hover { transform-origin: 0 60%; }
  .more-wall li:last-child a:hover { transform-origin: 100% 60%; }
}
@media (prefers-reduced-motion: reduce) { .more-wall a { transition: none; } }
@media (max-width: 560px) { .more-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; } }

/* ---------- Folder tabs: the chosen tab lifts 2px — the bar leaves room so its top edge is never cut; the chosen tab gets color ---------- */
.who-tabs { padding-top: 6px; margin-top: calc(2.2rem - 6px); }
.who-tab[aria-selected="true"] { color: var(--semente); box-shadow: inset 0 4px 0 var(--laranja), 0 -6px 18px rgba(26, 21, 18, .07); }
.who-tab[aria-selected="true"] .n { color: var(--semente); }
#formatos .who-tab[aria-selected="true"] { color: var(--laranja); box-shadow: inset 0 4px 0 var(--laranja); }

/* Footer without the name: the two link rows, aligned to the start. */
.foot-main { grid-template-columns: minmax(0, 1fr); }
.foot-main .link-row { grid-column: 1; }

/* Novidades on laptop-height screens: the text always fits in the banner (the button never runs over the tab bar). */
.view-home .slide-news .slide-text { gap: clamp(.5rem, 1.6vh, 1.1rem); padding-top: clamp(1rem, 3vh, 3.5rem); padding-bottom: clamp(1rem, 3vh, 3.8rem); overflow: hidden; }
.view-home .slide-news .slide-text h2 { font-size: clamp(2rem, min(4.4vw, 7.2vh), 4.4rem); }
@media (min-width: 900px) and (max-height: 860px) {
  .view-home .slide-news .ns-more li:nth-child(2) { display: none; }
  .view-home .slide-news .lede { -webkit-line-clamp: 2; }
  .view-home .slide-news .ns-more a { padding: .5rem 0; }
}

/* Contrate: everything stays inside each contact card (long e-mails and sites wrap). */
.view-contrate .ct-region, .view-contrate .ct-region * { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Add to calendar: the date itself opens the menu; the menu fits the device ---------- */
.date-btn { display: block; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 8px; align-self: start; }
.date-btn:hover .d { color: var(--laranja); }
.date-btn:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }
.cal-pop { position: fixed; z-index: 90; display: grid; gap: .25rem; width: min(290px, calc(100vw - 16px)); padding: .9rem .6rem .6rem; border-radius: 14px; background: #F2F1EE; color: #121110; box-shadow: 0 18px 44px rgba(0,0,0,.35); }
.cal-pop-t { margin: 0 .5rem .3rem; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--semente); }
.cal-opt { display: grid; gap: .1rem; width: 100%; padding: .6rem .6rem; border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; font: inherit; text-decoration: none; cursor: pointer; }
.cal-opt b { font-weight: 700; }
.cal-opt span { font-size: var(--fs-xs); color: #57534D; }
.cal-opt:hover, .cal-opt:focus-visible { background: #fff; outline: none; box-shadow: inset 0 0 0 2px var(--laranja); }
.cal-x { position: absolute; top: .35rem; right: .35rem; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; font-size: var(--fs-md); cursor: pointer; color: #121110; }
.cal-x:hover { background: #fff; }

/* Peça um show: without the top line, the city sits above the site address. */
.view-agenda .city-card .cc { align-content: end; gap: 1rem; }

/* Hamilton: seven numbers in the facts row */
.view-hamilton .facts { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1100px) { .view-hamilton .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .view-hamilton .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Educacional · Séries and Masterclass ---------- */
.view-educacional .ed-series { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1rem; }
.view-educacional .ed-serie { display: grid; gap: .6rem; align-content: start; padding: 1.4rem; border-radius: 16px; background: #fff; border: 1.5px solid var(--tinta); }
.view-educacional .ed-serie h3 { font-size: var(--fs-xl); font-stretch: 80%; line-height: 1; }
.view-educacional .ed-mc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1.4rem 2rem; }
.view-educacional .ed-mc-col h3 { font-size: var(--fs-xs); font-family: var(--f-body); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--semente); margin-bottom: .6rem; }
.view-educacional .ed-mc-act { grid-column: 1 / -1; }

/* Choro: the masters and the listening list sit inside their tab, as a second block */
.view-choro #determinantes > #mestres, .view-choro #discos > #escutas { margin-top: clamp(2rem, 4vw, 3rem); border-radius: 18px; }

body.v2 .view-choro #de-dentro { display: none !important; }

/* 10 cordas · Como escolher */
.view-bandolim .bd-pick { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.view-bandolim .bd-pick li { display: grid; gap: .5rem; align-content: start; padding: 1.3rem; border-radius: 16px; background: #fff; border: 1.5px solid var(--tinta); }
.view-bandolim .bd-pick .n { font-family: var(--f-display); font-weight: 900; font-size: var(--fs-xl); line-height: 1; color: var(--laranja); }
.view-bandolim .bd-pick h3 { font-size: var(--fs-md); font-stretch: 86%; line-height: 1.1; }
.view-bandolim .bd-pick p { line-height: 1.55; }
.view-bandolim .bd-pick-links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-weight: 700; }

/* Personagens: the three cards centered, same width, instead of piled on the left of a five-column grid. */
.view-bandolim #bdCast { grid-template-columns: repeat(auto-fit, minmax(220px, 320px)); justify-content: center; align-items: stretch; }

/* + Novo: the "Por dentro" tab holds its own row of tabs */
.view-novo .nova-dentro > .sec-tabs { padding-top: 1.2rem; }

.view-educacional .ed-mc-next { display: grid; gap: .8rem; align-content: start; padding: 1.3rem; border-radius: 16px; background: #fff; border: 1.5px solid var(--tinta); box-shadow: inset 0 4px 0 var(--laranja); }
.view-educacional .ed-mc-next h3 { font-size: var(--fs-xs); font-family: var(--f-body); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--semente); }
.view-educacional .ed-mc-date { display: grid; gap: .3rem; justify-items: start; }
.view-educacional .ed-mc-date + .ed-mc-date { padding-top: .8rem; border-top: 1px solid var(--linha-clara); }
.view-educacional .ed-mc-date .d { font-family: var(--f-display); font-weight: 800; font-stretch: 86%; font-size: var(--fs-md); line-height: 1.1; }
.view-educacional .ed-mc-date .btn { margin-top: .3rem; }

/* =========================================================
   One tab style for the whole site: folder tabs.
   On the dark bars (sections of a page) the chosen tab takes the color of the section it opens;
   each tab is as wide as its name, and a long row slides sideways instead of squeezing the names.
   ========================================================= */
.ct-evtabs { padding-bottom: 0 !important; }
.ct-evtabs .eyebrow { margin-bottom: .7rem; }
.ct-evtabs .ct-evtabs-row, .sec-tabs .ct-evtabs-row { display: flex !important; align-items: flex-end; gap: .25rem; max-width: none !important; overflow-x: auto; scrollbar-width: none; padding-top: 6px; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scroll-padding-inline: var(--pad); }
.ct-evtabs .ct-evtabs-row::-webkit-scrollbar { display: none; }
.ct-evtabs .ct-evtabs-row > button { flex: 0 0 auto !important; max-width: none !important; display: inline-flex; align-items: center; min-height: 46px; padding: .7rem 1.2rem .8rem; border: 1.5px solid rgba(255,255,255,.24); border-bottom: 0; border-radius: 12px 12px 0 0; background: rgba(255,255,255,.05); color: var(--claro); font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-base); line-height: 1.1; white-space: nowrap; text-align: left; box-shadow: none; }
.ct-evtabs .ct-evtabs-row > button span { display: none; }
.ct-evtabs .ct-evtabs-row > button:hover { background: rgba(255,255,255,.12); }
.ct-evtabs .ct-evtabs-row > button[aria-selected="true"] { background: var(--tab-bg, #F2F1EE); border-color: var(--tab-bg, #F2F1EE); color: var(--tab-fg, #121110); box-shadow: inset 0 4px 0 var(--laranja); }
.ct-evtabs .ct-evtabs-row > button:focus-visible { outline: 3px solid var(--laranja); outline-offset: -3px; }
@media (max-width: 760px) { .ct-evtabs .ct-evtabs-row > button { font-size: var(--fs-base); padding: .65rem 1rem .75rem; } }
/* The cover name only exists while it shows (a hidden label at the page edge made the page 1px wider on phones). */
.more-wall .mw-tip { display: none; }
.more-wall a:focus-visible .mw-tip { display: grid; }
@media (hover: hover) and (pointer: fine) { .more-wall a:hover .mw-tip { display: grid; } }
/* Header on phones: the name, the figure, the back arrow and PT/EN always fit side by side. */
@media (max-width: 480px) {
  .site-header .brand { font-size: var(--fs-base); gap: .35rem; min-width: 0; }
  .site-header .brand .brand-boneco { height: 2.3em; }
  .hdr-back:not([hidden]) + .brand { font-size: var(--fs-sm); }
  .hdr-back:not([hidden]) + .brand .brand-boneco { height: 2.1em; }
}
@media (max-width: 380px) { .hdr-back:not([hidden]) + .brand .brand-boneco { height: 1.9em; } }

button.textlink { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: inherit; cursor: pointer; }

/* ---------- Test (22/09): lighter cards — no black border, white surface with a soft shadow.
   Applied only to 10 cordas · Como escolher, to compare with the bordered cards elsewhere (e.g. Projetos · Em cartaz). ---------- */
.view-bandolim .bd-pick li { border: 0; background: #FFFFFF; box-shadow: 0 1px 2px rgba(26, 21, 18, .06), 0 10px 28px rgba(26, 21, 18, .08); border-radius: 18px; padding: 1.5rem; }
.view-bandolim .bd-pick .n { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--laranja) 14%, transparent); font-size: var(--fs-md); }

/* ---------- Award numbers: five cards (PMB nominations added) ---------- */
:is(.view-hamilton, .view-premios) .aw-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (max-width: 700px) { :is(.view-hamilton, .view-premios) .aw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } :is(.view-hamilton, .view-premios) .aw-stat:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ---------- Borderless cards across the site: white surface, soft shadow, no black outline ---------- */
.view-projetos .ec-shows li > :is(a, div),
.view-hamilton .hh-emb-card,
.view-hamilton .hh-sol .hh-emb-card,
.view-educacional .ed-serie { border: 0; background: #FFFFFF; border-radius: 18px; box-shadow: 0 1px 2px rgba(26, 21, 18, .06), 0 10px 28px rgba(26, 21, 18, .08); }
.view-educacional .ed-mc-next { border: 0; background: #FFFFFF; border-radius: 18px; box-shadow: inset 0 4px 0 var(--laranja), 0 1px 2px rgba(26, 21, 18, .06), 0 10px 28px rgba(26, 21, 18, .08); }
.view-projetos a:is(.ec-shows li > a):hover,
.view-hamilton a.hh-emb-card:hover { box-shadow: 0 2px 4px rgba(26, 21, 18, .08), 0 16px 36px rgba(26, 21, 18, .12); transform: translateY(-2px); }
.view-projetos .ec-shows li > a, .view-hamilton a.hh-emb-card { transition: box-shadow 180ms var(--ease), transform 180ms var(--ease); }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .file { border: 0; background: #FFFFFF; color: var(--tinta); border-radius: 18px; box-shadow: 0 1px 2px rgba(26, 21, 18, .06), 0 10px 28px rgba(26, 21, 18, .08); }

/* ---------- Third round mark: Prêmios ---------- */
.bd-seal.is-premios .bs-core { fill: #1A1512; }
.bd-seal.is-premios .bs-tx { fill: #1A1512; }
.bd-seal.is-premios .bs-cup { fill: none; stroke: #FF6A00; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Page: Prêmios ---------- */
.view-premios .pz-hero .lede b { color: inherit; font-weight: 800; }
.view-premios .pz-top-sec .aw-stat { background: color-mix(in srgb, var(--claro) 8%, transparent); }
.view-premios #pzDestaques { margin-top: clamp(2rem, 5vw, 3.5rem); }
.view-premios .pz-top { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.view-premios .pz-card { display: grid; gap: .45rem; align-content: start; color: var(--claro); text-decoration: none; }
.view-premios .pz-cover { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; box-shadow: 0 14px 32px rgba(0, 0, 0, .4); transition: transform 200ms var(--ease); background: var(--noite-3); }
.view-premios .pz-card:hover .pz-cover { transform: translateY(-4px) rotate(-1deg); }
.view-premios .pz-badge { justify-self: start; margin-top: .5rem; padding: .2rem .6rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border: 1.5px solid #E3B23C; color: #E3B23C; }
.view-premios .pz-badge.is-won { background: #E3B23C; color: #1A1512; }
.view-premios .pz-cat { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-md); line-height: 1.15; }
.view-premios .pz-alb { color: var(--claro-2); font-size: var(--fs-sm); }
.view-premios .pz-list li { grid-template-columns: 4.2rem 3.4rem minmax(0, 1fr) auto; }
.view-premios .pz-th { width: 3.4rem; height: 3.4rem; border-radius: 8px; object-fit: cover; display: block; }
.view-premios .pz-th.is-empty { background: color-mix(in srgb, var(--tinta) 8%, transparent); }
.view-premios .aw-list .a a { color: inherit; text-underline-offset: .2em; }
.view-premios .aw-list .y:empty::before { content: ""; }
@media (max-width: 700px) {
  .view-premios .pz-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .view-premios .pz-list li { grid-template-columns: 3rem 2.8rem minmax(0, 1fr); }
  .view-premios .pz-th { width: 2.8rem; height: 2.8rem; }
  .view-premios .aw-list .status { grid-column: 3; }
}
.view-hamilton .aw-page-link { margin-top: 1.6rem; }
@media (max-width: 599px) { .hire-strip .wrap { gap: 1rem .7rem; flex-wrap: wrap; } .hire-strip .bd-seal { width: 72px; } .hire-strip .hs-boneco img { height: 96px; } }
@media (max-width: 360px) { .hire-strip .bd-seal { width: 62px; } .hire-strip .hs-boneco img { height: 84px; } }

/* ---------- Mídia: YouTube plays inside the stage ---------- */
.view-midia .mv-player .mv-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.view-baile .bl-vid-more { margin-top: 1.6rem; text-align: center; }
.view-home .player .yt-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Home: opening video ---------- */
.view-home .hv { position: relative; min-height: min(78vh, 760px); display: grid; align-items: end; overflow: hidden; background: var(--noite); color: #FFFFFF; isolation: isolate; }
.view-home .hv-media { position: absolute; inset: 0; z-index: -2; }
.view-home .hv-media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.view-home .hv-video { opacity: 0; transition: opacity 900ms var(--ease); }
.view-home .hv.is-live .hv-video { opacity: 1; }
/* O véu da abertura. O vídeo muda de quadro o tempo todo: ele precisa funcionar no
   PIOR quadro, não no melhor. O véu antigo tinha uma barriga clara (.05) bem em 40%
   da altura — exatamente onde o nome se apoia —, e num quadro de camisa xadrez a
   tipografia brigava letra por letra com o tecido. Agora o escuro sobe mais cedo e
   a faixa da esquerda vai mais longe, que é onde mora o texto. O canto de cima à
   direita continua quase limpo: a imagem não vira lama. */
.view-home .hv-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18,17,16,.30) 0%, rgba(18,17,16,.12) 26%, rgba(18,17,16,.46) 58%, rgba(18,17,16,.84) 100%), linear-gradient(90deg, rgba(18,17,16,.70) 0%, rgba(18,17,16,.30) 48%, rgba(18,17,16,0) 82%); }
.view-home .hv-in { display: grid; gap: 1rem; justify-items: start; padding-block: clamp(3rem, 10vh, 6rem) clamp(2.4rem, 6vh, 4rem); }
.view-home .hv-k { color: var(--laranja); text-shadow: 0 2px 14px rgba(18,17,16,.75); }
.view-home .hv-name { margin: 0; font-family: var(--f-display); font-weight: 850; font-stretch: 74%; font-size: var(--fs-5xl); line-height: .8; letter-spacing: -.03em; text-shadow: 0 4px 30px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35); }
.view-home .hv-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .6rem; }
.view-home .hv-actions .btn { min-height: 48px; }
.view-home .hv-ic { margin-right: .45rem; }
.view-home .hv-cap { margin: 0; font-size: var(--fs-sm); color: rgba(255,255,255,.78); }
.view-home .hv-pause, .view-home .hv-down { position: absolute; right: clamp(1rem, 3vw, 2rem); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(18,17,16,.55); color: #FFFFFF; border: 1.5px solid rgba(255,255,255,.4); text-decoration: none; cursor: pointer; }
.view-home .hv-pause { bottom: clamp(1.2rem, 4vh, 2rem); }
.view-home .hv-pause svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.view-home .hv-down { bottom: calc(clamp(1.2rem, 4vh, 2rem) + 56px); font-size: 1.1rem; }
.view-home .hv-pause:focus-visible, .view-home .hv-down:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }
@media (max-width: 700px) {
  .view-home .hv { min-height: 72vh; }
  .view-home .hv-media > * { object-position: 62% 30%; }
  .view-home .hv-name { font-size: clamp(3.4rem, 17vw, 5rem); }
  .view-home .hv-in { padding-right: 4.2rem; }
}
@media (prefers-reduced-motion: reduce) { .view-home .hv-video { transition: none; } }

/* ---------- 10 cordas: fewer tabs, each one holding more ---------- */
.view-bandolim .bd-part { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.view-bandolim .bd-part.is-box { border-radius: 18px; padding: clamp(1.4rem, 3vw, 2.4rem); }
.view-bandolim .bd-part.on-areia { background: var(--papel); color: var(--tinta); }
.view-bandolim .bd-part.on-areia.is-box, .fuse-part.on-areia.is-box { box-shadow: inset 0 0 0 1px var(--linha-clara); }
.view-bandolim .bd-part.on-noite { background: var(--noite); color: var(--claro); }
.view-bandolim .step.has-cv { position: relative; }
.view-bandolim .st-cv { display: block; width: 84px; margin-top: .9rem; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 22px rgba(26,21,18,.18); }
.view-bandolim .st-cv img { width: 100%; height: auto; display: block; }
.view-bandolim .bd-more { margin-top: clamp(2rem, 4vw, 3rem); grid-column: 1 / -1; }
.view-bandolim .bd-more-btn { display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; padding: 1rem 1.3rem; border: 0; border-radius: 18px; background: #FFFFFF; color: var(--tinta); cursor: pointer; box-shadow: 0 1px 2px rgba(26,21,18,.06), 0 10px 28px rgba(26,21,18,.08); font: inherit; }
.view-bandolim .bd-more-btn:hover { transform: translateY(-2px); }
.view-bandolim .bd-more-ic svg { width: 40px; height: 40px; fill: none; stroke: var(--laranja); stroke-width: 2.6; stroke-linecap: round; }
.view-bandolim .bd-more-ic circle { fill: var(--laranja); stroke: none; }
.view-bandolim .bd-more-tx { display: grid; gap: .15rem; flex: 1; }
.view-bandolim .bd-more-tx b { font-family: var(--f-display); font-weight: 800; font-stretch: 86%; font-size: var(--fs-md); line-height: 1.15; }
.view-bandolim .bd-more-tx span { color: var(--tinta-2); font-size: var(--fs-sm); }
.view-bandolim .bd-more-ar { font-size: var(--fs-md); color: var(--laranja); }
.view-bandolim .bd-more-box { margin-top: 1rem; }

/* ---------- 10 cordas: tighter story, bigger covers, one button on Caprichos ---------- */
.view-bandolim #bdOwn { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; max-width: none; }
.view-bandolim #bdOwn p { break-inside: avoid; margin: 0 0 .9rem; font-size: var(--fs-sm); line-height: 1.5; }
.view-bandolim #bdOwn .ch-own-pull { grid-column: 1 / -1; max-width: 46ch; font-size: var(--fs-lg); line-height: 1.18; margin: 0 0 .4rem !important; }
@media (max-width: 820px) { .view-bandolim #bdOwn { grid-template-columns: 1fr; } }
.view-bandolim .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1rem, 2.4vw, 1.8rem); }
.view-bandolim .st-cv { width: min(280px, 100%); margin-top: 1.1rem; transition: transform 220ms var(--ease); }
.view-bandolim .st-cv:hover { transform: scale(1.06); }
.view-bandolim .bd-wall-box { margin-top: clamp(2rem, 4vw, 3rem); grid-column: 1 / -1; }
.view-bandolim .bd-wall-k { color: var(--semente); margin-bottom: .6rem; }
.view-bandolim .bd-wall { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); padding-bottom: 3.4rem; }
.view-bandolim .bd-acad { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.view-bandolim .bd-acad-note { margin-bottom: 1rem; }
.view-bandolim .bd-acad-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.view-bandolim .bd-acad-list a { display: grid; gap: .25rem; height: 100%; padding: 1rem 1.1rem; border-radius: 14px; background: var(--noite-2); color: var(--claro); text-decoration: none; }
.view-bandolim .bd-acad-list a:hover { background: var(--noite-3); }
.view-bandolim .ac-u { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--laranja); }
.view-bandolim .ac-t { font-size: var(--fs-sm); line-height: 1.3; }
.view-bandolim .ac-a { font-size: var(--fs-xs); color: var(--claro-2); }

/* ---------- Educacional: the episodes of a series ---------- */
.view-educacional .ed-eps { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .7rem; }
.view-educacional .ed-eps a { position: relative; display: grid; gap: .3rem; color: var(--tinta); text-decoration: none; }
.view-educacional .ed-eps img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; display: block; background: var(--noite-3); transition: transform 200ms var(--ease); }
.view-educacional .ed-eps a:hover img { transform: scale(1.03); }
.view-educacional .ed-eps .ep-t { font-size: var(--fs-2xs); line-height: 1.25; font-weight: 700; }
.view-educacional .ed-eps .ep-n { position: absolute; left: .4rem; top: .4rem; padding: .1rem .35rem; border-radius: 6px; background: var(--laranja); color: var(--tinta); font-size: var(--fs-2xs); font-weight: 800; }

/* The two headings of História, at the same size. */
.view-bandolim #bdWhyTitle, .view-bandolim #bdHistTitle { font-size: var(--fs-3xl); line-height: .98; }
.view-bandolim .ch-col > :first-child { margin-top: 0; }

/* ---------- Sections that were joined into one tab ---------- */
.fuse-part { margin-top: clamp(2.4rem, 5vw, 3.6rem); grid-column: 1 / -1; width: 100%; }
.fuse-part.is-box { border-radius: 18px; padding: clamp(1.4rem, 3vw, 2.4rem); }
.fuse-part.on-areia { background: var(--papel); color: var(--tinta); }
.fuse-part.on-papel { background: var(--papel); color: var(--tinta); }
.fuse-part.on-noite { background: var(--noite); color: var(--claro); }

/* Educacional: the episodes grow a little under the cursor. */
@media (hover: hover) and (pointer: fine) {
  .view-educacional .ed-eps a { transition: transform 200ms var(--ease); }
  .view-educacional .ed-eps a:hover, .view-educacional .ed-eps a:focus-visible { transform: scale(1.35); z-index: 4; position: relative; }
  .view-educacional .ed-eps a:hover img { box-shadow: 0 14px 30px rgba(26, 21, 18, .35); }
}

/* Hamilton: the partnership, with room for a photo. */
.view-hamilton .hh-parc-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.view-hamilton .hh-parc-in p { max-width: 62ch; margin-top: .9rem; }
.view-hamilton .hh-parc-ph { margin: 0; display: grid; gap: .5rem; }
.view-hamilton .ph-slot { display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 18px; background: color-mix(in srgb, var(--tinta) 7%, transparent); color: var(--tinta-2); font-size: var(--fs-sm); text-align: center; padding: 1rem; }
.view-hamilton .hh-parc-ph figcaption { color: var(--tinta-2); font-size: var(--fs-xs); }
.view-hamilton .lema-links { margin-top: 1.4rem; }
@media (max-width: 860px) { .view-hamilton .hh-parc-in { grid-template-columns: 1fr; } }

/* Album card in a window: a cover and the way to the record's page. */
.ab-pop { border: 0; padding: 0; background: none; max-width: min(92vw, 420px); }
.ab-pop::backdrop { background: rgba(18, 17, 16, .72); }
.ab-pop-in { display: grid; gap: .9rem; padding: 1.2rem; border-radius: 18px; background: var(--papel); color: var(--tinta); text-align: center; }
.ab-pop img { width: 100%; height: auto; border-radius: 12px; display: block; }
.ab-pop b { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-lg); line-height: 1.1; }
.ab-pop .ab-sub { color: var(--tinta-2); font-size: var(--fs-sm); }
.ab-pop .ab-acts { display: grid; gap: .5rem; }
.ab-pop .ab-x { justify-self: center; background: none; border: 0; color: var(--tinta-2); font: inherit; font-size: var(--fs-sm); cursor: pointer; text-decoration: underline; }

/* Moderno é tradição: the Mono no aware clip, and the partnership pillars. */
.view-hamilton .lema-vid { margin: 1.6rem 0 0; display: grid; gap: .5rem; max-width: 460px; }
.view-hamilton .lema-vid-play { position: relative; display: block; border-radius: 14px; overflow: hidden; background: #000; }
.view-hamilton .lema-vid-play img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform 400ms var(--ease); }
.view-hamilton .lema-vid-play:hover img { transform: scale(1.04); }
.view-hamilton .lema-vid-play .pl { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--laranja); display: grid; place-items: center; }
.view-hamilton .lema-vid-play .pl::after { content: ""; margin-left: 5px; border-left: 19px solid var(--tinta); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.view-hamilton .lema-vid figcaption { color: var(--claro-2); font-size: var(--fs-xs); }
.view-hamilton .parc-pilares { list-style: none; margin: clamp(1.6rem, 4vw, 2.6rem) 0 0; padding: 0; display: grid; gap: 1rem; }
.view-hamilton .parc-pilares li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding: 1.3rem 1.4rem; border-radius: 18px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(26, 21, 18, .06), 0 10px 28px rgba(26, 21, 18, .08); }
.view-hamilton .parc-pilares .n { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--laranja) 16%, transparent); font-family: var(--f-display); font-weight: 800; font-size: var(--fs-md); }
.view-hamilton .parc-pilares b { font-family: var(--f-display); font-weight: 800; font-stretch: 86%; font-size: var(--fs-md); line-height: 1.15; display: block; margin-bottom: .35rem; }
.view-hamilton .parc-pilares p { font-size: var(--fs-sm); line-height: 1.5; max-width: 74ch; }
.view-hamilton .parc-link { margin-top: .5rem; }
.view-hamilton .parc-emp { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.4rem 2rem; align-items: center; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 18px; background: var(--papel-2); }
.view-hamilton .parc-emp h3 { font-family: var(--f-display); font-weight: 850; font-stretch: 80%; font-size: var(--fs-xl); line-height: 1.05; margin-bottom: .5rem; }
.view-hamilton .parc-emp p { max-width: 62ch; font-size: var(--fs-sm); }
@media (max-width: 760px) { .view-hamilton .parc-emp { grid-template-columns: 1fr; } }

/* Hamilton: the way to the 10-string page, inside the tabs that mention it. */
.view-hamilton .hh-bd-link { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.view-hamilton .bio-dl-link { margin-top: 1.2rem; }

/* ---------- Contrate: availability, month by month ---------- */
.view-contrate .dp-tools { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin-bottom: 1.4rem; }
.view-contrate .dp-nav { display: flex; gap: .5rem; margin-left: auto; }
/* As setas usavam o .round da Agenda, que só vale lá: aqui saíam cruas, com 16 px de largura (07/10/2026). */
.view-contrate .dp-nav .round { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--tinta) 30%, transparent); background: none; color: var(--tinta); cursor: pointer; display: grid; place-items: center; padding: 0; }
.view-contrate .dp-nav .round:hover { border-color: var(--tinta); }
.view-contrate .dp-nav .round svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.view-contrate .dp-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; scrollbar-width: thin; }
.view-contrate .dp-m { scroll-snap-align: start; border-radius: 18px; background: #FFFFFF; padding: 1rem 1.1rem 1.2rem; box-shadow: 0 1px 2px rgba(26, 21, 18, .06), 0 10px 28px rgba(26, 21, 18, .08); }
.view-contrate .dp-m-t { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-md); margin-bottom: .7rem; }
.view-contrate .dp-m-t span { color: var(--tinta-2); font-weight: 600; }
.view-contrate .dp-w { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.view-contrate .dp-wd { text-align: center; font-size: var(--fs-2xs); font-weight: 800; color: var(--tinta-2); padding-bottom: .2rem; }
.view-contrate .dp-d { aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; font-size: var(--fs-2xs); font-weight: 700; background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.view-contrate .dp-d.is-out { background: none; }
.view-contrate .dp-d.is-past { opacity: .35; }
/* Each region has its own colour; a free day stays plain. */
.view-contrate .dp-d.is-br { background: var(--laranja); color: var(--tinta); }
.view-contrate .dp-d.is-na { background: #1E2F9E; color: #FFFFFF; }
.view-contrate .dp-d.is-eu { background: #1F978F; color: #FFFFFF; }
.view-contrate .dp-d.is-ot { background: #8E2C48; color: #FFFFFF; }
.view-contrate .dp-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.2rem 0 0; padding: 0; font-size: var(--fs-sm); color: var(--tinta-2); }
.view-contrate .dp-legend li { display: flex; align-items: center; gap: .45rem; }
.view-contrate .dp-legend i { width: 14px; height: 14px; border-radius: 4px; display: block; background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.view-contrate .dp-legend i.is-br { background: var(--laranja); }
.view-contrate .dp-legend i.is-na { background: #1E2F9E; }
.view-contrate .dp-legend i.is-eu { background: #1F978F; }
.view-contrate .dp-legend i.is-ot { background: #8E2C48; }
.view-contrate .dp-cta { margin-top: 1.6rem; }

/* Every window over the site closes with an × at the top right. */
.pop-x { position: absolute; right: .6rem; top: .6rem; width: 40px; height: 40px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--tinta) 10%, transparent); color: var(--tinta); font-size: 1.4rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.pop-x:hover { background: color-mix(in srgb, var(--tinta) 18%, transparent); }
.pop-x:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
.ab-pop-in { position: relative; }

.view-contrate .dp-strip.is-drag { cursor: grabbing; scroll-snap-type: none; }
.view-contrate .dp-dots { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.view-contrate .dp-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--tinta) 18%, transparent); cursor: pointer; }
.view-contrate .dp-dots button[aria-selected="true"] { background: var(--laranja); transform: scale(1.25); }
.view-contrate .dp-int-head { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.view-contrate .dp-int { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.view-contrate .dp-int-card { display: grid; gap: .8rem; align-content: start; padding: 1.3rem; border-radius: 18px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(26, 21, 18, .06), 0 10px 28px rgba(26, 21, 18, .08); }
.view-contrate .dp-int-card h4 { font-family: var(--f-display); font-weight: 800; font-stretch: 86%; font-size: var(--fs-md); }
.view-contrate .dp-int-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.view-contrate .dp-int-list li { display: grid; gap: .1rem; font-size: var(--fs-sm); }
.view-contrate .dp-int-list span { color: var(--tinta-2); }
.view-contrate .dp-int-card .btn { justify-self: start; }

/* The sound button: a speaker that loses its slash when the sound comes on. */
.view-home #hvSound .hv-ic { width: 22px; height: 22px; margin-right: .5rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.view-home #hvSound .hv-ic .sp { fill: currentColor; stroke: currentColor; }
.view-home #hvSound .hv-ic .wave { opacity: 0; transition: opacity 160ms var(--ease); }
.view-home #hvSound .hv-ic .slash { opacity: 1; transition: opacity 160ms var(--ease); }
.view-home #hvSound.is-on .hv-ic .wave { opacity: 1; }
.view-home #hvSound.is-on .hv-ic .slash { opacity: 0; }

/* ---------- Contrate · Formatos: the current show, the works, the curated videos ---------- */
.view-contrate .ct-shows li.is-now > :is(a, div) { background: color-mix(in srgb, var(--laranja) 16%, #FFFFFF); box-shadow: inset 0 0 0 2px var(--laranja); }
.view-contrate .ct-shows li.is-now .ct-sh-k { color: var(--tinta); background: var(--laranja); border-radius: 999px; padding: .1rem .6rem; display: inline-block; }
.view-contrate .ct-shows li.is-now b { font-size: var(--fs-lg); }
.view-contrate .ct-obras { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.view-contrate .ct-obras li { display: grid; gap: .1rem; }
.view-contrate .ct-obras b { font-weight: 700; }
.view-contrate .ct-obras span { color: var(--tinta-2); font-size: var(--fs-sm); }
.view-contrate .ct-vids { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.view-contrate .ct-vids .ct-vid-ph { position: relative; }
.view-contrate .ct-vids .pl { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: var(--laranja); display: grid; place-items: center; }
.view-contrate .ct-vids .pl::after { content: ""; margin-left: 3px; border-left: 11px solid var(--tinta); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.view-contrate .ct-vids a { transition: transform 240ms var(--ease); display: block; }
@media (hover: hover) and (pointer: fine) {
  .view-contrate .ct-vids a:hover, .view-contrate .ct-vids a:focus-visible { transform: scale(1.5); z-index: 4; position: relative; }
}
.cl.is-plain, .btn.is-plain { cursor: text; }
/* The opening that comes from YouTube fills the same frame as the others. */
.view-home .hv-yt { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; transform: scale(1.35); transform-origin: center; }

/* ---------- Contrate · Formatos: the current show stands out, the others come after ---------- */
.view-contrate .ct-shows { grid-template-columns: minmax(0, 1fr); }
/* Inside a dark section the ink token flips to light, so the orange box names its colours. */
.view-contrate .ct-shows li.is-now > :is(a, div) { background: var(--laranja); color: #1A1512; box-shadow: none; padding: 1.4rem 1.5rem; }
.view-contrate .ct-shows li.is-now .ct-sh-k { background: #1A1512; color: var(--laranja); }
.view-contrate .ct-shows li.is-now b { font-size: var(--fs-xl); line-height: 1.05; }

.view-contrate .ct-shows li:not(.is-now) > :is(a, div) { background: color-mix(in srgb, var(--claro) 8%, transparent); }
.view-contrate .ct-shows li:not(.is-now) .ct-sh-k { color: var(--claro-2); }
/* Next dates: date first, then city and project, one under the other. */
.view-contrate .ct-albums li { display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; padding-block: .5rem; border-bottom: 1px solid var(--noite-3); }
.view-contrate .ct-albums li span { color: var(--claro-2); font-size: var(--fs-sm); }
.view-contrate .ct-albums li a { font-weight: 700; }
/* Availability: the button is not the colour of a region on the calendar. */
.view-contrate #dpForm .btn { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
/* Each region: the window, and the way to its booker. */
.view-contrate .dp-int-card { display: grid; gap: .35rem; align-content: start; text-decoration: none; color: var(--tinta); }
.view-contrate .dp-int-when { font-family: var(--f-display); font-weight: 850; font-stretch: 78%; font-size: var(--fs-xl); line-height: 1; text-transform: uppercase; color: var(--laranja); }
.view-contrate .dp-int-card b { font-family: var(--f-display); font-weight: 800; font-stretch: 86%; font-size: var(--fs-md); }
.view-contrate .dp-int-go { color: var(--tinta-2); font-size: var(--fs-sm); font-weight: 700; }
.view-contrate .dp-int-card:hover { transform: translateY(-2px); }
.view-contrate .dp-int-card:hover .dp-int-go { color: var(--tinta); }
/* The sound button: the speaker sits right beside the words. */
.view-home #hvSound .hv-ic { margin-right: .35rem; }


.view-contrate .ct-shows li.is-now .ct-sh-tx :is(span, b, a), .view-contrate .ct-shows li.is-now .ct-sh-go { color: #1A1512; }
.view-contrate .ct-shows li.is-now .ct-sh-tx .ct-sh-k { color: var(--laranja); background: #1A1512; }

/* Mídia: the press door is the orange one, beside the opening text (it wins over the dark header cards). */
.view-midia .md-hero .wrap { align-items: start; }
body .view-midia .md-hero .door.is-press, body.sec-color.has-sec .view-midia .md-hero .door.is-press { background: #FF6A00; color: #121110; }
body .view-midia .md-hero .door.is-fans, body.sec-color.has-sec .view-midia .md-hero .door.is-fans { background: #F2F1EE; color: #121110; }
body.sec-color.has-sec .view-midia .md-hero .door .door-a { background: #121110; color: #F2F1EE; }
.view-midia .doors { align-content: start; }
@media (min-width: 900px) { .view-midia .doors { grid-template-columns: minmax(0, 1fr); } .view-midia .door.is-press { order: -1; } }

/* ---------- Contrate · Formatos: next dates and video tiles ---------- */
/* Next dates: the day, the city, the project — one under the other, with room to breathe. */
.view-contrate .ct-dates { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.view-contrate .ct-dates li { border-bottom: 1px solid var(--noite-3); }
.view-contrate .ct-dates li:last-child { border-bottom: 0; }
.view-contrate .ct-dates a { display: grid; gap: .15rem; padding-block: .8rem; color: inherit; text-decoration: none; }
.view-contrate .ct-dt { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--laranja); }
.view-contrate .ct-dates b { font-family: var(--f-display); font-weight: 800; font-stretch: 86%; font-size: var(--fs-md); line-height: 1.1; }
.view-contrate .ct-pj { color: var(--claro-2); font-size: var(--fs-sm); line-height: 1.35; }
.view-contrate .ct-dates a:hover b { text-decoration: underline; text-underline-offset: .18em; }
.view-contrate .ct-vids { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); align-items: start; gap: 1.2rem .9rem; }
.view-contrate .ct-vids li { min-width: 0; }
.view-contrate .ct-vids a { display: grid; gap: .4rem; min-width: 0; }
.view-contrate .ct-vids a > span:last-child { font-size: var(--fs-sm); line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  .view-contrate .ct-vids a:hover, .view-contrate .ct-vids a:focus-visible { transform: scale(1.25); transform-origin: center top; }
}

/* Video tiles grow the same way everywhere, and nothing clips them. */
:is(.view-projetos, .view-baile) .pj-vids { overflow: visible; }
@media (hover: hover) and (pointer: fine) {
  :is(.view-projetos, .view-baile) .pj-vid:hover, :is(.view-projetos, .view-baile) .pj-vid:focus-visible { transform: scale(1.25); transform-origin: center top; z-index: 5; position: relative; }
}

/* ---------- Projetos · Parceiros: a lista por critério e a página de cada parceiro ---------- */
.view-projetos .pr-rule { max-width: 70ch; margin-top: .6rem; }
.view-projetos .pr-group { margin-top: clamp(2rem, 4vw, 3rem); }
.view-projetos .pr-group h3 { font-family: var(--f-display); font-weight: 850; font-stretch: 80%; font-size: var(--fs-xl); line-height: 1; display: flex; align-items: baseline; gap: .5rem; }
.view-projetos .pr-group h3 span { font-family: var(--f-text); font-weight: 600; font-size: var(--fs-xs); color: var(--tinta-2); letter-spacing: .06em; }
.view-projetos .pr-gl { color: var(--tinta-2); margin-top: .25rem; max-width: 54ch; }
.view-projetos .pr-grid { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 1.1rem; }
.view-projetos .pr-card { display: grid; gap: .5rem; color: inherit; text-decoration: none; }
.view-projetos .pr-ph { display: block; aspect-ratio: 1; border-radius: var(--r-card); overflow: hidden; background: var(--papel-2); }
.view-projetos .pr-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.view-projetos .pr-card:hover .pr-ph img { transform: scale(1.05); }
.view-projetos .pr-ph.is-cover img { object-fit: cover; }
.view-projetos .pr-ph.is-ini { display: grid; place-items: center; background: var(--noite); color: var(--laranja-2); font-family: var(--f-display); font-weight: 850; font-stretch: 78%; font-size: 3rem; letter-spacing: .02em; }
.view-projetos .pr-tx { display: grid; gap: .1rem; }
.view-projetos .pr-tx b { font-family: var(--f-display); font-weight: 850; font-stretch: 80%; font-size: var(--fs-lg); line-height: 1.02; }
.view-projetos .pr-role { font-size: var(--fs-sm); color: var(--tinta-2); }
.view-projetos .pr-n { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--laranja); }

.view-projetos .pr-hero-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.6rem clamp(1.6rem, 4vw, 3rem); align-items: end; }
.view-projetos .pr-hero-ph { max-width: 300px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--noite); display: grid; place-items: center; box-shadow: 0 18px 50px rgba(26, 21, 18, .22); }
.view-projetos .pr-hero-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.view-projetos .pr-hero-wrap { display: grid; gap: .5rem; justify-items: start; }
.view-projetos .pr-cred { max-width: 300px; font-size: .8125rem; letter-spacing: .02em; opacity: .75; margin: 0; }
.view-projetos .pr-ini { font-family: var(--f-display); font-weight: 850; font-stretch: 78%; font-size: 4.5rem; color: var(--laranja-2); }
.view-projetos .pr-hero-tx { display: grid; gap: .5rem; }
.view-projetos .pr-hero h1 { font-size: var(--fs-4xl); line-height: .88; }
.view-projetos .pr-sec h2 { font-family: var(--f-display); font-weight: 850; font-stretch: 80%; font-size: var(--fs-2xl); line-height: .92; margin-bottom: 1rem; }
.view-projetos .pr-bio p { max-width: 62ch; }
.view-projetos .pr-bio p + p { margin-top: .8rem; }
.view-projetos .pr-say blockquote { margin: 0; max-width: 60ch; }
.view-projetos .pr-say blockquote p { font-family: var(--f-display); font-weight: 800; font-stretch: 82%; font-size: var(--fs-2xl); line-height: 1.04; }
.view-projetos .pr-say cite { display: block; margin-top: .9rem; font-style: normal; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--laranja-2); }
.view-projetos .pr-discs { margin-top: 0; }
.view-projetos .pr-fotos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 1rem; }
.view-projetos .pr-fotos li { display: grid; gap: .4rem; }
.view-projetos .pr-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); display: block; }
.view-projetos .pr-fotos span { font-size: var(--fs-xs); color: var(--tinta-2); }
.view-projetos .pr-press { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; max-width: 900px; }
.view-projetos .pr-press li > * { display: grid; gap: .15rem; padding: .9rem 0; border-top: 1px solid var(--linha); color: inherit; text-decoration: none; }
.view-projetos .pr-press b { font-size: var(--fs-base); font-weight: 650; }
.view-projetos .pr-press span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); }
.view-projetos .pr-press em { font-style: italic; color: var(--tinta-2); }
.view-projetos .pr-press a:hover b { color: var(--laranja); }
@media (max-width: 760px) {
  .view-projetos .pr-hero-in { grid-template-columns: 1fr; }
  .view-projetos .pr-hero-ph { max-width: 200px; }
  .view-projetos .pr-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
}

/* ---------- Imprensa · Nas bancas: as páginas publicadas ---------- */
.view-midia .pr-clip-block { margin-top: clamp(2.4rem, 5vw, 3.6rem); border-top: 1px solid var(--linha); padding-top: clamp(1.6rem, 3vw, 2.4rem); }
.view-midia .pr-clip-block h3 { font-family: var(--f-display); font-weight: 850; font-stretch: 80%; font-size: var(--fs-2xl); line-height: .95; }
.view-midia .pr-clips { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 1.2rem; }
.view-midia .pr-clip { display: grid; gap: .5rem; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.view-midia .pr-clip-ph { display: block; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: #FFFFFF; border: 1px solid var(--linha-clara); }
.view-midia .pr-clip-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; transition: transform .4s var(--ease); }
.view-midia .pr-clip:hover .pr-clip-ph img { transform: scale(1.04); }
.view-midia .pr-clip:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; border-radius: 12px; }
.view-midia .pr-clip-tx { display: grid; gap: .1rem; }
.view-midia .pr-clip-tx .k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--laranja); }
.view-midia .pr-clip-tx b { font-size: var(--fs-base); font-weight: 650; line-height: 1.2; }
.view-midia .pr-clip-tx span:last-child { font-size: var(--fs-xs); color: var(--tinta-2); }
.pr-clip-box img { max-height: 84vh; width: auto; object-fit: contain; background: #FFFFFF; }

/* Painel: de onde vem o conteúdo de uma seção, quando não é dele mesmo. */
.view-painel .p-sec-nota { display: block; margin-top: .5rem; max-width: 68ch; font-size: var(--fs-xs); line-height: 1.5; color: var(--tinta-2); }

/* Disponibilidade: data segurada, sem dizer o que é. */
.view-contrate .dp-d.is-hold { background: repeating-linear-gradient(135deg, var(--linha-clara), var(--linha-clara) 4px, var(--papel-2) 4px, var(--papel-2) 8px); color: var(--tinta-2); }

/* ---------- Mapa · Turnê: a viagem desenhada, e o país na janela do lugar ---------- */
.view-mapa .mp-legs .mp-leg { fill: none; stroke: var(--laranja); stroke-width: 1.6; stroke-linecap: round; opacity: .85; filter: drop-shadow(0 0 3px rgba(255,106,0,.45)); }
.view-mapa .mp-trav { fill: #F4C542; stroke: rgba(0,0,0,.35); stroke-width: .3; opacity: 0; transition: opacity .3s var(--ease); }
.view-mapa .mp-tour-head { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1rem; }
.view-mapa .mp-tour-head h3 { font-family: var(--f-display); font-weight: 850; font-stretch: 80%; font-size: var(--fs-xl); line-height: 1; }
.view-mapa .mp-tour-nav { display: flex; gap: .5rem; align-items: center; }
.view-mapa .mp-tnav, .view-mapa .mp-replay { border: 1px solid var(--linha); background: none; color: inherit; font: inherit; border-radius: 999px; padding: .35rem .9rem; cursor: pointer; }
.view-mapa .mp-tnav { padding: .35rem .7rem; }
.view-mapa .mp-tnav[disabled] { opacity: .35; cursor: default; }
.view-mapa .mp-tnav:not([disabled]):hover, .view-mapa .mp-replay:hover { border-color: var(--laranja); color: var(--laranja); }
.view-mapa .mp-tour li.is-indo { color: var(--laranja); }
.view-mapa .mp-tour li.is-indo .c { font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .view-mapa .mp-trav { display: none; } }

.mp-mini { margin: 0 0 1.1rem; }
.mp-mini-fig { margin: 0; display: grid; gap: .4rem; justify-items: center; }
.mp-mini-fig svg { width: 100%; max-width: 230px; max-height: 190px; overflow: visible; }
.mp-mini-fig .mn-pais { fill: color-mix(in srgb, var(--tinta) 10%, transparent); stroke: var(--tinta-2); stroke-width: 1; stroke-linejoin: round; }
.mp-mini-fig .mn-c { fill: var(--tinta-2); opacity: .55; }
.mp-mini-fig .mn-c.is-aqui { fill: var(--laranja); opacity: 1; }
.mp-mini-fig figcaption { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }

/* ---------- Compartilhar: a arte e o link do nosso site ---------- */
.share-sheet { max-width: 420px; width: min(92vw, 420px); border-radius: 16px; padding: clamp(1.1rem, 3vw, 1.6rem); }
.share-sheet .sh-card { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--noite); margin-top: .4rem; }
.share-sheet .sh-card img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.62); }
.share-sheet .sh-cc { position: absolute; inset: auto 0 0 0; display: grid; gap: .35rem; padding: clamp(1rem, 4vw, 1.5rem); color: #FFFFFF; background: linear-gradient(to top, rgba(26,21,18,.9), rgba(26,21,18,0)); }
.share-sheet .sh-k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; color: #FF6A00; }
.share-sheet .sh-cc b { font-family: var(--f-display); font-weight: 850; font-stretch: 80%; font-size: clamp(1.3rem, 5vw, 1.8rem); line-height: 1.02; }
.share-sheet .sh-site { font-size: var(--fs-xs); letter-spacing: .06em; color: rgba(255,255,255,.82); }
.share-sheet .sh-lead { margin-top: 1rem; font-size: var(--fs-sm); color: var(--tinta-2); }
.share-sheet .sh-url { margin-top: .3rem; font-size: var(--fs-xs); word-break: break-all; padding: .6rem .7rem; border-radius: 8px; background: var(--papel-2); user-select: all; }
.share-sheet .sh-acts { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.share-sheet .sh-done { margin-top: .6rem; font-size: var(--fs-sm); color: var(--laranja); min-height: 1.2em; }

/* ---------- Hamilton · Bandolim solidário: a história do projeto ---------- */
.view-hamilton .hh-sol-texto { max-width: 62ch; margin: 1.8rem 0 0; display: grid; gap: .9rem; }
.view-hamilton .hh-sol-texto h3 { font-family: var(--f-display); font-weight: 850; font-stretch: 80%; font-size: var(--fs-lg); line-height: 1; margin-top: .8rem; }
.view-hamilton .hh-sol-lista { margin: 0; padding-left: 1.1rem; display: grid; gap: .2rem; }
.view-hamilton .hh-sol-destaque { margin-top: .6rem; padding: .9rem 1.1rem; border-left: 3px solid var(--laranja); background: var(--papel-2); border-radius: 0 10px 10px 0; }
.view-hamilton .hh-sol-outras { font-family: var(--f-display); font-weight: 850; font-stretch: 80%; font-size: var(--fs-lg); line-height: 1; margin: clamp(2rem, 4vw, 2.8rem) 0 1rem; }

/* ---------- 10 cordas · 01 Byte 10 Cordas ---------- */
.view-bandolim .bd-byte-top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.6rem clamp(1.6rem, 4vw, 3rem); align-items: end; }
.view-bandolim .bd-byte-capa { margin: 0; max-width: 320px; }
.view-bandolim .bd-byte-capa img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; box-shadow: 0 18px 50px rgba(26, 21, 18, .25); }
.view-bandolim .bd-byte-tx h2 { font-family: var(--f-display); font-weight: 850; font-stretch: 78%; font-size: var(--fs-3xl); line-height: .9; }
.view-bandolim .bd-byte-texto { max-width: 64ch; margin-top: clamp(1.6rem, 4vw, 2.4rem); display: grid; gap: .9rem; }
.view-bandolim .bd-byte-mais { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.view-bandolim .bd-byte-mais h3 { font-family: var(--f-display); font-weight: 850; font-stretch: 80%; font-size: var(--fs-lg); line-height: 1; margin-bottom: .8rem; }
.view-bandolim .bd-byte-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .1rem 1.4rem; }
.view-bandolim .bd-byte-links a { display: grid; gap: .1rem; padding: .85rem 0; border-top: 1px solid var(--linha); color: inherit; text-decoration: none; }
.view-bandolim .bd-byte-links .k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--laranja); }
.view-bandolim .bd-byte-links b { font-size: var(--fs-base); font-weight: 650; line-height: 1.2; }
.view-bandolim .bd-byte-links span:last-child { font-size: var(--fs-xs); color: var(--tinta-2); }
.view-bandolim .bd-byte-links a:hover b { color: var(--laranja); }
@media (max-width: 760px) { .view-bandolim .bd-byte-top { grid-template-columns: 1fr; } .view-bandolim .bd-byte-capa { max-width: 200px; } }

/* Loja: a partitura grátis, ao lado do que é vendido. */
.view-loja .lj-card.is-free .lj-kind { color: var(--laranja); }
.view-loja .lj-card .lj-meta { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); }

/* A voz do Hamilton dentro de uma seção: primeira pessoa, com a assinatura embaixo. */
.hh-voz { max-width: 62ch; margin: clamp(1.4rem, 3vw, 2rem) 0 0; display: grid; gap: .8rem; padding-left: 1.1rem; border-left: 3px solid var(--laranja); }
.hh-voz p { font-size: var(--fs-lg); line-height: 1.5; }
.hh-voz .hh-voz-quem { font-family: var(--f-display); font-weight: 850; font-stretch: 82%; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-2); }
.view-hamilton .hh-parc-in .hh-voz { margin-top: 1.2rem; }
.view-educacional .ed-tips li.is-hh .ed-quem, .view-educacional .ed-quem { margin-top: .5rem; font-family: var(--f-display); font-weight: 850; font-stretch: 82%; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--laranja); }
.view-educacional .ed-serie .hh-voz { margin-top: .9rem; }
.view-educacional .ed-serie .hh-voz p { font-size: var(--fs-base); }
.person-sheet .ps-quem { margin-top: .7rem; font-family: var(--f-display); font-weight: 850; font-stretch: 82%; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--laranja); }

/* ---------- A voz do Hamilton: um tamanho só, de leitura ----------
   Os blocos foram desenhados quando o depoimento era uma frase. Com os textos que ele
   mandou — parágrafos inteiros —, o corpo grande virava cartaz e ninguém lia até o fim.
   Aqui ficam do tamanho de leitura, um pouco acima do corpo do site, com a barra laranja
   e a assinatura dando o destaque que antes vinha do tamanho. */
.hh-voz p { font-size: 1.125rem; line-height: 1.65; }
.view-projetos .pr-say blockquote { max-width: 62ch; padding-left: 1.1rem; border-left: 3px solid var(--laranja-2); }
.view-projetos .pr-say blockquote p { font-family: var(--f-text); font-weight: 400; font-stretch: normal; font-size: 1.125rem; line-height: 1.65; }
.view-projetos .pr-say blockquote p + p { margin-top: .8rem; }
.view-projetos .pr-say cite { margin-top: .8rem; }
.view-educacional .ed-serie .hh-voz p { font-size: 1rem; line-height: 1.6; }
.view-projetos .pr-obs { margin-top: .6rem; max-width: 70ch; font-size: var(--fs-sm); color: var(--tinta-2); }

/* Em cartaz · os músicos do formato, com a linha do Hamilton sobre cada um. */
.view-projetos .ec-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.1rem; }
.view-projetos .ec-pe { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 1rem; align-items: start; background: var(--papel); border-radius: 14px; padding: 1rem; }
.view-projetos .ec-pe-ph { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; display: block; background: var(--noite); }
.view-projetos .ec-pe-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Crédito da foto embaixo do retrato: obrigação nossa com quem fotografou, em corpo pequeno para não roubar a leitura. */
.view-projetos .ec-pe-fig { margin: 0; width: 84px; }
.view-projetos .ec-pe-fig figcaption { margin-top: .35rem; font-size: .8125rem; line-height: 1.25; letter-spacing: .02em; color: var(--tinta-2); }
/* O nome de quem fotografou não se parte no meio: ou cabe na linha, ou desce inteiro. */
.view-projetos .ec-pe-fig figcaption span { white-space: nowrap; }
.view-projetos .ec-pe-ph.is-ini { display: grid; place-items: center; color: var(--laranja-2); font-family: var(--f-display); font-weight: 850; font-stretch: 78%; font-size: 1.9rem; }
.view-projetos .ec-pe-tx h5 { font-family: var(--f-display); font-weight: 850; font-stretch: 80%; font-size: var(--fs-lg); line-height: 1; }
.view-projetos .ec-pe-i { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--laranja); margin: .2rem 0 .5rem; }
.view-projetos .ec-pe-tx p { font-size: var(--fs-sm); line-height: 1.55; }
.view-projetos .ec-pe-quem { margin-top: .5rem; font-family: var(--f-display); font-weight: 850; font-stretch: 82%; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-2); }

/* ---------- Projetos · Grupos ----------
   Uma linha do tempo em blocos: foto (ou capa) à esquerda, a história do grupo à direita.
   A capa de disco entra quadrada; foto de grupo entra em 4/3, que é como as fotos chegam. */
.view-projetos .gr-list { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 2.2rem; }
.view-projetos .gr-item { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 1.8rem; align-items: start; padding-top: 2.2rem; border-top: 1px solid var(--linha-clara); }
.view-projetos .gr-item:first-child { padding-top: 0; border-top: 0; }
.view-projetos .gr-ph { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 3; background: var(--noite); }
.view-projetos .gr-ph.is-cover { aspect-ratio: 1; }
.view-projetos .gr-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.view-projetos .gr-tx { display: grid; gap: .55rem; align-content: start; }
.view-projetos .gr-when { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }
.view-projetos .gr-tx h3 { font-family: var(--f-display); font-weight: 850; font-stretch: 80%; font-size: var(--fs-xl); line-height: 1; }
.view-projetos .gr-line { max-width: 62ch; }
.view-projetos .gr-bands { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1.4rem; margin-top: .7rem; }
.view-projetos .gr-tx > .ec-block { margin-top: .9rem; }
@media (max-width: 860px) {
  .view-projetos .gr-item { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .view-projetos .gr-ph { max-width: 320px; }
}
.view-projetos .gr-noc { display: grid; place-items: center; text-align: center; aspect-ratio: 1; border-radius: 8px; padding: .5rem; color: #FFFFFF; font-family: var(--f-display); font-weight: 850; font-stretch: 80%; font-size: var(--fs-sm); line-height: 1.05; }

/* O card largo de Icônicos: um projeto que reúne vários discos ocupa a linha inteira
   e mostra por dentro o que ele deixou. Mesma gramática visual dos Grupos. */
.view-projetos .ph-past .ph-set { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 1.8rem; align-items: start; }
.view-projetos .ph-set-ph { display: block; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 1; background: var(--noite); }
.view-projetos .ph-set-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.view-projetos .ph-set-ph:hover img { transform: scale(1.04); }
.view-projetos .ph-set-tx { display: grid; gap: .55rem; align-content: start; }
.view-projetos .ph-set-tx h3 { font-family: var(--f-display); font-weight: 850; font-stretch: 80%; font-size: var(--fs-xl); line-height: 1; }
.view-projetos .ph-set-tx h3 a { color: inherit; text-decoration: none; }
.view-projetos .ph-set-tx h3 a:hover { text-decoration: underline; }
.view-projetos .ph-set-tx .ec-discs { margin-top: .8rem; }
@media (max-width: 860px) {
  .view-projetos .ph-past .ph-set { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .view-projetos .ph-set-ph { max-width: 320px; }
}

/* ---------- Discografia · Apareceu em ----------
   Eram poucas participações e cabia uma ficha grande por página. Agora são muitas,
   então viram fichas curtas lado a lado: quem, qual disco, que ano e em que faixa. */
.view-musica #appearList { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1.4rem; }
.view-musica .appear { grid-template-columns: 84px minmax(0, 1fr); gap: 1rem; align-items: start; background: rgba(255, 255, 255, .05); border-radius: 14px; padding: 1rem; }
.view-musica .ap-cv { width: 84px; height: 84px; border-radius: 8px; overflow: hidden; display: block; background: var(--noite-2, #111); }
.view-musica .ap-cv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.view-musica .ap-cv.is-ini { display: grid; place-items: center; color: var(--laranja-2); font-family: var(--f-display); font-weight: 850; font-stretch: 78%; font-size: 1.7rem; }
.view-musica .appear .eyebrow { color: var(--laranja-2); }
.view-musica .appear h3 { font-size: var(--fs-lg); line-height: 1.1; margin: .25rem 0 .35rem; }
.view-musica .ap-meta { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--claro-2); }
.view-musica .ap-tx p { font-size: var(--fs-sm); line-height: 1.5; }
.view-musica .ap-f { margin-top: .4rem; }
.view-musica .ap-f span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--claro-2); margin-right: .35rem; }
@media (min-width: 761px) { .view-musica .appear { grid-template-columns: 84px minmax(0, 1fr); } }

/* ---------- Celular: o que estava se atropelando ----------
   1. A marca não encolhe. Ela é nome próprio: ou cabe inteira, ou o resto da barra cede.
      Sem isto o texto vazava por baixo da lupa e do botão de menu. */
.site-header .brand, .menu-top .brand { flex: none; }
.site-header .header-actions, .menu-top-actions { flex: none; }
@media (max-width: 560px) {
  /* No alto do menu, o boneco cede altura e o "Fechar" vira ×, como em todo pop-up do site. */
  .menu-top .brand .brand-boneco { height: 2em; }
  .menu-top .brand { font-size: var(--fs-base); }
  #menuClose { padding: 0; min-width: 44px; justify-content: center; }
  #menuClose .menu-close-w { display: none; }
  #menuClose .menu-close-x { font-size: 1.6rem; line-height: 1; font-weight: 400; }
}
@media (min-width: 561px) { #menuClose .menu-close-x { display: none; } }

/* 2. Ficha técnica: o rótulo "max-content" comia a linha e o conteúdo sobrava espremido
      num filete à direita. No celular, rótulo em cima e texto embaixo, na largura toda. */
@media (max-width: 760px) {
  :is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .credits { grid-template-columns: minmax(0, 1fr); }
  :is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .credits dt { padding-right: 0; padding-bottom: 0; border-bottom: 0; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; }
  :is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .credits dd { padding-top: .2rem; }
}

/* Barra de baixo em tela estreita (iPhone SE e afins): "Discografia" não cabia em 1/5 de 320px
   e empurrava a barra inteira — e com ela o site — para fora da tela.
   Os itens passam a poder encolher, e o rótulo diminui um ponto em vez de estourar. */
.tabbar a, .tabbar button { min-width: 0; }
.tabbar a span, .tabbar button span { max-width: 100%; overflow: hidden; }
@media (max-width: 380px) {
  .tabbar a, .tabbar button { padding-inline: 2px; }
  .tabbar a span, .tabbar button span { font-size: .8125rem; letter-spacing: -.01em; }
  .tabbar svg { width: 21px; height: 21px; }
}

/* A ficha da orquestra na página do parceiro: um bloco por disco, com os naipes. */
.view-projetos .pr-orq + .pr-orq { margin-top: 2rem; }
.view-projetos .pr-orq h3 { font-family: var(--f-display); font-weight: 850; font-stretch: 80%; font-size: var(--fs-lg); line-height: 1; margin-bottom: .8rem; }
.view-projetos .pr-orq h3 span { color: var(--claro-2); font-weight: 400; font-stretch: 100%; font-size: var(--fs-sm); margin-left: .4rem; }

/* ---------- Trilho lateral, só nas sub-abas curtas ----------
   Quando a seção já tem a sua barra e a aba aberta traz outra fileira, as duas se empilham.
   Aí o trilho resolve: a de dentro fica de pé, ao lado do conteúdo. Mas só quando são
   poucas — com cinco ou mais, a coluna vira uma lista comprida e come a largura do texto.
   A conta é feita aqui embaixo: existindo uma quinta aba, o trilho desliga sozinho.
   No celular nada disso vale, a fileira deitada rola com o polegar. */
@media (min-width: 1100px) {
  .sec-rail .wrap.has-rail { display: grid; grid-template-columns: 170px minmax(0, 1fr); column-gap: 1.8rem; align-items: start; }
  .sec-rail .wrap.has-rail > :not(.who-tabs):not(.rail-body) { grid-column: 1 / -1; }
  .sec-rail .wrap.has-rail > .rail-body { grid-column: 2; min-width: 0; }
  .sec-rail .wrap.has-rail > .who-tabs {
    grid-column: 1; align-self: start;
    /* Este 10px não é gosto: é o mesmo respiro que a rolagem usa para parar a barra abaixo
       do cabeçalho (ver aoAlto, em site.js). Enquanto eram 1.2rem aqui e 10px lá, a barra
       grudenta descansava doze pixels abaixo de onde a rolagem a deixava, e a troca de aba
       parecia desalinhada. Os dois números têm de andar juntos. */
    position: sticky; top: var(--teto, 79px);
    display: grid; gap: .25rem; padding: 0; overflow: visible;
  }
  .sec-rail .wrap.has-rail > .who-tabs, .sec-rail .wrap.has-rail > .rail-body { margin-top: 1.4rem; }
  .sec-rail .wrap.has-rail > .rail-body > :first-child { margin-top: 0; }
  .sec-rail .wrap.has-rail > .who-tabs .who-tab {
    justify-content: flex-start; align-items: center; white-space: normal; text-align: left;
    border-radius: 10px; padding: .5rem .7rem .55rem 1rem; font-size: var(--fs-sm); line-height: 1.15;
  }
  .sec-rail .wrap.has-rail:not(:has(> .who-tabs > :nth-child(5))) > .who-tabs .who-tab::before { width: 3px; }
  .sec-rail .wrap.has-rail:not(:has(> .who-tabs > :nth-child(5))) > .who-tabs .who-tab:hover::before,
  .sec-rail .wrap.has-rail:not(:has(> .who-tabs > :nth-child(5))) > .who-tabs .who-tab[aria-selected="true"]::before { width: 8px; }
  .sec-rail .wrap.has-rail > .who-tabs .who-tab[aria-selected="true"] { transform: none; box-shadow: none; }
  .sec-rail .wrap.has-rail > .who-tabs .who-tab[aria-selected="true"]::after { display: none; }
  /* Cinco abas ou mais: volta tudo a ser fileira deitada. */
  .sec-rail .wrap.has-rail:has(> .who-tabs > :nth-child(5)) { display: block; }
  .sec-rail .wrap.has-rail:has(> .who-tabs > :nth-child(5)) > .who-tabs { position: static; display: flex; gap: .25rem; overflow-x: auto; }
  .sec-rail .wrap.has-rail:has(> .who-tabs > :nth-child(5)) > .who-tabs .who-tab { border-radius: 12px 12px 0 0; }
}

/* ---------- As cores da régua em todas as abas do site ----------
   Mesma paleta da barra que fecha as páginas, nos dois componentes de aba:
   a fileira/trilho (.who-tabs) e a barra de seções (.ct-evtabs-row).
   Cada aba tem a sua cor e uma espinha lateral — o bloco de cor da régua, reduzido a uma
   faixa. Ao passar o cursor, a espinha engrossa, a cor enche e a aba cresce; aberta, ela
   fica com a cor cheia. É o mesmo gesto da régua: o que a mão encosta, aumenta. */
.who-tabs .who-tab, .ct-evtabs-row button { --rt: #DDA15E; --rf: #1A1512; }
:is(.who-tabs, .ct-evtabs-row) > :nth-child(7n + 1) { --rt: #22A7C9; }
:is(.who-tabs, .ct-evtabs-row) > :nth-child(7n + 2) { --rt: #F76C6C; }
:is(.who-tabs, .ct-evtabs-row) > :nth-child(7n + 3) { --rt: #F4C542; }
:is(.who-tabs, .ct-evtabs-row) > :nth-child(7n + 4) { --rt: #7FE7D6; }
:is(.who-tabs, .ct-evtabs-row) > :nth-child(7n + 5) { --rt: #BE5CA9; }
:is(.who-tabs, .ct-evtabs-row) > :nth-child(7n + 6) { --rt: #A1AA68; }
:is(.who-tabs, .ct-evtabs-row) > :nth-child(7n + 7) { --rt: #6C4AB6; --rf: #FFFFFF; }

/* A marca de cor. Deitada, ela é um friso no alto da aba — que é onde a pasta abre.
   Ficava na lateral, e com o canto arredondado parecia uma segunda carta atrás da aba:
   era esse o "bug" das abas embaralhadas. De pé, no trilho, ela volta para a esquerda. */
.who-tabs .who-tab, .ct-evtabs-row button { position: relative; }
.who-tabs .who-tab::before, .ct-evtabs-row button::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--rt); border-radius: 12px 12px 0 0; pointer-events: none;
  transition: height 220ms var(--ease);
}
/* A aba aberta vem para a frente: sem isto as vizinhas passavam por cima dela. */
.who-tabs .who-tab[aria-selected="true"], .ct-evtabs-row button[aria-selected="true"] { z-index: 2; }
.who-tabs .who-tab:hover, .ct-evtabs-row button:hover { z-index: 1; }

/* ---- a fileira horizontal (celular, e desktop onde não há trilho) ---- */
.who-tabs .who-tab {
  padding-left: 1.35rem;
  background: color-mix(in srgb, var(--rt) 26%, transparent);
  transition: background 220ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.who-tabs .who-tab:hover { background: color-mix(in srgb, var(--rt) 52%, transparent); }
.who-tabs .who-tab:hover::before { height: 6px; }
.who-tabs .who-tab[aria-selected="true"] { background: var(--rt); color: var(--rf); border-color: var(--tinta); }
.who-tabs .who-tab[aria-selected="true"]::before { height: 6px; background: color-mix(in srgb, var(--rf) 26%, var(--rt)); }
.who-tabs .who-tab[aria-selected="true"] .n { color: color-mix(in srgb, var(--rf) 70%, transparent); }
.who-tabs .who-tab[aria-selected="true"]::after { background: var(--rt); }

/* ---- a barra de seções, sobre o fundo escuro ---- */
.ct-evtabs-row button {
  padding-top: .6rem; overflow: hidden;
  border-color: color-mix(in srgb, var(--rt) 42%, transparent);
  transition: background 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease);
}
.ct-evtabs-row button:hover { background: color-mix(in srgb, var(--rt) 18%, transparent); border-color: var(--rt); }
.ct-evtabs-row button:hover::before { height: 6px; }
/* A aba aberta já veste a cor da seção que abre embaixo dela (HDH.tintTabs) — isso fica.
   O que muda é a marca: a barrinha no alto deixa de ser sempre laranja e passa a ser a
   cor daquela aba. A seção diz onde você está; a cor diz qual aba é. */
.ct-evtabs .ct-evtabs-row > button[aria-selected="true"] { box-shadow: inset 0 4px 0 var(--rt); }
.ct-evtabs-row button[aria-selected="true"]::before { height: 6px; }

/* ---- o trilho vertical: aqui a aba cresce mesmo, como os blocos da régua ---- */
/* Sobra da primeira versão do trilho: valia para qualquer .wrap.has-rail, inclusive os que
   voltaram a ser fileira deitada. Era ela que empurrava a aba para o lado ao passar o cursor
   e deixava a marca de cor como uma carta de 13px atrás da aba. Removida. */

/* Quem pediu menos movimento no sistema recebe a cor, não o gesto. */
@media (prefers-reduced-motion: reduce) {
  .who-tabs .who-tab, .ct-evtabs-row button,
  .who-tabs .who-tab::before, .ct-evtabs-row button::before { transition: none; }
  .who-tabs .who-tab:hover, .ct-evtabs-row button:hover,
  .wrap.has-rail > .who-tabs .who-tab:hover { transform: none; padding-block: .8rem; }
}

/* ---------- Mapa: o mapa é o assunto da página, então ele manda ----------
   Antes o mapa chegava em terceiro lugar — depois do texto, de um bloco alto de números
   e de uma fileira de filtros — e ainda por cima espremido dentro da coluna de texto.
   Agora: os números e os filtros dividem uma faixa só, e o mapa sai da coluna e vai de
   ponta a ponta da tela. Ganha largura, e com ela os pontos ganham distância entre si:
   a Europa deixa de ser uma mancha. */
.view-mapa .mp-bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; padding-bottom: 1rem; margin-bottom: 1.4rem; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.view-mapa .mp-bar .mp-nums { display: flex; gap: clamp(1.4rem, 4vw, 3rem); border: 0; padding: 0; margin: 0; }
.view-mapa .mp-bar .mp-nums .fact { display: flex; align-items: baseline; gap: .45rem; }
.view-mapa .mp-bar .mp-nums b { font-size: var(--fs-2xl); }
.view-mapa .mp-bar .mp-tools { margin: 0; gap: .6rem 1rem; justify-content: flex-start; }

/* O mapa sangra até a borda da tela, mantendo a margem de segurança das laterais. */
.view-mapa .mp-sec .mp-wrap {
  width: calc(100vw - 2 * clamp(12px, 3vw, 28px));
  max-width: calc(100vw - 2 * clamp(12px, 3vw, 28px));
  margin-inline: calc(50% - 50vw + clamp(12px, 3vw, 28px));
}
@media (min-width: 1500px) {
  .view-mapa .mp-sec .mp-wrap { width: 1440px; max-width: 1440px; margin-inline: auto; }
}
/* Legenda e nota numa linha só: são rodapé do mapa, não duas seções. */
.view-mapa .mp-legend { margin-top: 1rem; }
.view-mapa .mp-note { margin-top: .5rem; }
@media (min-width: 900px) {
  .view-mapa .mp-legend { margin-top: 1.1rem; }
  .view-mapa .mp-note { display: inline-block; margin-top: .2rem; }
}
@media (max-width: 640px) {
  .view-mapa .mp-bar { align-items: start; }
  .view-mapa .mp-bar .mp-nums { gap: 1.2rem; }
  .view-mapa .mp-bar .mp-nums b { font-size: var(--fs-xl); }
}
/* O critério da viagem, dito em voz baixa embaixo do resumo. */
.view-mapa .mp-tour-regra { margin-top: .5rem; max-width: 52ch; font-size: var(--fs-sm); color: var(--claro-2); }

/* ---------- A barra de seções volta a ser deitada ----------
   A espinha vertical ficou grande demais para o que ela guarda: as seções de uma página
   são poucas e os nomes, curtos. O trilho fica só onde ele resolve alguma coisa — nas
   sub-abas, abas dentro de abas, e mesmo lá só quando são três ou quatro.
   .sec-rail continua existindo como caixa, mas sem efeito nenhum no desenho. */
.sec-rail { display: contents; }

/* O nome do lugar durante o trajeto: aparece sobre o mapa, no canto de baixo,
   e muda de tom conforme o momento — de onde se sai, para onde se vai, onde se chegou. */
.view-mapa .mp-wrap { position: relative; }
.view-mapa .mp-voo {
  position: absolute; left: clamp(.8rem, 2vw, 1.6rem); bottom: clamp(.8rem, 2vw, 1.6rem);
  margin: 0; padding: .5rem .95rem; border-radius: 999px; pointer-events: none;
  background: rgba(18, 17, 16, .82); border: 1.5px solid rgba(255, 255, 255, .18);
  color: var(--claro); font-family: var(--f-display); font-weight: 800; font-stretch: 84%;
  font-size: var(--fs-md); line-height: 1.1; letter-spacing: -.01em;
  backdrop-filter: blur(6px);
}
.view-mapa .mp-voo::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .5rem; vertical-align: 1px; background: var(--claro-2); }
.view-mapa .mp-voo.is-partida::before { background: var(--laranja); }
.view-mapa .mp-voo.is-indo::before { background: #F4C542; animation: mpPulsa 1s infinite; }
.view-mapa .mp-voo.is-chegou::before { background: #7FE7D6; }
@keyframes mpPulsa { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .view-mapa .mp-voo.is-indo::before { animation: none; } }
/* O botão que abre o resto da lista diz quantos lugares faltam. */
.view-mapa .mp-vermais { margin-top: 1rem; font: inherit; font-weight: 700; cursor: pointer; background: transparent; color: inherit; border: 1.5px solid currentColor; border-radius: 999px; padding: .6rem 1.2rem; }
.view-mapa .mp-vermais:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

/* ---------- Trilho dentro de trilho ----------
   Quando a seção já tem o seu trilho e a aba aberta traz outro, os dois ficam lado a lado.
   Só que iguais eles competem: o olho não sabe qual manda. O de dentro fica mais estreito,
   com letra menor e espinha mais fina — subordinado, não concorrente. E o conteúdo, que é
   o motivo de tudo, continua com a maior parte da largura. */
@media (min-width: 1100px) {
  .sec-rail .wrap.has-rail { grid-template-columns: 170px minmax(0, 1fr); column-gap: 1.6rem; }
  .sec-rail .wrap.has-rail > .who-tabs .who-tab {
    font-size: var(--fs-base); padding: .55rem .8rem .6rem 1.15rem; gap: .3rem;
  }
  .sec-rail .wrap.has-rail:not(:has(> .who-tabs > :nth-child(5))) > .who-tabs .who-tab::before { width: 3px; }
  .sec-rail .wrap.has-rail:not(:has(> .who-tabs > :nth-child(5))) > .who-tabs .who-tab:hover::before,
  .sec-rail .wrap.has-rail:not(:has(> .who-tabs > :nth-child(5))) > .who-tabs .who-tab[aria-selected="true"]::before { width: 8px; }
  .sec-rail .wrap.has-rail > .who-tabs .who-tab .n { font-size: .8125rem; }
  /* O trilho de dentro pendura logo abaixo do cabeçalho, como o de fora — e no mesmo lugar
     em que a rolagem para a barra quando se troca de aba. Os três números são um só. */
  .sec-rail .wrap.has-rail > .who-tabs { top: var(--teto, 79px); }
}

/* ---------- Abertura: a faixa se divide ao meio ----------
   Agenda e vídeos continuam lado a lado, como estavam, mas a faixa deixa de ser uma tarja
   branca entre dois pretos. A cor vira exatamente no meio da tela: areia do lado da agenda,
   porque data, cidade e link de ingresso são texto miúdo que se lê melhor sobre claro;
   preto do lado dos vídeos, porque miniatura salta no escuro e emenda com o Explore.
   As duas colunas são iguais, então a virada de cor cai no vão entre elas. */
.view-home .live.is-meia { background: linear-gradient(90deg, var(--papel) 0 50%, var(--noite) 50% 100%); }
.view-home .live.is-meia .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.view-home .live.is-meia #agenda { color: var(--tinta); padding-right: clamp(1.5rem, 3vw, 3rem); }
.view-home .live.is-meia #videos { color: var(--claro); padding-left: clamp(1.5rem, 3vw, 3rem); }
.view-home .live.is-meia #agenda .shows { border-top-color: var(--tinta); }
.view-home .live.is-meia #videos .eyebrow { color: var(--laranja-2); }
.view-home .live.is-meia #videos .muted, .view-home .live.is-meia #videos .feat-meta .eyebrow { color: var(--claro-2); }
.view-home .live.is-meia #videos .more-link { color: var(--claro); }
@media (max-width: 899px) {
  /* Em coluna única a divisão ao meio não existe: cada bloco leva a sua cor por inteiro. */
  .view-home .live.is-meia { background: var(--papel); }
  .view-home .live.is-meia .wrap { grid-template-columns: minmax(0, 1fr); }
  .view-home .live.is-meia #agenda { padding-right: 0; }
  .view-home .live.is-meia #videos {
    padding: clamp(1.8rem, 6vw, 3rem) clamp(12px, 3vw, 28px);
    margin: clamp(2rem, 6vw, 3rem) calc(-1 * clamp(12px, 3vw, 28px)) calc(-1 * clamp(2.5rem, 7vw, 4.5rem));
    background: var(--noite);
  }
}

/* ---------- Abas menores ----------
   Elas estavam com corpo de botão de ação, não de navegação: alto, largo e pesado.
   Aba é caminho, não destino — ocupa o necessário para ser lida e clicada com o dedo
   (44px de altura continuam garantidos) e devolve o resto do espaço ao conteúdo. */
.who-tab { padding: .5rem .9rem .55rem; font-size: var(--fs-sm); }
.who-tab .n { font-size: .8125rem; }
.ct-evtabs .ct-evtabs-row > button { min-height: 42px; padding: .5rem .9rem; font-size: var(--fs-sm); }
@media (max-width: 560px) { .who-tab { padding: .45rem .75rem .5rem; } }

/* No trilho, a marca é lateral outra vez: ali a pasta abre para o lado. */
@media (min-width: 1100px) {
  .sec-rail .wrap.has-rail:not(:has(> .who-tabs > :nth-child(5))) > .who-tabs .who-tab::before {
    left: 0; right: auto; top: 0; bottom: 0; height: auto; width: 3px; border-radius: 10px 0 0 10px;
    transition: width 220ms var(--ease);
  }
  .sec-rail .wrap.has-rail:not(:has(> .who-tabs > :nth-child(5))) > .who-tabs .who-tab:hover::before,
  .sec-rail .wrap.has-rail:not(:has(> .who-tabs > :nth-child(5))) > .who-tabs .who-tab[aria-selected="true"]::before { width: 8px; height: auto; }
}

/* Gravações de um show antigo, dentro da janela do lugar: uma linha de links por show.
   São poucos e curtos, então ficam em fila, separados por um ponto, sem virar lista. */
.mp-ev .mp-lk { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .7rem; margin-top: .45rem; }
.mp-ev .mp-lk .textlink { font-size: var(--fs-sm); }
.mp-ev .mp-lk .textlink + .textlink::before { content: "·"; margin-right: .7rem; color: var(--claro-2); }

/* O total de participações no alto da seção: número grande, como os do mapa.
   Ele é o resumo de um acervo de quase cem discos — merece ser lido de longe. */
.view-musica #apCount { display: flex; align-items: baseline; gap: .5rem; margin: 0; }
.view-musica #apCount b { font-family: var(--f-display); font-weight: 850; font-stretch: 72%; font-size: var(--fs-3xl); line-height: .85; color: var(--laranja); font-variant-numeric: tabular-nums; }
.view-musica #apCount span { font-size: var(--fs-sm); font-weight: 600; color: var(--claro-2); }
@media (max-width: 640px) { .view-musica #apCount b { font-size: var(--fs-2xl); } }

/* ---------- A noite em fotos, no cartão do show que já aconteceu ----------
   Uma tira só, rolando de lado, no mesmo corpo do cartão. Não é galeria: é a
   lembrança da noite ao lado do que foi tocado. Quem quiser ampliar, baixar ou
   ver o crédito segue o clique até Mídia → Fotos, onde isso tudo já existe. */
.ps-fotos-t { border-top: 1px solid rgba(255,255,255,.08); padding: .9rem 1.3rem .1rem; font-size: var(--fs-sm); font-weight: 700; color: var(--claro-2); }
.ps-fotos { display: flex; gap: .55rem; list-style: none; margin: 0; padding: .7rem 1.3rem 1.2rem; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ps-fotos::-webkit-scrollbar { display: none; }
.ps-fotos li { flex: 0 0 auto; scroll-snap-align: start; }
.ps-fotos a { display: block; width: 148px; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.08); transition: transform .18s ease, box-shadow .18s ease; }
.ps-fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-fotos a:hover, .ps-fotos a:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--laranja); }
@media (max-width: 640px) { .ps-fotos a { width: 122px; } .ps-fotos-t, .ps-fotos { padding-left: 1rem; padding-right: 1rem; } }
@media (prefers-reduced-motion: reduce) { .ps-fotos a { transition: none; } .ps-fotos a:hover { transform: none; } }

/* ---------- A masterclass mostrada, não só descrita ----------
   A seção vivia de texto e de um retrato de estúdio, que não conta o que é uma
   masterclass. A roda de alunos conta em um segundo. Larga, baixa, antes da lista
   de temas: primeiro a pessoa vê a cena, depois lê o que se estuda nela. */
.view-educacional .ed-mc-foto { margin: 0 0 1.8rem; }
.view-educacional .ed-mc-foto img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 48%; display: block; border-radius: 16px; background: var(--noite-2); }
.view-educacional .ed-mc-foto figcaption { margin-top: .6rem; font-size: var(--fs-sm); color: var(--tinta-2); }
.view-educacional .ed-mc-foto figcaption span { color: var(--semente); }
@media (max-width: 640px) { .view-educacional .ed-mc-foto img { aspect-ratio: 4 / 3; } }

/* ---------- Últimos shows: Último / Anteriores ----------
   A aba "Último" mostra a noite inteira. "Anteriores" é a estrada: uma linha por data,
   com três marcas mudas dizendo o que aquela noite guarda — foto, repertório, gravação.
   Linha sem nada guardado não é botão, é texto: não promete o que não pode cumprir. */
.view-agenda .pv-tabs { margin-bottom: 1.4rem; }
.view-agenda .pv-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--noite-3); }
.view-agenda .pv-lista li { border-bottom: 1px solid var(--noite-3); }
.view-agenda .pv-linha { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 1.1fr) 3.2rem; align-items: baseline; gap: .2rem 1.2rem; width: 100%; padding: .85rem .4rem; background: none; border: 0; text-align: left; color: inherit; font: inherit; }
.view-agenda button.pv-linha { cursor: pointer; }
.view-agenda button.pv-linha:hover, .view-agenda button.pv-linha:focus-visible { background: var(--noite-2); outline: none; }
.view-agenda button.pv-linha:focus-visible { box-shadow: inset 3px 0 0 var(--laranja); }
.view-agenda .pv-linha.is-seca { display: grid; color: var(--claro-2); }
.view-agenda .pv-q { font-size: var(--fs-sm); font-weight: 700; color: var(--laranja); font-variant-numeric: tabular-nums; }
.view-agenda .pv-linha.is-seca .pv-q { color: var(--claro-2); }
.view-agenda .pv-c { font-family: var(--f-display); font-weight: 800; font-stretch: 86%; font-size: var(--fs-md); line-height: 1.1; }
.view-agenda .pv-v { font-size: var(--fs-sm); color: var(--claro-2); }
.view-agenda .pv-tem { font-size: var(--fs-sm); color: var(--laranja); letter-spacing: .12em; text-align: right; }
.view-agenda .pv-mais { margin-top: 1.2rem; }
@media (max-width: 760px) {
  .view-agenda .pv-linha { grid-template-columns: minmax(0, 1fr) 3.2rem; gap: .15rem .8rem; }
  .view-agenda .pv-q { grid-column: 1; }
  .view-agenda .pv-tem { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .view-agenda .pv-c, .view-agenda .pv-v { grid-column: 1; }
}

/* O pop-up da noite: foto grande, vídeo embutido e repertório, sem sair da agenda. */
/* O diálogo do site nasce com padding zero — quem usa é que dá a margem. Sem isso o texto
   encostava na borda esquerda enquanto o × reservava espaço à direita, e o conteúdo ficava
   torto na tela. A margem é a mesma dos quatro lados; o × flutua dentro dela. */
dialog.sheet.pv-box { max-width: min(880px, calc(100vw - 2rem)); padding: 0 clamp(1.1rem, 2.6vw, 1.9rem) clamp(1.5rem, 3vw, 2.1rem); }
.pv-box .sheet-close { margin-top: 1rem; margin-right: 0; }
/* Em grade, a caixa vira contexto próprio e se encolhe inteira para desviar do × que
   flutua no alto — a foto ficava 44px mais estreita do que o texto, e tudo parecia torto.
   Em fluxo normal só as linhas de texto desviam do botão, que é como o componente foi feito. */
.pv-box .pv-box-in { display: block; }
.pv-box .pv-box-in > * + * { margin-top: .9rem; }
.pv-box-quando { margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--laranja); }
.pv-box h3 { margin: 0; font-family: var(--f-display); font-weight: 850; font-stretch: 78%; font-size: var(--fs-2xl); line-height: .92; }
.pv-box-casa { margin: 0; color: var(--claro-2); font-size: var(--fs-sm); }
.pv-foto-g { margin: .4rem 0 0; }
.pv-foto-g img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 12px; display: block; }
.pv-foto-leg { margin-top: .5rem; font-size: var(--fs-sm); color: var(--claro-2); }
.pv-foto-leg span { color: var(--laranja); }
.pv-minis { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; }
.pv-minis::-webkit-scrollbar { display: none; }
.pv-mini { flex: 0 0 auto; width: 76px; aspect-ratio: 3 / 2; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #000; cursor: pointer; opacity: .5; transition: opacity 160ms var(--ease); }
.pv-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-mini[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--laranja); }
.pv-mini:hover { opacity: 1; }
.pv-vids { display: grid; gap: .8rem; }
.pv-vid { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.pv-vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pv-box-acoes { display: flex; flex-wrap: wrap; gap: .6rem; }
.pv-box .setlist { border-top: 1px solid rgba(255,255,255,.12); }
@media (prefers-reduced-motion: reduce) { .pv-mini { transition: none; } }

/* ---------- A abertura mais curta: agenda e vídeos numa tela ----------
   A faixa dividida media 1080px numa janela de 900: ela sozinha era mais alta que a tela.
   Dois excessos, os dois de espaço e nenhum de conteúdo. O primeiro: cada data empilhava
   dia, cidade e ação em três andares, 171px por show — na página da Agenda a mesma linha
   já cabe em um andar só, e é essa forma que volta aqui. O segundo: 102px de respiro em
   cima e embaixo, herdados da seção genérica, que numa faixa de duas cores só afastam as
   duas colunas do olho. Nada foi cortado de conteúdo; ao contrário, cabe uma data a mais. */
.view-home .live.sec { padding-block: clamp(2.2rem, 4.5vw, 3.6rem); }
.view-home .live .show-row { grid-template-columns: 4.2rem minmax(0, 1fr) auto; align-items: center; row-gap: .3rem; column-gap: 1.1rem; padding-block: .85rem; }
.view-home .live .show-row .where { grid-column: 2; grid-row: 1; }
.view-home .live .show-row .act { grid-column: 3; grid-row: 1; justify-content: flex-end; align-self: center; flex-wrap: nowrap; }
.view-home .live .show-row .tags { margin-top: .25rem; }
.view-home .live .show-row .tag-pill { font-size: var(--fs-xs); padding-block: .15rem; }
.view-home .live .sec-head { margin-bottom: .6rem; }
/* No celular a faixa volta a ser uma coluna embaixo da outra: aí a linha respira de novo. */
@media (max-width: 900px) {
  .view-home .live .show-row { grid-template-columns: 4.2rem minmax(0, 1fr); align-items: start; }
  .view-home .live .show-row .act { grid-column: 2; grid-row: 2; justify-content: flex-start; flex-wrap: wrap; }
}

/* ---------- A régua fina: a assinatura da régua na abertura ----------
   Mesma paleta, mesma numeração, mesma ordem das páginas internas — sem a descrição de
   cada seção, que o mosaico logo acima já deu com imagem. Uma faixa só, doze blocos:
   é a régua reduzida ao que ela tem de único, a cor e o "o site cabe em doze". */
.ruler-sec.is-fina { padding-block: clamp(1.4rem, 3vw, 2.4rem) 0; }
/* A régua alta escreve o nome de pé e trava a altura em 260-340px. Aqui nada disso vale:
   é preciso desfazer, senão o nome sai deitado de lado numa faixa de 74px. */
/* Uma linha só, quantos blocos forem. Com "auto-fit" o décimo terceiro caía sozinho numa
   segunda fileira, que é pior que não ter régua: parece sobra. Em coluna automática
   eles dividem a largura entre si, seja qual for a quantidade de seções amanhã. */
.ruler.is-fina ol { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; height: auto; list-style: none; margin: 0; padding: 0; border-radius: 10px; overflow: hidden; }
.ruler.is-fina li { display: block; flex: none; margin: 0; }
.ruler.is-fina .rl-t { writing-mode: horizontal-tb; transform: none; white-space: normal; align-self: auto; hyphens: auto; }
.ruler.is-fina a { position: static; flex: none; display: grid; align-content: start; justify-content: stretch; gap: .25rem; min-height: 74px; padding: .6rem .55rem .7rem; background: var(--rt); color: var(--rf); text-decoration: none; transition: filter 180ms var(--ease), transform 180ms var(--ease); }
.ruler.is-fina .rl-n { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; opacity: .62; font-variant-numeric: tabular-nums; }
.ruler.is-fina .rl-t { font-family: var(--f-display); font-weight: 800; font-stretch: 80%; font-size: var(--fs-xs); line-height: 1.06; }
.ruler.is-fina a:hover, .ruler.is-fina a:focus-visible { filter: brightness(1.08); transform: translateY(-2px); outline: none; }
.ruler.is-fina a:focus-visible { box-shadow: inset 0 0 0 3px var(--rf); }
/* Estreito demais para treze numa linha: aí sim quebra em fileiras, e quebra parelho. */
@media (max-width: 900px) {
  .ruler.is-fina ol { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .ruler.is-fina a { min-height: 68px; }
}
@media (max-width: 520px) { .ruler.is-fina ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .ruler.is-fina a { transition: none; } .ruler.is-fina a:hover { transform: none; } }

/* ---------- Iniciativas: o que Hamilton e Marcos criaram fora do palco ----------
   Três histórias longas, uma embaixo da outra, em coluna de leitura. Não são cartões de
   navegação: são textos para ler. Por isso a largura é de texto, não de grade, e o que
   separa uma da outra é um fio, não uma caixa. */
.view-hamilton .inic-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.6rem; }
.view-hamilton .inic { max-width: 62ch; padding-top: 2.2rem; border-top: 2px solid var(--tinta); }
.view-hamilton .inic:first-child { padding-top: 0; border-top: 0; }
.view-hamilton .inic-q { margin: 0 0 .35rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--semente); }
.view-hamilton .inic h3 { font-family: var(--f-display); font-weight: 850; font-stretch: 76%; font-size: var(--fs-2xl); line-height: .92; letter-spacing: -.02em; margin: 0 0 .5rem; }
.view-hamilton .inic-l { font-size: var(--fs-md); line-height: 1.35; color: var(--tinta); margin: 0 0 1rem; }
.view-hamilton .inic p + p { margin-top: .8rem; }
.view-hamilton .inic-links { margin-top: 1.2rem; }
@media (min-width: 1000px) {
  .view-hamilton .inic-lista { gap: 3.2rem; }
  .view-hamilton .inic h3 { font-size: var(--fs-3xl); }
}

/* ---------- Iniciativas: as imagens ----------
   Cada história ganha uma imagem no alto. A do Cultura em Conjunto e a do Auditório são
   cenas, e vão largas; a capa do Brasilianos é um objeto, um disco, e por isso não é
   esticada: fica no tamanho de um encarte, com o fundo escuro em volta. Toda legenda traz
   o crédito, que numa delas é obrigatório por licença. */
.view-hamilton .inic-capa, .view-hamilton .inic-foto { margin: 0 0 1.4rem; }
.view-hamilton .inic-foto { margin: 1.6rem 0; }
.view-hamilton .inic-capa img, .view-hamilton .inic-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 14px; background: var(--noite-2); }
.view-hamilton .inic-capa.is-disco { max-width: 330px; }
.view-hamilton .inic-capa.is-disco img { aspect-ratio: auto; border-radius: 6px; box-shadow: 0 10px 30px rgba(26, 21, 18, .22); }
.view-hamilton .inic-capa figcaption, .view-hamilton .inic-foto figcaption { margin-top: .55rem; font-size: var(--fs-sm); color: var(--tinta-2); }
.view-hamilton .inic-capa figcaption span, .view-hamilton .inic-foto figcaption span { display: block; font-size: var(--fs-xs); color: var(--semente); }

/* O selo da palheta amarela ao lado do nome da HHTV: ele era pequeno em 2008 e continua pequeno. */
.view-hamilton .inic-h-selo { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.view-hamilton .hh-selo { width: 54px; height: auto; border-radius: 6px; }

/* Os episódios: seis quadros que ainda tocam. É a própria HHTV mostrando o que ela era. */
.view-hamilton .hh-ep-t2 { margin: 1.6rem 0 .7rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--semente); }
.view-hamilton .hh-eps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.view-hamilton .hh-eps a { display: grid; gap: .3rem; text-decoration: none; color: inherit; }
.view-hamilton .hh-eps img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: var(--noite-2); transition: transform 180ms var(--ease); }
.view-hamilton .hh-eps a:hover img, .view-hamilton .hh-eps a:focus-visible img { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(26, 21, 18, .2); }
.view-hamilton .hh-ep-t { font-weight: 700; font-size: var(--fs-sm); line-height: 1.15; }
.view-hamilton .hh-ep-d { font-size: var(--fs-xs); color: var(--tinta-2); line-height: 1.2; }
.view-hamilton .inic-links { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (prefers-reduced-motion: reduce) { .view-hamilton .hh-eps img { transition: none; } .view-hamilton .hh-eps a:hover img { transform: none; } }

/* ---------- O Trio com rosto, um a um ----------
   A foto do grupo abre a seção e conta o conjunto; ela não diz quem é quem. Cada integrante
   ganha o seu retrato acima do nome — mesmo peso para os três, na ordem em que tocam. */
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .member .mb-ph { margin: 0 0 .7rem; }
:is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .member .mb-ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-radius: 14px; background: var(--noite-2); }
@media (max-width: 760px) {
  :is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .member { grid-template-columns: 96px minmax(0, 1fr); column-gap: 1rem; }
  :is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .member .mb-ph { grid-row: 1 / 4; margin-bottom: 0; }
  :is(.view-novo, .view-projetos, .view-baile, .view-quinteto, .view-choro, .view-bandolim, .view-dois-de-ouro) .member .mb-ph img { aspect-ratio: 1; border-radius: 12px; }
}

/* ---------- O nome do lugar viajando com a bola ----------
   A etiqueta cola no ponto que atravessa o mapa. Fica acima e à direita dele, com uma
   sombra que a segura sobre qualquer fundo, e não intercepta clique nenhum. */
.view-mapa .mp-etiq {
  position: absolute; margin: 0; z-index: 3; pointer-events: none;
  transform: translate(14px, -50%);
  padding: .3rem .7rem; border-radius: 999px; white-space: nowrap;
  background: rgba(18, 17, 16, .88); border: 1.5px solid rgba(255, 255, 255, .22);
  color: var(--claro); font-family: var(--f-display); font-weight: 850; font-stretch: 84%;
  font-size: var(--fs-base); line-height: 1.1; letter-spacing: -.01em;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.view-mapa .mp-etiq.is-partida { border-color: var(--laranja); }
.view-mapa .mp-etiq.is-indo { border-color: #F4C542; }
.view-mapa .mp-etiq.is-chegou { border-color: #7FE7D6; }
@media (max-width: 640px) { .view-mapa .mp-etiq { font-size: var(--fs-sm); padding: .25rem .6rem; transform: translate(11px, -50%); } }

/* A ficha em box: mesmo tamanho e mesma borda dos blocos de gente, sem o disco de iniciais —
   um selo ou uma data de gravação não tem rosto, e inventar um seria ruído. */
.view-novo .guest.is-ficha { display: grid; align-content: start; gap: .35rem; }
.view-novo .guest.is-ficha .ins { color: var(--semente); font-weight: 700; font-size: var(--fs-sm); }
.view-novo .guest.is-ficha p { font-size: var(--fs-base); line-height: 1.4; margin: 0; }

/* ---------- As quatro portas abrem a página ----------
   A pergunta "qual é o seu evento?" era uma seção inteira na terceira tela, depois dos
   contatos e do calendário — quem chega para contratar decidia tarde demais. As portas
   sobem para a abertura, e a aba que só apontava para as vizinhas deixou de existir.
   O hero do Contrate usa a cor da seção (amarelo), então a porta é um cartão de tinta,
   que é o contraste mais forte que existe sobre ela; a de senha fica em papel, porque é a
   única que leva a um lugar fechado. Sem cor de seção o fundo é noite, e aí a porta vira
   contorno, para não ser escuro sobre escuro. */
.view-contrate .ct-abre .ct-triage { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .7rem; margin-top: .6rem; }
.view-contrate .ct-abre .ct-door { align-content: start; }
/* A porta de senha é a única que leva a um lugar fechado: continua em papel, clara, mesmo
   quando as outras três viram cartões de tinta dentro do hero colorido. */
body.sec-color.has-sec .view-contrate .ct-abre .ct-door.is-code { background: var(--papel); color: #1A1512; }
body.sec-color.has-sec .view-contrate .ct-abre .ct-door.is-code:hover { background: #FFFFFF; }
body:not(.has-sec) .view-contrate .ct-abre .ct-door { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .22); }
body:not(.has-sec) .view-contrate .ct-abre .ct-door.is-code { background: var(--papel); border-color: var(--papel); }
.view-contrate .ct-abre .lede { max-width: 62ch; }
@media (max-width: 760px) { .view-contrate .ct-abre .ct-triage { grid-template-columns: 1fr; } }

/* Bandolim solidário: as edições ano a ano. Cada ano abre sozinho, para a lista
   inteira não tomar a página de quem só quer ler a história do projeto. */
.view-hamilton .hh-sol-palcos li { list-style: none; margin-left: -1.1rem; }
.view-hamilton .hh-sol-nota { font-size: var(--fs-sm); opacity: .72; margin-top: -.3rem; }
.view-hamilton .hh-sol-eds { display: grid; gap: 0; border-top: 1px solid rgba(18,17,16,.18); margin-top: .3rem; }
.view-hamilton .hh-sol-ed { border-bottom: 1px solid rgba(18,17,16,.18); }
.view-hamilton .hh-sol-ed > summary { cursor: pointer; padding: .62rem .2rem; display: flex; gap: .7rem; align-items: baseline; list-style: none; }
.view-hamilton .hh-sol-ed > summary::-webkit-details-marker { display: none; }
.view-hamilton .hh-sol-ed > summary::after { content: "+"; margin-left: auto; opacity: .5; font-weight: 700; }
.view-hamilton .hh-sol-ed[open] > summary::after { content: "–"; }
.view-hamilton .hh-sol-ed > summary:hover { background: rgba(18,17,16,.04); }
.view-hamilton .hh-sol-ano { font-family: var(--f-display); font-weight: 850; font-stretch: 80%; font-size: var(--fs-lg); line-height: 1; min-width: 3.6rem; }
.view-hamilton .hh-sol-casa { opacity: .8; }
.view-hamilton .hh-sol-ed > p { margin: 0 0 .85rem; padding-left: 4.3rem; font-size: var(--fs-sm); }
@media (max-width: 560px) {
  .view-hamilton .hh-sol-ed > summary { flex-wrap: wrap; gap: .1rem .6rem; }
  .view-hamilton .hh-sol-ed > p { padding-left: 0; }
}

/* Um documento que prova o que o texto diz. Fica pequeno: é prova, não ilustração. */
.view-hamilton .parc-doc { margin: .9rem 0 0; max-width: 21rem; }
.view-hamilton .parc-doc img { width: 100%; height: auto; display: block; border: 1px solid rgba(18,17,16,.18); border-radius: 6px; background: #fff; }
.view-hamilton .parc-doc figcaption { font-size: var(--fs-sm); opacity: .75; margin-top: .45rem; }
.view-hamilton .parc-doc figcaption span { display: block; opacity: .75; }

/* A fala do Wynton sobre Marcos: voz de fora, por isso não usa o estilo da fala do Hamilton. */
.view-hamilton .parc-wynton { margin: clamp(1.6rem, 3vw, 2.4rem) 0 .8rem; padding: 0 0 0 1.2rem; border-left: 3px solid var(--laranja); max-width: 52ch; }
.view-hamilton .parc-wynton p { font-family: var(--f-display); font-weight: 650; font-stretch: 90%; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.22; margin: 0; }
.view-hamilton .parc-wynton cite { display: block; margin-top: .6rem; font-style: normal; font-size: var(--fs-sm); opacity: .72; }
.view-hamilton .parc-wynton-ctx { max-width: 58ch; font-size: var(--fs-sm); opacity: .85; margin: 0 0 .4rem; }

/* Portinari: as cinco abas de dentro. A barra é de texto, não de cartões: ela divide
   o conteúdo sem competir com o título da seção nem com as abas da seção inteira. */
.view-hamilton .pt-abas { display: flex; flex-wrap: wrap; gap: .1rem 1.4rem; margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 0; border-bottom: 2px solid var(--tinta); padding-bottom: .1rem; }
.view-hamilton .pt-abas button { appearance: none; background: none; border: 0; padding: .5rem 0 .55rem; margin-bottom: -2px; cursor: pointer; font: inherit; font-family: var(--f-display); font-weight: 800; font-stretch: 85%; font-size: var(--fs-md); color: inherit; opacity: .55; border-bottom: 3px solid transparent; }
.view-hamilton .pt-abas button:hover { opacity: .85; }
.view-hamilton .pt-abas button[aria-selected="true"] { opacity: 1; border-bottom-color: var(--laranja); }
.view-hamilton .pt-painel { margin: 1.4rem 0 0; max-width: 62ch; display: grid; gap: .85rem; }
.view-hamilton .pt-painel > h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.view-hamilton .pt-lede { font-size: var(--fs-sm); opacity: .7; margin: 0; }
.view-hamilton .pt-fala { margin: .4rem 0; padding-left: 1.1rem; border-left: 3px solid rgba(18,17,16,.25); }
.view-hamilton .pt-fala p { font-family: var(--f-display); font-weight: 650; font-size: var(--fs-lg); line-height: 1.24; margin: 0; }
.view-hamilton .pt-fala cite { display: block; margin-top: .45rem; font-style: normal; font-size: var(--fs-sm); opacity: .7; }
.view-hamilton .pt-cta { margin-top: .6rem; }

.view-hamilton .pt-decisoes { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid rgba(18,17,16,.18); }
.view-hamilton .pt-decisoes li { display: grid; grid-template-columns: 8.5rem 1fr; gap: .2rem 1rem; padding: .85rem 0; border-bottom: 1px solid rgba(18,17,16,.18); }
.view-hamilton .pt-decisoes .q { font-size: var(--fs-sm); opacity: .65; padding-top: .15rem; }
.view-hamilton .pt-decisoes b { font-family: var(--f-display); font-weight: 800; font-stretch: 85%; font-size: var(--fs-md); }
.view-hamilton .pt-decisoes p { margin: .15rem 0 0; }
@media (max-width: 560px) { .view-hamilton .pt-decisoes li { grid-template-columns: 1fr; } }

.view-hamilton .pt-painel { max-width: 62ch; }
.view-hamilton #discos.pt-painel { max-width: 46rem; }
.view-hamilton .pt-tab-wrap { overflow-x: auto; }
.view-hamilton .pt-tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.view-hamilton .pt-tabela th { text-align: left; font-family: var(--f-display); font-weight: 800; font-stretch: 85%; border-bottom: 2px solid var(--tinta); padding: .4rem .7rem .4rem 0; }
.view-hamilton .pt-tabela td { padding: .5rem .7rem .5rem 0; border-bottom: 1px solid rgba(18,17,16,.15); vertical-align: top; }
.view-hamilton .pt-tabela td:first-child { opacity: .65; white-space: nowrap; }
.view-hamilton .pt-tabela td:nth-child(2) { font-weight: 600; }
.view-hamilton .pt-sub { font-family: var(--f-display); font-weight: 800; font-stretch: 85%; font-size: var(--fs-md); margin: 1.4rem 0 0; }
.view-hamilton .pt-musicas { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .55rem; font-size: var(--fs-sm); }
.view-hamilton .pt-musicas li { display: grid; gap: .1rem; padding-bottom: .55rem; border-bottom: 1px solid rgba(18,17,16,.15); }
.view-hamilton .pt-musicas b { font-size: var(--fs-md); }
.view-hamilton .pt-musicas .pt-disco { opacity: .6; }
.view-hamilton .pt-premios { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid rgba(18,17,16,.18); }
.view-hamilton .pt-premios li { display: grid; grid-template-columns: 4.2rem 1fr; gap: .1rem .9rem; padding: .6rem 0; border-bottom: 1px solid rgba(18,17,16,.18); }
.view-hamilton .pt-premios .q { opacity: .6; font-size: var(--fs-sm); padding-top: .12rem; }
.view-hamilton .pt-premios b { font-family: var(--f-display); font-weight: 800; font-stretch: 85%; }
.view-hamilton .pt-premios span:not(.q) { display: block; font-size: var(--fs-sm); opacity: .75; }
.view-hamilton .pt-premios-ind li { padding: .42rem 0; }
.view-hamilton .pt-destaque { margin: .2rem 0 .3rem; padding: .85rem 1rem; background: var(--papel-2); border-left: 3px solid var(--laranja); border-radius: 0 10px 10px 0; }

/* A régua de cores da home sai no celular, a pedido do Marcos. Ela repete o que o menu
   já oferece, e numa tela estreita vira uma coluna de 13 faixas entre o visitante e o
   resto da página. Nas outras páginas e no desktop ela continua. */
@media (max-width: 760px) {
  .view-home .ruler { display: none; }
  .view-home .ruler-sec { display: none; } /* sem a régua, a seção virava uma faixa vazia de 22 px (auditoria 03/10) */
}

/* Cartão de vídeo sem miniatura: em vez da imagem quebrada, um bloco da cor da página
   com o triângulo de play. O cartão continua clicável e legível. */
.pj-vid .th.sem-th { background: linear-gradient(140deg, rgba(18,17,16,.82), rgba(18,17,16,.62)); }
.ct-vids .th.sem-th, .mi-vids .th.sem-th { background: linear-gradient(140deg, rgba(18,17,16,.82), rgba(18,17,16,.62)); }
/* A observação do cartão de vídeo: menor que o título, e só aparece quando existe. */
.pj-vid .nt, .ct-vids .nt, .pr-vids .nt { display: block; font-size: var(--fs-sm); opacity: .7; margin-top: .25rem; line-height: 1.3; }

/* ---------- Mídia · Séries ----------
   Texto da série de um lado, episódios do outro: numa tela estreita o texto vem primeiro e
   a lista desce inteira, porque a ordem de publicação é o que dá sentido ao conjunto. */
.md-series .ms-item { display: grid; gap: clamp(18px, 3vw, 34px); align-items: start; }
.md-series .ms-item + .ms-item { margin-top: clamp(28px, 5vw, 54px); padding-top: clamp(28px, 5vw, 54px); border-top: 1px solid rgba(255, 255, 255, .14); }
.md-series .ms-t { margin: .2em 0 .35em; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); line-height: 1.12; }
.md-series .ms-p { margin: 0 0 .9em; max-width: 46ch; color: rgba(255, 255, 255, .84); }
.md-series .ms-eps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.md-series .ms-ep { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center; width: 100%; padding: 6px; text-align: left; color: inherit; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; cursor: pointer; transition: background .18s, border-color .18s, transform .18s; }
.md-series .ms-ep:hover, .md-series .ms-ep:focus-visible { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); transform: translateY(-1px); }
.md-series .ms-th { position: relative; display: block; overflow: hidden; border-radius: 8px; aspect-ratio: 16 / 9; background: rgba(0, 0, 0, .35); }
.md-series .ms-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-series .ms-th .mv-noimg { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.1rem; opacity: .7; }
.md-series .ms-tx { display: block; min-width: 0; }
.md-series .ms-tx b { display: block; font-weight: 600; font-size: .95rem; line-height: 1.25; }
.md-series .ms-tx span { display: block; margin-top: .25em; font-size: .8125rem; color: rgba(255, 255, 255, .62); }
@media (min-width: 900px) {
  .md-series .ms-item { grid-template-columns: minmax(240px, 1fr) 2.1fr; }
  .md-series .ms-head { position: sticky; top: 90px; }
}

/* Miniatura que não carrega: a moldura fica, com o símbolo de play, e o cartão continua
   legível e clicável. Vale para os episódios de série e para os recortes de imprensa. */
.md-series .ms-th.sem-th::after,
.pr-clip-ph.sem-th::after { content: "\25b6"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.1rem; opacity: .5; }
.pr-clip-ph.sem-th { position: relative; min-height: 90px; background: rgba(0, 0, 0, .18); border-radius: 8px; }

/* Crédito da foto na ficha da pessoa: discreto, sobre o canto da imagem, mas legível.
   Foto de terceiro não vai ao ar sem nome de quem fez. */
.ps-cred { margin: .35em 0 0; font-size: .8125rem; opacity: .6; }

/* Quadro do rosto nos cartões de pessoa. A regra existia só na página do NOVA; nas outras
   cada foto valia pela própria proporção, e uma quadrada ficava mais baixa que uma retrato,
   deixando a fileira desalinhada. Agora o quadro é o mesmo em todo o site. */
.guest .g-ph { display: grid; place-items: center; aspect-ratio: 4 / 5; margin-bottom: .5rem; border-radius: 10px; overflow: hidden; background: rgba(0, 0, 0, .18); }
.guest .g-ph img { width: 100%; height: 100%; object-fit: cover; }
.guest .g-ph.is-empty { width: 56px; aspect-ratio: 1; margin: .5rem .5rem .3rem; border-radius: 50%; border: 1.5px dashed currentColor; background: none; opacity: .55; font-size: .9rem; letter-spacing: .04em; }

/* Cartão do luthier com foto: o retrato abre o cartão, em preto e branco, que é o que
   dá unidade a imagens vindas de cinco fontes diferentes. */
.view-bandolim .luthier.has-ph { padding-top: 0; overflow: hidden; }
.view-bandolim .luthier .lt-ph { display: block; margin: 0 -1.2rem .7rem; aspect-ratio: 4 / 5; overflow: hidden; background: rgba(0, 0, 0, .12); }
.view-bandolim .luthier .lt-ph img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.04); }
.view-bandolim .luthier .lt-cred { font-size: .8125rem; opacity: .5; }
.view-bandolim .luthier .lt-link { font-size: var(--fs-xs); margin-top: .1rem; }
@media (min-width: 1100px) { .view-bandolim .luthiers { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Capa de disco na linha do tempo: a moldura das fotos é 4:3 e cortava a arte pelo alto e
   pelo pé — na capa do NOVA sumia a base do ovo. Capa entra inteira, em moldura quadrada. */
:is(.view-agenda, .view-hamilton) .stop .ph.is-capa,
.view-hamilton .tl-item .ph.is-capa,
.view-hamilton .ph.is-capa { aspect-ratio: 1; background: var(--noite-3); }
:is(.view-agenda, .view-hamilton) .stop .ph.is-capa img,
.view-hamilton .ph.is-capa img { object-fit: contain; }

/* O Manifesto como foi impresso: o texto em caixa alta, em colunas estreitas, e as peças
   do folder ao lado. O documento é a prova; o site só o apresenta. */
.inic-doc { margin: 1.4rem 0 .6rem; }
.inic-doc-k { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin: 0 0 .6rem; }
.manifesto { margin: 0 0 1.2rem; padding: 1.2rem 1.4rem; border-left: 3px solid var(--semente); background: rgba(0, 0, 0, .04); border-radius: 0 12px 12px 0; }
.manifesto p { margin: 0 0 1em; font-size: .92rem; line-height: 1.5; letter-spacing: .01em; }
.manifesto p:first-child { font-weight: 700; }
.manifesto footer { margin-top: 1.2em; font-size: .85rem; opacity: .7; font-style: italic; }
.inic-pecas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.inic-pecas figure { margin: 0; }
.inic-pecas img { width: 100%; height: auto; display: block; border-radius: 10px; background: #fff; box-shadow: 0 2px 14px rgba(0, 0, 0, .14); }
.inic-pecas figcaption { font-size: var(--fs-xs); opacity: .7; padding-top: .4rem; line-height: 1.35; }

/* ---------- Caprichos: o acervo de estudo, dentro da página do disco ---------- */
.view-projetos .cp-texto { max-width: 62ch; display: grid; gap: .9rem; margin: 0 0 2.4rem; }
.view-projetos .cp-texto p { margin: 0; }
.view-projetos .cp-texto p:last-child { font-family: var(--f-display); font-weight: 700; font-size: .95rem; letter-spacing: .02em; }
.view-projetos .cp-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; counter-reset: none; }
.view-projetos .cp-item { border-top: 1px solid rgba(0,0,0,.14); padding-top: 1.1rem; display: grid; gap: .55rem; }
.view-projetos .cp-head { display: flex; align-items: center; gap: .8rem; }
.view-projetos .cp-play { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid currentColor;
  background: none; color: inherit; cursor: pointer; display: grid; place-items: center; font: inherit; }
.view-projetos .cp-play:hover, .view-projetos .cp-play:focus-visible { background: var(--laranja); border-color: var(--laranja); color: var(--noite); }
.view-projetos .cp-n { font-family: var(--f-display); font-weight: 800; font-size: .95rem; }
.view-projetos .cp-tx h3 { margin: 0; font-size: var(--fs-lg); }
.view-projetos .cp-form { margin: 0; font-size: .8125rem; opacity: .7; }
.view-projetos .cp-nota { margin: 0; max-width: 72ch; }
.view-projetos .cp-dls { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.view-projetos .cp-dl { display: inline-block; padding: .3rem .7rem; border: 1px solid currentColor; border-radius: 999px;
  font-size: .8125rem; text-decoration: none; color: inherit; }
.view-projetos .cp-dl:hover, .view-projetos .cp-dl:focus-visible { background: var(--noite); color: var(--papel); }
.view-projetos .cp-obs, .view-projetos .cp-extra small { font-size: .8125rem; opacity: .7; }
.view-projetos .cp-extra { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem .8rem;
  border-radius: 10px; background: rgba(0,0,0,.05); font-size: .82rem; }
.view-projetos .cp-extra b { font-weight: 700; }
@media (max-width: 640px) {
  .view-projetos .cp-extra { flex-direction: column; align-items: flex-start; }
}
.view-projetos .cp-obrigado { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(0,0,0,.14); max-width: 72ch; }
.view-projetos .cp-obrigado p:last-child { margin: .3rem 0 0; font-size: .9rem; opacity: .85; }
.view-choro .ch-def { max-width: 62ch; margin: 0 0 1.6rem; font-size: 1.02rem; opacity: .9; }

/* Grupos de carreira: o nome com o rosto ao lado. Quem não tem retrato fica com as iniciais,
   no mesmo círculo, para a coluna não dançar. */
.view-projetos .ec-list.is-gente li { display: grid; grid-template-columns: 2.1rem 1fr; grid-template-areas: "ph nome" "ph ins"; column-gap: .6rem; align-items: center; }
.view-projetos .ec-list.is-gente .ec-ph { grid-area: ph; width: 2.1rem; height: 2.1rem; border-radius: 50%; overflow: hidden; background: rgba(0,0,0,.08);
  display: grid; place-items: center; font-size: .8125rem; font-weight: 700; letter-spacing: .02em; opacity: .95; }
.view-projetos .ec-list.is-gente .ec-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.view-projetos .ec-list.is-gente .ec-ph.is-empty { opacity: .55; }
.view-projetos .ec-list.is-gente li b { grid-area: nome; }
.view-projetos .ec-list.is-gente li span:not(.ec-ph) { grid-area: ins; }
.view-projetos .cp-cta { margin: 0 0 1.8rem; }

/* Baile: a lista de convidados. Nome, rosto quando existe, e quando subiu ao palco. */
.view-baile .bl-guests { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.view-baile .bl-guest { border-top: 1px solid rgba(0,0,0,.12); padding-top: .5rem; }
.view-baile .bg-in { display: flex; align-items: center; gap: .6rem; }
.view-baile .bg-ph { flex: 0 0 auto; width: 2.3rem; height: 2.3rem; border-radius: 50%; overflow: hidden;
  background: rgba(0,0,0,.08); display: grid; place-items: center; font-size: .8125rem; font-weight: 700; }
.view-baile .bg-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.view-baile .bg-ph.is-empty { opacity: .5; }
.view-baile .bg-tx { display: grid; }
.view-baile .bg-tx b { font-size: .95rem; }
.view-baile .bg-when { font-size: .8125rem; opacity: .7; }
.view-projetos .pj-nota { grid-column: 2 / -1; margin: .35rem 0 0; font-size: .86rem; opacity: .85; max-width: 68ch; }

/* Âncora invisível deixada pelo HDH.fuse, para os links antigos continuarem chegando. */
.fuse-anchor { display: block; height: 0; scroll-margin-top: 0; }

/* Lista de créditos do NOVA sem itens não aparece (regra: vazio não aparece). */
#novoCredits:empty { display: none; }

/* Portinari: blocos que abrem e fecham pelo título (navegação simplificada, 04/10/2026). */
.view-hamilton .pt-acc { border-top: 1px solid var(--linha-clara, rgba(0,0,0,.14)); margin: 0; padding: 0; }
.view-hamilton .pt-acc:last-of-type { border-bottom: 1px solid var(--linha-clara, rgba(0,0,0,.14)); }
.view-hamilton .pt-acc h3 { margin: 0; }
.view-hamilton .pt-acc-bt { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; font: inherit; font-family: var(--f-display); font-weight: 800; font-stretch: 86%; font-size: var(--fs-xl); }
.view-hamilton .pt-acc-bt i { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid currentColor; position: relative; }
.view-hamilton .pt-acc-bt i::before, .view-hamilton .pt-acc-bt i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: currentColor; transform: translate(-50%, -50%); }
.view-hamilton .pt-acc-bt i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .15s; }
.view-hamilton .pt-acc-bt[aria-expanded="true"] i::after { transform: translate(-50%, -50%) rotate(0deg); }
.view-hamilton .pt-acc-bt:hover span { text-decoration: underline; text-decoration-color: var(--laranja); text-underline-offset: 4px; }
.view-hamilton .pt-acc-corpo { padding-bottom: 1.4rem; }
.view-hamilton .pt-painel.pt-acc { margin: 0; gap: 0; }
.view-hamilton .pt-painel.pt-acc > h3 { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
.view-hamilton .pt-acc-corpo { display: grid; gap: .85rem; }
.view-hamilton .pt-acc-corpo[hidden] { display: none; }
.view-hamilton #discos.pt-painel.pt-acc { max-width: 62ch; }

/* Aberturas com foto (Marcos, 04/10/2026: aberturas desiguais). Texto à esquerda, foto à direita,
   no mesmo desenho da abertura da página Hamilton. */
.page-hero.com-foto .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: end; }
.page-hero.com-foto .hero-tx { display: grid; gap: 1.1rem; align-content: end; }
.page-hero.com-foto .hero-ph { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 62vh; justify-self: end; width: 100%; }
.page-hero.com-foto .hero-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 899px) { .page-hero.com-foto .wrap { grid-template-columns: 1fr; } .page-hero.com-foto .hero-ph { max-width: 460px; justify-self: start; aspect-ratio: 4 / 3; } }
/* Onde a abertura já tem cartões à direita (Contrate, Mídia), a foto vai de fundo, escurecida. */
.page-hero.com-fundo, body.sec-color.has-sec .page-hero.com-fundo { position: relative; overflow: hidden; background: #0b0a09; color: #fff; }
.page-hero.com-fundo .hero-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero.com-fundo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.68) 55%, rgba(0,0,0,.5) 100%); }
.page-hero.com-fundo > .wrap { position: relative; z-index: 1; }
.page-hero.com-fundo h1, .page-hero.com-fundo .lede { color: #fff; }
.page-hero.com-fundo .eyebrow { color: var(--laranja); }

/* Moderno é tradição: no computador, a coluna da direita acompanha a leitura (vídeo ou foto do dia). */
@media (min-width: 900px) {
  .lema-in { align-items: start; }
  .lema-ph { position: sticky; top: 7rem; }
  .lema-ph.is-video .lema-vid { margin: 0; }
  .lema-ph.is-video .lema-vid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; display: block; }
}

/* "Sobre o disco": a capa (quando não há foto) entra quadrada; foto ou capa que só preenche o lado
   no computador não aparece no celular, onde a capa já está logo acima (Marcos, 05/10/2026). */
.view-projetos .concept .portrait.is-capa { aspect-ratio: 1 / 1; }
@media (max-width: 899px) { .view-projetos .concept .portrait.is-extra { display: none; } }

/* Loja: cartões do mesmo tamanho (Marcos, 05/10/2026). Texto até quatro linhas com "…", botão no pé;
   "Ler tudo" abre o texto inteiro numa janelinha. */
.view-loja .lj-tx { display: flex; flex-direction: column; gap: .35rem; }
.view-loja .lj-desc { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.view-loja .lj-mais { align-self: flex-start; background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--tinta); text-decoration: underline; text-decoration-color: var(--laranja); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.view-loja .lj-buy { margin-top: auto; padding-top: .6rem; }
dialog.lj-sheet { width: min(560px, calc(100% - 2rem)); }
.lj-sheet .sheet-body { padding: 1.6rem clamp(1.4rem, 4vw, 2.2rem) 1.8rem; }
.lj-sheet .lj-tx { display: grid; gap: .5rem; }
.lj-sheet .lj-kind { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--laranja); }
.lj-sheet h3 { font-size: var(--fs-xl); line-height: 1.05; padding-right: 2rem; }
.lj-sheet .lj-meta { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); }
.lj-sheet .lj-desc { font-size: var(--fs-md, 1rem); line-height: 1.55; }
.lj-sheet .lj-buy { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .6rem; }
.lj-sheet .lj-price { font-family: var(--f-display); font-weight: 850; font-size: var(--fs-lg); }
/* Documento na linha do tempo (página de prova, recorte de jornal): aparece inteiro, sem corte. */
.view-hamilton .moment .ph.is-doc { aspect-ratio: auto; max-width: 340px; background: #fff; }
.view-hamilton .moment .ph.is-doc img { height: auto; object-fit: contain; }

/* Quem toca em quatro blocos (Marcos, 06/10/2026): Grupo, Convidados, Músicos, Equipe. Os quatro títulos
   são do mesmo tamanho; Arranjos, Orquestra e as famílias da Equipe ficam um degrau abaixo. */
.view-projetos #quem-toca .who-h { font-size: var(--fs-xl); margin: clamp(2.6rem, 5vw, 3.6rem) 0 1rem; padding-top: 1rem; border-top: 2px solid var(--tinta); }
.view-projetos #quem-toca .pj-who-tit + .who-h, .view-projetos #quem-toca .who-h:first-of-type { margin-top: 0; }
.view-projetos #quem-toca .who-sub { font-size: var(--fs-md); font-family: var(--f-display); font-weight: 800; font-stretch: 84%; margin: 1.8rem 0 .8rem; }
.view-projetos #quem-toca .who-ficha { margin-top: 1rem; }
@media (min-width: 1100px) { .view-projetos #quem-toca.sec-ed .who-ficha, .view-projetos #quem-toca.sec-ed #pjGente .guests { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
/* Compilação: a lista de onde vem cada faixa. */
.view-projetos .pj-origem { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.view-projetos .pj-origem li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--linha-clara, rgba(0,0,0,.12)); }
.view-projetos .pj-origem .n { font-variant-numeric: tabular-nums; opacity: .6; }
.view-projetos .pj-origem .t { font-weight: 600; }
@media (max-width: 640px) { .view-projetos .pj-origem li { grid-template-columns: 2rem minmax(0, 1fr); } .view-projetos .pj-origem .textlink { grid-column: 2; } }

/* Mídia › Flyers: carrossel (vários por tela no computador, um no celular) e pop-up grande. */
.view-midia .fl-car { position: relative; }
.view-midia .fl-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; list-style: none; margin: 0; padding: 0 0 .5rem; scrollbar-width: none; outline: none; }
.view-midia .fl-track::-webkit-scrollbar { display: none; }
.view-midia .fl-item { flex: 0 0 calc((100% - 3rem) / 4); scroll-snap-align: start; min-width: 0; }
@media (max-width: 1099px) { .view-midia .fl-item { flex-basis: calc((100% - 1rem) / 2); } }
@media (max-width: 599px) { .view-midia .fl-item { flex-basis: 100%; } }
.view-midia .fl-item button { display: block; width: 100%; padding: .6rem; border: 0; border-radius: 12px; background: var(--papel-2); cursor: zoom-in; }
.view-midia .fl-item img { display: block; width: 100%; height: clamp(300px, 46vh, 440px); object-fit: contain; }
.view-midia .fl-item p { margin: .55rem 0 0; font-size: var(--fs-sm, .85rem); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.view-midia .fl-car .lb-nav { top: calc(50% - 2.2rem); z-index: 2; }
.fl-box .lb-stage img { max-height: 64vh; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; }

/* Flyers: fileira de miniaturas embaixo do carrossel (rola de lado; a página não). */
.view-midia .fl-thumbs { display: flex; gap: .4rem; overflow-x: auto; padding: .9rem 0 .4rem; margin-top: .4rem; scrollbar-width: thin; }
.view-midia .fl-thumbs button { flex: 0 0 auto; width: 56px; height: 78px; padding: 0; border: 2px solid transparent; border-radius: 6px; background: var(--papel-2); cursor: pointer; overflow: hidden; opacity: .72; }
.view-midia .fl-thumbs button:hover, .view-midia .fl-thumbs button:focus-visible { opacity: 1; }
.view-midia .fl-thumbs button[aria-current="true"] { border-color: var(--laranja); opacity: 1; }
.view-midia .fl-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 599px) { .view-midia .fl-thumbs button { width: 48px; height: 66px; } }

/* Blog: blocos do e-mail no fim do post (dica de música, Você sabia?, próximos shows). */
.view-blog .bg-extras { display: grid; gap: 1.6rem; margin-top: 2.6rem; padding-top: 2rem; border-top: 2px solid var(--tinta); max-width: 46rem; }
.view-blog .bg-extra .eyebrow { margin: 0 0 .7rem; }
.view-blog .bg-dica-in { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.view-blog .bg-dica-in img { width: 120px; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block; }
.view-blog .bg-dica h3 { font-size: var(--fs-xl, 1.6rem); margin: 0; }
.view-blog .bg-dica-disco { margin: .2rem 0 .6rem; color: var(--tinta-2); font-size: var(--fs-sm, .9rem); }
.view-blog .bg-dica-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.view-blog .bg-sabia { background: var(--papel-2); border-radius: 12px; padding: 1.1rem 1.2rem; }
.view-blog .bg-sabia p:not(.eyebrow) { margin: 0 0 .6rem; }
.view-blog .bg-shows-l { list-style: none; margin: 0 0 .8rem; padding: 0; border-top: 2px solid var(--tinta); }
@media (max-width: 520px) { .view-blog .bg-dica-in { grid-template-columns: 1fr; } .view-blog .bg-dica-in img { width: 96px; } }

/* Ligações do acervo: fileira "Do acervo" junto do acontecimento (mapa, Minha vida, Iniciativas, Quinteto). */
.ac-faixa { margin-top: .8rem; }
.ac-faixa .ac-t { margin: 0 0 .4rem; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }
.on-noite .ac-faixa .ac-t, .mp-ev .ac-faixa .ac-t { color: inherit; opacity: .75; }
.ac-mini { display: flex; flex-wrap: wrap; gap: .4rem; }
.ac-th { width: 54px; height: 74px; padding: 0; border: 1px solid var(--linha-clara, #CFCBC4); border-radius: 6px; overflow: hidden; background: var(--papel-2); cursor: zoom-in; }
.ac-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ac-th:hover, .ac-th:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
.ac-post { display: inline-block; margin-top: .5rem; }

/* =========================================================
   Menu no computador (Marcos, 09/10/2026: "Pode avançar com o Menu"; prévia do crítico de design).
   Lista numerada à esquerda, as páginas da seção numa coluna ao lado e a foto da seção na metade
   direita, de cima a baixo. No celular e no toque, nada muda. (O show do momento saiu do pé em
   15/10/2026: encavalava com a lista em telas baixas.)
   ========================================================= */
.menu-fotos { display: none; }
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  .menu:not([hidden]) { display: grid; grid-template-columns: minmax(620px, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .menu > .menu-top { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: none; }
  .menu > .menu-stage { grid-column: 1; grid-row: 2; width: 100%; max-width: none; margin: 0; min-height: 0; padding: clamp(1.2rem, 4vh, 2.4rem) 1.6rem 1.4rem var(--pad); }
  .menu-stage .menu-boneco { display: none; }
  .menu-list { max-width: none; }
  /* Em tela baixa a lista encolhe para caber entre o topo e as Redes, sem encavalar (Marcos, 15/10/2026):
     o termo do meio é a altura que sobra (topo, rodapé e margens: ~240px) dividida pelas linhas. */
  .mi-name { font-size: clamp(1.25rem, min(5.6vh, 3.6vw, calc((100vh - 240px) / 12)), 3.4rem); }
  .mi-panel { left: var(--mi-left, 45%); right: 1.6rem; width: auto; top: clamp(1.2rem, 4vh, 2.4rem); bottom: 1.4rem;
    display: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; align-content: start; gap: 0;
    padding: .6rem 0 0 1.5rem; border: 0; border-left: 1px solid var(--noite-3); border-radius: 0; background: none; overflow: auto; }
  .mi.is-active .mi-panel { display: grid; animation: miFade 220ms var(--ease) both; }
  .mi-k { margin-bottom: .7rem; color: var(--claro-2); }
  .mi-sub, .mi-sub.is-2col { grid-template-columns: minmax(0, 1fr); }
  .mi-sub a { margin-inline: 0; padding: .3rem 0; border-radius: 0; background: none; font-size: var(--fs-md); line-height: 1.3; }
  .mi-sub a:hover, .mi-sub a:focus-visible { background: none; color: var(--laranja); }
  .mi-groups { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mi-grp { gap: 0; }
  .mi-gh { margin: .9rem 0 .2rem; padding: .2rem 0; border-radius: 0; }
  .mi-grp:first-child .mi-gh { margin-top: 0; }
  .mi-gh:hover, .mi-gh:focus-visible { background: none; text-decoration: underline; text-underline-offset: .2em; }
  .mi-grp .mi-sub { border: 0; padding: 0; margin: 0; }
  /* Grupos e Parceiros: só o nome do grupo, que leva à lista inteira (a coluna não tem altura para todos). */
  .mi-grp:nth-child(n + 3) .mi-sub { display: none; }
  .mi-grp:nth-child(n + 3) .mi-gh { margin-top: .5rem; }
  .mi-go { margin-top: 1.1rem; border: 0; padding: 0; color: var(--laranja); font-size: var(--fs-md); }
  .mi-go:hover { color: var(--laranja-2); }
  .menu > .menu-foot { grid-column: 1; grid-row: 4; width: auto; max-width: none; margin: 0 1.6rem 0 var(--pad); padding: 1.1rem 0 1.4rem; }
  .menu-foot { gap: .6rem 1rem; }
  .menu-foot .link-row a { min-height: 36px; padding-inline: .6rem; font-size: var(--fs-xs); }
  .menu-foot .link-row a.brand-link { padding-left: .5rem; gap: .35rem; }
  /* A foto da seção */
  .menu-fotos { grid-column: 2; grid-row: 2 / 5; display: block; position: relative; min-height: 0; overflow: hidden; background: #000; }
  .menu-fotos .mf { position: absolute; inset: 0; opacity: 0; transition: opacity 350ms var(--ease); }
  .menu-fotos .mf.is-on { opacity: 1; }
  .menu-fotos .mf img { width: 100%; height: 100%; object-fit: cover; }
  .menu-fotos .foto-cred { right: 1rem; bottom: 1rem; z-index: 3; }
  .menu-fotos:hover > .foto-cred .fc-t { display: block; }
  .menu-fotos .menu-boneco-d { position: absolute; left: 1.6rem; bottom: 1.4rem; z-index: 3; }
  .menu-fotos .menu-boneco-d img { height: clamp(110px, 17vh, 150px); filter: drop-shadow(0 12px 22px rgba(0,0,0,.55)); }
  .menu-fotos .menu-boneco-d span { color: #FFFFFF; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
}
@keyframes miFade { from { opacity: 0; } }
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) and (max-height: 760px) {
  .mi-sub a { padding-block: .15rem; font-size: var(--fs-base); }
  .mi-gh { margin-top: .5rem; }
  .menu > .menu-foot { padding-block: .8rem 1rem; }
}
@media (prefers-reduced-motion: reduce) { .menu-fotos .mf { transition: none; } .mi.is-active .mi-panel { animation: none; } }

/* =========================================================
   Home compacta (Marcos, 09/10/2026: "PODE avançar com o HOME com os novos tamanhos"; prévia do crítico).
   Carrossel: as mesmas três telas, numa faixa baixa (~400 px no computador, ~460 no celular), texto de um
   lado e imagem do outro. Agenda: quatro datas, uma linha cada. Vídeos: um destaque e três miniaturas.
   ========================================================= */
.view-home .hero.hc .slide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); grid-template-rows: none; height: 344px; position: relative; }
.view-home .hero.hc .hc-nova { background: var(--laranja); color: var(--noite); --fg: var(--noite); }
.view-home .hero.hc .hc-show, .view-home .hero.hc .hc-news { background: var(--noite-2); color: var(--claro); --fg: var(--claro); }
.view-home .hero.hc .slide-text { grid-row: 1; grid-column: 1; align-content: center; gap: .85rem; min-width: 0; overflow: hidden;
  padding: 1.2rem clamp(1.5rem, 4vw, 3.5rem) 1.2rem max(clamp(1.5rem, 4vw, 3.5rem), calc((100vw - var(--wrap)) / 2 + var(--pad))); }
.view-home .hero.hc .slide-media { grid-row: 1; grid-column: 2; position: relative; inset: auto; min-height: 0; height: 100%; align-self: stretch; overflow: hidden; }
.view-home .hero.hc #showSlide { grid-row: 1; grid-column: 1; align-self: stretch; }
@media (max-width: 899px) { .view-home .hero.hc #showSlide { grid-row: 2; } }
.view-home .hero.hc .slide-media:not(.hc-capa) img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.view-home .hero.hc .slide-media::after { content: none; }
.view-home .hero.hc .slide-text .eyebrow { display: inline-flex; align-items: center; gap: .55rem; margin: 0; opacity: 1; }
.view-home .hero.hc .hc-show .eyebrow, .view-home .hero.hc .hc-news .eyebrow { color: var(--laranja-2); }
.view-home .hero.hc .slide-text h2 { margin: 0; max-width: 20ch; font-size: clamp(2.2rem, 4.2vw, 4rem); line-height: .95; font-stretch: 80%; letter-spacing: -.02em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.view-home .hero.hc .hc-nova h2 { font-size: clamp(4rem, 7.2vw, 6.5rem); line-height: .86; font-stretch: 78%; }
.view-home .hero.hc .slide-text p.lede { margin: 0; max-width: 40ch; font-size: var(--fs-md); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.view-home .hero.hc .slide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .2rem; }
.view-home .hero.hc .slide-actions .btn { margin: 0; }
/* NOVA (Marcos, 09/10/2026): primeiro "esse buraco laranja… coloque… + 1 foto como a que estava antes";
   depois "Duas fotos ficou poluido, mantem a foto do HAMILTON… extender o mesmo tom de cinza da foto… para a
   esquerda". Fica só a foto, à direita; o fundo da tela é o cinza quente da própria foto, de cima a baixo,
   e a borda esquerda da foto se desfaz nele. */
.view-home .hero.hc .hc-nova { --nova-cinza: linear-gradient(180deg, #423432 0%, #4A3A39 22%, #473736 42%, #3E302E 60%, #2E211D 82%, #2A1D19 100%);
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px); background: #3E302E var(--nova-cinza); color: var(--claro); --fg: var(--claro); }
.view-home .hero.hc .hc-nova .slide-text .eyebrow { color: var(--laranja-2); }
.view-home .hero.hc .hc-nova .hc-foto { grid-column: 2; }
.view-home .hero.hc .hc-nova .hc-foto::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 1; width: 22%; background: var(--nova-cinza); -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); pointer-events: none; }
@media (max-width: 899px) { .view-home .hero.hc .hc-nova .hc-foto { grid-column: 1; } .view-home .hero.hc .hc-nova .hc-foto::before { content: none; } }
/* NOVA: a capa inteira sobre o laranja */
.view-home .hero.hc .hc-capa { background: var(--laranja); overflow: hidden; }
.view-home .hero.hc .hc-capa img { position: absolute; inset: 0; margin: auto; width: auto; height: 82%; aspect-ratio: 1; object-fit: contain; transform: none; box-shadow: 0 18px 40px rgba(18,17,16,.28); }
/* Ao vivo */
.view-home .hero.hc .hc-when { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.view-home .hero.hc .hc-dd { margin: 0; font-family: var(--f-display); font-weight: 900; font-stretch: 72%; font-size: clamp(4rem, 6.4vw, 5.8rem); line-height: .82; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.view-home .hero.hc .hc-dd.is-intl { color: #8FB0F2; }
.view-home .hero.hc .hc-mm { margin: 0; flex: none; font-size: var(--fs-sm); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; }
.view-home .hero.hc .hc-when h2 { font-size: clamp(1.9rem, 3.4vw, 3.3rem); }
.view-home .hero.hc .hc-onde { margin: 0; font-size: var(--fs-md); color: var(--claro-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-home .hero.hc .hc-st { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border-radius: 999px; border: 1.5px dashed currentColor; font-size: var(--fs-sm); font-weight: 700; opacity: .8; }
/* Novidades */
.view-home .hero.hc .hc-news .slide-text { gap: .7rem; }
.view-home .hero.hc .hc-news .slide-text h2 { font-size: clamp(2rem, 3.2vw, 3rem); }
.view-home .hero.hc .hc-news .slide-text p.lede { -webkit-line-clamp: 2; }
.view-home .hero.hc .slide-text > * { min-height: min-content; }
.view-home .hero.hc .hc-news .slide-text h2 a { color: inherit; text-decoration: none; }
.view-home .hero.hc .hc-news .slide-text h2 a:hover { text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .12em; }
.view-home .hero.hc .hc-imp { margin: 0; max-width: 56ch; padding-top: .6rem; border-top: 1px solid rgba(255,255,255,.18); font-size: var(--fs-sm); color: var(--claro-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-home .hero.hc .hc-imp a { color: inherit; text-decoration: none; }
.view-home .hero.hc .hc-imp a:hover { color: var(--claro); text-decoration: underline; text-underline-offset: .2em; }
.view-home .hero.hc .hc-imp .ns-cat { color: var(--claro); }
.view-home .hero.hc .hc-news.no-photo .slide-text { grid-column: 1 / -1; }
.view-home .hero.hc .hero-bar .tab { min-height: 56px; }

/* Agenda e Vídeos */
.view-home .live.hc-live { padding-block: 2.8rem 3rem; }
.view-home .hc-live .eyebrow { margin: 0 0 .5rem; }
.view-home .hc-live #agenda > .eyebrow { color: var(--semente); }
.view-home .hc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.view-home .hc-head h2 { font-size: clamp(2.4rem, 3.9vw, 3.5rem); font-stretch: 80%; line-height: 1; }
.view-home .hc-more { flex: none; display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1.5px; }
.view-home .hc-more:hover { text-decoration-color: var(--laranja); }
.view-home .hc-shows { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(18,17,16,.18); }
.view-home .hc-shows li { border-top: 1px solid rgba(18,17,16,.18); }
.view-home .hc-row { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding-block: .95rem; color: inherit; text-decoration: none; }
.view-home .hc-d { display: grid; gap: .25rem; line-height: 1; }
.view-home .hc-d b { font-family: var(--f-display); font-weight: 900; font-stretch: 76%; font-size: 2.9rem; line-height: .9; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.view-home .hc-row.is-intl .hc-d b { color: var(--azul); }
.view-home .hc-d small { white-space: nowrap; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.view-home .hc-w { display: grid; gap: .15rem; min-width: 0; }
.view-home .hc-w b { font-family: var(--f-display); font-weight: 750; font-stretch: 88%; font-size: 1.35rem; line-height: 1.15; }
.view-home .hc-w span { font-size: var(--fs-base); color: var(--tinta-2); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-home .hc-row > .hc-st { max-width: 10em; font-size: var(--fs-xs); font-weight: 600; color: var(--tinta-2); text-align: right; line-height: 1.25; }
.view-home .hc-row:hover .hc-w b { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--laranja); text-underline-offset: .2em; }
.view-home .hc-row:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
.view-home .hc-vid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(120px, 10.5vw, 150px); gap: .7rem; align-items: start; }
.view-home .hc-thumbs { display: grid; gap: .5rem; align-content: start; }
.view-home .hc-thumbs .vt { aspect-ratio: 16 / 9; width: 100%; }
.view-home .hc-live .feat-meta { margin-top: .9rem; }
.view-home .hc-live .feat-meta h3 { min-height: 0; font-size: 1.35rem; font-stretch: 88%; line-height: 1.2; }

@media (max-width: 899px) {
  .view-home .hero.hc .slide { grid-template-columns: minmax(0, 1fr); grid-template-rows: 170px minmax(0, 1fr); height: 404px; }
  .view-home .hero.hc .slide-media { grid-row: 1; grid-column: 1; }
  .view-home .hero.hc .slide-text { grid-row: 2; grid-column: 1; align-content: start; gap: .55rem; padding: 1rem var(--pad) .8rem; }
  .view-home .hero.hc .hc-news.no-photo .slide-text { grid-row: 1 / -1; }
  .view-home .hero.hc .slide-text h2 { font-size: 2.1rem; }
  .view-home .hero.hc .hc-nova h2 { font-size: 3.75rem; }
  .view-home .hero.hc .hc-when { gap: .8rem; }
  .view-home .hero.hc .hc-dd { font-size: 3.4rem; }
  .view-home .hero.hc .hc-mm { font-size: var(--fs-2xs); }
  .view-home .hero.hc .hc-when h2 { font-size: 1.7rem; }
  .view-home .hero.hc .slide-text p.lede { font-size: var(--fs-sm); -webkit-line-clamp: 3; }
  .view-home .hero.hc .hc-onde { font-size: var(--fs-sm); }
  .view-home .hero.hc .hc-imp { display: none; }
  .view-home .hero.hc .hc-capa img { height: 86%; }
  .view-home .hero.hc .slide-actions .btn { min-height: 44px; padding-inline: 1rem; font-size: var(--fs-sm); }
  .view-home .hero.hc .btn-listen { min-height: 44px; font-size: var(--fs-sm); }
  .view-home .hero.hc .btn-listen .bl-ic { width: 38px; height: 38px; }
  .view-home .hero.hc .hc-st { min-height: 36px; font-size: var(--fs-xs); }
  .view-home .hero.hc #prev, .view-home .hero.hc #next { display: none; }
  .view-home .hero.hc .tab { padding-inline: .6rem; font-size: var(--fs-2xs); }
  .view-home .hero.hc .tab::before, .view-home .hero.hc .tab .bar { left: .6rem; right: .6rem; }
  .view-home .live.hc-live { padding-block: 0; }
  .view-home .live.hc-live #agenda { padding-block: 2rem 2.2rem; }
  .view-home .hc-head h2 { font-size: 2.6rem; }
  .view-home .hc-row { grid-template-columns: 3.9rem minmax(0, 1fr); gap: .1rem .9rem; padding-block: .75rem; align-items: start; }
  .view-home .hc-d b { font-size: 2rem; }
  .view-home .hc-row > .hc-st { grid-column: 2; max-width: none; text-align: left; }
  .view-home .hc-vid { grid-template-columns: minmax(0, 1fr); }
  .view-home .hc-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .view-home .live.hc-live #agenda { padding-block: 1.8rem 2rem; }
  .view-home .hc-row { padding-block: .65rem; }
  .view-home .hc-w b { font-size: 1.15rem; }
  .view-home .hc-w span { font-size: var(--fs-sm); }
  .view-home .live.hc-live #videos { padding-block: 1.6rem 1.8rem; }
  .view-home .hc-live .feat-meta { margin-top: .6rem; }
  .view-home .hc-live .feat-meta h3 { font-size: 1.05rem; }
  .view-home .hero.hc .hc-nova .slide-actions { flex-wrap: nowrap; gap: .5rem; }
  .view-home .hero.hc .hc-nova .slide-actions .btn { padding-inline: .85rem; white-space: nowrap; }
  .view-home .hero.hc .hc-nova .btn-listen { padding-right: .2rem; gap: .45rem; white-space: nowrap; }
  .view-home .hero.hc .hc-nova .btn-listen .bl-ic { width: 34px; height: 34px; }
  .view-home .hero.hc .hc-nova h2 { font-size: 3.4rem; }
}

/* =========================================================
   Acabamentos (Marcos, 09/10/2026: "1 sim", "2 sim / 3 ok / 4 ok / 6 ok / 7 ok"; prévia do crítico de design).
   ========================================================= */
/* 1. Abertura da Mídia: escuro só do lado do texto, para qualquer foto que entrar ali; no celular, de baixo para cima.
   A camada fica acima da foto (z-index), senão a foto, que vem depois na página, a cobria. */
/* Escuro só no pedaço do texto (Marcos, 09/10/2026: "tá demasiado de grande"); a foto nova já é escura desse lado. */
.page-hero.com-fundo.md-hero::before { z-index: 1; background: linear-gradient(90deg, rgba(12,11,10,.8) 0%, rgba(12,11,10,.45) 28%, rgba(12,11,10,0) 48%); }
@media (max-width: 899px) { .page-hero.com-fundo.md-hero::before { background: linear-gradient(0deg, rgba(12,11,10,.85) 0%, rgba(12,11,10,.4) 35%, rgba(12,11,10,0) 60%); } }
/* 2. Aviso das fotos sem autoria: no pé da página, discreto, acima de "Protótipo de conceito". */
.legal .aviso-acervo { flex: 0 0 100%; margin: 0; padding: 0; background: none; max-width: none; font-size: .8125rem; line-height: 1.5; color: var(--claro-2); }
.legal .aviso-acervo a { color: inherit; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
/* 3. Lista de faixas: o nome comum uma vez só, no alto; "Quem toca" vira um "+" redondo ao lado da duração. */
.view-projetos .pj-tracks .pj-um { display: grid; grid-template-columns: minmax(0, 1fr); gap: .2rem; }
.view-projetos .pj-tracks .pj-um .pj-todas { font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.view-projetos .pj-tracks .pj-um b { font-family: var(--f-display); font-weight: 750; font-stretch: 90%; font-size: var(--fs-md); letter-spacing: 0; text-transform: none; color: var(--claro); }
.view-projetos .pj-tracks .tt-t { min-width: 0; }
.view-projetos .pj-tracks .tt-d { flex: none; display: inline-flex; align-items: center; gap: .6rem; }
.view-projetos .pj-mais { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1.5px solid currentColor; background: none; color: var(--claro-2); font: 600 1.05rem/1 var(--f-body); cursor: pointer; transition: transform 200ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease); }
.view-projetos .pj-mais::before { content: ""; position: absolute; inset: -7px; }
.view-projetos .pj-mais { position: relative; }
.view-projetos .pj-mais:hover, .view-projetos .pj-mais:focus-visible { color: var(--laranja); border-color: var(--laranja); }
.view-projetos .pj-mais[aria-expanded="true"] { transform: rotate(45deg); color: var(--laranja); border-color: var(--laranja); }
.view-projetos .pj-who-p { grid-column: 2; margin: .2rem 0 .2rem; font-size: var(--fs-sm); line-height: 1.45; color: var(--claro-2); }
/* 4. Grades de capas: título sem sublinhado; fio laranja de 2 px ao passar o mouse ou com o foco. */
.view-musica a:has(> .ci), .view-musica a:has(img) { text-decoration: none; }
.view-musica a:has(> .ci) .at, .view-musica .album .at { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .22em; transition: text-decoration-color 150ms var(--ease); }
.view-musica a:has(> .ci):hover .at, .view-musica a:has(> .ci):focus-visible .at { text-decoration-color: var(--laranja); }
/* 6. Textos longos em Newsreader (títulos seguem em Archivo; botões, menus, agenda, cartões e rótulos em Hanken). */
:root { --f-leitura: "Newsreader", Georgia, "Times New Roman", serif; }
.view-projetos #pjSobre .pj-text, .view-projetos #pjReleaseText, .view-hamilton #bioText, .view-hamilton .moment .body p, .view-blog #bgReadBody {
  font-family: var(--f-leitura); font-optical-sizing: auto; font-size: clamp(1.125rem, 1.4vw, 1.25rem); line-height: 1.55; font-weight: 400; }
.view-projetos #pjSobre .pj-text :is(h3, h4, .eyebrow), .view-blog #bgReadBody :is(h2, h3, h4, .eyebrow, .btn, figcaption, small) { font-family: inherit; }
.view-blog #bgReadBody :is(.btn, button, figcaption) { font-family: var(--f-body); }
/* 7. Página da Agenda: o tipo do show em letra normal; a situação em cinza, sem pílula. */
.show-row .where .tipo { margin: .2rem 0 0; font-size: var(--fs-sm); line-height: 1.35; color: var(--tinta-2); }
.on-noite .show-row .where .tipo { color: var(--claro-2); }
.show-row .where .tipo.is-last { font-weight: 700; color: var(--semente); }
.show-row .act .soon { min-height: 0; padding: 0; border: 0; background: none; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tinta-2); }
.on-noite .show-row .act .soon { color: var(--claro-2); }

/* Contrate (Marcos, 09/10/2026: "1 sim"): o letreiro do alto da abertura sai em laranja, como o da Home.
   A foto (vix-plateia) já é escura e fica sem camada. A cor vai literal: no tema de seção, --laranja vira a cor da seção. */
body .view-contrate .ct-abre .wrap > div > .eyebrow:first-child, body .view-contrate .ct-abre > .wrap > .eyebrow { color: #FF6A00 !important; }
/* O mesmo na Mídia: o letreiro escuro sumia sobre a foto (09/10/2026). */
body .view-midia .md-hero .md-hero-text > .eyebrow { color: #FF6A00 !important; opacity: 1 !important; }

/* =========================================================
   Enciclopédia — MODO DE TESTE (body.enc; Marcos, 09/10/2026: "vamos testar sem trocar").
   Direções A (volumes) e D (índice) do crítico de design. Tudo aqui vale só com o modo ligado.
   ========================================================= */
.enc-lomb { display: none; }
/* A lombada (faixa colorida na beira esquerda) saiu: Marcos, 11/10/2026, "qualquer coisa suma com a faixa colorida". */
body.enc.has-vol .enc-lomb { display: none !important; }
/* O caminho, logo abaixo do cabeçalho */
body.enc .enc-path { background: var(--papel); color: var(--tinta); border-bottom: 1px solid var(--linha-clara); }
body.enc.enc-noite .enc-path { background: var(--noite); color: var(--claro); border-bottom-color: var(--noite-3); }
body.enc .enc-path .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; min-height: 48px; padding-block: .55rem; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; }
body.enc .enc-path a { color: inherit; text-decoration: none; opacity: .72; }
body.enc .enc-path a:hover, body.enc .enc-path a:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: .2em; }
body.enc .enc-path .ep-s { opacity: .5; }
body.enc .enc-path .ep-vol i { display: inline-block; width: 11px; height: 11px; margin-right: .5rem; background: var(--vol); vertical-align: -1px; }
body.enc .enc-path b { font-weight: 750; }
/* O número do volume no letreiro da abertura */
.enc-vrow { display: flex; align-items: center; gap: .75rem; margin-bottom: .2rem; }
.enc-vrow .eyebrow { margin: 0 !important; }
.enc-vnum { flex: none; display: inline-grid; place-items: center; min-width: 2.7em; height: 1.95em; padding: 0 .45em; background: var(--vol); color: var(--vol-fg); font: 900 1.1rem/1 var(--f-display); font-stretch: 80%; letter-spacing: 0; }
/* O "Voltar" igual em todas as páginas (sem a cor da seção: o cabeçalho com cor fica desligado no modo). */
/* Abas: só texto, com um fio de 3 px na cor do volume embaixo da aba aberta. */
body.enc :is(.who-tabs .who-tab, .ct-evtabs-row button) { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; color: inherit; opacity: .62; }
body.enc :is(.who-tabs .who-tab, .ct-evtabs-row button)::before, body.enc .who-tabs .who-tab::after { display: none !important; }
body.enc :is(.who-tabs .who-tab, .ct-evtabs-row button):hover { opacity: 1; }
body.enc :is(.who-tabs .who-tab, .ct-evtabs-row button)[aria-selected="true"] { opacity: 1; box-shadow: inset 0 -3px 0 var(--vol, var(--laranja)) !important; }
body.enc .who-tabs { gap: 1.1rem; border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
body.enc .who-tabs .who-tab { padding-inline: 0 !important; }
body.enc .who-tabs .who-tab[aria-selected="true"] .n { color: inherit; }
/* "Continue explorando" fica a régua de sempre também no modo de teste (Marcos, 09/10/2026: "Não gostei do menu de cores em alturas diferentes prefiro como estava"). */

/* D — o índice da enciclopédia, na Home */
.enc-indice { background: var(--noite); color: var(--claro); padding-block: clamp(3rem, 6vw, 4.6rem) clamp(3rem, 6vw, 4.6rem); border-top: 1px solid var(--noite-3); }
.enc-indice .ei-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1rem 2.5rem; margin-bottom: 2.2rem; }
.enc-indice h2 { font-size: clamp(3rem, 7vw, 6rem); font-stretch: 78%; line-height: .9; }
.enc-indice .ei-topo p { max-width: 26ch; font-family: var(--f-leitura); font-style: italic; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.4; color: var(--claro-2); }
.enc-indice .ei-grandes { list-style: none; margin: 0 0 2.6rem; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--claro); }
.enc-indice .ei-grandes li { padding: 1.1rem 1.1rem 0 0; }
.enc-indice .ei-grandes b { display: block; font-family: var(--f-display); font-weight: 900; font-stretch: 76%; font-size: clamp(3rem, 6.4vw, 5.8rem); line-height: .9; font-variant-numeric: tabular-nums; }
.enc-indice .ei-grandes span { display: block; margin-top: .4rem; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; color: var(--claro-2); }
.enc-indice .ei-vols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1.8rem; align-items: start; }
.enc-indice .ei-col { list-style: none; margin: 0; padding: 0; }
.enc-indice .ei-vols a { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: .9rem; padding: .85rem 0; border-top: 1px solid var(--noite-3); color: inherit; text-decoration: none; }
.enc-indice .ei-vols a::before { content: ""; grid-row: 1 / span 3; background: var(--c); }
.enc-indice .ei-n { font-size: .8125rem; font-weight: 700; letter-spacing: .12em; color: var(--claro-2); }
.enc-indice .ei-vols b { font-family: var(--f-display); font-weight: 800; font-stretch: 88%; font-size: 1.5rem; line-height: 1.1; }
.enc-indice .ei-l { font-size: var(--fs-sm); color: var(--claro-2); line-height: 1.35; }
.enc-indice .ei-vols a:hover b, .enc-indice .ei-vols a:focus-visible b { color: var(--laranja); }
.enc-indice .ei-vols a:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
@media (max-width: 1080px) { .enc-indice .ei-vols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .enc-indice .ei-grandes { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.4rem; } }
@media (max-width: 760px) { .enc-indice .ei-topo { grid-template-columns: 1fr; } .enc-indice .ei-vols { column-gap: 1.2rem; } .enc-indice .ei-grandes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .enc-indice .ei-vols b { font-size: 1.2rem; } }
@media (max-width: 420px) { .enc-indice .ei-vols { grid-template-columns: minmax(0, 1fr); } }
/* A — as aberturas no modo enciclopédia: sai o campo de cor (o cabeçalho com cor fica desligado);
   fundo papel, ou noite nas páginas de conteúdo escuro (Discografia, Mídia, discos). */
body.enc:not(.sec-color) :is(.page-hero, .hh-hero, .pl-hero):not(.com-fundo):not(.bl-hero-foto) {
  background: var(--papel); color: var(--tinta);
  --claro: #121110; --claro-2: #57534D; --noite-3: #CFCBC4; --linha-clara: #CFCBC4; }
body.enc.enc-noite:not(.sec-color) :is(.page-hero, .hh-hero, .pl-hero):not(.com-fundo):not(.bl-hero-foto) {
  background: var(--noite); color: #F2F1EE; --claro: #F2F1EE; --claro-2: #BDB8B0; --noite-3: #2A2724; --linha-clara: rgba(242,241,238,.22); }
/* Os cartões que moram dentro da abertura (próximo show, portas) seguem escuros, como no site. */
body.enc:not(.sec-color) .page-hero :is(.next, .door, .ct-door) { --claro: #F2F1EE; --claro-2: #BDB8B0; --noite-3: #2A2724; --tinta: #F2F1EE; background: #121110; color: #F2F1EE; }
/* Disco: sai o campo da cor da capa e o ano apagado ao fundo; a capa fica sobre o preto. O selo do Grammy continua. */
body.enc .view-projetos .pj-art { background: #0B0A09 !important; }
body.enc .view-projetos .pj-bigyear { display: none; }
/* O letreiro da abertura, legível no papel e na noite (o de hoje era claro, pensado para o campo de cor). */
body.enc:not(.sec-color) :is(.page-hero, .hh-hero, .pl-hero):not(.com-fundo):not(.bl-hero-foto) .enc-vrow .eyebrow { color: #57534D !important; opacity: 1 !important; }
body.enc.enc-noite:not(.sec-color) :is(.page-hero, .hh-hero, .pl-hero):not(.com-fundo):not(.bl-hero-foto) .enc-vrow .eyebrow { color: #BDB8B0 !important; }

/* Agenda › box do próximo show (Marcos, 09/10/2026): o rótulo maior e mais forte; com data em destaque,
   "Em destaque" e a foto do formato no alto do box, como na tela "Ao vivo" da Home. */
.view-agenda .next .next-k { margin: 0; font-family: var(--f-display); font-weight: 850; font-stretch: 82%; font-size: var(--fs-lg); line-height: 1; letter-spacing: -.01em; }
.view-agenda .next .next-ph { --np: clamp(1.3rem, 2.6vw, 2rem); margin: calc(-1 * var(--np)) calc(-1 * var(--np)) 0; height: clamp(150px, 16vw, 200px); border-radius: 18px 18px 0 0; overflow: hidden; }
.view-agenda .next .next-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Os três selos no menu (site todo). No computador: no canto de baixo da foto; no toque e no celular: no pé do menu. */
.menu-selos { display: flex; gap: .7rem; align-items: center; }
.menu-selos .bd-seal { position: static; width: 64px; flex: none; margin: 0; }
.menu-selos.is-foto, .menu-selos.is-meio { display: none; }
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  .menu-selos.is-pe { display: none; }
  /* Na área vazia da coluna das páginas, embaixo da lista (Marcos, 09/10/2026: "COLOCAR OS BOTOES NESSA AREA QUE É VAZIA"). */
  .menu-stage .menu-selos.is-meio { display: flex; position: absolute; left: calc(var(--mi-left, 45%) + 1.5rem); bottom: 1.4rem; gap: .9rem; z-index: 2; }
  .menu-stage .menu-selos.is-meio .bd-seal { width: clamp(72px, 6vw, 88px); }
  .mi-panel { bottom: calc(1.4rem + clamp(72px, 6vw, 88px) + 1rem) !important; }
  /* Para a coluna mais longa (Projetos) caber acima dos selos. */
  .mi-sub a { padding-block: .2rem; font-size: 1.1rem; }
  .mi-gh { margin-top: .6rem; }
  .mi-k { margin-bottom: .45rem; }
  .mi-go { margin-top: .7rem; }
}
@media not ((min-width: 1000px) and (hover: hover) and (pointer: fine)) { .menu-selos.is-pe { flex-basis: 100%; padding-top: .4rem; } }

/* Agenda › faixa "Próximos shows" quando há data em destaque: o anúncio dessa data, sobre a foto do formato. */
.view-agenda .ag-abre.is-destaque::after { background: linear-gradient(180deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.82) 100%); }
.view-agenda .ag-abre.is-destaque .ag-abre-tx { gap: .7rem; padding-bottom: clamp(1.4rem, 4vw, 2.6rem); }
.view-agenda .ag-abre.is-destaque .eyebrow { display: inline-flex; align-items: center; gap: .55rem; }
.view-agenda .ag-abre .live-dot { width: 10px; height: 10px; border-radius: 50%; background: #FF3B30; }
.view-agenda .ag-dest-quando { display: flex; align-items: center; gap: 1rem; margin: 0; }
.view-agenda .ag-dest-quando b { font-family: var(--f-display); font-weight: 900; font-stretch: 72%; font-size: clamp(4rem, 9vw, 7.5rem); line-height: .8; letter-spacing: -.04em; }
.view-agenda .ag-dest-quando span { font-size: var(--fs-sm); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; }
.view-agenda .ag-dest-t { margin: 0; font-family: var(--f-display); font-weight: 850; font-stretch: 80%; font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: .92; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.view-agenda .ag-dest-onde { margin: 0; font-size: var(--fs-md); color: rgba(255,255,255,.85); }
.view-agenda .ag-dest-bt { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .3rem; }
.view-agenda .ag-dest-st { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1.5px dashed rgba(255,255,255,.7); font-size: var(--fs-sm); font-weight: 700; }
/* Sem a cor da seção, a borda de baixo da abertura virava uma linha clara sob a foto (Marcos, 09/10/2026: "linha branca"). */
body.enc:not(.sec-color) :is(.page-hero, .hh-hero, .pl-hero) { border-bottom: 0; }
/* O "para voar" da Educacional é bege (pensado para o campo de cor): no papel, cinza escuro. */
body.enc:not(.sec-color) .view-educacional .ed-hero h1 span { color: #57534D; }
@media (min-width: 900px) {
  .view-agenda .ag-abre.is-destaque::after { background: linear-gradient(270deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.6) 40%, rgba(0,0,0,0) 62%); }
  .view-agenda .ag-abre.is-destaque .ag-abre-tx { width: 100%; justify-items: end; text-align: right; }
  .view-agenda .ag-abre.is-destaque .ag-abre-tx > * { max-width: 44%; }
  .view-agenda .ag-abre.is-destaque .ag-dest-quando, .view-agenda .ag-abre.is-destaque .ag-dest-bt { justify-content: flex-end; }
}

/* =========================================================
   Agenda: cores dos projetos (Marcos, 09/10/2026: "ok para suas escolhas"; as mesmas dos e-mails da agenda,
   HDH.CORES_PROJETO). A data vira o quadradinho de calendário do e-mail: barra preta com o mês, o dia grande no fundo
   da cor do projeto, o dia da semana embaixo, moldura escura fina.
   ========================================================= */
.view-agenda .show-row .date { display: grid; justify-items: stretch; width: 5rem; padding: 0; overflow: hidden; border: 1.5px solid #121110; border-radius: 6px; background: var(--pc, #7A5230); color: var(--pcf, #FFFFFF); text-align: center; }
.view-agenda .show-row .date .m { grid-row: 1; margin: 0; padding: .22rem 0 .2rem; background: #121110; color: #FFFFFF; font-size: .8125rem; letter-spacing: .1em; }
.view-agenda .show-row .date .d { grid-row: 2; padding: .35rem 0 .1rem; font-size: 2.1rem; color: inherit !important; }
.view-agenda .show-row .date .w { grid-row: 3; margin: 0; padding: 0 .2rem .35rem; white-space: nowrap; font-size: .8125rem; color: inherit; opacity: .92; }
.view-agenda .show-row .date-btn:hover .d { color: inherit; }
.view-agenda .show-row .date-btn:hover .date { box-shadow: 0 0 0 3px var(--laranja); }
.view-agenda .ps-head time { width: 5rem; padding: .4rem 0 .35rem; border: 1.5px solid #121110; border-radius: 6px; overflow: hidden; background: var(--pc, #7A5230); color: var(--pcf, #FFFFFF); text-align: center; }
.view-agenda .ps-head time b { color: inherit; }
.view-agenda .ps-head time span { color: inherit; opacity: .9; }
/* "Fora do Brasil": etiqueta discreta ao lado da cidade (o número azul saiu: o azul agora é o Trio). */
.show-row .city .fora { display: none; }
.view-agenda .show-row .city .fora { display: inline-flex; align-items: center; margin-left: .5rem; padding: .05rem .5rem; border: 1px solid currentColor; border-radius: 999px; font-family: var(--f-body); font-weight: 600; font-stretch: 100%; font-size: .8125rem; letter-spacing: 0; vertical-align: middle; opacity: .75; }
.view-agenda .ag-cor { display: inline-block; width: 11px; height: 11px; margin-right: .45rem; border-radius: 3px; background: var(--pc); vertical-align: 0; flex: none; }
.view-agenda .pv-q .ag-cor { margin-right: .5rem; border: 1px solid rgba(255,255,255,.25); }

/* Títulos das aberturas no mesmo tamanho grande (Marcos, 09/10/2026: "precisaria manter o padrão das grandes").
   O nome que não cabe numa linha quebra nos espaços, no mesmo tamanho; "Discografia" virou "Álbuns" no título
   da abertura (o menu e o caminho seguem "Discografia"). Ficam de fora, por ter uma palavra maior que a coluna:
   Quinteto ("Brasilianos"), Playlist ("enquanto") e o letreiro do Baile; e as páginas de disco (o título é o do álbum). */
:is(.view-musica .page-hero.com-foto, .view-projetos .ph-hero, .view-educacional .ed-hero, .view-choro .ch-hero, .view-bandolim .bd-hero, .view-mapa .mp-hero, .view-dois-de-ouro .do-hero) h1 {
  font-size: var(--fs-5xl); line-height: .82; letter-spacing: -0.03em; overflow-wrap: normal; }
.view-bandolim .bd-hero h1 { font-stretch: 74%; }
body.v2 .view-musica .page-hero.com-foto h1 { font-size: var(--fs-5xl); }   /* a regra antiga da Discografia (fs-3xl) vinha depois e era mais forte */

/* Agenda da Home: as datas no quadradinho de calendário da página da Agenda, em preto e branco (a cor do projeto
   aparece só na página da Agenda; Marcos, 09/10/2026). */
.view-home .hc-d.hc-cal { display: grid; gap: 0; width: 4.4rem; overflow: hidden; border: 1.5px solid #121110; border-radius: 6px; background: #FFFFFF; color: #121110; text-align: center; line-height: 1; }
.view-home .hc-cal .m { padding: .2rem 0 .18rem; background: #121110; color: #FFFFFF; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.view-home .hc-cal b { padding: .3rem 0 .05rem; font-size: 2.1rem; }
.view-home .hc-cal .w { padding: 0 .2rem .3rem; font-size: .8125rem; white-space: nowrap; }
.view-home .hc-row:has(.hc-cal) { grid-template-columns: 4.4rem minmax(0, 1fr) auto; }
@media (max-width: 899px) { .view-home .hc-row:has(.hc-cal) { grid-template-columns: 4.4rem minmax(0, 1fr); } .view-home .hc-cal b { font-size: 1.8rem; } }
.view-home .hc-row.is-intl .hc-cal b { color: #121110; }

/* Menu em tela baixa (até 820 px de altura): selos e páginas menores, para tudo caber. */
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) and (max-height: 820px) {
  .menu-stage .menu-selos.is-meio .bd-seal { width: 60px; }
  .mi-panel { bottom: calc(1.4rem + 60px + .8rem) !important; }
  .mi-sub a { padding-block: .1rem; font-size: 1rem; }
  .mi-gh { margin-top: .4rem; }
}

/* Projetos, no menu do computador: os formatos de "Em cartaz" (nomes curtos) em duas colunas, para a coluna caber
   acima dos selos. Se ainda não couber (tela baixa), os selos saem enquanto Projetos está aberto (.is-cheio). */
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  .mi[data-k="projetos"] .mi-grp:first-child .mi-sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .menu-stage.is-cheio .menu-selos.is-meio { display: none; }
  .menu-stage.is-cheio .mi-panel { bottom: 1.4rem !important; }
}

/* Agenda: a barra de filtros é também a legenda e fica presa no alto, logo abaixo do cabeçalho e da barra de seções
   (Marcos, 09/10/2026: "quando se começa a descer o cursor a pessoa já não sabe mais o que quer dizer as cores"). */
.view-agenda .wrap.has-rail > #filters, .view-agenda #filters {
  position: sticky; top: 128px; z-index: 20; display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center;
  margin: 1rem 0 0; padding: .7rem 0 .65rem; background: var(--papel); border: 0; border-bottom: 2px solid var(--tinta);
  box-shadow: 0 8px 12px -10px rgba(0,0,0,.3); overflow: visible; }
.view-agenda #filters .who-tab { display: inline-flex; align-items: center; gap: .45rem; min-height: 38px; margin: 0; padding: 0 .85rem !important;
  border: 1.5px solid #CFCBC4 !important; border-radius: 999px !important; background: var(--papel) !important; color: var(--tinta) !important;
  font-family: var(--f-body); font-weight: 700; font-size: .875rem; font-stretch: 100%; letter-spacing: 0; text-transform: none; transform: none !important; box-shadow: none !important; opacity: 1; }
.view-agenda #filters .who-tab::before, .view-agenda #filters .who-tab::after { display: none !important; }
.view-agenda #filters .who-tab .ag-cor { width: 12px; height: 12px; margin: 0; border-radius: 2px; }
.view-agenda #filters .who-tab:hover { border-color: var(--tinta) !important; }
.view-agenda #filters .who-tab[aria-selected="true"] { background: var(--tinta) !important; color: #FFFFFF !important; border-color: var(--tinta) !important; }
.view-agenda #filters .who-tab[aria-selected="true"] .ag-cor { box-shadow: 0 0 0 1.5px #FFFFFF; }
@media (max-width: 899px) {
  .view-agenda .wrap.has-rail > #filters, .view-agenda #filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); }
  .view-agenda #filters::-webkit-scrollbar { display: none; }
  .view-agenda #filters .who-tab { flex: none; }
}
/* O quadradinho traz o nome curto do projeto embaixo do dia; o dia da semana (e a hora) foi para a linha da cidade. */
.view-agenda .show-row .date .pj { grid-row: 3; margin: 0; padding: .1rem .15rem .35rem; font-size: .8125rem; font-weight: 800; letter-spacing: .06em; line-height: 1; white-space: nowrap; color: inherit; }
.view-agenda .show-row .city .quando { font-family: var(--f-body); font-weight: 600; font-stretch: 100%; font-size: var(--fs-sm); letter-spacing: 0; color: var(--tinta-2); }

/* =========================================================
   Aberturas com foto: FAIXA de cor na altura da Agenda (Marcos, 09/10/2026: "quando em HAMILTON tem esse bloco
   tão grande de cor realmente não fica legal mas eu achei boa quando tem uma faixa de cor"; "1 sim").
   Título grande à esquerda; a foto dentro da faixa, à direita, de ponta a ponta (sem cartão, sem canto, sem margem).
   No celular: a faixa com o título e, logo abaixo, a foto de ponta a ponta. Ficam como estão: Agenda, Blog e Loja
   (a referência), as páginas "mundo" (Home, Baile, Mídia, Contrate, NOVA) e as de disco.
   ========================================================= */
:is(.page-hero.com-foto, .hh-hero, .ch-hero, .ed-hero, .qt-hero, .do-hero, .pr-hero) { padding-block: 0; overflow-x: clip; }
:is(.page-hero.com-foto, .hh-hero, .ch-hero, .ed-hero, .qt-hero, .do-hero, .pr-hero) > .wrap:first-of-type :is(.hero-ph, .ph, .ch-photo, .ed-photo, .qt-ph, .do-ph, .pr-hero-wrap, .pr-hero-ph) { border-radius: 0 !important; box-shadow: none !important; }
@media (min-width: 900px) {
  :is(.page-hero.com-foto, .hh-hero, .ch-hero, .ed-hero, .qt-hero, .do-hero, .pr-hero) > .wrap:first-of-type {
    position: relative; display: grid; grid-template-columns: minmax(0, 60%) minmax(0, 1fr); align-items: end; gap: 0 2rem;
    min-height: 400px; padding-block: 2.4rem 2.6rem; }
  :is(.page-hero.com-foto, .hh-hero, .ch-hero, .ed-hero, .qt-hero, .do-hero, .pr-hero) > .wrap:first-of-type > :not(:is(.hero-ph, .ph, .ch-photo, .ed-photo, .qt-ph, .do-ph, .pr-hero-wrap)) { grid-column: 1; }
  :is(.page-hero.com-foto, .hh-hero, .ch-hero, .ed-hero, .qt-hero, .do-hero, .pr-hero) > .wrap:first-of-type > :is(.hero-ph, .ph, .ch-photo, .ed-photo, .qt-ph, .do-ph, .pr-hero-wrap) {
    position: absolute !important; top: 0 !important; bottom: 0 !important; left: 62% !important; right: calc(-1 * max(0px, (100vw - var(--wrap)) / 2)) !important;
    width: auto !important; max-width: none !important; max-height: none !important; height: auto !important; aspect-ratio: auto !important; margin: 0 !important; transform: none; justify-self: stretch !important; align-self: stretch !important; }
  :is(.page-hero.com-foto, .hh-hero, .ch-hero, .ed-hero, .qt-hero, .do-hero, .pr-hero) > .wrap:first-of-type > :is(.hero-ph, .ph, .ch-photo, .ed-photo, .qt-ph, .do-ph, .pr-hero-wrap) :is(img, .pr-hero-ph) {
    width: 100%; height: 100%; max-height: none; object-fit: cover; }
  :is(.page-hero.com-foto, .hh-hero, .ch-hero, .ed-hero, .qt-hero, .do-hero, .pr-hero) .lede { max-width: 36ch; }
}
@media (max-width: 899px) {
  :is(.page-hero.com-foto, .hh-hero, .ch-hero, .ed-hero, .qt-hero, .do-hero, .pr-hero) > .wrap:first-of-type { padding-top: 1.8rem; padding-bottom: 0; }
  :is(.page-hero.com-foto, .hh-hero, .ch-hero, .ed-hero, .qt-hero, .do-hero, .pr-hero) > .wrap:first-of-type > :is(.hero-ph, .ph, .ch-photo, .ed-photo, .qt-ph, .do-ph, .pr-hero-wrap) {
    width: auto; max-width: none; margin: 1.6rem calc(-1 * var(--pad)) 0; justify-self: stretch; aspect-ratio: 4 / 3; max-height: none; }
  :is(.page-hero.com-foto, .hh-hero, .ch-hero, .ed-hero, .qt-hero, .do-hero, .pr-hero) > .wrap:first-of-type > :is(.hero-ph, .ph, .ch-photo, .ed-photo, .qt-ph, .do-ph, .pr-hero-wrap) img { width: 100%; height: 100%; object-fit: cover; }
}
/* O acento do "Á" de "Álbuns" subia para dentro do letreiro de cima: um respiro acima do título. */
.view-musica .page-hero h1 { padding-top: .14em; }
/* Hamilton: a fileira de números sai da cor (a cor fica só na faixa) e vai para o fundo claro, logo abaixo
   (Marcos, 10/10/2026: "essa área precisa ser ou da cor acima em que está HH ou então deixar em branco"). */
.view-hamilton .hh-hero > .wrap:has(> .facts) { background: #F2F1EE; box-shadow: 0 0 0 100vmax #F2F1EE; clip-path: inset(0 -100vmax); border-bottom: 1px solid rgba(18,17,16,.14);
  color: #121110; --papel: #F2F1EE; --tinta: #121110; --tinta-2: #5C5650; --claro: #121110; --claro-2: #5C5650; --noite-3: rgba(18,17,16,.14); --linha-clara: rgba(18,17,16,.14); --linha: rgba(18,17,16,.14); }
/* O texto que não cabe na faixa desce para logo abaixo dela, em fundo claro (HDH.faixaAjusta move os nós; os ids continuam). */
.hero-mais { background: var(--papel); color: var(--tinta); border-bottom: 1px solid var(--linha); }
.hero-mais > .wrap { display: grid; gap: 1.1rem; padding-block: 1.8rem 2.2rem; }
.hero-mais .lede { max-width: 62ch; font-size: var(--fs-md); line-height: 1.5; color: var(--tinta); }

/* ===== 10/10/2026 — prints anotados do Marcos ===== */
/* A linha fina embaixo das fotos das faixas era a borda transparente da abertura deixando a cor aparecer. */
:is(.page-hero.com-foto, .hh-hero, .ch-hero, .ed-hero, .qt-hero, .do-hero, .pr-hero) { border-bottom: 0 !important; }

/* Agenda: o formato do show em letra grande, na cor do projeto com transparência, no espaço vazio da linha. */
.view-agenda .agenda-list .show-row .ag-fmt { display: none; }
@media (min-width: 1001px) {
  .view-agenda .agenda-list .show-row .where { grid-column: 2; }
  /* A coluna da direita com largura fixa: "Evento fechado" é mais curto que "Ingressos em breve" e desalinhava a palavra grande. */
  .view-agenda .agenda-list .show-row { grid-template-columns: 5.2rem minmax(0, 1.2fr) minmax(0, 1fr) 16rem; }
  .view-agenda .agenda-list .show-row .act { justify-self: end; }
  .view-agenda .agenda-list .show-row .ag-fmt { display: block; grid-column: 3; grid-row: 1; align-self: center; overflow-x: clip; overflow-y: visible; white-space: nowrap;
    font-family: var(--f-display); font-weight: 800; font-stretch: 75%; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.15;
    font-size: clamp(2.2rem, 4.2vw, 4.6rem); color: var(--pc, #7A5230); opacity: .28; pointer-events: none; user-select: none; }
  /* O azul-claro da Educacional some no fundo claro com a mesma transparência: um pouco mais forte. */
  .view-agenda .agenda-list .show-row .ag-fmt[style*="#7CC8EE"] { opacity: .5; }
}
.view-agenda #ultimos .pv-antes { margin-top: 2rem; }

/* Home: as datas com a cor do projeto, como na página da Agenda. */
.view-home .hc-d.hc-cal { background: var(--pc, #FFFFFF); color: var(--pcf, #121110); }
.view-home .hc-row.is-intl .hc-cal b { color: inherit; }
.view-home .hc-cal .w { font-weight: 800; letter-spacing: .06em; }
/* Home: mais quatro vídeos embaixo do título do destaque. */
.view-home .hc-thumbs2 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1rem; }
.view-home .hc-thumbs2[hidden] { display: none; }
@media (max-width: 600px) { .view-home .hc-thumbs2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Choro › Clube do Choro: na coluna estreita (a foto fica ao lado), três cartões por linha; foto e nome cabem no cartão. */
.view-choro .ch-people { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)) !important; }
.view-choro .ch-people .guest { min-width: 0; }
.view-choro .ch-people .guest .g-ph, .view-choro .ch-people .guest .g-ph img { max-width: 100%; }
.view-choro .ch-people .guest .nm { overflow-wrap: break-word; hyphens: manual; }

/* Mídia: a abertura fica só na cor da seção (Marcos, 10/10/2026: "uma foto particular que funcione dentro desse intervalo ou então só cor"). */
.view-midia:not(.is-sala) .page-hero.com-fundo.md-hero { background: var(--sec, #BE5CA9) !important; color: var(--sec-fg, #1A1512); }
.view-midia:not(.is-sala) .page-hero.com-fundo.md-hero::before, .view-midia:not(.is-sala) .md-hero .hero-fundo, .view-midia:not(.is-sala) .md-hero .foto-cred { display: none !important; }
body .view-midia:not(.is-sala) .md-hero .md-hero-text > .eyebrow { color: inherit !important; }
.view-midia:not(.is-sala) .md-hero :is(h1, .lede) { color: inherit !important; text-shadow: none !important; }
/* Imprensa: faixa de cor, como as outras aberturas, com a foto inteira do Hamilton à direita ("essa o hh está atrás do SA"). */
.view-midia.is-sala .page-hero.com-fundo.md-hero { background: var(--sec, #BE5CA9) !important; color: var(--sec-fg, #1A1512); padding-block: 0; min-height: 0; overflow-x: clip; }
.view-midia.is-sala .page-hero.com-fundo.md-hero::before { display: none !important; }
body .view-midia.is-sala .md-hero .md-hero-text > .eyebrow { color: inherit !important; }
.view-midia.is-sala .md-hero :is(h1, .lede) { color: inherit !important; text-shadow: none !important; }
@media (min-width: 900px) {
  .view-midia.is-sala .md-hero > .wrap { position: relative; display: block; min-height: 400px; padding-block: 2.4rem 2.6rem; }
  .view-midia.is-sala .md-hero .md-hero-text { max-width: 58%; }
  .view-midia.is-sala .md-hero .hero-fundo { position: absolute !important; inset: 0 0 0 62% !important; width: auto !important; height: 100% !important; object-fit: cover; object-position: 50% 35% !important; opacity: 1 !important; z-index: 0; }
}
@media (max-width: 899px) {
  .view-midia.is-sala .page-hero.com-fundo.md-hero { display: flex; flex-direction: column; }
  .view-midia.is-sala .md-hero > .wrap { order: 1; padding-block: 2rem 1.6rem; }
  .view-midia.is-sala .md-hero .hero-fundo { order: 2; position: static !important; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 35% !important; opacity: 1 !important; }
}

/* Imprensa › Biografia: abas de texto no lugar dos quatro botões iguais ("quem inventou isso? melhor mudar"). */
.view-midia .pr-card-head:has(#prBioSize) { display: block; }
.view-midia .pr-toggles { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: .6rem 2rem; margin-top: .9rem; border-bottom: 1px solid var(--linha); }
.view-midia .pr-tabs { display: flex; gap: 1.6rem; }
.view-midia .pr-tab { appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: .35rem 0 .55rem; font: inherit; font-weight: 700; font-size: var(--fs-md); color: var(--tinta-2); cursor: pointer; }
.view-midia .pr-tabs.is-lang .pr-tab { font-size: var(--fs-sm); letter-spacing: .08em; text-transform: uppercase; }
.view-midia .pr-tab[aria-pressed="true"] { color: var(--tinta); border-bottom-color: var(--laranja); }
.view-midia .pr-tab:hover { color: var(--tinta); }
.view-midia .pr-tab:focus-visible { outline: 2px solid var(--laranja); outline-offset: 3px; }
.view-midia .pr-bio { border: 0 !important; background: none !important; padding: 1.2rem 0 0 !important; font-family: var(--f-serif, "Newsreader", Georgia, serif); font-size: 1.1875rem; line-height: 1.6; max-width: 68ch; }
.view-midia .pr-actions { margin-top: 1rem; }
.view-midia .pr-words { display: none; }

/* Grupos: a pessoa inteira (foto e nome) abre a ficha dela. */
.view-projetos .ec-list.is-gente li.is-pessoa { position: relative; }
.view-projetos .ec-list.is-gente li.is-pessoa .ec-hit { position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.view-projetos .ec-list.is-gente li.is-pessoa:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; text-decoration-color: var(--laranja); }
.view-projetos .ec-list.is-gente li.is-pessoa .ec-hit:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; border-radius: 6px; }
/* Mídia e Imprensa: o nome do fotógrafo só aparece com o mouse sobre a foto ou no "i", não em qualquer ponto da abertura. */
.view-midia .md-hero.tem-cred:hover > .foto-cred .fc-t { display: none; }
.view-midia.is-sala .md-hero.tem-cred:has(.hero-fundo:hover) > .foto-cred .fc-t,
.view-midia .md-hero > .foto-cred:hover .fc-t, .view-midia .md-hero > .foto-cred.is-open .fc-t, .view-midia .md-hero > .foto-cred:focus-visible .fc-t { display: block; }
/* Almeidinha: de onde vem o texto da crônica (Marcos, 11/10/2026: "cadê o original?"). */
.view-baile .bl-alm-tx .bl-alm-orig { margin-bottom: 1.1rem; padding-left: .9rem; border-left: 3px solid var(--laranja); font-size: var(--fs-sm); color: var(--tinta-2); }

/* Abas = botões (Marcos, 11/10/2026: "em vez de a letra ficar laranja apareceria um botão laranja nos moldes de
   Contrate só que menor — que aí daria a sensação de abas"). Vale para toda fileira .who-tabs do site:
   a escolhida é um botão laranja cheio; as outras, contorno fino. */
.who-tabs { gap: .5rem !important; align-items: center; padding-bottom: .9rem !important; margin-bottom: .2rem; }
.who-tabs .who-tab { border: 1.5px solid color-mix(in srgb, var(--tinta) 35%, transparent) !important; border-radius: 999px !important;
  padding: .5rem 1.05rem .55rem !important; background: transparent !important; color: var(--tinta) !important; transform: none !important;
  box-shadow: none !important; font-size: var(--fs-sm) !important; line-height: 1.15; white-space: nowrap; }
.who-tabs .who-tab::after, .who-tabs .who-tab::before { display: none !important; }
.who-tabs .who-tab:hover { border-color: var(--laranja) !important; }
.who-tabs .who-tab[aria-selected="true"] { background: #FF6A00 !important; border-color: #FF6A00 !important; color: #121110 !important; }
.who-tabs .who-tab[aria-selected="true"] .n, .who-tabs .who-tab[aria-selected="true"] span { color: #121110 !important; opacity: .8; }
.who-tabs + .who-panel { margin-top: .4rem !important; border-radius: 16px !important; }
@media (min-width: 1100px) {
  .sec-rail .wrap.has-rail > .who-tabs { gap: .45rem !important; }
  .sec-rail .wrap.has-rail > .who-tabs .who-tab { white-space: normal; justify-content: flex-start; text-align: left; border-radius: 14px !important; }
}
/* Educacional: as partituras como um botão grande para a Loja, depois do menu de abas. */
.view-educacional #partituras.ed-part-cta { background: var(--sec, #2C7E7E); color: var(--sec-fg, #FFFFFF); padding-block: 2.4rem; }
.view-educacional #partituras.ed-part-cta .sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; margin: 0; }
.view-educacional #partituras.ed-part-cta :is(.eyebrow, h2) { color: inherit !important; }
.view-educacional #partituras.ed-part-cta .btn.orange { font-size: var(--fs-md); padding: 1rem 1.6rem; }

/* Barra de abas das seções (sec-tabs): na cor da seção e mais baixa (Marcos, 11/10/2026, página Hamilton: "nem essa preta
   serem tão largas, e onde é preto pode ficar legal usar a cor lilás aí de cima"); as abas viram botões, como as outras. */
body.has-sec .ct-evtabs.sec-tabs { background: var(--sec) !important; color: var(--sec-fg) !important; --claro: var(--sec-fg); }
.ct-evtabs.sec-tabs { padding-top: 1.3rem !important; padding-bottom: 1rem !important; }
.ct-evtabs.sec-tabs .eyebrow { margin-bottom: .55rem !important; color: inherit !important; opacity: .85; }
.ct-evtabs.sec-tabs .ct-evtabs-row { align-items: center !important; gap: .5rem !important; padding-top: 0 !important; }
.ct-evtabs.sec-tabs .ct-evtabs-row > button { min-height: 0 !important; padding: .5rem 1.05rem .55rem !important; border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent) !important; border-radius: 999px !important;
  background: transparent !important; color: inherit !important; box-shadow: none !important; font-size: var(--fs-sm) !important; }
.ct-evtabs.sec-tabs .ct-evtabs-row > button:hover { border-color: currentColor !important; }
.ct-evtabs.sec-tabs .ct-evtabs-row > button[aria-selected="true"] { background: #121110 !important; border-color: #121110 !important; color: #FFFFFF !important; }
body:not(.has-sec) .ct-evtabs.sec-tabs .ct-evtabs-row > button[aria-selected="true"] { background: #FF6A00 !important; border-color: #FF6A00 !important; color: #121110 !important; }
/* Hamilton: a fileira de números mais baixa. */
.view-hamilton .hh-hero > .wrap:has(> .facts) .fact { padding-block: 1.1rem !important; }
.view-hamilton .hh-hero > .wrap:has(> .facts) .facts { padding-block: 0 !important; margin-block: 0 !important; }
/* Home › Agenda: o projeto numa etiqueta da cor do quadradinho, embaixo do lugar. */
.view-home .hc-w .hc-pj { display: inline-block; justify-self: start; width: max-content; margin-top: .35rem; padding: .12rem .55rem .14rem; border-radius: 4px; background: var(--pc); color: var(--pcf);
  font-style: normal; font-weight: 800; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; }
/* Contrate › formato: a data em foco mostra, à direita, com quem ou qual é o projeto. */
.view-contrate .ct-dates-box { display: grid; gap: 1.2rem; }
.view-contrate .ct-dt-prev:empty { display: none; }
.view-contrate .ct-dt-prev { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.1rem; align-items: start; padding: 1rem; border: 1px solid var(--noite-3); border-radius: 14px; }
.view-contrate .ct-dt-prev:not(:has(.ct-dp-ph)) { grid-template-columns: minmax(0, 1fr); }
.view-contrate .ct-dp-ph img { width: 7.5rem; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
.view-contrate .ct-dp-tx { display: grid; gap: .3rem; min-width: 0; }
.view-contrate .ct-dp-k { justify-self: start; padding: .1rem .5rem; border-radius: 4px; background: var(--pc); color: var(--pcf); font-weight: 800; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.view-contrate .ct-dp-tx b { font-family: var(--f-display); font-weight: 800; font-stretch: 86%; font-size: var(--fs-lg); line-height: 1.05; }
.view-contrate .ct-dp-p, .view-contrate .ct-dp-v { font-size: var(--fs-sm); color: var(--claro-2, #BDB8B0); }
.view-contrate .ct-dp-tx p { margin: .2rem 0 0; font-size: var(--fs-sm); line-height: 1.45; }
@media (min-width: 1000px) {
  .view-contrate .ct-dates-box { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
}
/* Projetos › formato: "com quem" em cada data. */
.view-projetos .ec-list.is-datas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; }
.view-projetos .ec-list.is-datas .ec-com { grid-column: 1; grid-row: 2; font-style: normal; font-size: var(--fs-sm); color: var(--tinta-2); }
.view-projetos .ec-list.is-datas li > span { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.view-contrate .ct-fm-block:has(.ct-dates-box) { grid-column: 1 / -1; }
.view-contrate .ct-dt-prev .ct-dp-tx p { max-width: 60ch; }
/* Aberturas em faixa: os números (stats) voltam para a coluna do texto; estavam atrás da foto
   (Marcos, 11/10/2026: "porque não tem mais o total de álbuns????"). */
@media (min-width: 900px) {
  :is(.page-hero.com-foto, .hh-hero, .ch-hero, .ed-hero, .qt-hero, .do-hero, .pr-hero) > .wrap .stats { grid-column: 1 !important; grid-row: auto !important; grid-area: auto !important; align-self: end; margin-top: .4rem; }
}
:is(.page-hero.com-foto) .stats .stat { display: flex; align-items: baseline; gap: .6rem; height: auto !important; }
:is(.page-hero.com-foto) .stats .stat b { font-family: var(--f-display); font-weight: 800; font-stretch: 80%; font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: .9; }
:is(.page-hero.com-foto) .stats .stat span { font-size: var(--fs-sm); font-weight: 600; }
@media (min-width: 900px) {
  .view-musica .page-hero.com-foto .hero-tx { display: grid; grid-template-columns: minmax(0, 36ch) auto; column-gap: 2.6rem; align-items: end; }
  .view-musica .page-hero.com-foto .hero-tx > :is(.eyebrow, h1) { grid-column: 1 / -1; }
  .view-musica .page-hero.com-foto .hero-tx > .stats { grid-column: 2 !important; margin: 0 !important; color: inherit; }
  .view-musica .page-hero.com-foto .stats .stat { display: grid; gap: .2rem; }
}
.view-musica .page-hero.com-foto .stats .stat :is(b, span) { color: inherit !important; }
/* Prêmios e indicações de cada projeto (Contrate › Formatos e Projetos › Disponíveis hoje). */
.pm-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pm-mini li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: baseline; padding-block: .6rem; border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.pm-mini li:last-child { border-bottom: 0; }
.pm-mini .pm-y { font-variant-numeric: tabular-nums; font-weight: 700; opacity: .75; }
.pm-mini .pm-n { display: grid; gap: .1rem; min-width: 0; }
.pm-mini .pm-n b { font-weight: 700; line-height: 1.3; }
.pm-mini .pm-n em { font-style: italic; font-size: var(--fs-sm); opacity: .75; }
.pm-mini .pm-st { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .12rem .5rem; border-radius: 4px; border: 1.5px solid currentColor; }
.pm-mini .is-won .pm-st { background: #E3B23C; border-color: #E3B23C; color: #1A1512; }
/* Projetos › Parcerias: o cartão do parceiro é um botão (abre a ficha), com a foto da pessoa. */
.view-projetos .ec-shows.is-parc .ec-parc { all: unset; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; width: 100%; height: 100%; cursor: pointer; }
.view-projetos .ec-shows.is-parc .ec-parc:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; border-radius: 12px; }
.view-projetos .ec-shows.is-parc .ec-cv.is-foto img { object-fit: cover; border-radius: 50%; }
.view-projetos .ec-shows.is-parc .ec-parc:hover b { text-decoration: underline; text-decoration-color: var(--laranja); text-decoration-thickness: 2px; text-underline-offset: .18em; }
/* Bandolim › BandoBlack */
.view-bandolim .bd-bandoblack .bd-black-h { margin: 1.6rem 0 .7rem; font-size: var(--fs-sm); letter-spacing: .1em; text-transform: uppercase; color: var(--semente); }
.view-bandolim .bd-black-discs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 9rem)); gap: 1rem; }
.view-bandolim .bd-black-discs a { display: grid; gap: .3rem; color: inherit; text-decoration: none; }
.view-bandolim .bd-black-discs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.view-bandolim .bd-black-discs b { font-weight: 700; line-height: 1.2; }
.view-bandolim .bd-black-discs span { font-size: var(--fs-sm); color: var(--tinta-2); }
.view-bandolim .bd-black-discs a:hover b { text-decoration: underline; text-decoration-color: var(--laranja); }

/* Nada faz a página andar para o lado (Marcos, 11/10/2026: "o site quando abre não está encaixando exato na proporção da tela").
   No Safari com a barra de rolagem sempre visível, 100vw conta a barra e as peças de ponta a ponta passavam alguns pixels da tela.
   clip (e não hidden) não cria área de rolagem: o cabeçalho e as barras presas continuam presos. */
html, body { overflow-x: clip; }

/* Parceiros: a foto da abertura enchia só 300 px da faixa (sobra do cartão antigo) e esticava na altura, cortando
   a imagem; quando o parceiro não tem retrato e entra a capa do disco, a capa aparece inteira, encostada à direita
   (Marcos, 11/10/2026: "a foto está cortada" / "acontece o mesmo com outras"). */
@media (min-width: 900px) {
  .view-projetos .pr-hero > .wrap:first-of-type > .pr-hero-wrap { justify-items: stretch; grid-template-rows: minmax(0, 1fr); }
  .view-projetos .pr-hero > .wrap:first-of-type > .pr-hero-wrap .pr-hero-ph { max-width: none !important; aspect-ratio: auto !important; }
  .view-projetos .pr-hero-ph.is-capa { background: transparent; }
  .view-projetos .pr-hero-ph.is-capa img { object-fit: contain !important; object-position: 100% 50% !important; }
}
@media (max-width: 899px) {
  .view-projetos .pr-hero > .wrap:first-of-type > .pr-hero-wrap .pr-hero-ph { max-width: none; width: 100%; height: 100%; }
  .view-projetos .pr-hero-ph.is-capa { background: transparent; }
  .view-projetos .pr-hero-ph.is-capa img { object-fit: contain; }
}

/* Contrate › Formatos: a aba escolhida ficava sem fundo e com letra escura sobre o escuro (Marcos, 11/10/2026:
   "não aparece em que sessão está"). Pílula laranja, como as outras abas do site. */
#formatos .who-tabs .who-tab[aria-selected="true"], .view-contrate .ct-fm-tabs .who-tab[aria-selected="true"] {
  background: #FF6A00 !important; color: #121110 !important; border-color: #FF6A00 !important; box-shadow: none !important; }
#formatos .who-tabs .who-tab[aria-selected="true"]::before, .view-contrate .ct-fm-tabs .who-tab[aria-selected="true"]::before { display: none !important; }

/* Um objeto na faixa da abertura, à direita (Marcos, 11/10/2026): na Loja, a partitura; no Blog, o texto como chega por
   e-mail. Só no computador; no celular a faixa fica como estava. */
.hero-obj { display: none; }
@media (min-width: 900px) {
  :is(.lj-hero, .bg-hero) > .wrap { position: relative; }
  .hero-obj { display: block; position: absolute; right: var(--pad, 1.5rem); top: 50%; transform: translateY(-50%); z-index: 1; color: #121110; text-decoration: none; }
  .hero-obj[hidden] { display: none; }
  /* A partitura: uma folha branca, levemente inclinada, com a legenda embaixo. */
  .lj-hero-obj { width: clamp(160px, 17vw, 230px); }
  .lj-folha { display: block; background: #fff; padding: 6px; box-shadow: 0 18px 40px rgba(18,17,16,.28), 0 2px 6px rgba(18,17,16,.18); transform: rotate(3deg); transition: transform .25s ease; }
  .lj-folha img { display: block; width: 100%; height: auto; }
  .lj-hero-obj:hover .lj-folha { transform: rotate(0deg) translateY(-4px); }
  .hero-obj-leg { display: block; margin-top: .9rem; font-size: .8125rem; line-height: 1.35; text-align: center; }
  .hero-obj-leg b { display: block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
  /* O e-mail: uma janela de mensagem com a barra do remetente, o assunto, a foto e os blocos da edição. */
  .bg-hero-obj { width: clamp(250px, 24vw, 320px); background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 22px 50px rgba(18,17,16,.3); transform: translateY(-50%) rotate(-2deg); transition: transform .25s ease; font-size: .8125rem; line-height: 1.4; }
  .bg-hero-obj:hover { transform: translateY(-52%) rotate(0deg); }
  .bm-barra { display: flex; justify-content: space-between; gap: .6rem; padding: .55rem .85rem; background: #121110; color: #F2F1EE; font-size: .75rem; }
  .bm-de { font-weight: 700; }
  .bm-quando { opacity: .75; }
  .bm-corpo { display: grid; gap: .45rem; padding: .7rem .85rem .85rem; }
  .bm-ass { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: 1.125rem; line-height: 1.05; }
  .bm-foto { display: block; aspect-ratio: 4 / 1; overflow: hidden; border-radius: 4px; }
  .bm-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .bm-tx { color: #3D3833; font-family: var(--f-serif, Georgia, serif); }
  .bm-bloco { display: block; border-top: 1px solid rgba(18,17,16,.12); padding-top: .45rem; color: #3D3833; }
  .bm-bloco b { display: block; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: #121110; }
  .bm-btn { justify-self: start; background: #FF6A00; color: #121110; font-weight: 700; padding: .4rem .8rem; border-radius: 999px; font-size: .75rem; }
}
@media (min-width: 900px) and (max-width: 1150px) { .hero-obj { right: 1rem; } :is(.lj-hero, .bg-hero) .lede { max-width: 30ch; } }
.view-premios .pz-pmb { margin-top: clamp(2.6rem, 5vw, 4rem); }

/* A voz do Hamilton (e a crônica do Almeidinha) deixa de ser a letra mais miúda da página (Marcos, 12/10/2026, a partir
   do 3º parecer do crítico): serifa de leitura grande, numa coluna só, com a assinatura no pé. Só tamanho e tipo de letra;
   nenhum texto muda. Bandolim › "Por que dez cordas", Baile › "O Baile" e a crônica do Almeidinha. */
.view-bandolim #bdOwn { display: block; max-width: 38em; }
.view-bandolim #bdOwn p, .view-baile #blOwn p, .view-baile .bl-alm-tx p:not(.bl-alm-orig):not(.ch-own-sig):not(.bl-alm-hh) {
  font-family: var(--f-leitura, "Newsreader", Georgia, serif); font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.375rem); line-height: 1.55; }
.view-bandolim #bdOwn p { margin: 0 0 1.05rem; }
.view-baile #blOwn { max-width: 34em; }
.view-baile .bl-alm-tx { max-width: 36em; }
.view-baile .bl-alm-tx p + p { margin-top: 1.05rem; }
/* O destaque e a assinatura seguem na letra de título; o destaque cresce junto. */
.view-bandolim #bdOwn .ch-own-pull, .view-baile #blOwn .ch-own-pull {
  font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: var(--fs-xl); line-height: 1.12; max-width: 30ch; margin: 1.6rem 0 !important; }
.view-bandolim #bdOwn .ch-own-sig, .view-baile #blOwn .ch-own-sig, .view-baile .bl-alm-tx .ch-own-sig {
  font-family: var(--f-display); font-size: var(--fs-base); margin-top: 1.4rem !important; }
.view-baile .bl-alm-tx .bl-alm-hh { font-family: var(--f-leitura, "Newsreader", Georgia, serif); font-style: italic; font-size: var(--fs-md); margin-top: 1.2rem; }
/* No computador, a fala numa coluna só não deixa a metade direita em branco: o título fica à esquerda, preso ao rolar, e a fala à direita (regra 2.5).
   "Por que dez cordas" vive fundido dentro da História (#por-que-part). */
@media (min-width: 900px) {
  .view-bandolim #por-que-part { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
  .view-bandolim #por-que-part > :not(#bdOwn):not(.fold-btn) { grid-column: 1; }
  .view-bandolim #por-que-part > h2 { position: sticky; top: 9rem; }
  .view-bandolim #por-que-part > #bdOwn { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
  .view-bandolim #por-que-part > .fold-btn { grid-column: 2; justify-self: start; }
}
/* 12/10/2026: no quadradinho da Agenda, o dia da semana (e a hora) no lugar do nome curto do projeto. */
.view-agenda .show-row .date .w { grid-row: 3; margin: 0; padding: .1rem .15rem .35rem; font-size: .8125rem; font-weight: 700; letter-spacing: .02em; line-height: 1.1; white-space: nowrap; color: inherit; }

/* Playlist e Quinteto também no tamanho grande das aberturas (Marcos, 12/10/2026, via crítico: "Playlist" = "sim";
   "Brasilianos" mais estreito "se precisar"). O letreiro do Baile segue próprio; o Bandolim espera a resposta do Marcos. */
:is(.view-playlist .pl-hero, .view-quinteto .qt-hero) h1 { font-size: var(--fs-5xl); line-height: .82; letter-spacing: -0.03em; overflow-wrap: normal; }
.view-quinteto .qt-hero h1 { font-stretch: 66%; }

/* =========================================================
   Páginas de disco também em FAIXA (Marcos, 12/10/2026, 3º parecer do crítico: "Os 55 discos ficaram fora do sistema").
   Faixa na cor da Discografia, título e texto à esquerda, a capa à direita, encostada na borda e na altura da faixa;
   sai o campo de cor atrás da capa e o ano apagado ao fundo. No celular: a faixa e, logo abaixo, a capa de ponta a ponta.
   ========================================================= */
.view-projetos .pj-hero {
  --claro: var(--sec-fg, #FFFFFF); --claro-2: color-mix(in srgb, var(--sec-fg, #FFFFFF) 74%, transparent); --laranja: var(--sec-fg, #FFFFFF);
  --linha-clara: color-mix(in srgb, var(--sec-fg, #FFFFFF) 28%, transparent);
  background: var(--sec, #1E2F9E) !important; color: var(--sec-fg, #FFFFFF); min-height: 0; overflow: hidden; }
.view-projetos .pj-hero .eyebrow { color: var(--sec-fg, #FFFFFF) !important; opacity: .78; }
.view-projetos .pj-hero h1 { color: var(--sec-fg, #FFFFFF) !important; }
.view-projetos .pj-hero .btn.orange { background: var(--sec-fg, #FFFFFF); border-color: var(--sec-fg, #FFFFFF); color: var(--sec, #1E2F9E); }
.view-projetos .pj-hero .pj-bigyear, body.enc .view-projetos .pj-bigyear { display: none !important; }
.view-projetos .pj-hero .pj-art, body.enc .view-projetos .pj-hero .pj-art { background: transparent !important; padding: 0; place-items: stretch; }
.view-projetos .pj-hero .pj-cover { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.view-projetos .pj-hero .pj-cover img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; object-position: 100% 100%; }
/* Capa é obra: aparece inteira; quando a faixa é mais alta que larga a coluna, a capa encosta embaixo e à direita. */
@media (min-width: 900px) {
  .view-projetos .pj-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
  .view-projetos .pj-hero .tx { padding: 2.4rem clamp(1.5rem, 4vw, 3.5rem) 2.6rem max(var(--pad, 1.5rem), calc((100vw - var(--wrap, 1280px)) / 2 + var(--pad, 1.5rem))); align-content: end; }
  /* A faixa cresce com o texto (título, subtítulo, parágrafo e botões sempre inteiros); a capa ocupa a coluna da direita
     sem dar altura à faixa: fica por cima, inteira, encostada embaixo e à direita (crítico, 12/10/2026). */
  .view-projetos .pj-hero { grid-template-columns: minmax(0, 1fr) min(42vw, 600px); }
  .view-projetos .pj-hero .pj-art { position: relative; aspect-ratio: auto; height: auto; min-height: 420px; max-width: none; align-self: stretch; }
  .view-projetos .pj-hero .pj-art > .pj-cover { position: absolute; inset: 0; }
  .view-projetos .pj-hero .lede { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-width: 899px) {
  .view-projetos .pj-hero .pj-art, .view-projetos .pj-hero .pj-art > * { width: 100% !important; padding: 0 !important; }
  .view-projetos .pj-hero .pj-art { aspect-ratio: 1; }
}
/* Quinteto: a capa do Brasilianos 3 na faixa sem cartão (sem sombra, sem canto arredondado), encostada à direita e embaixo,
   inteira como as capas dos discos (crítico, 12/10/2026). */
.view-quinteto .qt-hero .qt-ph img { border-radius: 0 !important; box-shadow: none !important; }
@media (min-width: 900px) { .view-quinteto .qt-hero .qt-ph img { object-fit: contain !important; object-position: 100% 100%; } }

/* Laranja é a única cor de ação (CLAUDE.md 2.5): o botão principal da faixa do disco fica laranja (crítico, 12/10/2026). */
.view-projetos .pj-hero .btn.orange { background: #FF6A00 !important; border-color: #FF6A00 !important; color: #121110 !important; }

/* =========================================================
   Abas em modo rolagem (Marcos, 12/10/2026; por enquanto só a página do Hamilton): os capítulos em sequência,
   a barra presa logo abaixo do cabeçalho, a pílula do capítulo na tela acesa e uma linha laranja de progresso.
   ========================================================= */
.sec-rail.is-rolagem { display: block; }
.ct-evtabs.sec-tabs.is-rolagem { position: sticky; top: calc(var(--teto, 74px) - 10px); z-index: 30; box-shadow: 0 1px 0 rgba(18,17,16,.12); }
.ct-evtabs.sec-tabs.is-rolagem .rol-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #FF6A00; transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.sec-rail.is-rolagem > :not(.sec-tabs) { scroll-margin-top: calc(var(--teto, 74px) + 64px); }
.sec-rail.is-rolagem > .is-tab-off { display: block !important; }
.ct-evtabs.sec-tabs.is-rolagem .ct-evtabs-row > button:focus-visible { outline: 3px solid #FF6A00; outline-offset: 2px; }
@media (max-width: 760px) {
  .ct-evtabs.sec-tabs.is-rolagem { padding-top: .45rem !important; padding-bottom: .5rem !important; }
  .ct-evtabs.sec-tabs.is-rolagem .eyebrow { display: none !important; }
  .ct-evtabs.sec-tabs.is-rolagem .ct-evtabs-row { flex-wrap: nowrap !important; }
  .ct-evtabs.sec-tabs.is-rolagem .ct-evtabs-row > button { padding: .35rem .85rem .4rem !important; font-size: .875rem !important; white-space: nowrap; }
  .ct-evtabs.sec-tabs.is-rolagem .ct-evtabs-row > button span { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { html:has(.sec-rail.is-rolagem) { scroll-behavior: auto; } }

/* Fundos alternados por capítulo nas páginas em rolagem (Marcos, 12/10/2026; prévia do crítico, previa-cores-capitulos-2026-10-12.html).
   cap-papel = claro; cap-noite = preto; cap-sec = a cor da seção (só em capítulo curto), com o texto claro e maior.
   De ponta a ponta, sem fio entre um capítulo e outro. Cartões brancos continuam brancos. */
:is(.sec-rail.is-rolagem, .caps-alternados) > .cap-papel { background: var(--papel) !important; border-top: 0 !important; }
:is(.sec-rail.is-rolagem, .caps-alternados) > :is(.cap-noite, .cap-sec) {
  --tinta: #F2F1EE; --tinta-2: #C9C4BC; --claro: #F2F1EE; --claro-2: #C9C4BC; --linha: rgba(242,241,238,.2); --linha-clara: rgba(242,241,238,.2);
  --noite-2: #1E1C1A; --noite-3: #2E2B28; --semente: #E58AA3;
  background: #121110 !important; color: #F2F1EE !important; border-top: 0 !important; }
:is(.sec-rail.is-rolagem, .caps-alternados) > .cap-sec { background: var(--sec, #8B2D4E) !important; color: var(--sec-fg, #FFFFFF) !important; --tinta: var(--sec-fg, #FFFFFF); --claro: var(--sec-fg, #FFFFFF);
  --tinta-2: color-mix(in srgb, var(--sec-fg, #FFFFFF) 80%, transparent); --claro-2: color-mix(in srgb, var(--sec-fg, #FFFFFF) 80%, transparent); --semente: rgba(255,255,255,.8); }
:is(.sec-rail.is-rolagem, .caps-alternados) > .cap-noite :is(.eyebrow, .k, .cat, summary) { color: #E58AA3 !important; }
:is(.sec-rail.is-rolagem, .caps-alternados) > .cap-sec :is(.eyebrow, .k, .cat, summary) { color: color-mix(in srgb, var(--sec-fg, #FFFFFF) 80%, transparent) !important; }
:is(.sec-rail.is-rolagem, .caps-alternados) > :is(.cap-noite, .cap-sec) :is(h2, h3, p, li, blockquote, cite, dt, dd) { color: inherit; }
:is(.sec-rail.is-rolagem, .caps-alternados) > :is(.cap-noite, .cap-sec) a:not(.btn) { color: inherit; }
.sec-rail.is-rolagem > .cap-sec :is(p, li) { font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem); line-height: 1.5; }
:is(.sec-rail.is-rolagem, .caps-alternados) > :is(.cap-noite, .cap-sec) .btn.light { background: #F2F1EE; border-color: #F2F1EE; color: #121110; }
:is(.sec-rail.is-rolagem, .caps-alternados) > :is(.cap-noite, .cap-sec) .btn.dark { background: #F2F1EE; border-color: #F2F1EE; color: #121110; }
/* Cartões brancos continuam brancos, com a tinta escura de sempre dentro. */
:is(.sec-rail.is-rolagem, .caps-alternados) > :is(.cap-noite, .cap-sec) :is(.ed-course:not(.is-soon), .card, .ed-card) {
  --tinta: #121110; --tinta-2: #5C5650; --claro: #121110; --claro-2: #5C5650; --linha-clara: rgba(18,17,16,.16); color: #121110; }
/* Botões laranja e etiquetas claras continuam com a tinta escura nos capítulos escuros e na cor da seção. */
:is(.sec-rail.is-rolagem, .caps-alternados) > :is(.cap-noite, .cap-sec) :is(.btn.orange, .btn.dark) { background: #FF6A00 !important; border-color: #FF6A00 !important; color: #121110 !important; }
:is(.sec-rail.is-rolagem, .caps-alternados) > :is(.cap-noite, .cap-sec) .pill { color: #121110 !important; }
:is(.sec-rail.is-rolagem, .caps-alternados) > :is(.cap-noite, .cap-sec) .hc-cta, :is(.sec-rail.is-rolagem, .caps-alternados) > :is(.cap-noite, .cap-sec) .hc-cta .hc-cta-t { color: #121110 !important; border-color: #FF6A00 !important; }
:is(.sec-rail.is-rolagem, .caps-alternados) > :is(.cap-noite, .cap-sec) :is(.ed-serie, .ed-mc-next) {
  --tinta: #121110; --tinta-2: #5C5650; --claro: #121110; --claro-2: #5C5650; --linha-clara: rgba(18,17,16,.16); --semente: #8E2C48; color: #121110 !important; }
:is(.sec-rail.is-rolagem, .caps-alternados) > :is(.cap-noite, .cap-sec) :is(.ed-serie, .ed-mc-next) :is(h2, h3, p, li, b, span, a:not(.btn)) { color: inherit; }
:is(.sec-rail.is-rolagem, .caps-alternados) > :is(.cap-noite, .cap-sec) :is(.ed-serie, .ed-mc-next) :is(.eyebrow, .k, .cat) { color: #8E2C48 !important; }
/* Cartões e caixas claras nos capítulos escuros: tinta escura dentro (Marcos, 12/10/2026: o texto branco sobre o cartão branco sumia).
   .cx-clara é posta pelo HDH.sectionTabs em toda caixa de fundo claro, então vale para qualquer caixa nova. */
:is(.sec-rail.is-rolagem, .caps-alternados) > :is(.cap-noite, .cap-sec) :is(.hh-emb-card, .hh-sol-destaque, .cx-clara) {
  --tinta: #121110; --tinta-2: #5C5650; --claro: #121110; --claro-2: #5C5650; --linha-clara: rgba(18,17,16,.16); --semente: #8E2C48; color: #121110 !important; }
:is(.sec-rail.is-rolagem, .caps-alternados) > :is(.cap-noite, .cap-sec) :is(.hh-emb-card, .hh-sol-destaque, .cx-clara) :is(h2, h3, p, li, b, span:not(.k), a:not(.btn)) { color: #121110 !important; }
:is(.sec-rail.is-rolagem, .caps-alternados) > :is(.cap-noite, .cap-sec) :is(.hh-emb-card, .hh-sol-destaque, .cx-clara) :is(.eyebrow, .k, .cat) { color: #8E2C48 !important; }
:is(.sec-rail.is-rolagem, .caps-alternados) > :is(.cap-noite, .cap-sec) .hh-emb-card.is-map b { color: #8E2C48 !important; }
/* Negrito laranja no capítulo na cor da seção (vinho) quase não se lia: fica branco. */
:is(.sec-rail.is-rolagem, .caps-alternados) > .cap-sec .lema-text b { color: var(--sec-fg, #FFFFFF) !important; }

/* Ajustes do crítico (12/10/2026) nos capítulos na cor da seção:
   1) com um capítulo na cor da seção embaixo, a barra presa fica preta (antes se fundia com ele);
   2) "Moderno é tradição": o vídeo fica preso à direita enquanto o texto corre, e o texto ocupa a coluna toda;
   3) em capítulo longo, a frase de abertura fica grande e o resto do texto volta a ~20 px. */
.ct-evtabs.sec-tabs.is-rolagem.sob-cor { background: #121110 !important; color: #F2F1EE !important; transition: background .25s ease; }
.ct-evtabs.sec-tabs.is-rolagem.sob-cor .ct-evtabs-row > button[aria-selected="true"] { background: #F2F1EE !important; border-color: #F2F1EE !important; color: #121110 !important; }
@media (min-width: 900px) {
  .sec-rail.is-rolagem > #lema.cap-sec .lema-ph { position: sticky; top: calc(var(--teto, 74px) + 64px); align-self: start; }
  .sec-rail.is-rolagem > #lema.cap-sec .lema-text { max-width: 36em; }
}
.sec-rail.is-rolagem > #lema.cap-sec .lema-text p:not(.lema-pull) { font-size: clamp(1.125rem, 1.05rem + .25vw, 1.25rem); line-height: 1.6; }

/* Páginas em rolagem (Marcos, 12/10/2026: "só colocar no menu os botões, não precisa 'QUEM É'"): a barra presa fica só com as
   pílulas; e os títulos presos dos capítulos param logo abaixo da barra (--barra-rol é medido pelo JS), sem ficar meio escondidos. */
.ct-evtabs.sec-tabs.is-rolagem .eyebrow { display: none !important; }
.ct-evtabs.sec-tabs.is-rolagem { padding-top: .75rem !important; padding-bottom: .75rem !important; }
@media (min-width: 900px) {
  .sec-rail.is-rolagem > .sec-ed > .wrap > :first-child { top: calc(var(--barra-rol, 140px) + 24px); }
  .sec-rail.is-rolagem > #lema.cap-sec .lema-ph { top: calc(var(--barra-rol, 140px) + 24px); }
}
.sec-rail.is-rolagem > :not(.sec-tabs) { scroll-margin-top: calc(var(--barra-rol, 140px) + 16px); }

/* Home › Vídeos no celular: o título do vídeo vem logo abaixo do player, e não embaixo das miniaturas, onde parecia legenda delas
   (Marcos, 12/10/2026: "a legenda em vez de aparecer abaixo do vídeo em questão está aparecendo na linha de baixo"). */
@media (max-width: 899px) {
  .view-home #videos { display: flex; flex-direction: column; }
  .view-home #videos > .hc-vid { display: contents; }
  .view-home #videos #player { order: 1; }
  .view-home #videos > .feat-meta { order: 2; margin-top: .6rem; margin-bottom: .7rem; }
  .view-home #videos #thumbs { order: 3; }
  .view-home #videos #thumbs2 { order: 4; }
}

/* Brasilianos (página nova, 13/10/2026): o título grande com as letras mais estreitas, como no Quinteto, para não encostar na foto. */
.view-brasilianos .br-hero h1 { font-stretch: 66%; }
/* Portinari › "Pelas lentes de Marcos Portinari" (13/10/2026): as fotos dele em fileira, grandes, abrindo no visualizador do acervo. */
.view-brasilianos .pt-lentes { margin-top: clamp(2rem, 4vw, 3rem); }
.view-brasilianos .pt-lentes .ac-t { font-size: var(--fs-xs); font-weight: 700; }
.view-brasilianos .pt-lentes .ac-mini { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; }
.view-brasilianos .pt-lentes .ac-th { width: auto; height: auto; aspect-ratio: 4 / 5; border-radius: 10px; border: 0; }
@media (max-width: 860px) { .view-brasilianos .pt-lentes .ac-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* O retrato do Marcos logo abaixo do título "Portinari", na largura da coluna (o JS o põe depois do h2). */
.view-brasilianos .hh-parc-in { grid-template-columns: minmax(0, 1fr); }
.view-brasilianos .hh-parc-ph { margin: 1.2rem 0 .4rem; max-width: 460px; }
.view-brasilianos .hh-parc-ph img { width: 100%; aspect-ratio: 8 / 7; object-fit: cover; border-radius: 14px; display: block; }
/* Abertura do Brasilianos com o logo (13/10/2026): o logo preto direto sobre a faixa verde, inteiro e centrado (o colorido não funcionava no verde). */
.view-brasilianos .br-hero .hero-ph.br-logo { background: transparent; display: grid; place-items: center; }
.view-brasilianos .br-hero .hero-ph.br-logo img { width: auto !important; height: clamp(180px, 22vw, 300px) !important; max-width: 80%; object-fit: contain !important; }
/* Brasilianos › Iniciativas › Pelo Brasil (13/10/2026): a fala de Hamilton, a turnê lida do mapa e a ficha. */
.view-brasilianos .pb-voz { margin: .6rem 0 0; padding-left: 1rem; border-left: 3px solid var(--laranja); font-family: var(--f-serif, Newsreader, serif); font-size: var(--fs-md); line-height: 1.5; }
.view-brasilianos .pb-voz cite { display: block; margin-top: .5rem; font-style: normal; font-size: var(--fs-sm); color: var(--tinta-2); }
.view-brasilianos .pb-voz-en { margin-top: .8rem; font-size: var(--fs-sm); color: var(--tinta-2); }
.view-brasilianos .pb-g { margin: 1rem 0 .3rem; font-weight: 700; }
.view-brasilianos .pb-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-size: var(--fs-sm); }
.view-brasilianos .pb-d { display: inline-block; min-width: 11ch; color: var(--tinta-2); }
.view-brasilianos .pb-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem 1rem; margin: .6rem 0 0; font-size: var(--fs-sm); }
.view-brasilianos .pb-dl dt { color: var(--tinta-2); }
.view-brasilianos .pb-dl dd { margin: 0; }
@media (max-width: 560px) { .view-brasilianos .pb-dl { grid-template-columns: 1fr; } .view-brasilianos .pb-dl dd { margin-bottom: .4rem; } }
/* Brasilianos › Iniciativas em blocos de cor (13/10/2026): um cartão por projeto, branco / verde / preto, no lugar do fio entre eles. */
.view-brasilianos .inic-lista.caps-alternados { gap: clamp(1rem, 2vw, 1.6rem); grid-template-columns: minmax(0, 1fr); }
.view-brasilianos .inic-lista.caps-alternados > .inic { min-width: 0; }
.view-brasilianos .inic-lista.caps-alternados > .inic { max-width: none; border-top: 0 !important; padding: clamp(1.6rem, 4vw, 3rem) !important; border-radius: 18px; }
.view-brasilianos .inic-lista.caps-alternados > .inic > * { max-width: 68ch; }
.view-brasilianos .inic-lista.caps-alternados > .cap-papel { background: #FFFFFF !important; }
.view-brasilianos .inic-lista.caps-alternados > .cap-sec .inic-l, .view-brasilianos .inic-lista.caps-alternados > .cap-noite .inic-l { color: inherit; }
/* Capítulo na cor da seção (Dois de Ouro › Linha do tempo, 13/10/2026): os anos em destaque, que eram ocre, ficam na cor do texto. */
.caps-alternados > .cap-sec .ch-day-marks b { color: var(--sec-fg, #FFFFFF) !important; }
/* Páginas de disco em cores (13/10/2026): o acervo dos Caprichos pega o fundo do capítulo; os cartões de Quem toca continuam pretos
   sobre a cor (eles usam a tinta como fundo, que inverte nos capítulos escuros e coloridos). */
#pjAcervo:is(.cap-papel, .cap-noite, .cap-sec) > .sec { background: transparent !important; }
#pjAcervo:is(.cap-noite, .cap-sec) > .sec { color: var(--tinta); }
.caps-alternados > :is(.cap-noite, .cap-sec) .guest { background: #121110 !important; color: #F2F1EE !important; --tinta: #F2F1EE; --claro-2: #C9C4BC; --papel: #F2F1EE; }
.caps-alternados > :is(.cap-noite, .cap-sec) .guest :is(.nm, .on, .on a, a:not(.btn)) { color: #F2F1EE !important; }
.caps-alternados > :is(.cap-noite, .cap-sec) .guest p { color: #C9C4BC !important; }
.caps-alternados > :is(.cap-noite, .cap-sec) .guest .ins { color: #FF6A00 !important; }

/* Acervo dos Caprichos compacto (Marcos, 13/10/2026): as 24 peças em grade de cartões; a nota em três linhas, com "Ler a nota". */
.view-projetos .cp-lista { list-style: none; padding: 0; margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.view-projetos .cp-lista > .cp-item { margin: 0; padding: 1.1rem 1.1rem 1.2rem; border-radius: 14px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(18, 17, 16, .12); display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.caps-alternados > :is(.cap-noite, .cap-sec) .cp-lista > .cp-item { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); }
.view-projetos .cp-item .cp-nota { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-sm); line-height: 1.5; }
.view-projetos .cp-item.is-aberto .cp-nota { -webkit-line-clamp: unset; display: block; }
.view-projetos .cp-mais { align-self: flex-start; background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-sm); font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.view-projetos .cp-item .cp-dls { margin-top: auto; }
.view-projetos .cp-texto-resto { margin-top: .8rem; }
.view-projetos .cp-mais-texto { margin-top: .6rem; }


/* Desafio Canto da Praya (Brasilianos › Iniciativas, 13/10/2026): as capas são muitas; grade mais miúda,
   duas por linha no celular e quatro no computador. */
.view-brasilianos .hh-eps.dcp-capas { grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: .75rem; }
.view-brasilianos .hh-eps.dcp-capas .hh-ep-t { font-size: 13px; }

/* Crítico, 13/10/2026 (4º parecer). A Brasilianos: o texto longo com o tratamento dos outros (Newsreader, ~68 caracteres
   por linha, 1 em entre parágrafos). 10 cordas: a apresentação abre o capítulo "Por que dez cordas", na voz do site.
   Páginas de disco: o convite à equipe só aparece com ?proto=1, como a faixa do protótipo. */
.view-brasilianos .br-emp-corpo > p { font-family: var(--f-leitura); font-optical-sizing: auto; font-size: clamp(1.125rem, 1.4vw, 1.25rem); line-height: 1.55; max-width: 68ch; margin: 0 0 1em; }
.view-bandolim .bd-intro { max-width: 68ch; margin: .4rem 0 1.8rem; font-family: var(--f-leitura); font-size: clamp(1.125rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--tinta); }
body.sem-proto .view-projetos .pj-edit { display: none !important; }
@media (min-width: 900px) {
  /* A apresentação vai para a coluna do texto, acima da fala de Hamilton; o título segue preso à esquerda. */
  .view-bandolim #por-que-part > #mdHero.bd-intro { grid-column: 2; grid-row: 1; margin-top: 0; }
  .view-bandolim #por-que-part > #bdOwn { grid-row: 2 / span 4; }
}

/* Iniciativas em cinco cartões (Brasilianos › Iniciativas) e o hotsite de cada uma (#/iniciativa/<id>), 13/10/2026. */
.view-brasilianos .inic-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.2rem; }
.view-brasilianos .inic-card { display: grid; gap: .35rem; align-content: start; text-decoration: none; color: inherit; }
.view-brasilianos .inic-card .ic-ph { display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--noite-2, #1A1512); }
.view-brasilianos .inic-card .ic-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 300ms var(--ease); }
.view-brasilianos .inic-card .ic-ph.ic-arte img { object-fit: cover; }
.view-brasilianos .inic-card:hover .ic-ph img, .view-brasilianos .inic-card:focus-visible .ic-ph img { transform: scale(1.04); }
.view-brasilianos .inic-card .ic-q { margin-top: .5rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--semente); }
.view-brasilianos .inic-card .ic-t { font-family: var(--f-display); font-weight: 850; font-stretch: 76%; font-size: var(--fs-xl); line-height: .95; }
.view-brasilianos .inic-card .ic-ver { font-size: var(--fs-sm); font-weight: 600; color: var(--tinta-2); }
.view-brasilianos .inic-card:hover .ic-ver { color: var(--tinta); }
@media (prefers-reduced-motion: reduce) { .view-brasilianos .inic-card .ic-ph img { transition: none; } .view-brasilianos .inic-card:hover .ic-ph img { transform: none; } }
@media (max-width: 599px) { .view-brasilianos .inic-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; } .view-brasilianos .inic-card .ic-t { font-size: var(--fs-lg); } }

.view-iniciativa .ini-hero .eyebrow a.ini-volta { color: inherit; text-decoration: none; }
.view-iniciativa .ini-hero .eyebrow a.ini-volta:hover { text-decoration: underline; }
.view-iniciativa .ini-hero .ini-q { margin: .6rem 0 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.view-iniciativa .ini-tx { max-width: 68ch; }
.view-iniciativa .ini-tx > p { font-family: var(--f-leitura); font-optical-sizing: auto; font-size: clamp(1.125rem, 1.4vw, 1.25rem); line-height: 1.55; margin: 0 0 1em; }
.view-iniciativa .ini-tx > p.inic-links, .view-iniciativa .ini-tx > p.hh-ep-t2 { font-family: var(--f-body); font-size: var(--fs-sm); }
.view-iniciativa .ini-tx .hh-ep-t2 { margin: 1.6rem 0 .8rem; font-weight: 700; }
.view-iniciativa .ini-tx .inic-doc { margin-top: 0; }
.view-iniciativa .ini-tx .inic-foto { margin: 1.6rem 0; }
.view-iniciativa .ini-tx .inic-foto img { width: 100%; border-radius: 12px; display: block; }
.view-iniciativa .ini-tx .inic-foto figcaption { margin-top: .5rem; font-size: var(--fs-sm); opacity: .8; }
.view-iniciativa .ini-todas { margin: 1.2rem 0 0; }

/* Galeria dentro do texto (HDH.galeria, 14/10/2026): imagem grande, setas, contador e miniaturas. */
.gal { margin: 1.8rem 0; }
.gal-main { position: relative; border-radius: 14px; overflow: hidden; background: #121110; }
.gal-abre { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gal-abre img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain; background: #121110; }
.gal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(18, 17, 16, .62); color: #FFFFFF; font-size: 1.6rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.gal-nav:hover { background: #FF6A00; color: #121110; }
.gal-prev { left: .7rem; } .gal-next { right: .7rem; }
.gal-cap { display: flex; justify-content: space-between; gap: 1rem; margin-top: .55rem; font-family: var(--f-body); font-size: var(--fs-sm); line-height: 1.4; opacity: .85; }
.gal-pos { flex: none; font-variant-numeric: tabular-nums; opacity: .8; }
.gal-th { display: flex; gap: .45rem; margin-top: .7rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: .3rem; scroll-behavior: smooth; }
.gal-mini { flex: none; width: 84px; height: 60px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #121110; cursor: pointer; opacity: .62; transition: opacity 150ms var(--ease); }
.gal-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-mini:hover, .gal-mini.is-on { opacity: 1; }
.gal-mini.is-on { border-color: #FF6A00; }
@media (max-width: 599px) { .gal-nav { width: 38px; height: 38px; } .gal-mini { width: 68px; height: 50px; } }

/* Equipe com rosto nas páginas de disco (14/10/2026): uma pessoa = a foto grande do cartão; várias = uma fileira de rostos. */
.view-projetos .guest.is-ficha.tem-rosto .g-ph { display: block; aspect-ratio: 4 / 5; margin: 0 0 .6rem; border-radius: 10px; overflow: hidden; background: #2A2724; }
.view-projetos .guest.is-ficha.tem-rosto .g-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fi-rostos { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .6rem; }
.fi-rosto { width: 84px; height: 84px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: #2A2724; flex: none; cursor: zoom-in; transition: transform 150ms var(--ease); }
.fi-rosto:hover, .fi-rosto:focus-visible { transform: scale(1.06); }
@media (max-width: 599px) { .fi-rosto { width: 68px; height: 68px; } }
.fi-rosto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hotsite das iniciativas: lista "Na imprensa e na TV" (14/10/2026). */
.view-iniciativa .ini-impr { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.view-iniciativa .ini-impr a { display: grid; gap: .15rem; padding: .8rem 1rem; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 12px; text-decoration: none; color: inherit; font-family: var(--f-body); }
.view-iniciativa .ini-impr a:hover { border-color: #FF6A00; }
.view-iniciativa .ini-impr .ii-k { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.view-iniciativa .ini-impr b { font-size: var(--fs-sm); }
.view-iniciativa .ini-impr .ii-t { font-size: var(--fs-sm); line-height: 1.4; opacity: .85; }
/* Desafio: o vídeo-base para baixar (14/10/2026). */
.view-iniciativa .dcp-base { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 1rem; align-items: center; margin: 1.6rem 0; padding: 1rem; border-radius: 14px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.view-iniciativa .dcp-base img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; display: block; }
.view-iniciativa .dcp-base p { font-family: var(--f-body); font-size: var(--fs-sm); line-height: 1.45; margin: 0 0 .6rem; }
.view-iniciativa .dcp-base .inic-links { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0; }
.view-iniciativa .dcp-base-k { font-size: var(--fs-xs); opacity: .7; }
@media (max-width: 599px) { .view-iniciativa .dcp-base { grid-template-columns: 1fr; } }

/* Rostos na ficha técnica das iniciativas (Pelo Brasil): círculo menor, antes do nome. */
.view-iniciativa .pb-dl .fi-rostos { margin: .2rem 0 .35rem; }
.view-iniciativa .pb-dl .fi-rosto { width: 56px; height: 56px; }
/* HHTV: cartão do vídeo da Vimeo que abre por fora (sem miniatura livre): tarja com o nome do serviço. */
.view-iniciativa .hh-ep-semimg { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 10px; background: #1A1715; color: #FFFFFF; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
/* Manifesto Brasilianos (14/10/2026): a ficha do festival numa linha pequena; o 2º texto impresso, sem caixa alta forçada. */
.view-brasilianos .mb-ficha { font-size: var(--fs-sm); color: var(--tinta-2); }
.manifesto-2 p:first-child { font-weight: 400; }
/* Cultura em Conjunto › As noites (14/10/2026): uma edição por cartão, todos do mesmo tamanho; "Ler tudo" abre o texto inteiro. */
.view-brasilianos .ccn-ano { margin: 1.4rem 0 .6rem; font-family: var(--f-display, inherit); font-size: var(--fs-lg, 1.4rem); font-weight: 700; letter-spacing: .02em; }
.view-brasilianos .ccn-ano:first-child { margin-top: 0; }
.view-brasilianos .ccn-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-bottom: 1rem; }
.view-brasilianos .ccn-card { display: flex; flex-direction: column; padding: 16px 18px; border-radius: 14px; background: #FFFFFF; color: var(--tinta); border: 1px solid var(--linha-clara); }
.view-brasilianos .ccn-d { margin: 0 0 .3rem; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-2); }
.view-brasilianos .ccn-card h3 { margin: 0 0 .6rem; font-size: 1.02rem; line-height: 1.3; }
.view-brasilianos .ccn-tx { max-height: 9.6em; overflow: hidden; font-size: var(--fs-sm); line-height: 1.6; }
.view-brasilianos .ccn-tx p { margin: 0; }
.view-brasilianos .ccn-fl { float: right; margin: 0 0 6px 10px; padding: 0; border: 0; background: none; cursor: zoom-in; }
.view-brasilianos .ccn-fl img { display: block; width: 64px; height: auto; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.view-brasilianos .ccn-mais { align-self: flex-start; margin-top: .4rem; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--laranja-escuro, #B4471A); text-decoration: underline; cursor: pointer; }
.view-brasilianos .ccn-bt { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding-top: .8rem; }
.ccn-inteiro { color: var(--tinta); }
.ccn-inteiro .ccn-tx { max-height: none; }
.ccn-inteiro .ccn-bt { display: flex; flex-wrap: wrap; gap: 6px; }
.view-brasilianos .ccn-bt .btn { white-space: normal; text-align: left; max-width: 100%; }
.view-brasilianos .hh-ep-mat { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: inherit; text-decoration: underline; }
.view-brasilianos .ccn-gente { margin-bottom: 1.2rem; }
.view-brasilianos .ccn-gente .fi-rostos { gap: .5rem; }
.view-educacional .ed-voz-en { margin: .6rem 0 1rem; color: var(--tinta-2); }

/* 14/10/2026 — Projeto Em Casa, fileira "Quem passou por aqui": sem retrato, iniciais no círculo (não abre foto). */
.fi-rosto.fi-ini { display: inline-grid; place-items: center; cursor: default; color: #F2EDE6; font: 600 1.25rem/1 var(--f-body); letter-spacing: .02em; }
.fi-rosto.fi-ini:hover { transform: none; }
/* 14/10/2026 — Cultura em Conjunto: vídeos da noite dentro do cartão (4 miniaturas e uma legenda), sempre no pé, acima dos botões. */
.view-brasilianos .ccn-vid { margin-top: auto; padding-top: .8rem; }
.view-brasilianos .ccn-vid + .ccn-bt { margin-top: 0; padding-top: .5rem; }
.view-brasilianos .ccn-vid ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.view-brasilianos .ccn-vid a { display: block; position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 3; background: #2A2724; }
.view-brasilianos .ccn-vid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.view-brasilianos .ccn-vid a::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: .8rem; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.view-brasilianos .ccn-vleg { margin: .35rem 0 0; font-size: 13px; line-height: 1.35; color: var(--tinta-2, #5C554D); }
/* 14/10/2026 — Som da Imagem: notas curtas embaixo da lista de episódios. */
.view-brasilianos .sdi-nota { font-size: 15px; line-height: 1.5; margin: .5rem 0 0; opacity: .85; }
/* 14/10/2026 — Hotsites de iniciativa: anterior / próxima em duas caixas, como nas páginas de disco (o estilo dos discos é
   preso a .view-projetos e aqui não pegava: saía tudo numa linha só). Pedido do crítico de design. */
.view-iniciativa .pj-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.view-iniciativa .pj-pn a { display: grid; gap: .25rem; padding: 1rem 1.2rem; border-radius: 12px; background: #FFFFFF; border: 1px solid var(--linha-clara); color: var(--tinta); text-decoration: none; }
.view-iniciativa .pj-pn a:hover { border-color: var(--tinta); }
.view-iniciativa .pj-pn span { font-size: var(--fs-sm); font-weight: 700; color: var(--semente); }
.view-iniciativa .pj-pn b { font-family: var(--f-display); font-stretch: 86%; font-size: var(--fs-lg); line-height: 1.1; }
.view-iniciativa .pj-pn .r { text-align: right; }
@media (max-width: 600px) {
  .view-iniciativa .pj-pn { grid-template-columns: 1fr; }
  .view-iniciativa .pj-pn .r { text-align: left; }
}
/* 14/10/2026 — Nome longo de iniciativa: letras mais estreitas, mesmo tamanho e mesmo nome (o recurso do "Quinteto / Brasilianos"). */
.view-iniciativa .ini-hero h1.ini-h1-longo { font-stretch: 66%; }
/* 15/10/2026 — Iniciativas: os títulos dos cartões alinhados na mesma linha (Marcos: "nessa imagem os titulos não estão alinhados").
   Os cartões dividem as linhas do grid (subgrid): se a linha de cima quebrar num cartão, a mesma linha cresce nos vizinhos, e a
   linha curta encosta embaixo, logo acima do título. */
@supports (grid-template-rows: subgrid) {
  .view-brasilianos .inic-card { grid-row: span 4; grid-template-rows: subgrid; row-gap: .35rem; align-content: stretch; }
  .view-brasilianos .inic-card .ic-q { align-self: end; }
  .view-brasilianos .inic-card .ic-t, .view-brasilianos .inic-card .ic-ver { align-self: start; }
}
/* 15/10/2026 — Boxes da equipe (Marcos: "o tamanho da fonte pode ser maior para facilitar a leitura e pode estar mais centralizada"):
   texto maior, tudo centrado no box (rostos, papel e texto) e linha de leitura confortável no box largo. */
.view-projetos #pjGente .guest.is-ficha { text-align: center; justify-items: center; }
.view-projetos #pjGente .guest.is-ficha .fi-rostos { justify-content: center; }
.view-projetos #pjGente .guest.is-ficha .ins { font-size: var(--fs-base); }
.view-projetos #pjGente .guest.is-ficha p { font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); line-height: 1.5; max-width: 60ch; margin-inline: auto; }
.view-projetos #pjGente .guest.is-junta p + p { margin-top: .7rem; }
.view-projetos #pjGente .guest.is-junta .fi-papel { display: block; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em; color: var(--claro-2); opacity: .8; margin-bottom: .1rem; }
/* 15/10/2026 — Agenda › Últimos shows: uma linha por show (Marcos: "a lista fica padronizada"); o texto que não cabe ganha "+" e abre o pop-up. */
.view-agenda .pv-lista .pv-v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.view-agenda .pv-lista .pv-c { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.view-agenda .pv-mais-ic { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; margin-left: .25rem; border-radius: 50%; border: 1px solid var(--laranja); color: var(--laranja); font-weight: 700; font-size: .95rem; line-height: 1; letter-spacing: 0; vertical-align: middle; }
.view-agenda .pv-lista .pv-tem { white-space: nowrap; }
.view-agenda .pv-lista .pv-linha { grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 1.1fr) 4.6rem; }
@media (max-width: 760px) { .view-agenda .pv-lista .pv-linha { grid-template-columns: minmax(0, 1fr) 4.6rem; } }
/* 15/10/2026 — Brasilianos › A Brasilianos: a matéria grande (galeria, vira carrossel com mais itens), dois botões e a foto dos dois embaixo
   do título no computador (no celular ela some: o título já vem logo antes do texto). */
.view-brasilianos .br-emp-acervo { margin: 1.6rem 0 0; max-width: 640px; }
.view-brasilianos .br-emp-bts { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 0; }
.view-brasilianos .br-emp-ph img { aspect-ratio: 3 / 2; object-position: 50% 30%; }
@media (max-width: 899px) { .view-brasilianos .br-emp-ph { display: none; } }
/* 15/10/2026 — Formato: sem a "Formação" (repetia "Quem toca com ele"), as próximas datas ocupam a largura toda. */
.view-projetos .ec-grid.is-um { grid-template-columns: minmax(0, 1fr); }
/* 15/10/2026 — Equipe dos discos com cara de ficha técnica (Marcos, "sim / sim" às propostas do crítico): boxes claros, fio de 1 px,
   letra escura, rótulo em vinho (contraste AA sobre o papel); um círculo por pessoa (rosto ou iniciais); box sem pessoa guarda a
   altura do círculo. Quem toca continua com os cartões pretos. */
.view-projetos #pjGente .guest.is-ficha { background: var(--papel); color: var(--tinta); border: 1px solid rgba(18, 17, 16, .18); box-shadow: none; }
.view-projetos #pjGente .guest.is-ficha .ins { color: var(--semente); }
.view-projetos #pjGente .guest.is-ficha p { color: var(--tinta-2); }
.view-projetos #pjGente .guest.is-junta .fi-papel { color: var(--tinta-2); opacity: 1; }
.view-projetos #pjGente .fi-rostos.fi-vaga { display: block; height: 84px; margin: 0 0 .6rem; }
@media (max-width: 599px) { .view-projetos #pjGente .fi-rostos.fi-vaga { height: 68px; } }
.view-projetos #pjGente .fi-rosto.fi-ini { background: #2A2724; color: #F2EDE6; }

/* ===== 15/10/2026 — parceiros e grupos: o prêmio na abertura e o rosto de cada integrante =====
   (Marcos, 15/10: "aqui tem que estar que ganhou o grammy"; "em quem é quando é um grupo coloque fotos dos participantes") */
.view-projetos .pr-won { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .6rem; max-width: 44ch; }
.view-projetos .pr-won li { display: grid; gap: .12rem; padding-left: .85rem; border-left: 3px solid currentColor; }
.view-projetos .pr-won .k { font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .85; }
.view-projetos .pr-won b { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-lg); line-height: 1.05; }
.view-projetos .pr-won li > span:last-child { font-size: 14px; line-height: 1.35; opacity: .9; }
.view-projetos .pr-int { list-style: none; margin: .4rem 0 2.2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.6rem 1.2rem; max-width: 820px; }
.view-projetos .pr-int-b { display: grid; justify-items: center; align-content: start; gap: .25rem; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; }
.view-projetos .pr-int-ph { width: 128px; height: 128px; border-radius: 50%; overflow: hidden; background: rgba(18,17,16,.08); display: grid; place-items: center; margin-bottom: .45rem; }
.view-projetos .pr-int-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.view-projetos .pr-int-ph.is-ini { background: #2A2724; color: #F2EDE6; font-family: var(--f-display); font-weight: 850; font-stretch: 78%; font-size: 2.4rem; }
.view-projetos .pr-int-b b { font-size: var(--fs-md); line-height: 1.2; }
.view-projetos .pr-int-b > span:last-child { font-size: 14px; color: var(--tinta-2); }
.view-projetos .pr-int-b:hover b { text-decoration: underline; text-decoration-color: var(--laranja); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.view-projetos .pr-int-b:focus-visible { outline: 2px solid var(--laranja); outline-offset: 4px; border-radius: 8px; }
@media (max-width: 599px) {
  .view-projetos .pr-int { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem .8rem; }
  .view-projetos .pr-int-ph { width: 100px; height: 100px; }
}
/* A foto da abertura do parceiro crescia além da faixa: o quadro é grid e a linha automática tomava a altura da imagem
   (capa quadrada de 547 px numa faixa de 400), e o pé da imagem sumia (Marcos, 15/10/2026, Brasília Brasil: "aqui a foto
   está cortada"). Uma linha e uma coluna do tamanho do quadro: a capa cabe inteira e o retrato respeita o enquadramento. */
.view-projetos .pr-hero-ph { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
/* No celular a foto vem antes do texto e a faixa não tem respiro embaixo: o prêmio encostava no fim da faixa. */
@media (max-width: 899px) { .view-projetos .pr-hero-tx { padding-bottom: 1.6rem; } }
/* No celular a regra geral das faixas (object-fit: cover) vencia a da capa e o nome do disco saía cortado. */
@media (max-width: 899px) { .view-projetos .pr-hero-ph.is-capa img { object-fit: contain !important; } }
/* Nota do Klaus Benedith no box de crédito (Marcos, 15/10/2026: "coloca explicação do Klaus para que saibam que não é erro"). */
.fi-nota { font-size: 13px; line-height: 1.45; color: var(--tinta-2); }
.view-projetos #pjGente .guest.is-ficha p.fi-nota { font-size: 13px; line-height: 1.45; color: var(--tinta-2); max-width: 40ch; margin-top: .7rem; }
/* 10 cordas: os dois desenhos (8 e 10 cordas) voltam ao começo da página, logo abaixo da frase do par de dó (Marcos, 15/10/2026). */
.view-bandolim #historia > .wrap > .strings { margin: 0 0 clamp(2.4rem, 5vw, 4rem); }

/* ===== 15/10/2026 — Dois de Ouro: quem mais tocou, vídeos e imprensa (Marcos: "tem muita coisa sobre dois de ouro que precisa estar aqui") ===== */
.view-dois-de-ouro .do-more { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.view-dois-de-ouro .do-more .who-sub { margin: 0 0 1rem; }
.view-dois-de-ouro .pj-vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.6rem .9rem; }
.view-dois-de-ouro .do-press { list-style: none; margin: 0; padding: 0; display: grid; max-width: 860px; }
.view-dois-de-ouro .do-press li > * { display: grid; gap: .25rem; padding: 1rem 0; border-top: 1px solid var(--linha); color: inherit; text-decoration: none; }
.view-dois-de-ouro .do-press b { font-size: var(--fs-base); font-weight: 650; line-height: 1.3; }
.view-dois-de-ouro .do-press span { font-size: 14px; color: var(--tinta-2); }
.view-dois-de-ouro .do-press em { font-family: var(--f-leitura); font-size: var(--fs-md); line-height: 1.4; }
.view-dois-de-ouro .do-press p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--tinta-2); max-width: 70ch; }
.view-dois-de-ouro .do-press a:hover b { text-decoration: underline; text-decoration-color: var(--laranja); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.view-dois-de-ouro .do-more .who-sub { font-size: var(--fs-md); font-family: var(--f-display); font-weight: 800; font-stretch: 84%; }
.view-dois-de-ouro #doMore { margin-top: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: .8rem; }
.view-dois-de-ouro #doMore .nm { font-size: var(--fs-sm); }
.view-dois-de-ouro #doMore .ins { font-size: 13px; }
@media (max-width: 599px) { .view-dois-de-ouro #doMore { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== 15/10/2026 — foto até o pé da barra de abas (Marcos: "essa sobra abaixo da foto não está legal", print das 10 cordas) =====
   Quando a barra de abas encosta na faixa e tem a cor dela (10 cordas, Discografia, Brasilianos), HDH.fotoDesce mede a barra,
   a foto desce até o pé dela e as abas ficam do lado esquerdo, alinhadas com o título. Acima da barra presa (30), abaixo do cabeçalho (40). */
@media (min-width: 900px) {
  /* Mais forte que a regra da faixa (bottom: 0 !important), que tem o mesmo :is() no começo. */
  :is(.page-hero.com-foto, .hh-hero, .ch-hero, .ed-hero, .qt-hero, .do-hero, .pr-hero).foto-desce > .wrap:first-of-type > :is(.hero-ph, .ph, .ch-photo, .ed-photo, .qt-ph, .do-ph, .pr-hero-wrap) { bottom: calc(-1 * var(--barra-h, 0px)) !important; z-index: 31; }
  .sec-tabs.ao-lado-da-foto > .wrap > .eyebrow { max-width: 60%; }
  /* A fileira de abas sai da margem esquerda (margem negativa) e rola de lado se não couber: termina antes da foto. */
  .ct-evtabs.sec-tabs.ao-lado-da-foto .ct-evtabs-row { max-width: calc(60% + var(--pad)) !important; }
}