/* Banner de lançamento – Linha Madeira
   Comparador de acabamento: o mesmo ambiente em freijó e em imbuia (renders oficiais alinhados). */
.bm {
  --bm-chao: #07111c;
  --bm-texto: #f3efe8;
  --bm-texto-2: #c3ced8;
  --bm-texto-3: #9fb3c4;
  --bm-latao: #c9a65e;
  --bm-latao-claro: #e7d3a4;
  --bm-freijo: #cf844d;
  --bm-imbuia: #593f27;
  --bm-fio: rgba(243, 239, 232, .14);
  --pos: 50%;
  position: relative;
  background: var(--bm-chao);
  color: var(--bm-texto);
  overflow: clip;
  isolation: isolate;
}
.bm ::selection { background: var(--bm-latao); color: var(--bm-chao); }

.bm-grade {
  container-type: inline-size; /* 100cqw = largura real do banner (sem a barra de rolagem que o 100vw inclui) */
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-height: clamp(560px, 82vh, 780px);
}

/* coluna de texto alinhada ao contêiner do site */
.bm-texto {
  align-self: center;
  padding-block: clamp(40px, 4.5vw, 72px);
  /* início do texto = borda do conteúdo do .container do site (logo e títulos das outras seções) */
  padding-inline: max(var(--gutter, 24px), calc((100cqw - var(--container, 1240px)) / 2)) clamp(28px, 4vw, 72px);
  max-width: 100%;
}
.bm-titulo {
  margin: 0 0 20px;
  font-size: clamp(3rem, 1.6rem + 4.6vw, 6rem);
  line-height: .94;
  letter-spacing: -.035em;
  font-weight: 700;
  color: var(--bm-texto);
  text-wrap: balance;
}
.bm-frase {
  margin: 0 0 30px;
  max-width: 38ch;
  font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem);
  line-height: 1.6;
  color: var(--bm-texto-2);
}

/* seletor de madeira: amostras recortadas das pás reais */
.bm-madeiras { border: 0; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 440px; }
.bm-legenda { grid-column: 1 / -1; padding: 0; margin-bottom: 10px; font-size: .875rem; color: var(--bm-texto-3); }
.bm-madeira {
  position: relative; display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 6px 12px 6px 6px; border-radius: 999px; cursor: pointer; min-width: 0;
  border: 1px solid var(--bm-fio); background: rgba(243, 239, 232, .03);
  transition: border-color .2s ease, background-color .2s ease;
}
.bm-madeira:hover { border-color: rgba(243, 239, 232, .32); }
.bm-madeira input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bm-amostra { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.bm-madeira-txt { display: grid; gap: 2px; line-height: 1.25; min-width: 0; }
.bm-madeira-txt strong { font-size: 1rem; font-weight: 600; color: var(--bm-texto); }
.bm-madeira-txt small { font-size: .8125rem; color: var(--bm-texto-3); }
.bm-madeira:has(input:checked) { border-color: var(--bm-latao); background: rgba(201, 166, 94, .08); }
.bm-madeira:has(input:focus-visible) { outline: 2px solid var(--bm-latao-claro); outline-offset: 3px; }

/* abas dos modelos */
.bm-modelos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--bm-fio); margin-bottom: 4px; max-width: 520px; }
.bm-modelos button {
  all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 2px; align-content: end;
  min-height: 56px; padding: 8px 12px 10px 0; margin-bottom: -1px; border-bottom: 2px solid transparent;
  color: var(--bm-texto-3); font-weight: 600; font-size: 1rem; line-height: 1.2;
  transition: color .2s ease, border-color .2s ease;
}
.bm-modelos button:hover { color: var(--bm-texto); }
.bm-modelos button[aria-selected="true"] { color: var(--bm-texto); border-bottom-color: var(--bm-latao); }
.bm-modelos button:focus-visible { outline: 2px solid var(--bm-latao-claro); outline-offset: 2px; border-radius: 4px; }
.bm-modelo-cod { font-size: .8125rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--bm-texto-3); }

/* ficha curta */
.bm-ficha { margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.bm-ficha > div { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--bm-fio); }
.bm-ficha > div:nth-child(odd) { padding-right: 20px; }
.bm-ficha > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.bm-ficha dt { font-size: .8125rem; color: var(--bm-texto-3); margin-bottom: 3px; }
.bm-ficha dd { margin: 0; font-size: .975rem; color: var(--bm-texto); font-variant-numeric: tabular-nums; line-height: 1.4; }
.bm-ficha.is-trocando { animation: bm-ficha .38s cubic-bezier(.16, 1, .3, 1); }
@keyframes bm-ficha { from { opacity: .25; } to { opacity: 1; } }

.bm-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.bm-botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border-radius: 999px;
  background: var(--bm-texto); color: var(--bm-chao); font-weight: 700; text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .7);
  transition: background-color .2s ease, transform .2s ease;
}
.bm-botao:hover { background: #fff; color: var(--bm-chao); transform: translateY(-1px); }
.bm-botao:focus-visible, .bm-link:focus-visible { outline: 2px solid var(--bm-latao-claro); outline-offset: 3px; }
.bm-link { display: inline-block; padding-block: 12px; color: var(--bm-texto); font-weight: 600; /* alvo de toque ≥ 44 px */ text-decoration: underline; text-decoration-color: var(--bm-latao); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.bm-link:hover { color: var(--bm-latao-claro); }

/* palco: comparador até a borda direita da janela */
.bm-palco { position: relative; margin: 0; min-height: 100%; }
.bm-comparador {
  position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; cursor: ew-resize;
  -webkit-user-select: none; user-select: none; background: #d9d6d0;
}
.bm-camada { position: absolute; inset: 0; opacity: 0; transition: opacity .55s cubic-bezier(.16, 1, .3, 1); }
.bm-camada.is-ativa { opacity: 1; }
.bm-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 12%; pointer-events: none; }
.bm-img--freijo { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.bm-alca { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; z-index: 2; pointer-events: none; }
.bm-alca::before { content: ''; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--bm-texto); box-shadow: 0 0 0 1px rgba(7, 17, 28, .18), 0 0 18px rgba(7, 17, 28, .25); }
.bm-pegador {
  /* o pegador acompanha a linha, mas não sai do palco nos extremos (0% e 100%) */
  position: absolute; z-index: 2; top: 50%; left: clamp(30px, var(--pos), calc(100% - 30px)); width: 52px; height: 52px; transform: translate(-50%, -50%); pointer-events: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--bm-chao); color: var(--bm-texto);
  box-shadow: 0 0 0 2px rgba(243, 239, 232, .7), 0 4px 10px rgba(7, 17, 28, .4);
  transition: transform .2s ease, box-shadow .2s ease;
}
.bm-pegador svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bm-comparador.is-arrastando .bm-pegador, .bm-comparador:hover .bm-pegador { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 0 2px var(--bm-latao), 0 4px 10px rgba(7, 17, 28, .4); }
.bm-faixa:focus-visible ~ .bm-pegador, .bm-comparador:has(.bm-faixa:focus-visible) .bm-pegador { outline: 3px solid var(--bm-latao-claro); outline-offset: 3px; }
.bm-faixa { position: absolute; inset: auto 0 0 0; width: 100%; height: 1px; opacity: 0; margin: 0; pointer-events: none; }

.bm-lado {
  position: absolute; z-index: 3; font-size: .875rem; font-weight: 600; line-height: 1; padding: 9px 14px; border-radius: 999px;
  background: rgba(7, 17, 28, .78); color: var(--bm-texto); pointer-events: none;
}
/* selo de lançamento: etiqueta de latão (no palco no desktop; abaixo do título no celular) */
.bm-selo {
  display: inline-block; font-size: .8125rem; font-weight: 700; line-height: 1; letter-spacing: .01em;
  padding: 8px 11px; border-radius: 4px; background: var(--bm-latao); color: var(--bm-chao);
}
.bm-selo--palco { position: absolute; z-index: 3; top: 20px; right: 20px; pointer-events: none; }
.bm-selo--texto { display: none; }
.bm-lado--esq { left: 20px; bottom: 20px; }
.bm-lado--dir { right: 20px; bottom: 20px; }

.bm-legenda-img { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 3; width: max-content; max-width: calc(100% - 260px);
  font-size: .8125rem; color: var(--bm-texto); background: rgba(7, 17, 28, .62); padding: 7px 12px; border-radius: 999px; text-align: center; pointer-events: none; }

/* celular e tablet: comparador primeiro */
@media (max-width: 900px) {
  .bm-grade { grid-template-columns: 1fr; min-height: 0; }
  .bm-palco { order: -1; aspect-ratio: 4 / 3.4; min-height: 0; }
  .bm-img { object-position: 50% 0; }
  .bm-texto { padding: 40px var(--gutter, 16px) 56px; }
  .bm-legenda-img { display: none; }
  .bm-selo--palco { display: none; }
  .bm-selo--texto { display: inline-block; margin: 0 0 18px; }
  .bm-titulo { margin-bottom: 14px; }
  .bm-lado--esq { left: 14px; bottom: 14px; }
  .bm-lado--dir { right: 14px; bottom: 14px; }
}
@media (max-width: 360px) {
  .bm-ficha, .bm-madeiras { grid-template-columns: 1fr; }
  .bm-ficha > div, .bm-ficha > div:nth-child(odd) { padding-right: 0; }
}
@media (max-width: 480px) {
  .bm-madeira-txt small { font-size: .75rem; }
  .bm-acoes { flex-direction: column; align-items: stretch; }
  .bm-botao { width: 100%; }
  .bm-link { text-align: center; padding: 12px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bm-camada, .bm-madeira, .bm-modelos button, .bm-botao, .bm-pegador { transition: none; }
  .bm-ficha.is-trocando { animation: none; }
}

/* toque: sem deslocamento no :hover (o toque deixa o hover "grudado"), como no resto do site */
@media (hover: none) { .bm-botao:hover { transform: none; } }