/* ===== OPS-021 (18/09/2026) · fontes hospedadas no proprio servidor =====
   Antes o site chamava Bodoni 72 e Avenir Next do computador de quem abre, via local().
   Isso funciona no Mac do Bruno e falha em Windows e Android, onde essas fontes nao existem.
   As da Apple nao podem ser embarcadas: a licenca nao permite uso como webfont.
   Agora: Bodoni Moda e Figtree, as duas com licenca aberta (OFL 1.1 e OFL 1.1), variaveis,
   servidas do proprio dominio. Licencas em assets/fonts/.
   Bodoni Moda tem eixo optico (opsz 6 a 96): com font-optical-sizing auto, o navegador afina
   as hastes nos titulos grandes sozinho, que e o efeito Didone que a pagina depende. */
@font-face {
  font-family: "Balancear Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/bodoni-moda-latin-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Balancear Display";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/bodoni-moda-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Balancear Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/bodoni-moda-latin-ext-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Balancear Display";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/bodoni-moda-latin-ext-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Balancear Sans";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fonts/figtree-latin-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Balancear Sans";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fonts/figtree-latin-ext-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


:root {
  --ink: #080808;
  --paper: #ededeb;
  --paper-bright: #ffffff;
  --accent: #ffffff;
  --line-dark: #303030;
  --line-light: #c5c5c2;
  --muted-dark: #5e5e5b;
  --muted-light: #a7a7a3;
  --champagne: #f6ede2;
  --ivory: #fcfbf3;
  --coral: #c19484;
  --rose: #dfc5b8;
  --brown: #463732;
  --display: "Balancear Display", "Iowan Old Style", Georgia, serif;
  --sans: "Balancear Sans", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); font-optical-sizing: none; font-variation-settings: "opsz" 11; }
/* OPS-021: eixo optico travado em 11, o valor de texto da Bodoni Moda. Com "auto" o navegador
   afina as hastes nos titulos grandes e a familia fica fragil demais, longe da Bodoni 72 que o
   Bruno aprovou. Comparado quadro a quadro em 11, 18, 28 e automatico. */
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 1rem; line-height: 1.55; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: .65rem 1rem; color: var(--ink); background: white; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  min-height: 86px; padding: 0 clamp(1.25rem, 4vw, 4.5rem); color: var(--paper-bright);
  background: linear-gradient(to bottom, #080808e8, transparent); transition: background .25s ease, min-height .25s ease;
}
.site-header.scrolled { min-height: 68px; background: #080808f5; border-bottom: 1px solid #ffffff20; backdrop-filter: blur(12px); }
.wordmark { display: block; width: 112px; height: 54px; overflow: hidden; }
.wordmark img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.5); }
.main-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.2rem); font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.main-nav a { position: relative; padding: .65rem 0; }
.main-nav a:not(.nav-listen)::after { content: ""; position: absolute; right: 0; bottom: .35rem; left: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .2s ease; }
.main-nav a:hover::after, .main-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav-listen { padding: .75rem 1rem !important; color: var(--ink); background: white; }
.menu-toggle { position: relative; z-index: 2; display: none; width: 44px; height: 44px; flex: 0 0 44px; padding: 10px; background: transparent; border: 0; }
.menu-toggle::before, .menu-toggle::after { content: ""; position: absolute; right: 10px; left: 10px; height: 1px; background: white; transition: transform .2s ease, top .2s ease; }
.menu-toggle::before { top: 17px; }
.menu-toggle::after { top: 25px; }
.menu-toggle span:not(.sr-only) { display: none; }

.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(340px, .75fr); min-height: 100svh; color: var(--paper-bright); background: var(--ink); overflow: hidden; }
.hero-copy { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; padding: 10rem clamp(1.5rem, 5vw, 5.75rem) clamp(3rem, 7vw, 6rem); }
.eyebrow { margin: 0 0 1.25rem; color: var(--coral); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow.dark { color: var(--ink); }
.hero h1 { width: min(100%, 760px); margin: -8% 0; overflow: hidden; }
.hero h1 img { width: 100%; transform: scale(1.22); }
.hero-bottom { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-top: clamp(3rem, 8vh, 6rem); border-top: 1px solid var(--line-dark); padding-top: 1.5rem; }
.hero-bottom p { max-width: 31rem; margin: 0; color: #d4d4d1; font-size: clamp(1rem, 1.35vw, 1.3rem); }
.text-link { flex: 0 0 auto; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: .35rem; }
.text-link span { color: white; }
.hero-visual { position: relative; min-height: 100svh; margin: 0; background: #232323; overflow: hidden; }
.type-poster { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding: 7.5rem 2rem 3rem; background: linear-gradient(150deg, #292929, #0b0b0b 70%); }
.type-poster::before { content: ""; position: absolute; inset: 0; opacity: .17; background: repeating-linear-gradient(90deg, transparent 0 7.7%, #fff 7.7% 7.8%); }
.poster-index, .poster-year { position: relative; z-index: 1; color: var(--paper); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.poster-year { justify-self: end; align-self: end; }
.type-poster b { position: relative; z-index: 1; place-self: center; color: transparent; font: 400 clamp(18rem, 34vw, 36rem)/.65 var(--display); -webkit-text-stroke: 2px white; transform: translateX(-2%); }
.media-frame figcaption { position: absolute; right: 1rem; bottom: 1rem; z-index: 3; max-width: 14rem; color: #bdbdb9; font-size: .62rem; letter-spacing: .08em; text-align: right; text-transform: uppercase; }
.hero-rail { position: absolute; top: 50%; right: -5.3rem; z-index: 4; color: var(--paper); font-size: .62rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; transform: rotate(90deg); transform-origin: center; }

.section-index { display: grid; grid-template-columns: max-content; gap: .55rem; align-items: center; margin-bottom: clamp(3rem, 7vw, 6rem); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.section-index::after { content: ""; height: 1px; background: currentColor; opacity: .35; }
.section-index.light { color: var(--paper); }
.feature-section { padding: clamp(5rem, 10vw, 10rem) clamp(1.5rem, 5vw, 5.75rem); background: var(--champagne); }
.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .7fr); gap: clamp(3rem, 8vw, 9rem); align-items: center; }
.feature-copy h2 { max-width: 9ch; margin: 0; font: 400 clamp(4.3rem, 10vw, 9rem)/.76 var(--display); letter-spacing: -.06em; text-transform: uppercase; }
.feature-copy > p { max-width: 40rem; margin: 2.4rem 0 0; font-size: clamp(1.05rem, 1.4vw, 1.3rem); }
.feature-actions { display: flex; align-items: center; gap: 1.6rem; margin-top: 2.5rem; }
.button { display: inline-flex; gap: 1.5rem; align-items: center; justify-content: space-between; min-height: 52px; padding: .85rem 1.1rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.button-dark { color: white; background: var(--ink); }
.dark-link span { color: var(--ink); }
.release-object { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1; padding: clamp(1.5rem, 3vw, 3rem); color: var(--paper); background: var(--ink); box-shadow: 2rem 2rem 0 #00000018; overflow: hidden; }
.release-object::after { content: ""; position: absolute; right: -20%; bottom: -25%; width: 75%; aspect-ratio: 1; border: 1px solid var(--coral); border-radius: 50%; box-shadow: 0 0 0 2.2rem #dfc5b812, 0 0 0 4.4rem #dfc5b80c; }
.release-top, .release-bottom { position: relative; z-index: 1; font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.release-bottom { align-self: flex-end; text-align: right; }
.release-object strong { position: relative; z-index: 1; font: 400 clamp(2.5rem, 5vw, 5.4rem)/.72 var(--display); letter-spacing: -.055em; text-transform: uppercase; }
.release-object i { font-weight: 400; }

.videos-section { padding: clamp(5rem, 10vw, 10rem) clamp(1.5rem, 5vw, 5.75rem); color: var(--paper); background: #151515; }
.videos-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .5fr); gap: 3rem; align-items: end; margin-bottom: clamp(3rem, 6vw, 5rem); }
.videos-head h2 { margin: 0; font: 400 clamp(4rem, 9vw, 9rem)/.76 var(--display); letter-spacing: -.06em; text-transform: uppercase; }
.videos-head > p { max-width: 30rem; margin: 0 0 .8rem; color: var(--muted-light); font-size: 1.05rem; }
.video-feature { margin: 0; }
.video-shell { position: relative; width: 100%; aspect-ratio: 16/9; background: #050505; border: 1px solid #303030; overflow: hidden; }
.video-shell iframe { width: 100%; height: 100%; border: 0; }
.video-poster { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.5rem, 4vw, 4rem); background: repeating-linear-gradient(115deg, transparent 0 9%, #ffffff08 9% 9.2%), radial-gradient(circle at 78% 32%, #333 0, #111 30%, #050505 68%); }
.video-poster::after { content: ""; position: absolute; inset: 8%; border: 1px solid #ffffff22; pointer-events: none; }
.video-label { position: relative; z-index: 1; color: var(--rose); font-size: .68rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.video-poster strong { position: relative; z-index: 1; max-width: 9ch; font: 400 clamp(3.4rem, 9vw, 9rem)/.72 var(--display); letter-spacing: -.055em; text-transform: uppercase; }
.dvd-title-art { position: relative; z-index: 1; align-self: center; width: min(88%, 1100px); }
.dvd-title-art img { width: 100%; height: auto; filter: drop-shadow(0 12px 28px #0008); }
.video-play { position: relative; z-index: 2; align-self: flex-end; min-height: 52px; padding: .85rem 1.2rem; color: var(--brown); background: var(--ivory); border: 0; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.video-play span { margin-right: .65rem; }
.video-play:hover, .video-play:focus-visible { color: white; background: #303030; }
.video-meta { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--line-dark); }
.video-meta > span, .video-meta a { color: var(--muted-light); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.video-meta h3 { margin: 0; font: 400 clamp(1.7rem, 3vw, 3rem)/1 var(--display); text-transform: uppercase; }
.video-meta a:hover { color: white; }
.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: clamp(3rem, 6vw, 5rem); }
.video-shell-small { aspect-ratio: 16/10; }
.video-poster-small { padding: clamp(1.25rem, 3vw, 2.5rem); background: repeating-linear-gradient(130deg, transparent 0 12%, #ffffff08 12% 12.25%), linear-gradient(145deg, var(--brown), #080808 70%); }
.video-poster-small.alternate { background: repeating-radial-gradient(circle at 20% 110%, #dfc5b815 0 1px, transparent 2px 26px), linear-gradient(145deg, #201b19, #050505); }
.video-poster-small strong { align-self: flex-start; font-size: clamp(2.5rem, 6vw, 6rem); }
.video-card .video-meta { grid-template-columns: 1fr auto; }
.video-card .video-meta h3 { font-size: clamp(1.3rem, 2.3vw, 2.2rem); }

.catalog-section { padding: clamp(5rem, 10vw, 10rem) clamp(1.5rem, 5vw, 5.75rem); color: var(--paper); background: var(--ink); }
.catalog-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, .55fr); gap: 2rem; align-items: end; margin-bottom: 4rem; }
.catalog-head h2 { max-width: 12ch; margin: 0; font: 400 clamp(3.6rem, 8vw, 7.8rem)/.82 var(--display); letter-spacing: -.05em; text-transform: uppercase; }
.catalog-head p { max-width: 28rem; margin: 0 0 .7rem; color: var(--muted-light); font-size: 1.05rem; }
.track-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-dark); }
.track-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; min-height: 92px; border-bottom: 1px solid var(--line-dark); transition: color .2s ease, padding .2s ease; }
.track-list li:hover { color: white; padding-left: .6rem; }
.track-list span { color: var(--muted-light); font-size: .68rem; font-weight: 700; }
.track-list strong { font: 400 clamp(1.8rem, 3.3vw, 3.25rem)/1 var(--display); letter-spacing: -.025em; text-transform: uppercase; }
.track-list em { color: var(--muted-light); font-size: .68rem; font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.catalog-link { display: inline-block; margin-top: 2.5rem; color: white; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.about-section { padding: clamp(5rem, 10vw, 10rem) clamp(1.5rem, 5vw, 5.75rem); background: var(--paper); }
.about-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(300px, .55fr); gap: clamp(3rem, 8vw, 9rem); }
.about-grid > *, .site-footer > * { min-width: 0; }
.about-grid h2 { margin: 0; font: 400 clamp(4rem, 9vw, 9rem)/.78 var(--display); letter-spacing: -.06em; text-transform: uppercase; }
.about-copy { align-self: end; }
.about-copy p { margin: 0 0 1.25rem; font-size: clamp(1.05rem, 1.4vw, 1.3rem); }
.about-copy .editorial-note { margin-top: 2.5rem; padding-top: 1rem; color: var(--muted-dark); border-top: 1px solid var(--line-light); font-size: .78rem; }
.artists-section { padding: clamp(5rem, 10vw, 10rem) clamp(1.5rem, 5vw, 5.75rem); color: var(--paper); background: #151515; }
.artists-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .55fr); gap: 3rem; align-items: end; }
.artists-head h2 { display: grid; margin: 0; font: 400 clamp(4rem, 10vw, 10rem)/.75 var(--display); letter-spacing: -.06em; text-transform: uppercase; }
.artists-head h2 i { color: white; font-size: .6em; font-weight: 400; }
.artists-head p { max-width: 34rem; margin: 0 0 .5rem; font-size: clamp(1.05rem, 1.4vw, 1.3rem); }
.artists-visual { position: relative; aspect-ratio: 16/7; margin: clamp(3rem, 7vw, 6rem) 0 0; background: var(--ink); overflow: hidden; }
.line-composition { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr auto 1fr; place-items: center; padding: 4%; color: var(--paper); }
.line-composition span { font: 400 clamp(9rem, 25vw, 25rem)/.6 var(--display); }
.line-composition i { width: 1px; height: 70%; background: #ffffff80; transform: rotate(18deg); }

.site-footer { display: grid; grid-template-columns: 1fr auto; gap: 4rem; align-items: end; padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 5.75rem) 2.5rem; color: var(--paper); background: var(--ink); }
.footer-wordmark { width: min(62vw, 760px); margin-block: -9%; overflow: hidden; }
.footer-wordmark img { width: 100%; transform: scale(1.22); }
.footer-links { display: grid; gap: .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.footer-links a:hover { color: white; text-decoration: underline; text-underline-offset: .35rem; }
.footer-status { display: flex; justify-content: space-between; gap: 1rem; grid-column: 1 / -1; margin: 3rem 0 0; padding-top: 1rem; color: var(--muted-light); border-top: 1px solid var(--line-dark); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }

:focus-visible { outline: 3px solid white; outline-offset: 4px; }

/* OPS-017 · fotografias editoriais, release, artistas, agenda, contato e rodapé social */
.editorial-photo { position: relative; margin: 0; overflow: hidden; background: #111; }
.editorial-photo picture, .editorial-photo img { width: 100%; height: 100%; }
.editorial-photo img { object-fit: cover; }
.dvd-spread { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(.75rem, 1.6vw, 1.5rem); margin: 0 0 clamp(3rem, 7vw, 6rem); }
.dvd-photo { aspect-ratio: 16/9; }
.dvd-side-photo picture { position: absolute; inset: 0; }
.dvd-side-photo img { object-position: 50% 30%; }
.history-photo { aspect-ratio: 2/1; margin: 0 0 clamp(3rem, 7vw, 6rem); }
.about-copy .release-lead { margin: 0; font: 400 clamp(2rem, 3.6vw, 3.6rem)/.98 var(--display); letter-spacing: -.035em; }
.release-body { columns: 2 22rem; column-gap: clamp(2rem, 6vw, 6rem); margin-top: clamp(3rem, 6vw, 5rem); }
.release-body p { margin: 0 0 1.15rem; break-inside: avoid; font-size: clamp(1rem, 1.25vw, 1.18rem); }

.artist-bios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: clamp(1.25rem, 3vw, 2.5rem); }
.artist-card { position: relative; min-width: 0; padding: clamp(1.5rem, 3.4vw, 3rem); background: #0d0d0d; border: 1px solid var(--line-dark); overflow: hidden; }
.artist-mark { position: absolute; top: -.08em; right: .04em; color: transparent; font: 400 clamp(9rem, 17vw, 15rem)/.8 var(--display); -webkit-text-stroke: 1px #ffffff38; pointer-events: none; }
.artist-role { position: relative; margin: 0 0 1rem; color: var(--rose); font-size: .68rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.artist-card h3 { position: relative; max-width: 7ch; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); font: 400 clamp(2.6rem, 5vw, 4.8rem)/.82 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.artist-card p:last-child { position: relative; margin: 0; color: #d4d4d1; font-size: clamp(1rem, 1.2vw, 1.12rem); }

.agenda-section { padding: clamp(5rem, 10vw, 10rem) clamp(1.5rem, 5vw, 5.75rem); background: var(--champagne); }
.agenda-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .8fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.agenda-photo { aspect-ratio: 3/2; }
.agenda-copy { min-width: 0; }
.agenda-copy h2 { margin: 0; font: 400 clamp(3.6rem, 7.4vw, 7.4rem)/.8 var(--display); letter-spacing: -.055em; text-transform: uppercase; }
.agenda-state { display: flex; align-items: center; gap: .75rem; margin: 2.2rem 0 1.25rem; padding: 1rem 0; border-block: 1px solid #0000002b; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.agenda-state::before { content: ""; width: .55rem; height: .55rem; flex: 0 0 .55rem; background: var(--coral); border-radius: 50%; }
.agenda-copy > p:not(.agenda-state) { max-width: 34rem; margin: 0; font-size: clamp(1.02rem, 1.3vw, 1.2rem); }
.agenda-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; margin-top: 2.2rem; }

.contact-section { padding: clamp(5rem, 10vw, 10rem) clamp(1.5rem, 5vw, 5.75rem); background: var(--paper); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .95fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: end; }
.contact-head { min-width: 0; }
.contact-head h2 { margin: 0; font: 400 clamp(3rem, 5.8vw, 6.4rem)/.82 var(--display); letter-spacing: -.055em; text-transform: uppercase; }
.contact-head p { max-width: 30rem; margin: 2rem 0 0; font-size: clamp(1.02rem, 1.3vw, 1.2rem); }
.contact-list { min-width: 0; margin: 0; border-top: 1px solid var(--line-light); }
.contact-list > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--line-light); }
.contact-list dt { color: var(--muted-dark); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.contact-list dd { min-width: 0; margin: 0; font-size: clamp(1.02rem, 1.45vw, 1.3rem); overflow-wrap: anywhere; }
.contact-list a { border-bottom: 1px solid currentColor; }
.contact-list a:hover, .contact-list a:focus-visible { color: var(--brown); }
.contact-list address { font-style: normal; }
.closing-photo { aspect-ratio: 16/9; margin-top: clamp(3.5rem, 8vw, 7rem); }

.footer-social ul { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.footer-social a { display: inline-flex; align-items: center; gap: .8rem; min-height: 44px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.footer-social svg { width: 22px; height: 22px; flex: 0 0 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.footer-social svg .fill { fill: currentColor; stroke: none; }
.footer-social svg .dots { stroke-width: 2.4; }
.videos-head > *, .catalog-head > *, .agenda-grid > *, .contact-grid > * { min-width: 0; }
.footer-social a:hover span, .footer-social a:focus-visible span { text-decoration: underline; text-underline-offset: .35rem; }


/* OPS-017 (17/09) · tokens da identidade do DVD
   Valores provisórios, amostrados do PNG oficial "DVD COMPLETO - TITLE". Quando o PSD chegar, ajustar só aqui
   e trocar os arquivos de dist/assets/identity/ (ver data-identity-slot no HTML). */
:root {
  --dvd-champagne: var(--champagne);
  --dvd-ivory: var(--ivory);
  --dvd-coral: var(--coral);
  --dvd-rose: var(--rose);
  --dvd-brown: var(--brown);
  --photo-filter: grayscale(1) contrast(1.06); /* direção preto e branco; "none" devolve as cores dos derivados */
  --kw: var(--dvd-rose);
}
.feature-section, .agenda-section { background: var(--dvd-champagne); }
.video-label { color: var(--dvd-rose); }
.video-play { color: var(--dvd-brown); background: var(--dvd-ivory); }
.release-object::after { border-color: var(--dvd-coral); }

/* fotos em preto e branco */
.editorial-photo img, .photo-frame img, .hero-photo img { filter: var(--photo-filter); }

/* títulos com palavra-chave em destaque */
h2 em { color: var(--kw); font-style: italic; }
.hero, .videos-section, .catalog-section, .artists-section, .contact-section { --kw: var(--dvd-rose); }
.feature-section, .about-section, .agenda-section { --kw: var(--dvd-brown); }

/* hero: foto oficial + arte do DVD + chamada */
.hero-photo, .hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-photo img { object-fit: cover; object-position: 50% 40%; }
.hero-card { position: absolute; inset: 0 0 auto; z-index: 2; display: grid; justify-items: start; gap: 1.1rem; padding: 7.5rem clamp(1.25rem, 3vw, 2.5rem) 6rem; background: linear-gradient(to bottom, #000000e6 0%, #000000b3 50%, #00000000 100%); }
.hero-card-label { color: var(--paper); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.hero-dvd-art { display: block; width: min(100%, 440px); }
.hero-dvd-art img { width: 100%; height: auto; filter: drop-shadow(0 10px 24px #000a); }
.hero-visual::after { content: ""; position: absolute; inset: auto 0 0; z-index: 3; height: 4px; background: var(--dvd-champagne); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.button-light { color: var(--ink); background: var(--paper-bright); }
.button-light:hover, .button-light:focus-visible { background: var(--dvd-champagne); }

/* chamadas compactas para plataformas verificadas */
.platforms-label { margin: 2rem 0 .75rem; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.platform-links { display: flex; flex-wrap: wrap; gap: .6rem; }
.button-outline { gap: 1rem; min-height: 44px; padding: .55rem .95rem; color: var(--ink); background: transparent; border: 1px solid currentColor; }
.button-outline:hover, .button-outline:focus-visible { color: var(--paper-bright); background: var(--ink); border-color: var(--ink); }

/* história: díptico "dois shows em um só" */
.show-diptych { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); align-items: start; margin: 0 0 clamp(3rem, 7vw, 6rem); }
.diptych-photo { min-width: 0; margin: 0; }
.diptych-photo:nth-child(2) { margin-top: clamp(2rem, 6vw, 5rem); }
.photo-frame { display: block; aspect-ratio: 4/3; overflow: hidden; background: #111; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.diptych-photo figcaption { display: flex; align-items: baseline; gap: .9rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line-light); font: 400 clamp(1.5rem, 2.6vw, 2.4rem)/1 var(--display); letter-spacing: -.03em; text-transform: uppercase; }
.diptych-photo figcaption span { color: var(--muted-dark); font: 700 .68rem/1 var(--sans); letter-spacing: .14em; }

/* repertório: lista + foto vertical */
.catalog-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.catalog-tracks { min-width: 0; }
.catalog-photo { position: sticky; top: 96px; aspect-ratio: 4/5; }

/* agenda provisória: próximos shows */
.agenda-grid { grid-template-columns: minmax(0, 1.05fr) minmax(280px, .85fr); align-items: start; }
.agenda-photo { position: sticky; top: 96px; }
.show-list { margin: 2.4rem 0 0; padding: 0; list-style: none; border-top: 1px solid #00000033; }
.show-list[hidden], .show[hidden], .agenda-state[hidden] { display: none; }
.show { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: 1.2rem; align-items: center; padding: 1.15rem 0; border-bottom: 1px solid #00000033; }
.show-date { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: .45rem; align-items: center; justify-content: start; line-height: 1; }
.show-day { grid-row: 1 / 3; font: 400 3.1rem/.8 var(--display); letter-spacing: -.04em; }
.show-month { align-self: end; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.show-weekday { align-self: start; margin-top: .25rem; color: var(--muted-dark); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.show-place { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .8rem; min-width: 0; margin: 0; }
.show-city { font: 400 clamp(1.5rem, 2.4vw, 2.3rem)/1.02 var(--display); letter-spacing: -.02em; text-transform: uppercase; }
.show-uf { padding: .2rem .45rem; border: 1px solid currentColor; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-decoration: none; }
.agenda-copy > p.agenda-note { margin: 1.8rem 0 0; }

/* contato em bloco escuro, antes do rodapé */
.contact-section { color: var(--paper); background: #101010; }
.contact-head p { color: #d4d4d1; }
.contact-list { border-top-color: var(--line-dark); }
.contact-list > div { border-bottom-color: var(--line-dark); }
.contact-list dt { color: var(--muted-light); }
.contact-list a:hover, .contact-list a:focus-visible { color: var(--dvd-rose); }

/* formação atual: menos "cartão", mais página editorial */
.artist-card { padding: clamp(1.5rem, 3vw, 2.5rem) 0 0; background: transparent; border: 0; border-top: 1px solid var(--line-dark); }
.artist-mark { top: .05em; right: 0; }

/* rodada de correção 1 */
.catalog-head h2 { max-width: 7.4em; }
.about-grid h2 { font-size: clamp(4rem, 7.2vw, 7.4rem); }
.feature-copy > p.platforms-label { max-width: none; margin: 2rem 0 .75rem; font-size: .68rem; }
.show-place { align-items: center; }


/* ================================ OPS-018 (18/09/2026) ================================
   Pacote aprovado por Bruno em 18/09/2026: cor em todas as fotografias, escala tipografica nova
   nas oito secoes, hero em tela cheia com a DSC06657, arte oficial do DVD no quadro do Audiovisual,
   duas secoes novas (participacoes e Casa Potencia) e contato no rodape.
   Para voltar ao preto e branco, basta --photo-filter: grayscale(1) contrast(1.06). */

/* 1 - cor em todas as fotografias */
:root { --photo-filter: none; }
.reel-section { --kw: var(--dvd-brown); }
.potencia-section { --kw: var(--dvd-rose); }

/* 2 - escala tipografica nova (mesma proporcao entre as secoes, cerca de 56% da anterior) */
.hero h1 { width: min(100%, 16ch); margin: 0; overflow: visible; font: 400 clamp(2.7rem, 6vw, 5.6rem)/.92 var(--display); letter-spacing: -.045em; text-transform: uppercase; text-wrap: balance; }
.hero h1 em { font-style: italic; }
.feature-copy h2 { max-width: 12ch; font-size: clamp(2.6rem, 5.2vw, 4.6rem); }
.videos-head h2 { font-size: clamp(2.5rem, 5vw, 4.4rem); }
.catalog-head h2 { max-width: 15ch; font-size: clamp(2.4rem, 4.6vw, 4rem); }
.about-grid h2 { font-size: clamp(2.5rem, 5vw, 4.4rem); }
.artists-head h2 { font-size: clamp(2.5rem, 5vw, 4.4rem); line-height: .82; }
.agenda-copy h2 { font-size: clamp(2.4rem, 4.6vw, 4rem); }
.about-copy .release-lead { font-size: clamp(1.45rem, 2.3vw, 2.3rem); line-height: 1.02; }
.track-list strong { font-size: clamp(1.5rem, 2.5vw, 2.3rem); }
.artist-card h3 { max-width: 10ch; margin-bottom: clamp(1rem, 2vw, 1.6rem); font-size: clamp(1.8rem, 3vw, 2.6rem); }
.video-meta h3 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); }
.show-city { font-size: clamp(1.3rem, 2vw, 1.85rem); }
.show-day { font-size: 2.45rem; }
.diptych-photo figcaption { font-size: clamp(1.3rem, 2vw, 1.8rem); }

/* 3 - respiro menor: cada secao fecha em uma tela de 1440x900 */
.feature-section, .videos-section, .catalog-section, .about-section, .artists-section, .agenda-section { padding-block: clamp(3rem, 5vw, 5rem); }
.section-index { margin-bottom: clamp(1.1rem, 2.2vw, 1.9rem); }
.catalog-head { margin-bottom: clamp(1.5rem, 3vw, 2.6rem); }
.videos-head { margin-bottom: clamp(1.75rem, 3.4vw, 3rem); }
.feature-copy > p { margin-top: clamp(1.25rem, 2.4vw, 2rem); }
.feature-actions { margin-top: clamp(1.5rem, 2.6vw, 2.2rem); }
.release-body { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.show-diptych { margin-bottom: clamp(2rem, 4vw, 3.5rem); }

/* 4 - hero em tela cheia, foto colorida com degrade e arte do DVD */
.hero { display: block; grid-template-columns: none; position: relative; min-height: 100svh; }
.hero-visual { position: absolute; inset: 0; min-height: 0; margin: 0; background: #0b0b0b; }
.hero-visual::after { content: ""; position: absolute; inset: 0; z-index: 1; height: auto; background: linear-gradient(94deg, #050505f2 0%, #050505db 30%, #05050580 54%, #0505051f 80%, #05050500 100%), linear-gradient(to top, #050505e0 0%, #05050552 28%, #05050500 58%); }
.hero-photo img { object-position: 50% 42%; }
.hero-dvd-art { position: absolute; right: clamp(1.25rem, 4vw, 4.5rem); bottom: clamp(2.5rem, 5vw, 4.5rem); z-index: 2; display: block; width: min(32%, 420px); }
.hero-copy { position: relative; z-index: 3; min-height: 100svh; padding: 9rem clamp(1.5rem, 5vw, 5.75rem) clamp(2.5rem, 5vw, 4rem); }
.hero .eyebrow { color: var(--dvd-rose); }
.hero-bottom { max-width: 62rem; margin-top: clamp(1.75rem, 4vh, 3rem); border-top-color: #ffffff3d; }

/* 5 - arte oficial do DVD no quadro do Audiovisual (proporcao preservada dentro do quadrado) */
.release-object { display: block; margin: 0; padding: 0; }
.release-object::after { content: none; }
.release-object picture { display: block; width: 100%; height: 100%; }
.release-object img { width: 100%; height: 100%; object-fit: contain; }

/* 6 - repertorio: a foto define a altura e a lista se ajusta */
.catalog-body { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); align-items: stretch; }
.catalog-photo { position: relative; top: auto; height: 100%; aspect-ratio: auto; min-height: 320px; }
.catalog-photo picture, .catalog-photo img { height: 100%; }
.track-list li { min-height: 0; padding-block: .9rem; }
.catalog-link { margin-top: 1.6rem; }

/* 7 - artistas: foto da dupla ao lado do titulo */
.artists-head { grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.artists-intro { min-width: 0; }
.artists-head p { margin: clamp(1.1rem, 2.2vw, 1.8rem) 0 0; }
.artists-visual { position: relative; aspect-ratio: 3/2; margin: 0; overflow: hidden; background: #111; }
.artists-visual picture, .artists-visual img { display: block; width: 100%; height: 100%; }
.artists-visual img { object-fit: cover; object-position: 50% 42%; }
.artist-bios { margin-top: clamp(1.75rem, 3.4vw, 3rem); }

/* 8 - agenda: foto nova e entrada animada das datas */
.agenda-grid { grid-template-columns: minmax(0, 1.05fr) minmax(300px, .9fr); align-items: center; }
.agenda-photo { position: relative; top: auto; }
.show-list { margin-top: clamp(1.4rem, 2.8vw, 2rem); }
.show { padding-block: .85rem; }
.agenda-copy > p.agenda-note { margin-top: 1.4rem; }
.agenda-actions { margin-top: 1.5rem; }
@keyframes show-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.agenda-section.is-visible .show:not([hidden]) { animation: show-in .6s cubic-bezier(.22,.7,.28,1) both; }
.agenda-section.is-visible .show:nth-child(1) { animation-delay: .04s; }
.agenda-section.is-visible .show:nth-child(2) { animation-delay: .12s; }
.agenda-section.is-visible .show:nth-child(3) { animation-delay: .2s; }
.agenda-section.is-visible .show:nth-child(4) { animation-delay: .28s; }
.agenda-section.is-visible .show:nth-child(5) { animation-delay: .36s; }
.agenda-section.is-visible .show:nth-child(6) { animation-delay: .44s; }
.agenda-section.is-visible .show:nth-child(7) { animation-delay: .52s; }
.agenda-section.is-visible .show:nth-child(8) { animation-delay: .6s; }

/* 9 - participacoes especiais: carrossel de altura fixa e largura variavel */
.reel-section { padding-block: clamp(2.5rem, 4.5vw, 4.5rem); background: var(--dvd-champagne); border-top: 1px solid #00000014; }
.reel-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, .6fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: end; margin: 0 clamp(1.5rem, 5vw, 5.75rem) clamp(1.5rem, 3vw, 2.4rem); }
.reel-head > *, .potencia-head > * { min-width: 0; }
.reel-head h2 { margin: 0; font: 400 clamp(2.4rem, 4.6vw, 4rem)/.84 var(--display); letter-spacing: -.05em; text-transform: uppercase; }
.reel-head > p { max-width: 30rem; margin: 0 0 .4rem; font-size: clamp(1rem, 1.25vw, 1.15rem); }
.reel { position: relative; }
.reel-track { display: flex; gap: clamp(.6rem, 1.2vw, 1.1rem); margin: 0; padding: 0 clamp(1.5rem, 5vw, 5.75rem); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline-start: clamp(1.5rem, 5vw, 5.75rem); scroll-behavior: smooth; scrollbar-width: none; }
.reel-track::-webkit-scrollbar { display: none; }
.reel-item { flex: 0 0 auto; min-width: 0; scroll-snap-align: start; }
.reel-item figure { margin: 0; }
.reel-item picture { display: block; height: clamp(300px, 40vh, 420px); overflow: hidden; background: #111; }
.reel-item img { width: auto; max-width: none; height: 100%; }
.reel-item figcaption { display: grid; gap: .25rem; margin-top: .8rem; font: 400 clamp(1.15rem, 1.7vw, 1.5rem)/1.05 var(--display); letter-spacing: -.02em; text-transform: uppercase; }
.reel-item figcaption span { color: var(--muted-dark); font: 700 .64rem/1 var(--sans); letter-spacing: .14em; }
.reel-controls { display: flex; gap: .6rem; margin: clamp(1.1rem, 2.2vw, 1.8rem) clamp(1.5rem, 5vw, 5.75rem) 0; }
.reel-button { display: grid; place-items: center; width: 48px; height: 48px; color: var(--ink); background: transparent; border: 1px solid #00000038; cursor: pointer; }
.reel-button:hover, .reel-button:focus-visible { color: var(--paper); background: var(--ink); border-color: var(--ink); }

/* 10 - Casa Potencia: grade de quatro verticais */
.potencia-section { padding: clamp(2.5rem, 4.5vw, 4.5rem) clamp(1.5rem, 5vw, 5.75rem); color: var(--paper); background: #0d0d0d; }
.potencia-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .7fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }
.potencia-head h2 { margin: 0; font: 400 clamp(2.4rem, 4.6vw, 4rem)/.84 var(--display); letter-spacing: -.05em; text-transform: uppercase; }
.potencia-head > p { max-width: 34rem; margin: 0 0 .4rem; color: #d4d4d1; font-size: clamp(1rem, 1.25vw, 1.15rem); }
.potencia-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.6rem, 1.2vw, 1.1rem); }
.potencia-grid figure { min-width: 0; margin: 0; }
.potencia-grid picture { display: block; aspect-ratio: 2/3; overflow: hidden; background: #111; }
.potencia-grid img { width: 100%; height: 100%; object-fit: cover; }
.potencia-grid figcaption { margin-top: .7rem; color: var(--muted-light); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* 11 - contato no rodape, sem o logotipo grande */
.site-footer { grid-template-columns: minmax(0, 1fr) minmax(180px, auto); gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-block: clamp(3rem, 6vw, 5rem) 2.5rem; }
.footer-contact { min-width: 0; }
.footer-contact .eyebrow { margin-bottom: 1.1rem; color: var(--dvd-rose); }
.footer-contact .contact-list { max-width: 46rem; }
.footer-contact .contact-list > div { padding-block: .85rem; }
.footer-social { justify-self: end; }
.footer-status { margin-top: clamp(2rem, 4vw, 3rem); align-items: center; }
.footer-brands { display: inline-flex; align-items: center; gap: .9rem; }
.footer-mark-box { display: inline-block; width: 104px; height: 30px; flex: 0 0 104px; overflow: hidden; }
.footer-mark-box img { width: 100%; height: 100%; object-fit: contain; object-position: left center; transform: scale(1.5); transform-origin: left center; }
.footer-credit { letter-spacing: .1em; }


/* ================================ OPS-019 (18/09/2026) ================================
   Capa em video, homenagem a Val Santos, icones oficiais das redes, carrossel em esteira,
   entrada animada dos titulos, links das musicas e caminhos mais sutis. */

/* 1 - icones oficiais das redes, servidos por sprite unico */
.icone { width: 1em; height: 1em; flex: 0 0 auto; fill: currentColor; stroke: none; vertical-align: -.14em; }
.nav-social { display: flex; align-items: center; gap: clamp(.9rem, 1.4vw, 1.4rem); }
.nav-social a { display: grid; place-items: center; width: 34px; height: 34px; color: var(--paper-bright); transition: color .2s ease; }
.nav-social .icone { width: 19px; height: 19px; }
.nav-social a:hover, .nav-social a:focus-visible { color: var(--dvd-rose); }
.button .icone, .text-link .icone, .catalog-link .icone, .video-meta .icone { width: 15px; height: 15px; }
.track-list em .icone { width: 12px; height: 12px; }
.track-link { display: inline-flex; align-items: center; gap: .4rem; }

/* 2 - caminhos mais sutis: no Audiovisual os botoes viram links editoriais.
   O botao de contratacao na agenda e o da capa continuam cheios, porque sao acao comercial. */
.feature-actions .button-dark { min-height: 0; padding: .5rem 0; gap: .85rem; color: var(--ink); background: transparent; border-bottom: 1px solid var(--ink); transition: color .2s ease, border-color .2s ease; }
.feature-actions .button-dark:hover, .feature-actions .button-dark:focus-visible { color: var(--dvd-brown); border-bottom-color: var(--dvd-brown); }
.platforms-label { color: var(--muted-dark); }
.platform-links { gap: 1.8rem; }
.platform-links .button-outline { min-height: 0; padding: .45rem 0; gap: .55rem; border: 0; border-bottom: 1px solid #00000024; }
.platform-links .button-outline:hover, .platform-links .button-outline:focus-visible { color: var(--dvd-brown); background: transparent; border-color: transparent; border-bottom-color: var(--dvd-brown); }

/* 3 - capa em video, com a foto por baixo como reserva */
.hero-video { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; background: #0b0b0b; }
.hero-visual::after { z-index: 2; }

/* 4 - homenagem a Val Santos */
.tribute-section { --kw: var(--dvd-rose); padding: clamp(3rem, 5.5vw, 5.5rem) clamp(1.5rem, 5vw, 5.75rem); color: var(--paper); background: var(--ink); border-top: 1px solid #ffffff14; }
.tribute-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(320px, 1.15fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.tribute-copy { min-width: 0; }
.tribute-copy h2 { margin: 0 0 clamp(1.1rem, 2.2vw, 1.7rem); font: 400 clamp(2.2rem, 4.2vw, 3.6rem)/.88 var(--display); letter-spacing: -.05em; text-transform: uppercase; }
.tribute-copy p { max-width: 34rem; margin: 0 0 1.05rem; color: #d4d4d1; font-size: clamp(1rem, 1.2vw, 1.12rem); }
.tribute-link { display: inline-flex; align-items: center; gap: .55rem; margin-top: .9rem; }
.tribute-visual { position: relative; min-width: 0; margin: 0; overflow: hidden; background: #111; }
.tribute-video { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; background: #111; }

/* 5 - participacoes em esteira continua */
.reel { overflow: hidden; }
.reel-track { display: flex; width: max-content; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; animation: esteira var(--reel-dur, 70s) linear infinite; }
.reel:hover .reel-track, .reel:focus-within .reel-track { animation-play-state: paused; }
@keyframes esteira { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.reel-item figcaption { padding-inline: .1rem; }

/* 6 - entrada animada dos titulos */
@keyframes sobe { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }
.anima .anima-item { opacity: 0; }
.anima .anima-dentro .anima-item { animation: sobe .62s cubic-bezier(.22,.7,.28,1) both; animation-delay: calc(var(--i, 0) * 90ms); }

/* 7 - agenda: a cidade entra depois da data */
.agenda-section.is-visible .show:not([hidden]) .show-place { animation: sobe .5s cubic-bezier(.22,.7,.28,1) both; }
.agenda-section.is-visible .show:nth-child(1) .show-place { animation-delay: .16s; }
.agenda-section.is-visible .show:nth-child(2) .show-place { animation-delay: .24s; }
.agenda-section.is-visible .show:nth-child(3) .show-place { animation-delay: .32s; }
.agenda-section.is-visible .show:nth-child(4) .show-place { animation-delay: .40s; }
.agenda-section.is-visible .show:nth-child(5) .show-place { animation-delay: .48s; }
.agenda-section.is-visible .show:nth-child(6) .show-place { animation-delay: .56s; }
.agenda-section.is-visible .show:nth-child(7) .show-place { animation-delay: .64s; }
.agenda-section.is-visible .show:nth-child(8) .show-place { animation-delay: .72s; }

/* 8 - nomes das musicas clicaveis */
.track-list strong a { border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.track-list li:hover strong a, .track-list strong a:focus-visible { border-bottom-color: currentColor; }

@media (max-width: 1180px) {
  .site-header, .site-header.scrolled { min-height: 70px; }
  .site-header.scrolled { backdrop-filter: none; }
  .menu-toggle { display: block; }
  .main-nav { position: fixed; inset: 70px 0 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: safe center; gap: 1.3rem; padding: 2rem clamp(1.25rem, 4vw, 4.5rem); overflow-y: auto; background: var(--ink); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; }
  .main-nav.open { opacity: 1; visibility: visible; pointer-events: auto; }
  .main-nav a { font: 400 clamp(2.2rem, 5vw, 2.8rem)/1 var(--display); letter-spacing: -.02em; text-transform: uppercase; }
  .main-nav .nav-listen { font-family: var(--sans); font-size: .8rem; letter-spacing: .08em; }
  .menu-toggle[aria-expanded="true"]::before { top: 21px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"]::after { top: 21px; transform: rotate(-45deg); }
}

@media (max-width: 980px) {
  .hero-card { padding: 1.25rem 1.25rem 3rem; }
  .hero-dvd-art { width: min(52%, 360px); }
  .catalog-body { grid-template-columns: 1fr; }
  .catalog-photo { position: relative; top: auto; width: min(100%, 460px); justify-self: end; }
  .agenda-photo { position: relative; top: auto; }
  .agenda-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { min-height: 0; padding-top: 8rem; }
  .hero-visual { min-height: 0; aspect-ratio: 16/11; }
  .type-poster { padding-top: 3rem; }
  .type-poster b { font-size: 52vw; }
  .hero-rail { display: none; }
  .feature-grid, .about-grid, .videos-head { grid-template-columns: 1fr; }
  .release-object { width: min(100%, 580px); justify-self: end; }
  .artists-head { grid-template-columns: 1fr; }
  .artists-visual { aspect-ratio: 16/9; }
}

@media (max-width: 720px) {
  .dvd-spread { grid-template-columns: 1fr; }
  .dvd-photo { aspect-ratio: 1/1; }
  .dvd-side-photo { width: 72%; aspect-ratio: 4/5; justify-self: end; }
  .history-photo { aspect-ratio: 4/3; }
  .agenda-photo { aspect-ratio: 4/5; }
  .closing-photo { aspect-ratio: 4/3; }
  .show-diptych { grid-template-columns: 1fr; }
  .diptych-photo:nth-child(2) { margin-top: 0; }
  .hero-actions { gap: 1rem 1.25rem; }
  .show { grid-template-columns: 4.4rem minmax(0, 1fr); gap: .9rem; }
  .show-day { font-size: 2.6rem; }
  .show-city { font-size: clamp(1.3rem, 6.2vw, 1.8rem); }
  .release-body { columns: 1; }
  .artist-bios { grid-template-columns: 1fr; }
  .artist-mark { font-size: 10rem; }
  .agenda-copy h2 { font-size: clamp(3.2rem, 16vw, 4.8rem); }
  .contact-head h2 { font-size: clamp(2.4rem, 11vw, 4.2rem); }
  .contact-list > div { grid-template-columns: 1fr; gap: .35rem; }
  .footer-social ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-header { min-height: 70px; padding-inline: 1.25rem; background: #080808e8; }
  .menu-toggle { display: block; }
  .main-nav { position: fixed; inset: 70px 0 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.4rem; padding: 2rem; background: var(--ink); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; }
  .main-nav.open { opacity: 1; visibility: visible; pointer-events: auto; }
  .main-nav a { font: 400 2.5rem/1 var(--display); letter-spacing: -.02em; text-transform: uppercase; }
  .main-nav .nav-listen { font-family: var(--sans); font-size: .8rem; letter-spacing: .08em; }
  .menu-toggle[aria-expanded="true"]::before { top: 21px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"]::after { top: 21px; transform: rotate(-45deg); }
  .hero-copy { min-height: 0; padding: 7.5rem 1.25rem 2.5rem; }
  .hero-dvd-art { width: min(72%, 300px); }
  .videos-head h2, .catalog-head h2, .about-grid h2, .agenda-copy h2, .contact-head h2 { overflow-wrap: break-word; }
  .hero h1 { width: 100%; margin: -8% 0; }
  .hero h1 img { transform: scale(1.05); }
  .hero-bottom { display: grid; margin-top: 3rem; }
  .hero-visual { aspect-ratio: 4/5; }
  .type-poster b { font-size: 90vw; }
  .section-index { grid-template-columns: max-content; margin-bottom: 3rem; }
  .section-index::after { display: none; }
  .feature-section, .videos-section, .catalog-section, .about-section, .artists-section { padding-block: 5rem; }
  .feature-copy h2 { font-size: clamp(3.8rem, 20vw, 6rem); }
  .feature-actions { align-items: flex-start; flex-direction: column; }
  .release-object { width: 100%; }
  .videos-head h2 { font-size: clamp(2.8rem, 14vw, 5rem); }
  .video-shell { aspect-ratio: 4/5; }
  .dvd-title-art { width: 100%; }
  .video-meta { grid-template-columns: 1fr; }
  .video-meta a { grid-column: 1; }
  .video-grid { grid-template-columns: 1fr; }
  .video-shell-small { aspect-ratio: 4/3; }
  .video-card .video-meta { grid-template-columns: 1fr; }
  .video-card .video-meta a { grid-column: 1; }
  .catalog-head { grid-template-columns: 1fr; margin-bottom: 2.5rem; }
  .catalog-head h2 { font-size: clamp(2.6rem, 13vw, 5rem); }
  .track-list li { grid-template-columns: 1fr; min-height: 78px; }
  .track-list em { display: none; }
  .track-list strong { font-size: clamp(1.65rem, 8vw, 2.5rem); }
  .about-grid h2 { font-size: clamp(2.6rem, 15vw, 5rem); } /* correção 2: 320 px */
  .artists-head h2 { font-size: clamp(3.8rem, 19vw, 6rem); }
  .artists-visual { aspect-ratio: 4/5; }
  .line-composition { grid-template-columns: 1fr; }
  .line-composition i { width: 70%; height: 1px; transform: rotate(-12deg); }
  .line-composition span { font-size: 45vw; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-wordmark { width: 100%; margin-block: -10%; }
  .footer-status { grid-column: 1; }
  .footer-status { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ---- OPS-018 · rodada de correcao 1 (medida em 1440x900) ----
   Repertorio estava em 905px e Artistas em 942px, para 814px disponiveis. */
.catalog-section, .artists-section { padding-block: clamp(2.75rem, 4vw, 4rem); }
.catalog-head h2 { font-size: clamp(2.3rem, 4.2vw, 3.6rem); }
.catalog-head { margin-bottom: clamp(1.1rem, 1.9vw, 1.4rem); }
.track-list li { padding-block: .5rem; }
.catalog-link { margin-top: .9rem; }
.artists-visual { aspect-ratio: 16/9; }
.artist-bios { margin-top: clamp(1.4rem, 2.6vw, 2rem); }
.artist-card { padding-top: clamp(1.1rem, 2.2vw, 1.75rem); }
.artist-card h3 { margin-bottom: clamp(.8rem, 1.6vw, 1.1rem); }
.artist-card p:last-child { font-size: clamp(.98rem, 1.1vw, 1.06rem); }
/* marcas do rodape */
.footer-mark-somar { width: 92px; height: 30px; flex: 0 0 92px; }
.footer-mark-somar img { width: 100%; height: 100%; object-fit: contain; object-position: left center; transform: none; }
.footer-credit { color: var(--muted-light); }

/* ---- OPS-018 · rodada de correcao 2 ----
   1) A arte do DVD, no canto inferior direito do hero, encobria o botao "Assistir ao DVD" e o link
      "Proximos shows", porque a linha de baixo do hero espalhava texto e botoes de ponta a ponta.
      Agora o texto e os botoes ficam empilhados a esquerda e a arte fica com o canto livre.
   2) Degrade do hero um pouco mais leve, para a foto aparecer mais sem perder leitura do titulo. */
.hero-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; max-width: 38rem; }
.hero-visual::after { background: linear-gradient(94deg, #050505ed 0%, #050505cf 28%, #05050575 52%, #05050517 80%, #05050500 100%), linear-gradient(to top, #050505d6 0%, #0505054d 28%, #05050500 58%); }

/* ================= OPS-018 - responsivo ================= */
@media (max-width: 1180px) {
  .reel-item picture { height: clamp(280px, 36vh, 380px); }
}

@media (max-width: 980px) {
  .hero { min-height: 0; }
  .hero-visual { position: relative; inset: auto; aspect-ratio: 4/3; }
  .hero-visual::after { background: linear-gradient(to top, #050505cc 0%, #05050500 55%); }
  .hero-dvd-art { right: 1.25rem; bottom: 1.25rem; width: min(56%, 320px); }
  .hero-copy { min-height: 0; padding: clamp(1.75rem, 5vw, 3rem) clamp(1.25rem, 5vw, 3rem) clamp(2.5rem, 6vw, 3.5rem); background: var(--ink); }
  .hero h1 { width: 100%; }
  .hero-bottom { margin-top: 1.75rem; }
  .catalog-body { grid-template-columns: 1fr; }
  .catalog-photo { width: min(100%, 440px); height: auto; min-height: 0; aspect-ratio: 4/5; justify-self: end; }
  .artists-head { grid-template-columns: 1fr; }
  .artists-visual { aspect-ratio: 16/10; }
  .reel-head, .potencia-head { grid-template-columns: 1fr; }
  .potencia-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer { grid-template-columns: 1fr; }
  .footer-social { justify-self: start; }
}

@media (max-width: 720px) {
  .hero h1 { font-size: clamp(2.3rem, 10.5vw, 3.4rem); }
  .feature-copy h2 { font-size: clamp(2.3rem, 11vw, 3.4rem); }
  .videos-head h2 { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .catalog-head h2 { font-size: clamp(2.1rem, 9.5vw, 3rem); }
  .about-grid h2 { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .artists-head h2 { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .agenda-copy h2 { font-size: clamp(2.1rem, 9.5vw, 3rem); }
  .reel-head h2, .potencia-head h2 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .hero h1, .reel-head h2, .potencia-head h2 { overflow-wrap: break-word; }
  .catalog-photo { width: 100%; }
  .artists-visual { aspect-ratio: 4/3; }
  .reel-item picture { height: clamp(260px, 54vw, 340px); }
  .potencia-grid { gap: .5rem; }
  .potencia-grid figcaption { font-size: .6rem; }
  .agenda-photo { aspect-ratio: 4/5; }
  .footer-social ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .agenda-section.is-visible .show:not([hidden]) { animation: none !important; }
  .reel-track { scroll-behavior: auto; }
}

/* ---- OPS-018 · rodada de correcao 3: icones oficiais das redes ----
   Os glifos oficiais sao preenchidos, nao tracejados, entao a regra antiga (fill: none + stroke) ficaria invisivel. */
.footer-social svg { width: 20px; height: 20px; flex: 0 0 20px; fill: currentColor; stroke: none; }
.footer-social a { gap: .75rem; }
/* correcao 4: sem transform-origin a esquerda, o 'Ba' do logotipo do rodape saia cortado. */

/* ================= OPS-019 - responsivo ================= */
@media (max-width: 1180px) {
  .main-nav .nav-social { gap: 1.6rem; margin-top: .5rem; padding-top: 1.5rem; border-top: 1px solid #ffffff1f; }
  .nav-social a { width: 44px; height: 44px; }
  .nav-social .icone { width: 22px; height: 22px; }
}

@media (max-width: 980px) {
  .hero-video { display: none; }
  .tribute-grid { grid-template-columns: 1fr; }
  .tribute-visual { order: 2; }
}

@media (max-width: 720px) {
  .tribute-copy h2 { font-size: clamp(2rem, 9vw, 2.8rem); overflow-wrap: break-word; }
  .platform-links { gap: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reel-track { width: auto; animation: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: clamp(1.5rem, 5vw, 5.75rem); }
  .reel { overflow: visible; }
  .anima .anima-item, .anima .anima-dentro .anima-item { opacity: 1; animation: none !important; }
  .agenda-section.is-visible .show:not([hidden]) .show-place { animation: none !important; }
}

/* OPS-019 · ajuste final: o Repertorio passava 9px de uma tela em 1440x900.
   O botao de contratacao da agenda ganha o glifo, entao alinha o icone com o texto. */
.agenda-actions .button-dark { gap: 1.1rem; }
.agenda-actions .button-dark .icone { width: 16px; height: 16px; }
.catalog-section { padding-block: clamp(2.5rem, 3.6vw, 3.6rem); } /* fecha os 9px que faltavam em 1440x900 */

/* ================== OPS-020 (18/09/2026) ==================
   Capa da videoteca com a arte oficial do DVD, botao da capa em estilo editorial. */
.video-capa { position: absolute; inset: 0; z-index: 0; display: block; }
.video-capa img { width: 100%; height: 100%; object-fit: cover; }
.video-capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, #05050599 0%, #05050514 34%, #05050500 60%, #050505a6 100%); }
.video-feature .video-poster { background: #050505; }
.video-feature .video-poster::after { border-color: #ffffff26; }
.video-feature .video-label, .video-feature .video-play { position: relative; z-index: 2; }
.hero-link { display: inline-flex; align-items: center; gap: .6rem; color: var(--paper-bright); }
.hero-link:hover, .hero-link:focus-visible { color: var(--dvd-rose); }
.hero-actions { gap: 1rem 2rem; }
/* OPS-020 · fotos nos dois cartoes de video, com escurecimento e titulo por cima */
.video-foto { position: absolute; inset: 0; z-index: 0; display: block; }
.video-foto img { width: 100%; height: 100%; object-fit: cover; }
.video-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, #050505c7 0%, #0505055c 46%, #050505d1 100%); }
.video-poster-small, .video-poster-small.alternate { background: #0a0a0a; }
.video-poster-small .video-label, .video-poster-small strong, .video-poster-small .video-play { position: relative; z-index: 2; }
.video-poster-small strong { text-shadow: 0 2px 20px #000000b3; }
/* OPS-020 · Casa Potencia agora vem depois do Repertorio, dois blocos escuros seguidos.
   O fio no topo marca a fronteira entre as duas secoes. */
.potencia-section { border-top: 1px solid #ffffff14; }
/* OPS-020 · nos cartoes, o titulo desce para a base: no meio ele cobria os rostos das fotos novas. */
.video-poster-small strong { margin-top: auto; }
.video-poster-small .video-play { margin-top: .9rem; }

/* OPS-020 · assinatura de produto, centralizada e acima da linha de status.
   As duas marcas ficam com a mesma altura otica: a da Somar tem duas linhas, entao a caixa dela e
   um pouco mais alta para a palavra principal bater com a do Balancear. */
.footer-produto { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.3rem; margin: clamp(2.5rem, 5vw, 4.5rem) 0 0; color: var(--muted-light); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.footer-produto .footer-mark-box { flex: 0 0 auto; overflow: hidden; }
.footer-produto .footer-mark-somar { width: 106px; height: 34px; }
.footer-produto .footer-mark-somar img { width: 100%; height: 100%; object-fit: contain; transform: none; }
/* marca do Balancear recortada no conteudo (logo-balancear-branca-corte.webp): o PNG oficial tem
   muita margem interna e, escalado dentro dela, a marca saia tres vezes menor que a da Somar. */
.footer-produto .footer-mark-balancear { width: 78px; height: 21px; }
.footer-produto .footer-mark-balancear img { width: 100%; height: 100%; object-fit: contain; transform: none; }
.footer-produto .footer-mark-somar { width: 94px; height: 30px; }
.footer-status { justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }
/* OPS-020 · "In memoriam" como anotacao do titulo da homenagem. Grafia latina correta, com "a":
   in memoriam, de "in memoriam" (em memoria de). "In memorian" nao existe em latim. */
.tribute-memoriam { display: inline-block; margin-left: .55rem; color: var(--muted-light); font: 700 .26em/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; vertical-align: .45em; white-space: nowrap; }

/* OPS-020 · assinatura do rodape em duas linhas: marca do Balancear maior em cima,
   "Um produto" e a marca da Somar embaixo, dimensionadas em proporcao ao nome de cima. */
.footer-assinatura { grid-column: 1 / -1; display: grid; justify-items: center; gap: .85rem; margin: clamp(2.5rem, 5vw, 4.5rem) 0 0; }
.footer-assinatura .footer-mark-balancear { width: 184px; height: 50px; }
.footer-assinatura .footer-mark-balancear img { width: 100%; height: 100%; object-fit: contain; transform: none; }
.footer-assinatura .footer-produto { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .85rem; margin: 0; color: var(--muted-light); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.footer-assinatura .footer-mark-somar { width: 84px; height: 27px; }
.footer-assinatura .footer-mark-somar img { width: 100%; height: 100%; object-fit: contain; transform: none; }

/* OPS-024: a numeracao de capitulo (01 a 06) saiu das secoes a pedido de Bruno.
   O grid do rotulo deixou de reservar a coluna do numero: agora e uma coluna so,
   com o nome da secao em cima e o fio de 1px logo abaixo, na mesma largura. */

/* OPS-025: saiu a numeracao dos cartoes de video, das faixas do repertorio e das legendas do
   diptico. Cada grid perdeu a coluna que reservava o numero. */
/* OPS-025: credito fotografico discreto. Corpo menor que o "Um produto", sem caixa alta e sem fio,
   para ficar como nota de pe e nao como faixa. Cor mantida no --muted-light para seguir legivel,
   que e o que a lei exige. */
.footer-credito { grid-column: 1 / -1; margin: 1.1rem 0 0; color: var(--muted-light); font-size: .55rem; font-weight: 400; letter-spacing: .04em; text-align: center; opacity: .72; }

/* OPS-026: o "Assistir" dos tres cartoes de video era uma caixa branca cheia e chamava mais atencao
   que o proprio video. Passa ao mesmo registro dos outros CTAs do site (.text-link): caixa alta
   pequena, fio de 1px embaixo, sem fundo. A altura minima de 44px fica como area de toque invisivel
   acima do texto (align-items: flex-end), para nao perder o alvo de clique no celular. A sombra existe
   porque o botao vive sobre fotografia. */
.video-play { display: inline-flex; align-items: flex-end; min-height: 44px; padding: 0 0 .35rem;
  color: var(--dvd-ivory); background: transparent; border: 0; border-bottom: 1px solid currentColor;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-shadow: 0 2px 14px #000000b3; transition: color .2s ease, border-color .2s ease; }
.video-play span { margin-right: .5rem; }
.video-play:hover, .video-play:focus-visible { color: white; background: transparent; border-bottom-color: white; }

/* OPS-027: credito reduzido a marca d'agua, na mesma posicao. .55rem, peso normal e opacidade .72.
   Nao baixei mais a opacidade porque abaixo disso o contraste cai de 4,5:1 e o credito deixa de ser
   legivel, que e a exigencia do art. 79, par. 1 da Lei 9.610/98. */