/* =========================================================
   Página de série (Bambu Lab Série H2) — tema escuro
   Reaproveita tokens.css, base.css, header.css e footer.css.
   ========================================================= */
body.series { background: #121212; color: var(--ink-on-dark); }

.s-root {
  display: flex; flex-direction: column; gap: var(--Section-Gap-7);
  padding-top: var(--Section-Gap-5);
}
.s-root > * { width: 100%; min-width: 0; }
/* contêiner: largura total no mobile (cartões encostam na borda), degraus da referência acima */
.s-wrap { width: 100%; margin: 0 auto; }
@media (min-width: 768px)  { .s-wrap { max-width: 672px; } }
@media (min-width: 1025px) { .s-wrap { max-width: 1014px; } }
@media (min-width: 1440px) { .s-wrap { max-width: 1200px; } }

.s-title {
  margin: 0 0 var(--Section-Gap-1);
  font-size: var(--Headline-3-Size); line-height: var(--Headline-3-Line-Height); font-weight: 700;
  color: #f5f5f5; text-align: center; white-space: pre-line;
}
.s-grid { display: grid; grid-template-columns: 1fr; gap: var(--Gutter-Gap-1); }
@media (min-width: 1025px) {
  .s-grid { grid-template-columns: 1fr 1fr; }
  .s-grid > .is-span2 { grid-column: span 2; }
}

/* ---------- ProductCard (3 modelos) ---------- */
.pcard { position: relative; height: 480px; overflow: hidden; }
@media (min-width: 1025px) { .pcard { height: 456px; } .pcard--small { height: 626px; } }
@media (min-width: 1440px) { .pcard { height: 540px; } .pcard--small { height: 740px; } }
.pcard__bg, .pcard__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard__inner {
  position: absolute; inset: 0; margin: 0 auto;
  display: flex; flex-direction: column; padding: 24px 12px;
}
.pcard__text { text-align: center; }
@media (min-width: 768px) and (max-width: 1024px) { .pcard__text { max-width: 500px; margin: 0 auto; width: 100%; } }
@media (min-width: 1025px) {
  .pcard--small .pcard__inner { padding: 30px 48px; }
  .pcard--big .pcard__inner { flex-direction: row; align-items: center; justify-content: space-between; padding: 0 0 0 86px; }
  .pcard--big .pcard__text { text-align: left; width: 412px; }
}
@media (min-width: 1440px) {
  .pcard--small .pcard__inner { padding: 40px 60px; }
  .pcard--big .pcard__inner { max-width: 1200px; padding-left: 102px; }
}
.pcard__name {
  margin: 0 0 var(--Content-Gap-3);
  font-size: var(--Body-1-Size); line-height: var(--Body-1-Line-Height); font-weight: 700; color: #f5f5f5;
}
.pcard--golden .pcard__name {
  display: inline-block; padding-bottom: 2px;
  background: linear-gradient(104deg, rgb(255, 226, 182) 17.66%, rgb(217, 170, 103) 88.11%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pcard__slogan {
  margin: 0; font-size: var(--Title-1-Size); line-height: var(--Title-1-Line-Height); font-weight: 700;
  color: #f5f5f5; white-space: pre-line;
}
.pcard__links { margin-top: var(--Content-Gap-7); display: inline-grid; grid-template-columns: 140px; gap: 12px; }
@media (min-width: 1025px) { .pcard__links { grid-template-columns: 180px; } }
.pbtn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 6px 16px; border-radius: 4px;
  font-size: var(--Button-1-Size); line-height: var(--Button-1-Line-Height); font-weight: 400; white-space: nowrap;
  transition: opacity .2s, background-color .2s, color .2s;
}
@media (min-width: 1025px) { .pbtn { height: 42px; font-size: 16px; line-height: 22px; } }
.pbtn--light { background: #f5f5f5; color: #333; }
.pbtn--light:hover { opacity: .85; }
.pbtn--ghost { border: 1.5px solid #f5f5f5; color: #f5f5f5; }
.pbtn--ghost:hover { background: #f5f5f5; color: #1a1a1a; }
.pbtn--green { background: var(--cta); color: #f5f5f5; }
.pbtn--green:hover { background: var(--cta-hover); }

/* ---------- WhyCard (4 destaques) ---------- */
.why { position: relative; height: 360px; overflow: hidden; background: #f5f5f5; margin: 0; }
@media (min-width: 1025px) { .why { height: 420px; } }
.why img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.why figcaption {
  position: relative; z-index: 1; padding: var(--Content-Gap-8);
  font-size: var(--Title-2-Size); line-height: var(--Title-2-Line-Height); font-weight: 700; color: #f5f5f5;
}

/* ---------- CompareTable ---------- */
.cmp { padding-bottom: var(--Section-Gap-7); }
/* relative: mantém os .sr-only (absolutos) dentro do recorte do contêiner rolável */
.cmp__scroll { position: relative; overflow-x: auto; scrollbar-width: none; }
.cmp__scroll::-webkit-scrollbar { display: none; }
.cmp__inner { width: fit-content; padding: 0 24px; }
@media (min-width: 500px)  { .cmp__inner { padding: 0 calc(50% - 226px); } }
@media (min-width: 768px)  { .cmp__inner { padding: 0 calc(50% - 336px); } }
@media (min-width: 1025px) { .cmp__inner { padding: 0 calc(50% - 512px); } }
@media (min-width: 1440px) { .cmp__inner { padding: 0 calc(50% - 600px); } }
.cmp table { border-collapse: collapse; }
.cmp thead tr, .cmp thead td { border-bottom: 1px solid #676767; }
.cmp td {
  padding: calc(var(--Section-Gap-1) / 2) calc(var(--Gutter-Gap-1) / 2);
  vertical-align: bottom;
}
.cmp td:first-child { padding-left: 0; }
.cmp td:last-child { padding-right: 0; }
.cmp thead td { padding-top: 0; padding-bottom: var(--Section-Gap-1); }
/* a linha da oferta varia de tamanho entre modelos: alinha pelo topo para nomes e botões ficarem na mesma altura */
.cmp thead td { vertical-align: top; }
.cmp tbody tr:first-child td { padding-top: var(--Section-Gap-1); }
.cmp__cell {
  width: 241px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--Content-Gap-3);
}
.cmp__cell--printer { gap: var(--Content-Gap-7); }
@media (min-width: 768px)  { .cmp__cell { width: 213px; } }
@media (min-width: 1025px) { .cmp__cell { width: 326px; } }
@media (min-width: 1440px) { .cmp__cell { width: 384px; } }
.cmp__img { width: 100%; aspect-ratio: 1; }
.cmp__img img { width: 100%; height: 100%; object-fit: cover; }
.cmp__name { font-size: var(--Title-2-Size); line-height: var(--Title-2-Line-Height); font-weight: 700; color: #f5f5f5; }
.cmp__price { margin-top: var(--Content-Gap-3); font-size: var(--Body-1-Size); line-height: var(--Body-1-Line-Height); font-weight: 700; color: #f5f5f5; }
.cmp__offer { margin-top: 4px; font-size: 12px; line-height: 17px; font-weight: 500; color: #ababab; }
/* reserva a mesma altura nas 3 colunas para os botões ficarem alinhados */
.cmp thead .cmp__offer { min-height: 51px; }
@media (min-width: 1025px) { .cmp thead .cmp__offer { min-height: 34px; } }
.cmp__links { display: flex; flex-direction: column; align-items: center; gap: var(--Content-Gap-8); }
@media (min-width: 1025px) { .cmp__links { flex-direction: row; gap: 32px; } }
.cmp__links .pbtn { min-width: 140px; }
@media (min-width: 1025px) { .cmp__links .pbtn { min-width: 180px; } }
.more-link { display: inline-flex; align-items: center; justify-content: center; color: var(--cta); font-size: 16px; line-height: 24px; }
.more-link svg { width: 16px; height: 16px; }
.more-link:hover { text-decoration: underline; }
.cmp__label { font-size: var(--Body-2-Size); line-height: var(--Body-2-Line-Height); font-weight: 500; color: #ababab; }
.cmp__value { display: flex; flex-direction: column; align-items: center; width: 100%; color: #f5f5f5; }
.cmp__value .t3 { font-size: var(--Title-3-Size); line-height: var(--Title-3-Line-Height); font-weight: 700; width: 100%; white-space: pre-wrap; }
.cmp__value .b2 { font-size: var(--Body-2-Size); line-height: var(--Body-2-Line-Height); font-weight: 700; width: 100%; white-space: pre-wrap; }
.cmp__value svg { width: 32px; height: 32px; margin-bottom: 6px; }
.cmp__compat { display: flex; flex-direction: column; align-items: center; gap: var(--Content-Gap-4); }
.cmp__compat > div { display: flex; flex-direction: column; align-items: center; gap: var(--Content-Gap-1); }
.cmp__check { display: flex; flex-direction: column; align-items: center; gap: var(--Content-Gap-2); }
.cmp__check .b2 { font-weight: 700; }

/* cabeçalho fixo da tabela (aparece ao rolar pela tabela) */
.cmp__fixed {
  position: sticky; top: var(--navBarHeight); z-index: 10;
  height: 0; overflow: hidden;
  transition: transform .3s ease;
}
body.nav-hidden .cmp__fixed { transform: translateY(calc(var(--navBarHeight) * -1)); }
.cmp__fixed.is-on { height: auto; }
.cmp__fixed .cmp__scroll { background: #121212; box-shadow: rgba(255,255,255,.25) 0 1px 4px 0; }
.cmp__fixed thead tr, .cmp__fixed thead td { border-bottom: none; }
.cmp__fixed td { padding-top: var(--Content-Gap-7) !important; padding-bottom: var(--Content-Gap-7) !important; }
.cmp__all { display: flex; justify-content: center; margin-top: calc(var(--Section-Gap-1) / 2); }

@media (prefers-reduced-motion: reduce) { .cmp__fixed { transition: none; } }