/* Manual da marca Opus, edição web.
   Base: ui/opus.css (tokens, fontes locais, .btn). Este arquivo só compõe a página.
   Forma única: a ponte da Ligadura (clipPath #ponte e #ponte-palco no HTML). */

:root {
  --m: clamp(20px, 3vw, 48px);
  --gap-section: clamp(120px, 10vw, 160px);
  --t-xl: clamp(120px, 16vw, 260px);
  --t-l: clamp(40px, 4.6vw, 72px);
  --t-m: clamp(24px, 2.4vw, 34px);
  --t-s: 18px;
  --t-xs: 15px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
}

/* Desfaz a composição do catálogo que vem junto com ui/opus.css */
main { margin-left: 0; padding: 0; max-width: none; }
section { padding-top: 0; scroll-margin-top: 0; }
footer { display: block; margin-top: 0; padding: 0; border-top: 0; }
footer p { color: inherit; font-size: var(--t-xs); flex: none; }

body { background: var(--white); color: var(--ink); font-size: var(--t-s); line-height: 1.55; }
h1, h2 { font-size: var(--t-l); line-height: 1.04; letter-spacing: -.03em; font-weight: 450; }
h3 { font-size: var(--t-s); font-weight: 650; line-height: 1.35; }
.serif { font-family: Newsreader, Georgia, serif; font-optical-sizing: auto; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* Navegação */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px var(--m); background: var(--marfim); }
.bar .marca img { width: 120px; }
.bar nav { display: flex; align-items: center; gap: 28px; font-size: var(--t-xs); font-weight: 600; }
.bar nav a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .3em; transition: text-decoration-color 180ms ease; min-height: 44px; display: inline-flex; align-items: center; }
@media (hover: hover) and (pointer: fine) { .bar nav a:hover { text-decoration-color: currentColor; } }

.btn { transition: transform 140ms var(--ease-out), background-color 180ms ease, color 180ms ease; }
.btn:active { transform: scale(.97); }
.btn.marfim { background: var(--marfim); color: var(--petroleo); }
@media (hover: hover) and (pointer: fine) { .btn.marfim:hover { background: var(--white); } }

/* Herói */
.hero { position: relative; background: var(--marfim); min-height: max(640px, calc(100svh - 92px)); overflow: hidden; }
.hero-copy { position: relative; z-index: 1; padding: clamp(48px, 9vh, 120px) var(--m) 0; max-width: calc(var(--m) + 46vw); }
.hero h1 { font-size: clamp(52px, 5.4vw, 84px); max-width: 9.5em; }
.hero .lede { margin-top: 40px; max-width: 34ch; font-size: var(--t-s); }
.hero .btn { margin-top: 32px; }
.palco-wrap { position: absolute; left: calc(var(--m) + (100vw - 2 * var(--m)) * 4 / 12); right: 0; top: 26%; bottom: 0; }
.palco { width: 100%; height: 100%; background: var(--petroleo); clip-path: url(#ponte-palco); display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 var(--m) clamp(40px, 8vh, 88px); }
/* A logo fica à direita e abaixo do corte da ponte (40% × 34% do palco): nunca recortada. */
.palco img { width: min(500px, 54%); }

/* Nome */
.nome { padding: var(--gap-section) var(--m) 0; display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
.nome-head p { font-size: var(--t-s); max-width: 46ch; margin-top: 24px; }
.partitura { margin: 0; }
.partitura .quadro { aspect-ratio: 4 / 5; height: auto; }
.partitura img { object-position: 70% 92%; }
.partitura figcaption { margin-top: 12px; font-size: var(--t-xs); max-width: 44ch; }
.statement { margin-top: 64px; font-family: Newsreader, Georgia, serif; font-size: var(--t-m); line-height: 1.25; letter-spacing: -.015em; max-width: 30em; }
.thumb { display: inline-block; position: relative; overflow: hidden; width: 1.3em; height: .85em; vertical-align: -.1em; margin: 0 .12em; clip-path: url(#ponte); background: var(--marfim); }
.thumb img { position: absolute; max-width: none; height: auto; width: var(--w); left: var(--x); top: var(--y); }

/* Formas da marca */
.formas > *, .respiro > *, .usos > * { min-width: 0; }
.formas { position: relative; padding: var(--gap-section) var(--m) 0; display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: end; }
.formas-lista h2 { font-size: var(--t-m); line-height: 1.2; color: var(--muted); }
.formas-lista ul { list-style: none; margin: 8px 0 0; padding: 0; }
.formas-lista button { background: none; border: 0; padding: 4px 0; min-height: 44px; font: 450 var(--t-m)/1.2 Newsreader, Georgia, serif; letter-spacing: -.015em; color: var(--muted); text-align: left; transition: color 180ms ease; }
.formas-lista button[aria-pressed=true] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .formas-lista button:hover { color: var(--petroleo); } }
.formas-palco { position: relative; display: grid; place-items: center; padding-top: 10%; height: 64svh; min-height: 420px; clip-path: url(#ponte); transition: background-color 300ms ease; }
.formas-palco img { transition: opacity 300ms ease; }
.formas-palco[data-cor=petroleo] { background: var(--petroleo); }
.formas-palco[data-cor=salvia] { background: var(--salvia); }
.formas-palco[data-cor=marfim] { background: var(--marfim); }
.formas-palco[data-cor=abissal] { background: var(--abissal); }
.formas-fato { grid-column: 2; font-size: var(--t-s); max-width: 44ch; margin-top: -24px; }

/* Construção */
.construcao { margin-top: var(--gap-section); display: grid; grid-template-columns: 1fr 1fr; min-height: 88svh; position: relative; }
.construcao .campo-texto { background: var(--petroleo); color: var(--marfim); padding: 64px var(--m) 180px; }
.construcao h2 { color: var(--marfim); }
.construcao .campo-texto p { color: #DDE6E1; }
.construcao .campo-texto p { margin-top: 28px; max-width: 40ch; }
.construcao .campo-desenho { background: var(--marfim); display: grid; place-items: center; padding: 64px var(--m) 180px; }
.desenho { width: min(560px, 100%); height: auto; overflow: visible; }
.desenho .g { fill: var(--petroleo); transition: fill 200ms ease; }
.desenho .base-texto, .desenho .marcadores, .desenho .ponte { opacity: 0; transition: opacity 200ms ease; }
.desenho[data-etapa="1"] .glifos { opacity: 0; }
.desenho[data-etapa="1"] .base-texto { opacity: 1; }
.desenho[data-etapa="2"] .marcadores { opacity: 1; }
.desenho[data-etapa="3"] .g { fill: var(--salvia); }
.desenho[data-etapa="3"] .ponte { opacity: 1; }
.desenho .glifos { transition: opacity 200ms ease; }
.desenho text { font-family: Manrope, 'Segoe UI', sans-serif; font-size: 24px; fill: var(--petroleo); }
.desenho .base-texto { fill: var(--petroleo); font-family: Newsreader, Georgia, serif; font-size: 400px; font-weight: 480; font-variation-settings: 'opsz' 60; }
.etapas { position: absolute; left: var(--m); right: var(--m); bottom: 40px; }
.trilho { position: relative; height: 32px; display: flex; align-items: center; }
.trilho::before { content: ''; position: absolute; left: 0; right: 0; height: 8px; background: var(--salvia); }
.trilho .feito { position: absolute; left: 0; height: 8px; width: var(--p, 100%); background: var(--latao); }
.controle .trilho .feito { background: var(--abissal); }
/* ui/opus.css estiliza todo input como campo de texto; o controle deslizante não herda isso. */
.trilho input[type=range] { position: relative; width: 100%; margin: 0; padding: 0; height: 32px; min-height: 0; border: 0; border-radius: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.trilho input::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; background: var(--latao); border: 3px solid var(--petroleo); }
.trilho input::-moz-range-thumb { width: 26px; height: 26px; background: var(--latao); border: 3px solid var(--petroleo); border-radius: 0; }
.controle .trilho input::-webkit-slider-thumb { background: var(--petroleo); }
.controle .trilho input::-moz-range-thumb { background: var(--petroleo); border-color: var(--salvia); }
.nomes-etapas { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 12px; font-size: var(--t-xs); }
.nomes-etapas span { color: #DDE6E1; }
.nomes-etapas span:nth-child(n+3) { color: var(--ink); }
.nomes-etapas span[aria-current=step] { color: var(--white); font-weight: 650; }
.nomes-etapas span:nth-child(n+3)[aria-current=step] { color: var(--petroleo); }

/* Respiro (o elemento interativo) */
.respiro { color: var(--abissal); background: var(--salvia); padding: 72px var(--m) 64px; min-height: 92svh; display: grid; grid-template-columns: 5fr 7fr; grid-template-rows: auto 1fr auto; gap: 32px 48px; }
.respiro h2 { font-size: var(--t-m); line-height: 1.2; grid-column: 1; }
.controle { grid-column: 1; grid-row: 2; align-self: start; max-width: 400px; }
.controle label { display: block; font-weight: 650; font-size: var(--t-xs); }
.controle .valor { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 4px; font-size: var(--t-s); }
.controle .valor output { font-weight: 650; }
.controle .trilho::before { background: var(--marfim); }
.controle .trilho input::-webkit-slider-thumb { border-color: var(--salvia); }
.previa { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: start; max-width: 100%; }
.previa-campo { background: var(--marfim); display: inline-block; transition: padding 120ms ease; }
.previa-campo img { display: block; transition: width 120ms ease; }
.previa-nota { margin-top: 16px; font-size: var(--t-xs); max-width: 52ch; min-height: 3em; }
.cifra { grid-column: 1; grid-row: 3; font: 450 var(--t-xl)/.8 Newsreader, Georgia, serif; letter-spacing: -.04em; font-variant-numeric: tabular-nums lining-nums; }
.cifra span { font-size: .22em; letter-spacing: 0; margin-left: .2em; white-space: nowrap; }
.conta { grid-column: 2; grid-row: 3; align-self: end; max-width: 40ch; font-size: var(--t-s); }

/* Cor e tipo */
.cor { padding: var(--gap-section) var(--m) 0; }
.cor-head { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: end; }
.cor-head p { max-width: 46ch; justify-self: end; }
.proporcao { display: flex; gap: 6px; margin-top: 48px; height: 96px; }
.proporcao div { display: flex; align-items: flex-end; padding: 12px; font-size: var(--t-xs); font-weight: 650; }
.categoria { margin-top: 96px; }
.categoria-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 40px; }
.categoria-head h3 { font: 450 var(--t-m)/1.2 Newsreader, Georgia, serif; letter-spacing: -.015em; }
.categoria-head span, .categoria-intro { font-size: var(--t-s); }
.categoria-intro { margin: -24px 0 40px; max-width: 60ch; }
.itens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 36px 64px; }
.item { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; }
.marcador { width: 64px; height: 64px; clip-path: url(#ponte); display: grid; place-items: center; }
.marcador.aa { background: var(--marfim); color: var(--petroleo); font-size: var(--t-m); font-weight: 500; padding-top: 10px; }
.marcador.aa.serif { font-size: var(--t-m); font-weight: 450; }
.item-linha { display: flex; justify-content: space-between; gap: 16px; font-weight: 650; font-size: var(--t-s); }
.item-linha span:last-child { font-weight: 500; font-variant-numeric: tabular-nums; }
.item p { font-size: var(--t-xs); color: var(--ink); max-width: 38ch; margin-top: 4px; }
.item .nota { color: var(--petroleo); font-weight: 650; }

/* Voz e imagem */
.voz { margin: var(--gap-section) 20px 0; background: var(--petroleo); color: var(--marfim); border-radius: var(--radius-panel); overflow: hidden; position: relative; min-height: 104svh; display: grid; grid-template-columns: 63fr 37fr; }
.voz-esq { padding: 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.voz h2 { color: var(--marfim); max-width: 8em; }
.voz figure { margin: 0; width: min(38vw, 100%); }
.voz figure .quadro { clip-path: url(#ponte); overflow: hidden; aspect-ratio: 3 / 2; }
.voz figure img { width: 100%; height: 100%; object-fit: cover; }
.voz figcaption { font-size: var(--t-xs); margin-top: 12px; color: var(--navigation-text, #DDE6E1); }
.voz-dir { padding: 56px 56px 56px 0; display: flex; flex-direction: column; gap: 64px; }
.voz-dir article { max-width: 340px; }
.voz-dir h3 { font: 450 var(--t-m)/1.2 Newsreader, Georgia, serif; color: var(--marfim); }
.voz-dir p { margin-top: 12px; font-size: var(--t-xs); color: #DDE6E1; }
.voz-dir q { display: block; margin-top: 12px; font-family: Newsreader, Georgia, serif; font-size: var(--t-s); color: var(--marfim); quotes: '“' '”'; }

/* Usos incorretos */
.usos { padding: var(--gap-section) var(--m) 0; display: grid; grid-template-columns: 3fr 9fr; gap: 32px; }
.usos-head p { margin-top: 20px; max-width: 30ch; }
.ladrilhos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; row-gap: 32px; }
.ladrilhos li:nth-child(2) { grid-column: span 2; }
.ladrilho { aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden; }
.ladrilhos li:nth-child(2) .ladrilho { aspect-ratio: 8 / 5; }
.ladrilho img, .ladrilho svg { width: 70%; }
.ladrilho.marfim { background: var(--marfim); }
.ladrilho.salvia { background: var(--salvia); }
.ladrilho.abissal { background: var(--abissal); }
.ladrilhos h3 { margin-top: 12px; font-size: var(--t-s); font-weight: 650; }
.ladrilhos p { font-size: var(--t-xs); color: var(--ink); margin-top: 2px; }
.achatar img { transform: scaleY(.6); }
.inclinar img { transform: skewX(-16deg); }
.comprimir img { transform: scaleX(.5); }
.redigitar span { font: 480 var(--t-l)/1 Newsreader, Georgia, serif; color: var(--petroleo); letter-spacing: 0; }

/* Aplicações */
.aplicacoes { margin-top: var(--gap-section); background: var(--marfim); padding: 96px 0 120px; }
.aplicacoes-head { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 0 var(--m) 0 calc(var(--m) + 4vw); }
.aplicacoes-head h2 { font-size: var(--t-m); line-height: 1.2; }
.aplicacoes-head p { font-size: var(--t-s); max-width: 52ch; }
.fileira { display: flex; gap: 12px; height: 68svh; min-height: 420px; margin-top: 32px; padding: 0 var(--m) 0 calc(var(--m) + 4vw); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; }
.fileira::-webkit-scrollbar { display: none; }
.fileira.arrastando { cursor: grabbing; scroll-snap-type: none; }
.modulo { flex: none; height: 100%; scroll-snap-align: start; }
.modulo.alto { aspect-ratio: 3 / 4; }
.modulo.largo { aspect-ratio: 16 / 10; }
.modulo.par { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; aspect-ratio: 4 / 6.15; }
.modulo figure, .modulo.alto, .modulo.largo { margin: 0; }
.quadro { width: 100%; height: 100%; overflow: hidden; clip-path: url(#ponte); background: var(--white); }
.fileira .quadro { clip-path: url(#ponte-quadro); }
.quadro img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 0); max-width: none; user-select: none; -webkit-user-drag: none; }

/* Faixa e rodapé */
.faixa { display: block; width: 100%; height: clamp(72px, 10vw, 160px); margin-top: -1px; }
.faixa path { fill: var(--petroleo); }
.rodape { background: var(--petroleo); color: var(--marfim); padding: 24px var(--m) 32px; margin-top: -2px; }
.rodape > img { width: 100%; }
.rodape-grade { display: grid; grid-template-columns: repeat(4, 1fr) 2fr; gap: 32px; margin-top: 56px; }
.rodape-grade h2 { font: 650 var(--t-xs)/1.4 Manrope, 'Segoe UI', sans-serif; letter-spacing: 0; color: var(--marfim); }
.rodape-grade ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 2px; }
.rodape-grade a { color: #DDE6E1; font-size: var(--t-xs); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .25em; min-height: 32px; display: inline-flex; align-items: center; transition: text-decoration-color 180ms ease, color 180ms ease; }
@media (hover: hover) and (pointer: fine) { .rodape-grade a:hover { color: var(--marfim); text-decoration-color: currentColor; } }
.rodape-grade .contato p { font-size: var(--t-xs); color: #DDE6E1; margin-top: 12px; }
.rodape-fim { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 64px; font-size: var(--t-xs); color: #DDE6E1; }
.rodape :focus-visible, .voz :focus-visible, .palco :focus-visible { outline-color: var(--marfim); }

/* Movimento */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: var(--d, 0ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .shutter { clip-path: inset(100% 0 0 0); transition: clip-path 1100ms var(--ease-in-out) 200ms; }
  .js .shutter img { transform: scale(1.12); transition: transform 1500ms var(--ease-soft) 200ms; }
  .js .shutter.is-in { clip-path: inset(0); }
  .js .shutter.is-in img { transform: none; }
  .js .deriva img { transform: scale(1.1); transition: transform 6s var(--ease-soft); }
  .js .deriva.is-in img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; }
}

/* Tablet */
@media (max-width: 1000px) {
  .nome-head, .cor-head, .formas, .usos { grid-template-columns: 1fr; }
  .nome { grid-template-columns: 1fr; }
  .cor-head p { justify-self: start; }
  .formas { min-height: 0; }
  .formas-palco { order: -1; }
  .formas-fato { grid-column: 1; margin-top: 0; }
  .respiro { grid-template-columns: 1fr; grid-template-rows: none; }
  .respiro > * { grid-column: 1 !important; grid-row: auto !important; }
  .voz { grid-template-columns: 1fr; }
  .voz-dir { padding: 40px 56px 56px; }
  .voz figure { width: 100%; margin-bottom: 0; }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
  .rodape-grade .contato { grid-column: 1 / -1; }
}

/* Telefone */
@media (max-width: 680px) {
  .bar nav a:not(.btn) { display: none; }
  .hero { min-height: 0; }
  .hero-copy { max-width: none; padding-top: 40px; }
  .hero h1 { font-size: var(--t-l); }
  .hero .lede { margin-top: 24px; }
  .palco-wrap { position: relative; left: auto; top: auto; margin-top: 40px; height: 46svh; }
  .palco { padding: 0 20px 32px; }
  .palco img { width: 68%; }
  .statement { margin-top: 48px; }
  .formas-lista ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
  .formas-palco { height: auto; aspect-ratio: 1; min-height: 0; }
  .construcao { grid-template-columns: 1fr; }
  .construcao .campo-desenho { order: -1; min-height: 46svh; padding: 40px 20px 132px; }
  .construcao .campo-texto { padding: 48px 20px 64px; }
  .etapas { position: absolute; top: calc(46svh - 108px); bottom: auto; left: 20px; right: 20px; }
  .nomes-etapas { font-size: 15px; }
  .nomes-etapas span { color: var(--ink) !important; }
  .nomes-etapas span[aria-current=step] { color: var(--petroleo) !important; }
  .trilho input::-webkit-slider-thumb { width: 40px; height: 40px; }
  .respiro { padding: 56px 20px; min-height: 84svh; }
  .controle { max-width: none; }
  .cifra { font-size: 30vw; }
  .conta { font-size: var(--t-xs); }
  .proporcao { height: 72px; }
  .proporcao div { padding: 8px; }
  .aplicacoes-head { grid-template-columns: 1fr; }
  .itens { grid-template-columns: 1fr; }
  .item { grid-template-columns: 52px 1fr; }
  .marcador { width: 52px; height: 52px; }
  .voz { margin-inline: 10px; }
  .voz-esq { padding: 40px 24px 24px; }
  .voz-dir { padding: 32px 24px 40px; gap: 40px; }
  .ladrilhos { grid-template-columns: 1fr 1fr; gap: 8px; row-gap: 24px; }
  .ladrilhos li:nth-child(2) { order: -1; }
  .ladrilhos li:last-child { grid-column: span 2; }
  .ladrilhos li:last-child .ladrilho { aspect-ratio: 8 / 5; }
  .aplicacoes { padding-top: 72px; }
  .aplicacoes-head, .fileira { padding-left: 20px; padding-right: 20px; }
  .fileira { height: 62svh; gap: 8px; }
  .modulo.alto { aspect-ratio: auto; width: 72vw; }
  .modulo.par { aspect-ratio: auto; width: 64vw; }
  .modulo.largo { aspect-ratio: 16 / 10; width: 88vw; height: auto; align-self: center; }
  .rodape-grade { gap: 24px; }
  .rodape-fim { flex-direction: column; align-items: flex-start; }
}