/* Claveora · site. Fundo escuro de palco, com as fotos da tela de entrar do Claveora Hub na abertura. Fontes (SIL Open
   Font License 1.1): Barlow Condensed nos títulos, Manrope no texto e JetBrains Mono nas fichas técnicas. */

@font-face { font-family: "Barlow Condensed"; font-weight: 600 700; font-display: swap; src: url("fontes/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("fontes/manrope-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("fontes/manrope-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Manrope"; font-weight: 500; font-display: swap; src: url("fontes/manrope-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-weight: 500; font-display: swap; src: url("fontes/manrope-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Manrope"; font-weight: 600; font-display: swap; src: url("fontes/manrope-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("fontes/manrope-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Manrope"; font-weight: 700; font-display: swap; src: url("fontes/manrope-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: swap; src: url("fontes/manrope-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Mrs Saint Delafield"; font-weight: 400; font-display: swap; src: url("fontes/mrs-saint-delafield-latin-400-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: "Mrs Saint Delafield"; font-weight: 400; font-display: swap; src: url("fontes/mrs-saint-delafield-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("fontes/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("fontes/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  --fundo: #090a0b;
  --fundo-2: #0e0f11;
  --painel: #121315;
  --linha: rgba(255, 255, 255, 0.09);
  --linha-forte: rgba(255, 255, 255, 0.2);
  --texto: #f1eee8;
  --claro: #d9dadd;
  --suave: #a9abb1;
  --apagado: #75777d;
  --brasa: #e05a36;
  --brasa-viva: #f06d48;
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --sans: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* a mesma margem no topo, na abertura e nas seções: o texto todo começa na mesma linha */
  --margem: max(24px, 5.4vw, calc((100vw - 1340px) / 2));
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 16px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
figure { margin: 0; }
::selection { background: var(--brasa); color: #fff; }
[id] { scroll-margin-top: 84px; }
:focus-visible { outline: 2px solid var(--texto); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

.largura { padding-inline: var(--margem); }

/* ------------------------------------------------------------------ peças que se repetem */

.sobretitulo { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; font: 600 10.5px/1.2 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--suave); }
.sobretitulo > span { flex: none; width: 22px; height: 1.5px; background: var(--brasa); }
.titulo { font: 600 clamp(40px, 4.6vw, 70px)/0.98 var(--display); text-transform: uppercase; letter-spacing: -0.005em; color: var(--texto); }
.cabeca { max-width: 780px; margin-bottom: 56px; }
.cabeca-texto { margin: 22px 0 0; font-size: 17px; color: var(--suave); }

.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; }
.botao { display: inline-flex; align-items: center; justify-content: space-between; gap: 44px; min-height: 56px; padding: 0 24px; background: #ecebe7; color: #111214; font: 700 13.5px/1.2 var(--sans); letter-spacing: 0.01em; transition: background 0.2s; }
.botao span { font-size: 17px; font-weight: 400; }
.botao:hover { background: #fff; }
.botao.largo { width: 100%; }
.link { display: inline-flex; align-items: center; gap: 22px; font: 700 13.5px/1.2 var(--sans); color: var(--claro); }
.link span { font-size: 18px; font-weight: 400; transition: transform 0.2s; }
.link:hover { color: #fff; }
.link:hover span { transform: translateX(5px); }

.estado { display: inline-flex; align-items: center; gap: 10px; font: 600 10.5px/1.3 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--suave); }
.estado::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #5d5f65; }
.estado-vivo { color: var(--texto); }
.estado-vivo::before { background: var(--brasa); box-shadow: 0 0 0 4px rgba(224, 90, 54, 0.2); }

.ficha { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.ficha li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--linha); font-size: 14.5px; line-height: 1.55; color: var(--claro); }
.ficha span { padding-top: 3px; font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--apagado); }

/* ------------------------------------------------------------------ topo */

.topo { position: fixed; inset: 0 0 auto; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 96px; padding-inline: var(--margem); border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: height 0.25s, background 0.25s; }
.topo.rolou { height: 72px; background: rgba(9, 10, 11, 0.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.marca img { width: auto; height: 34px; }
.menu { display: flex; gap: 34px; font: 600 13.5px/1 var(--sans); color: var(--claro); }
.menu a:hover { color: #fff; }
.topo-baixar { justify-self: end; display: flex; align-items: center; gap: 36px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.45); font: 700 13px/1 var(--sans); }
.topo-baixar span { font-size: 17px; font-weight: 400; }
.topo-baixar:hover { border-color: #fff; }

/* ------------------------------------------------------------------ abertura */

.abertura { position: relative; isolation: isolate; overflow: hidden; height: min(1000px, 100svh); min-height: 780px; background: var(--fundo); }
/* as fotos são quadradas: ocupam a parte da direita, sem ampliar além do tamanho delas */
.abertura-foto { position: absolute; inset: 0 0 0 36%; z-index: -2; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%); mask-image: linear-gradient(90deg, transparent 0%, #000 26%); }
.abertura-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; filter: brightness(0.86); opacity: 0; transform: scale(1); transition: opacity 1.6s ease, transform 0s linear 1.6s; }
.abertura-foto img.ativa { opacity: 1; transform: scale(1.06); transition: opacity 1.6s ease, transform 8.6s linear; }
.abertura-sombra { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--fundo) 0%, var(--fundo) 36%, rgba(9, 10, 11, 0.72) 46%, rgba(9, 10, 11, 0.12) 72%, rgba(9, 10, 11, 0) 100%), linear-gradient(0deg, var(--fundo) 0%, rgba(9, 10, 11, 0) 40%, rgba(9, 10, 11, 0) 80%, rgba(9, 10, 11, 0.55) 100%); }
.abertura-fotos { position: absolute; left: 50%; bottom: 46px; display: flex; align-items: center; gap: 8px; transform: translateX(-50%); }
.abertura-fotos [data-foto] { width: 26px; height: 18px; padding: 0; border: 0; background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)) center / 100% 2px no-repeat; cursor: pointer; }
.abertura-fotos [data-foto][aria-pressed="true"] { background-image: linear-gradient(var(--brasa), var(--brasa)); }
.abertura-pausa { margin-left: 10px; padding: 4px 0; border: 0; background: none; font: 600 10px/1.2 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: #8f9197; cursor: pointer; }
.abertura-pausa:hover { color: var(--texto); }
@media (prefers-reduced-motion: reduce) { .abertura-foto img.ativa { transform: none; } }
.abertura-texto { position: relative; padding: clamp(160px, 20vh, 230px) var(--margem) 0; max-width: calc(1000px + var(--margem)); }
.abertura h1 { width: min(820px, 60vw); margin-left: -0.6%; }
.abertura-logo { width: 100%; }
.manifesto { margin: 26px 0 0; font: 600 clamp(44px, 4.3vw, 66px)/0.98 var(--display); text-transform: uppercase; color: var(--texto); }
.manifesto span { color: var(--brasa); }
.abertura-descricao { margin: 22px 0 32px; font-size: 15px; line-height: 1.8; color: #b8b9be; }

.abertura-lancamento { position: absolute; right: var(--margem); bottom: 46px; display: flex; flex-direction: column; gap: 8px; min-width: 270px; padding-left: 20px; border-left: 1px solid var(--brasa); }
.abertura-lancamento span { font: 600 10px/1.2 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: #c59a80; }
.abertura-lancamento strong { font: 600 27px/1 var(--display); text-transform: uppercase; color: var(--texto); transition: color 0.2s; }
.abertura-lancamento small { display: flex; justify-content: space-between; align-items: center; font: 600 10px/1.2 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: #a8a29a; }
.abertura-lancamento b { font-size: 17px; font-weight: 400; letter-spacing: 0; color: var(--brasa); }
.abertura-lancamento:hover strong { color: var(--brasa-viva); }
.abertura-descer { position: absolute; left: var(--margem); bottom: 46px; display: flex; gap: 12px; font: 600 10px/1.2 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: #8f9197; }
.abertura-descer:hover { color: var(--texto); }
.abertura-lateral { position: absolute; right: 24px; top: 50%; margin: 0; transform: translateY(-50%); writing-mode: vertical-rl; font: 600 9px/1 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; color: #6f7177; }

/* ------------------------------------------------------------------ a Claveora e o catálogo */

.claveora { padding: 150px 0 130px; }
.claveora-grade { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8%; align-items: end; margin-bottom: 90px; }
.claveora-texto p { font-size: 17px; line-height: 1.75; color: var(--suave); }
.claveora-texto p:last-child { margin-bottom: 0; }

.catalogo { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha-forte); }
.catalogo a { display: grid; grid-template-columns: 64px minmax(0, 1.15fr) minmax(0, 1.35fr) 190px 220px; align-items: center; gap: 32px; padding: 26px 0; border-bottom: 1px solid var(--linha); }
.catalogo-numero { font: 500 13px/1 var(--mono); color: var(--apagado); }
.catalogo-nome { font: 600 clamp(30px, 3vw, 46px)/1 var(--display); text-transform: uppercase; color: var(--texto); transition: color 0.2s; }
.catalogo-desc { font-size: 15px; line-height: 1.6; color: var(--suave); }
.catalogo img { width: 220px; opacity: 0.72; filter: grayscale(0.5); transition: opacity 0.25s, filter 0.25s; }
.catalogo a:hover .catalogo-nome { color: var(--brasa-viva); }
.catalogo a:hover img { opacity: 1; filter: none; }

/* ------------------------------------------------------------------ o lançamento */

.lancamento { padding: 140px 0 120px; border-top: 1px solid var(--linha); background: var(--fundo); }
.lancamento-nome, .produto-nome { font: 600 clamp(64px, 11.5vw, 196px)/0.84 var(--display); text-transform: uppercase; letter-spacing: -0.01em; color: var(--texto); }
.lancamento-com { margin: 22px 0 0; font: 500 clamp(17px, 1.6vw, 22px)/1.3 var(--sans); color: var(--suave); }
/* a assinatura, escrita à mão */
.lancamento-com strong { display: block; margin: 6px 0 0 -0.04em; font: 400 clamp(60px, 6.4vw, 104px)/1.15 "Mrs Saint Delafield", "Segoe Script", cursive; color: var(--brasa-viva); }
.produto-sub { max-width: 720px; margin: 24px 0 0; font: 500 clamp(18px, 1.7vw, 24px)/1.4 var(--sans); color: var(--suave); }
.lancamento .largura { position: relative; z-index: 1; }
/* a foto tem 1000 px de largura: fica numa coluna, sem ampliar além disso */
.lancamento-grade { display: grid; grid-template-columns: minmax(0, 1000px) minmax(280px, 1fr); gap: 64px; align-items: end; margin-top: 64px; }
.lancamento-foto img { width: 100%; }
.lancamento-foto figcaption { margin-top: 14px; font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--apagado); }
.lancamento-lado { display: grid; gap: 36px; padding-bottom: 30px; }
.lancamento-texto { max-width: 520px; margin: 0; font-size: 18px; line-height: 1.7; color: var(--claro); }
.preco strong { display: block; font: 600 56px/1 var(--display); color: var(--texto); }
.preco span { display: block; margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--suave); }

/* ------------------------------------------------------------------ o instrumento (a barra é a do Claveora Stage) */

.instrumento { padding: 120px 0 140px; }
.barra { display: flex; align-items: center; gap: 4px; padding: 7px 10px; overflow-x: auto; background: linear-gradient(180deg, #353c45, #23282e); border: 1px solid #0f1317; scrollbar-width: none; }
.barra::-webkit-scrollbar { display: none; }
.barra-marca { flex: none; margin-right: 14px; font: 700 15px/1 var(--sans); letter-spacing: 0.04em; color: #e9edf2; }
.barra-marca b { color: #e0313f; }
.barra button { flex: none; appearance: none; border: 0; border-radius: 3px; padding: 8px 12px; background: transparent; color: #e6e9ee; font: 700 14px/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
.barra button:hover { background: rgba(255, 255, 255, 0.08); }
.barra button[aria-selected="true"] { background: #b8242f; color: #fff; }
.barra-display { flex: none; margin-left: auto; min-width: 270px; padding: 8px 14px; background: #05070a; border: 1px solid #2c333b; font: 500 13px/1 var(--mono); color: #9fc1dd; white-space: nowrap; }
.pagina > img { width: 100%; border: 1px solid #0f1317; border-top: 0; }
.pagina-texto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; padding-top: 36px; }
.pagina-texto h3 { font: 600 36px/1 var(--display); text-transform: uppercase; margin-bottom: 14px; }
.pagina-texto p { color: var(--suave); }
.pagina-texto .ficha { grid-column: 2; grid-row: 1 / span 2; }

.tabela { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 28px; margin: 90px 0 0; border-top: 1px solid var(--linha-forte); }
.tabela div { padding-top: 22px; }
.tabela dt { margin-bottom: 10px; font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--apagado); }
.tabela dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--claro); }

/* ------------------------------------------------------------------ o laboratório */

.laboratorio { padding: 140px 0 120px; border-top: 1px solid var(--linha); background: var(--fundo-2); }
.produto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 64px; align-items: start; padding: 72px 0; border-top: 1px solid var(--linha); }
.produto-numero { margin: 0 0 16px; font: 500 12px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brasa); }
.produto h3 { margin-bottom: 22px; font: 600 clamp(34px, 3.2vw, 50px)/1 var(--display); text-transform: uppercase; }
.produto-texto > p { color: var(--suave); }
.produto-texto > .estado { margin-top: 26px; }
/* os lançados (o Organ e o DS): o preço da loja do Hub e o botão, no lugar do "em breve" */
.produto-compra { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px 40px; }
.produto-compra .preco strong { font-size: 44px; }
.produto-imagem img { width: 100%; border: 1px solid var(--linha); }
.produto-invertido { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.produto-invertido .produto-imagem { order: -1; }

.player-secao { padding: 140px 0 130px; border-top: 1px solid var(--linha); }
.produto-player { grid-template-columns: minmax(0, 1fr); gap: 56px; margin-top: 72px; padding: 0; border-top: 0; }
.produto-player .produto-texto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; }
.produto-player .produto-texto > * { grid-column: 1; }
.produto-player .produto-texto > .ficha { grid-column: 2; grid-row: 1 / span 4; align-self: start; }
.compativel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; padding: 48px 0; border-block: 1px solid var(--linha-forte); }
.compativel-titulo { margin: 0; font: 600 clamp(32px, 3.2vw, 50px)/1 var(--display); text-transform: uppercase; color: var(--texto); }
.compativel-texto p { margin: 0 0 24px; font-size: 17px; line-height: 1.7; color: var(--claro); }
.compativel-lista { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.compativel-lista li { padding: 9px 14px 8px; border: 1px solid var(--linha-forte); font: 600 15px/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto); }
.compativel-lista li:nth-last-child(-n + 2) { border-color: rgba(224, 90, 54, 0.55); color: var(--brasa-viva); }
/* a barra do Claveora Player: fundo grafite, marca dourada e abas em pílula, como no programa */
.barra-player { gap: 8px; padding: 9px 14px; background: #222; border-color: #111; }
.barra-player .barra-marca { color: #f2a43a; letter-spacing: 0.16em; font-weight: 600; }
.barra-player .barra-marca b { color: #f2e6d2; font-weight: 600; }
.barra-player button { padding: 7px 16px; border: 1px solid #3a3a3a; border-radius: 999px; font: 600 12px/1 var(--sans); letter-spacing: 0.18em; color: #d0d0d0; }
.barra-player button:hover { background: rgba(255, 255, 255, 0.06); }
.barra-player button[aria-selected="true"] { background: #3a2c17; border-color: #f2a43a; color: #f2a43a; }
.barra-player .barra-display { min-width: 0; background: transparent; border: 0; font: 600 11px/1 var(--sans); letter-spacing: 0.18em; color: #8a8a8a; }
.tela img { width: 100%; border: 1px solid #111; border-top: 0; }
.player-telas figcaption { display: flex; gap: 20px; margin-top: 16px; font-size: 14.5px; line-height: 1.6; color: var(--suave); }
.player-telas figcaption b { flex: none; min-width: 112px; padding-top: 3px; font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto); }

/* ------------------------------------------------------------------ o Hub */

.hub { padding: 140px 0; border-top: 1px solid var(--linha); }
.hub-grade { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.hub-texto > p { max-width: 640px; margin: 24px 0 0; font-size: 17px; line-height: 1.75; color: var(--suave); }
.hub-tela { margin: 80px 0 0; }
.hub-tela img { width: 100%; border: 1px solid var(--linha-forte); border-radius: 10px; }
.passos { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 36px; margin: 56px 0 0; padding: 0; border-top: 1px solid var(--linha); }
.passos li { padding: 24px 0; border-bottom: 1px solid var(--linha); }
.passos b { font: 500 12px/1 var(--mono); color: var(--brasa); }
.passos h3 { margin: 12px 0 6px; font: 600 24px/1 var(--display); text-transform: uppercase; }
.passos p { margin: 0; font-size: 14.5px; color: var(--suave); }
.garantias { list-style: none; display: grid; gap: 12px; margin: 40px 0 0; padding: 0; font-size: 15px; color: var(--suave); }
.garantias b { color: var(--texto); font-weight: 600; }

/* o cartão de download: o ícone do Hub, um botão por sistema e a nota do instalador oficial */
.ticket { display: grid; gap: 12px; padding: 32px; background: var(--painel); border: 1px solid var(--linha-forte); }
.ticket-cabeca { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; }
.ticket-cabeca img { width: 64px; height: 64px; border-radius: 14px; }
.ticket-titulo { margin: 0; font: 700 26px/1.1 var(--sans); letter-spacing: -0.01em; color: var(--texto); }
.ticket-sub { margin: 6px 0 0; font-size: 14px; color: var(--suave); }
.baixar { display: grid; grid-template-columns: 22px minmax(0, 1fr) 20px; align-items: center; gap: 16px; min-height: 68px; margin: 0; padding: 12px 24px; background: var(--brasa); color: #16100d; transition: background 0.2s; }
.baixar:hover { background: var(--brasa-viva); }
.baixar-icone { width: 18px; height: 18px; }
.baixar-cmd { font: 400 20px/18px var(--sans); text-align: center; }
.baixar-texto { display: flex; flex-direction: column; gap: 4px; font: 700 15px/1.2 var(--sans); }
.baixar-texto small { font: 500 11.5px/1.2 var(--mono); letter-spacing: 0.04em; opacity: 0.75; }
.baixar-seta { font-size: 20px; text-align: right; }
.baixar-breve, .baixar-breve:hover { background: transparent; color: var(--claro); border: 1px solid var(--linha-forte); }
.baixar-breve small { text-transform: uppercase; letter-spacing: 0.16em; opacity: 1; color: var(--apagado); }
.ticket-nota { margin: 10px 0 0; font-size: 12.5px; text-align: center; color: var(--apagado); }

/* ------------------------------------------------------------------ perguntas e rodapé */

.perguntas { padding: 140px 0; border-top: 1px solid var(--linha); }
.perguntas-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 80px; }
.lista-perguntas { border-top: 1px solid var(--linha-forte); }
details { border-bottom: 1px solid var(--linha); }
summary { position: relative; padding: 24px 44px 24px 0; list-style: none; cursor: pointer; font: 600 18px/1.4 var(--sans); color: var(--texto); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 19px; font: 300 26px/1 var(--sans); color: var(--brasa); transition: transform 0.2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { max-width: 680px; margin: 0 0 26px; color: var(--suave); }

.rodape { padding: 72px 0 52px; border-top: 1px solid var(--linha); }
.rodape-grade { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px 60px; align-items: center; }
.rodape-grade > img { width: auto; height: 30px; }
.rodape nav { justify-self: end; display: flex; flex-wrap: wrap; gap: 28px; font-size: 14px; color: var(--suave); }
.rodape nav a:hover { color: var(--texto); }
.rodape p { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--apagado); }
.rodape .rodape-marcas { max-width: 820px; margin-top: -12px; font-size: 12px; line-height: 1.6; }

/* ------------------------------------------------------------------ telas menores */

@media (max-width: 1180px) {
  .menu { gap: 24px; }
  .catalogo a { grid-template-columns: 52px minmax(0, 1fr) 200px; grid-template-areas: "num nome img" "num desc img" "num estado img"; gap: 10px 32px; }
  .catalogo-numero { grid-area: num; align-self: start; padding-top: 12px; }
  .catalogo-nome { grid-area: nome; }
  .catalogo-desc { grid-area: desc; }
  .catalogo .estado { grid-area: estado; }
  .catalogo img { grid-area: img; width: 200px; }
  .lancamento-grade { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; }
  .tabela { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .topo { grid-template-columns: auto 1fr; height: 76px; }
  .topo.rolou { height: 64px; }
  .menu { display: none; }
  .marca img { height: 28px; }
  .topo-baixar { gap: 18px; }

  .abertura { height: auto; min-height: 100svh; padding-bottom: 120px; }
  .abertura-foto { inset: 0; -webkit-mask-image: none; mask-image: none; }
  .abertura-foto img { object-position: 60% 30%; filter: brightness(0.6); }
  .abertura-sombra { background: linear-gradient(90deg, rgba(9, 10, 11, 0.86) 0%, rgba(9, 10, 11, 0.4) 70%, rgba(9, 10, 11, 0.2) 100%), linear-gradient(0deg, var(--fundo) 0%, rgba(9, 10, 11, 0) 50%); }
  .abertura-fotos { left: auto; right: var(--margem); transform: none; bottom: 34px; }
  .abertura-texto { padding-top: 150px; }
  .abertura h1 { width: min(560px, 86vw); }
  .abertura-lancamento { position: relative; right: auto; bottom: auto; margin: 52px var(--margem) 0; max-width: 340px; }
  .abertura-descer { bottom: 40px; }
  .abertura-lateral { display: none; }

  .claveora { padding: 110px 0 90px; }
  .claveora-grade, .perguntas-grade, .hub-grade { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .claveora-grade { margin-bottom: 56px; }
  .lancamento { padding: 110px 0 90px; }
  .lancamento-grade { margin-top: 40px; grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lancamento-lado { padding-bottom: 0; }
  .instrumento, .player-secao, .laboratorio, .hub, .perguntas { padding: 100px 0; }
  .produto-player { margin-top: 48px; }
  .barra-display { display: none; }
  .pagina-texto, .produto, .produto-player .produto-texto { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pagina-texto .ficha, .produto-player .produto-texto > .ficha { grid-column: auto; grid-row: auto; margin-top: 18px; }
  .produto { gap: 36px; padding: 56px 0; }
  .produto-invertido .produto-imagem { order: 0; }
  .produto-player { gap: 40px; }
  .produto-player .produto-texto > .estado { margin-top: 26px; }
  .compativel { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 36px 0; }
  .tabela { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-tela { margin-top: 48px; }
}

@media (max-width: 560px) {
  .topo-baixar { font-size: 12.5px; }
  .manifesto { font-size: 42px; }
  .abertura-descer { display: none; }
  .barra-marca { display: none; }
  .abertura-descricao br { display: none; }
  .botao { gap: 24px; }
  .catalogo a { grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "num nome" "num desc" "num estado" "num img"; padding: 24px 0; }
  .catalogo img { width: 100%; margin-top: 10px; }
  .preco strong { font-size: 46px; }
  .passos { grid-template-columns: minmax(0, 1fr); }
  .tabela { grid-template-columns: minmax(0, 1fr); }
  .ficha li { grid-template-columns: 96px minmax(0, 1fr); }
  .player-telas figcaption { flex-direction: column; gap: 6px; }
  .ticket { padding: 26px 22px; }
  .rodape-grade { grid-template-columns: minmax(0, 1fr); }
  .rodape nav { justify-self: start; }
}